@eeacms/volto-clms-theme 1.1.88 → 1.1.89

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.89](https://github.com/eea/volto-clms-theme/compare/1.1.88...1.1.89) - 1 December 2023
+
+#### :hammer_and_wrench: Others
+
+- Revert "cart modal created" [Mikel Larreategi - [`30c4ede`](https://github.com/eea/volto-clms-theme/commit/30c4edef70c5af090591afdb4b9c75465b07179c)]
+- Revert "style fixes in cart modal" [Mikel Larreategi - [`96f91e5`](https://github.com/eea/volto-clms-theme/commit/96f91e572010aee49611bc0aec3157c20862eddd)]
+- Revert "fix: CLMS-2458 last style fixes" [Mikel Larreategi - [`2f77987`](https://github.com/eea/volto-clms-theme/commit/2f779878ed90a4de604f8651868533ba952b5c80)]
+- Revert "trigger color" [Mikel Larreategi - [`609fbe8`](https://github.com/eea/volto-clms-theme/commit/609fbe810c137be11e0d56b16c868cc36bd91e61)]
+- Revert "zoom in cart modal" [Mikel Larreategi - [`99cc45b`](https://github.com/eea/volto-clms-theme/commit/99cc45b91c52d0dae180d616c4a4b8d5a10b733a)]
+- Revert "do not show Categorization text if no item inside" [Mikel Larreategi - [`d9c51dc`](https://github.com/eea/volto-clms-theme/commit/d9c51dc43aaf791eeee7c6d7da1837eaa95c22d4)]
+- Revert "fix: CLMS-2833" [Mikel Larreategi - [`ed36231`](https://github.com/eea/volto-clms-theme/commit/ed36231bad2a268a7655767bc887bb7e52187418)]
+- Revert "fix: remove cart length comparation to copmose the correct cart data" [Mikel Larreategi - [`f089ddf`](https://github.com/eea/volto-clms-theme/commit/f089ddf10bc01cafc4d87a963eb1567513844079)]
 ### [1.1.88](https://github.com/eea/volto-clms-theme/compare/1.1.87...1.1.88) - 1 December 2023
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.88",
+  "version": "1.1.89",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -61,7 +61,6 @@
     "react-native-mime-types": "2.3.0",
     "react-slick": "0.28.1",
     "react-svg": "14.0.4",
-    "react-zoom-pan-pinch": "3.3.0",
     "slick-carousel": "1.8.1",
     "validator": "13.7.0",
     "volto-cookie-banner": "2.1.0",

package/src/components/CLMSDatasetDetailView/DownloadDataSetContent.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import CclDownloadTable from '@eeacms/volto-clms-theme/components/CclDownloadTable/CclDownloadTable';
@@ -8,8 +9,9 @@ import CclLoginModal from '@eeacms/volto-clms-theme/components/CclLoginModal/Ccl
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const DownloadDataSetContent = (data, token) => {
+  const location = useLocation();
+
   const user = useSelector((state) => state?.users?.user);
-  const locale = useSelector((state) => state?.intl?.locale);
 
   return (
     <div>
@@ -34,15 +36,11 @@ const DownloadDataSetContent = (data, token) => {
           )}
           {user?.['@id'] ? (
             data.mapviewer_istimeseries === true ? (
-              <CclButton
-                url={'/' + locale + '/map-viewer?dataset=' + data?.UID}
-              >
+              <CclButton url={location.pathname + '/download-by-area'}>
                 Go to download by area and time
               </CclButton>
             ) : (
-              <CclButton
-                url={'/' + locale + '/map-viewer?dataset=' + data?.UID}
-              >
+              <CclButton url={location.pathname + '/download-by-area'}>
                 Go to download by area
               </CclButton>
             )

package/src/components/CLMSDownloadCartView/AreaNaming.jsx

@@ -1,63 +1,12 @@
-import React from 'react';
-import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import { Label } from 'semantic-ui-react';
-
-import LatLonImg from '@eeacms/volto-clms-theme/../theme/clms/img/lat_lon.png';
-import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
-
 export const AreaNaming = (areaProps) => {
   const { item } = areaProps;
   switch (item?.area?.type) {
     case 'polygon':
       return (
         <>
-          <CclModal
-            draggable={true}
-            trigger={<span className="cart-modal-trigger">Bounding Box</span>}
-            size={'medium'}
-          >
-            <div className="image-modal">
-              <TransformWrapper>
-                {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
-                  <React.Fragment>
-                    <div className="tools">
-                      <button
-                        className="ccl-button ccl-button--default"
-                        onClick={() => zoomIn()}
-                      >
-                        Zoom in
-                      </button>
-                      <button
-                        className="ccl-button ccl-button--default"
-                        onClick={() => zoomOut()}
-                      >
-                        Zoom out
-                      </button>
-                      <button
-                        className="ccl-button ccl-button--default"
-                        onClick={() => resetTransform()}
-                      >
-                        Reset zoom
-                      </button>
-                    </div>
-                    <TransformComponent>
-                      <img src={LatLonImg} alt={'Lat Lon World'} />
-                    </TransformComponent>
-                  </React.Fragment>
-                )}
-              </TransformWrapper>
-              <span className="modal-cart-bounding-boxes">
-                <span className="cart-bounding-box-row">
-                  <Label>{`N: ${item?.area.value[1].toFixed(1)}º`}</Label>&nbsp;
-                  <Label>{`E: ${item?.area.value[2].toFixed(1)}º`}</Label>&nbsp;
-                  {/* </span>
-            <span className="cart-bounding-box-row"> */}
-                  <Label>{`S: ${item?.area.value[3].toFixed(1)}º`}</Label>&nbsp;
-                  <Label>{`W: ${item?.area.value[0].toFixed(1)}º`}</Label>
-                </span>
-              </span>
-            </div>
-          </CclModal>
+          <span>Bounding Box</span>
+          <br />
           <span className="cart-bounding-boxes">
             <span className="cart-bounding-box-row">
               <Label>{`N: ${item?.area.value[1].toFixed(1)}º`}</Label>&nbsp;

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -102,6 +102,7 @@ const CLMSCartContent = (props) => {
     if (
       datasets_items?.length > 0 &&
       cart.length > 0 &&
+      cart.length !== newCart.length &&
       ((localsessionNutsIDList.length > 0 && nutsnames.loaded) ||
         !nutsnames.loading)
     ) {
@@ -322,8 +323,8 @@ const CLMSCartContent = (props) => {
                           <strong>Source: </strong>
                           {contentOrDash(item?.source)}
                         </div>
-                        <div className="mb-2 cart-area">
-                          <strong className="cart-area-text">Area: </strong>
+                        <div className="mb-2">
+                          <strong>Area: </strong>
                           <AreaNaming item={item} />
                         </div>
 

package/src/components/CLMSDownloadCartView/cart-table.less

@@ -9,8 +9,7 @@ td li {
 }
 
 .cart-bounding-boxes {
-  margin-top: 1.5rem;
-  margin-left: -8.7rem;
+  margin-top: 0.8rem;
 }
 
 .cart-bounding-boxes .ui.label {
@@ -19,17 +18,6 @@ td li {
   color: #273b4b;
 }
 
-.modal-cart-bounding-boxes .ui.label {
-  padding: 0;
-  background-color: transparent;
-  color: #273b4b;
-}
-
-.modal-cart-bounding-boxes {
-  display: flex;
-  justify-content: center;
-}
-
 .ui.selection.dropdown {
   width: 95%;
   min-height: 1.3rem !important;
@@ -83,26 +71,3 @@ div.mb-2 {
 .ui.table td.table-td-timeseries {
   text-align: center;
 }
-
-.cart-modal-trigger {
-  border-color: #a0b128;
-  color: #a0b128;
-  cursor: pointer;
-}
-
-.cart-area {
-  display: flex;
-}
-
-.modal-trigger {
-  margin: 0 !important;
-}
-
-.cart-area-text {
-  margin-right: 0.2rem;
-}
-
-.tools {
-  margin-bottom: 1.5rem;
-  margin-inline: 6rem;
-}

package/src/components/CLMSMapViewerView/CLMSMapViewerView.jsx

@@ -3,12 +3,11 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Forbidden, Unauthorized } from '@plone/volto/components';
-// import { Helmet, getBaseUrl } from '@plone/volto/helpers';
-// import { MapViewer } from '@eeacms/volto-arcgis-block/components';
-// import config from '@eeacms/volto-arcgis-block/components/MapViewer/config';
-// import { helmetTitle } from '@eeacms/volto-clms-theme/components/CclUtils';
+import { Helmet, getBaseUrl } from '@plone/volto/helpers';
+import { MapViewer } from '@eeacms/volto-arcgis-block/components';
+import config from '@eeacms/volto-arcgis-block/components/MapViewer/config';
+import { helmetTitle } from '@eeacms/volto-clms-theme/components/CclUtils';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
-import { Redirect } from 'react-router-dom';
 
 import { getExtraBreadcrumbItems } from '../../actions';
 
@@ -21,7 +20,6 @@ const CLMSMapViewerView = (props) => {
   const dispatch = useDispatch();
   const { isLoggedIn } = useCartState();
   const content = useSelector((state) => state.content.data);
-  const locale = useSelector((state) => state?.intl?.locale);
 
   const { formatMessage } = useIntl();
   const messages = defineMessages({
@@ -52,45 +50,45 @@ const CLMSMapViewerView = (props) => {
     props.location.pathname,
   ]);
 
-  // const config_by_area = {
-  //   ...config,
-  //   DownloadByArea: true,
-  //   Components: [
-  //     // Area Information
-  //     {
-  //       ComponentTitle: 'Custom detail element',
-  //       Products: [
-  //         {
-  //           ProductTitle: 'Test detail',
-  //           Datasets: [
-  //             {
-  //               DatasetId: 'copernicus_v_3035_10_m_cz-2012_p_2010-2014_v01_r00',
-  //               DatasetTitle: 'Coastal Zones 2012',
-  //               DatasetDescription:
-  //                 'The Coastal Zones (CZ) LC/LU product for 2012 is providing a detailed Land Cover / Land Use (LC/ LU) dataset for areas along the coastline of the EEA38 countries and the United Kingdom, with reference year 2012 for the classification. This product monitors landscape dynamics in European coastal territory to an inland depth of 10 km with a total area of approximately 730,000 km², with all the relevant areas (estuaries, coastal lowlands, nature reserves). The production of the coastal zone layers was coordinated by the European Environment Agency (EEA) in the frame of the EU Copernicus programme, as part of the Copernicus Land Monitoring Service (CLMS) Local Component.The Coastal Zones product covers a buffer zone of coastline derived from EU-Hydro v1.1. Land Cover/Land Use (LC/LU) layer is extracted from Very High Resolution (VHR) satellite data and other available data. The class definitions follow the pre-defined nomenclature on the basis of Mapping and Assessment of Ecosystems and their Services (MAES) typology of ecosystems (Level 1 to Level 4) and CORINE Land Cover adapted to the specific characteristics of coastal zones. The classification provides 71 distinct thematic classes with a Minimum Mapping Unit (MMU) of 0.5 ha and a Minimum Mapping Width (MMW) of 10 m. The product is available for the 2012 and 2018 reference year including change mapping.This CZ dataset is distributed in vector format, in a single OGC GeoPackage SQLite file covering the area of interest.',
-  //               ViewService:
-  //                 'https://image.discomap.eea.europa.eu/arcgis/services/CoastalZones/CZ_CoastalZones_2012/MapServer/WmsServer?',
-  //               Layer: [
-  //                 {
-  //                   LayerId: 'Coastal_Zones_2012_vector53031',
-  //                   Title: 'Coastal Zones 2012 vector',
-  //                 },
-  //                 {
-  //                   LayerId: 'Coastal_Zones_2012_raster55645',
-  //                   Title: 'Coastal Zones 2012 raster',
-  //                 },
-  //               ],
-  //               DownloadService: 'EEA',
-  //               DownloadType: 'ESRI REST service',
-  //               IsTimeSeries: false,
-  //               TimeSeriesService: '',
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //     },
-  //   ],
-  // };
+  const config_by_area = {
+    ...config,
+    DownloadByArea: true,
+    Components: [
+      // Area Information
+      {
+        ComponentTitle: 'Custom detail element',
+        Products: [
+          {
+            ProductTitle: 'Test detail',
+            Datasets: [
+              {
+                DatasetId: 'copernicus_v_3035_10_m_cz-2012_p_2010-2014_v01_r00',
+                DatasetTitle: 'Coastal Zones 2012',
+                DatasetDescription:
+                  'The Coastal Zones (CZ) LC/LU product for 2012 is providing a detailed Land Cover / Land Use (LC/ LU) dataset for areas along the coastline of the EEA38 countries and the United Kingdom, with reference year 2012 for the classification. This product monitors landscape dynamics in European coastal territory to an inland depth of 10 km with a total area of approximately 730,000 km², with all the relevant areas (estuaries, coastal lowlands, nature reserves). The production of the coastal zone layers was coordinated by the European Environment Agency (EEA) in the frame of the EU Copernicus programme, as part of the Copernicus Land Monitoring Service (CLMS) Local Component.The Coastal Zones product covers a buffer zone of coastline derived from EU-Hydro v1.1. Land Cover/Land Use (LC/LU) layer is extracted from Very High Resolution (VHR) satellite data and other available data. The class definitions follow the pre-defined nomenclature on the basis of Mapping and Assessment of Ecosystems and their Services (MAES) typology of ecosystems (Level 1 to Level 4) and CORINE Land Cover adapted to the specific characteristics of coastal zones. The classification provides 71 distinct thematic classes with a Minimum Mapping Unit (MMU) of 0.5 ha and a Minimum Mapping Width (MMW) of 10 m. The product is available for the 2012 and 2018 reference year including change mapping.This CZ dataset is distributed in vector format, in a single OGC GeoPackage SQLite file covering the area of interest.',
+                ViewService:
+                  'https://image.discomap.eea.europa.eu/arcgis/services/CoastalZones/CZ_CoastalZones_2012/MapServer/WmsServer?',
+                Layer: [
+                  {
+                    LayerId: 'Coastal_Zones_2012_vector53031',
+                    Title: 'Coastal Zones 2012 vector',
+                  },
+                  {
+                    LayerId: 'Coastal_Zones_2012_raster55645',
+                    Title: 'Coastal Zones 2012 raster',
+                  },
+                ],
+                DownloadService: 'EEA',
+                DownloadType: 'ESRI REST service',
+                IsTimeSeries: false,
+                TimeSeriesService: '',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
 
   return (
     <div>
@@ -110,18 +108,17 @@ const CLMSMapViewerView = (props) => {
         </>
       )}
       {isLoggedIn && (
-        <Redirect to={'/' + locale + '/map-viewer?dataset=' + content?.UID} />
-        // <>
-        //   <Helmet
-        //     title={helmetTitle(formatMessage(messages.DownloadByArea), content)}
-        //   />
-        //   <MapViewer
-        //     cfg={config_by_area}
-        //     url={getBaseUrl(props.location.pathname)}
-        //     customClass={'land'}
-        //     id={props.location.pathname}
-        //   ></MapViewer>
-        // </>
+        <>
+          <Helmet
+            title={helmetTitle(formatMessage(messages.DownloadByArea), content)}
+          />
+          <MapViewer
+            cfg={config_by_area}
+            url={getBaseUrl(props.location.pathname)}
+            customClass={'land'}
+            id={props.location.pathname}
+          ></MapViewer>
+        </>
       )}
     </div>
   );

package/src/components/CLMSTechnicalLibraryAdminInfo/CLMSTechnicalLibraryAdminInfo.jsx

@@ -28,9 +28,7 @@ const CLMSTechnicalLibraryAdminInfo = (props) => {
             Hide
           </Button>
           <br />
-          {item?.taxonomy_technical_library_categorization && (
-            <strong>Categorization</strong>
-          )}{' '}
+          <strong>Categorization</strong>
           <ul>
             {item?.taxonomy_technical_library_categorization?.map((item) => (
               <li>{item.title}</li>

package/src/components/CclModal/CclModal.jsx

@@ -50,7 +50,6 @@ function CclModal(props) {
         </Draggable>
       )}
       <Segment
-        className="modal-trigger"
         basic
         compact
         onClick={() => {