@eeacms/volto-clms-theme 1.1.15 → 1.1.16

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.16](https://github.com/eea/volto-clms-theme/compare/1.1.15...1.1.16) - 29 June 2023
+
+#### :rocket: New Features
+
+- feat: track site searches in custom places [Mikel Larreategi - [`7691879`](https://github.com/eea/volto-clms-theme/commit/7691879372b3995b3b9bef372b5979e482e8b34f)]
+- feat: reverse the cart before storing in the localStorage in event of duplication/deletion of items [Mikel Larreategi - [`6634db3`](https://github.com/eea/volto-clms-theme/commit/6634db3966bab45d87b2c215e15c882263cca55d)]
+
+#### :hammer_and_wrench: Others
+
+- matomo track site search [Unai - [`08166d2`](https://github.com/eea/volto-clms-theme/commit/08166d23e030a549d17453737287c8e0fef69993)]
+- disable cart TimeSeries apply button ifthere is no endValue or endValue is earlier than startValue [ionlizarazu - [`a44f1b9`](https://github.com/eea/volto-clms-theme/commit/a44f1b94e0ef9de24e4d9953ec5a331889470240)]
+- cart pagination and reverse ordering [ionlizarazu - [`38bf27e`](https://github.com/eea/volto-clms-theme/commit/38bf27ea42fe5805d630d6d944cb784f6e55563f)]
+- related listing pagination [ionlizarazu - [`5213d92`](https://github.com/eea/volto-clms-theme/commit/5213d92759f250293bc2bf81903b848875ccfa6b)]
+- cart: collection and layer/band only shown when it has value [Unai - [`fa1f823`](https://github.com/eea/volto-clms-theme/commit/fa1f8235d144f4e909bd08da1286391d5573ecd0)]
 ### [1.1.15](https://github.com/eea/volto-clms-theme/compare/1.1.14...1.1.15) - 23 June 2023
 
 #### :hammer_and_wrench: Others
@@ -72,7 +86,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`b4cbf65`](https://github.com/eea/volto-clms-theme/commit/b4cbf6557fbc67f7fc4cea5aa2cb19804f3d7e3c)]
 
 #### :hammer_and_wrench: Others
 
@@ -1271,7 +1284,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - related products and datasets added to news and meeting views and login-plone route created [Unai - [`5704a1a`](https://github.com/eea/volto-clms-theme/commit/5704a1a766148746162b60efaf232ea90dc20cf4)]
-- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`46eb694`](https://github.com/eea/volto-clms-theme/commit/46eb69415280a3c982405299135027ae4221426a)]
 - sort items according to the lowercased label and put those with special meaning at the end [Mikel Larreategi - [`6410abe`](https://github.com/eea/volto-clms-theme/commit/6410abe096f60dcad54dced2026c9df9b7946d68)]
 - lint fix [Unai - [`1264a7a`](https://github.com/eea/volto-clms-theme/commit/1264a7adfe8d679fea1bd821ad087add20f4271d)]
 - footer newsletter subscription change, global search maxLength change from 8000 to 200 and /login design change [Unai - [`a09d24a`](https://github.com/eea/volto-clms-theme/commit/a09d24adbb6fa053fb2a2cc0071506b906593b42)]
@@ -1422,7 +1434,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - search block new features [ionlizarazu - [`8e814cb`](https://github.com/eea/volto-clms-theme/commit/8e814cbd359782540c21fe37b37ef146d331f0d6)]
 - language selector cookie management [ionlizarazu - [`1385ac9`](https://github.com/eea/volto-clms-theme/commit/1385ac95795702206d3623ba6e780faa43a89e0a)]
 - toolbar cookie management [ionlizarazu - [`5c23200`](https://github.com/eea/volto-clms-theme/commit/5c23200790b20e1d4f1bc966463c37bf4c808f47)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`0316a0d`](https://github.com/eea/volto-clms-theme/commit/0316a0d8b6fb0fa14af13002415f3c95d9f8ede3)]
 ### [1.0.84](https://github.com/eea/volto-clms-theme/compare/1.0.83...1.0.84) - 18 March 2022
 
 #### :hammer_and_wrench: Others
@@ -2327,13 +2338,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - replace @collective/volto-dropdownmenu with volto-dropdownmenu [ionlizarazu - [`07f004f`](https://github.com/eea/volto-clms-theme/commit/07f004fe0219e403fb51bc045c83d34f3b981f76)]
-- yarn.lock [ionlizarazu - [`fe1ca04`](https://github.com/eea/volto-clms-theme/commit/fe1ca04889d29fe7b653db4c69af2751b84b8a1a)]
 - add NODE_ENV parameter [ionlizarazu - [`101f27c`](https://github.com/eea/volto-clms-theme/commit/101f27c25b8fbd192e1b11865e95cf5ffee08c1b)]
 - upgrade volto-dropdownmenu version [ionlizarazu - [`2081855`](https://github.com/eea/volto-clms-theme/commit/2081855301f4c708776e0dbab39db143cee00dbc)]
 - HomeSearch block missing url behaviour [ionlizarazu - [`d20a378`](https://github.com/eea/volto-clms-theme/commit/d20a378ce3f254b8343692348f314bf281974542)]
 - babel configuration [ionlizarazu - [`203ea2d`](https://github.com/eea/volto-clms-theme/commit/203ea2de07f99ca3403e4ca220ca74d7ce69b61d)]
 - prettier [ionlizarazu - [`e79e26b`](https://github.com/eea/volto-clms-theme/commit/e79e26bf2fa40ba7b4eb53a24dabd87928221c28)]
-- add yarn lock [ionlizarazu - [`e1ab28b`](https://github.com/eea/volto-clms-theme/commit/e1ab28b060d5a74431c368b0de82a68dabce1eab)]
 - Jenkinsfile cypress test [ionlizarazu - [`b385d65`](https://github.com/eea/volto-clms-theme/commit/b385d65986f717c60f8c434a08fc11b829d08eb4)]
 - cypress [ionlizarazu - [`a243cf0`](https://github.com/eea/volto-clms-theme/commit/a243cf0182fa3dd113c16ff495c71e310252d83b)]
 - some fixes [ionlizarazu - [`046279b`](https://github.com/eea/volto-clms-theme/commit/046279b9d05bea8a64eca03eed493e02621534c9)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/AppExtra/AppExtra.jsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { pushInstruction, trackSiteSearch } from '@eeacms/volto-matomo/utils';
+import config from '@plone/volto/registry';
+
+export const CustomMatomoAppExtra = () => {
+  const { id } = useSelector((state) => state.users.user);
+  const { search, query, pathname } = useSelector(
+    (state) => state.router.location,
+  );
+
+  const extractSearchableText = (query) => {
+    // Handle catalog-querystring-like queries, which are
+    // send in a JSON object
+    if (query?.query) {
+      let parsed = JSON.parse(unescape(query.query));
+      let items = parsed.filter((item) => item.i === 'SearchableText');
+      if (items.length === 1) {
+        return items[0].v;
+      }
+    }
+
+    // check if there is an explicit SearchableText parameter
+    // in the querystring
+    if (query?.SearchableText) {
+      return query.SearchableText;
+    }
+
+    return '';
+  };
+
+  React.useEffect(() => {
+    if (id) {
+      pushInstruction('setUserId', id);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    const searchableText = extractSearchableText(query);
+    if (
+      config.settings.track_search_paths.includes(pathname) &&
+      searchableText
+    ) {
+      trackSiteSearch({ keyword: searchableText });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search]);
+
+  return <React.Fragment />;
+};
+
+export default CustomMatomoAppExtra;

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingView.jsx

@@ -17,8 +17,14 @@ const CclRelatedListingView = (props) => {
     properties,
     metadata,
     associated_elements = 'products',
+    searchParamsExecution = () => {},
   } = props;
-  const use_pagination = useFilteredPagination([]);
+  const use_pagination = useFilteredPagination(
+    [],
+    10,
+    id,
+    searchParamsExecution,
+  );
   const p_functions = use_pagination.functions;
   const p_data = use_pagination.data;
   const { pagination, currentPage, paginationSize, dataList } = p_data;

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -223,6 +223,7 @@ const DataSetInfoContent = (props) => {
                         <br />
                         <h3>Access full metadata here</h3>
                         <MetadataPaginatedListing
+                          id={'metadata-access'}
                           geonetwork_identifiers_items={
                             geonetwork_identifiers.items
                           }
@@ -267,6 +268,13 @@ const DataSetInfoContent = (props) => {
                           content_type: 'TechnicalLibrary',
                         }}
                         associated_elements="dataset"
+                        searchParamsExecution={() => {
+                          const newIndex =
+                            activeIndex.indexOf(1) === -1
+                              ? [...activeIndex, 1]
+                              : activeIndex.filter((item) => item !== 1);
+                          setActiveIndex(newIndex);
+                        }}
                       />
                     </AnimateHeight>
                   </Accordion.Content>

package/src/components/CLMSDatasetDetailView/MetadataPaginatedListing.jsx

@@ -7,8 +7,12 @@ import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 
 import { useFilteredPagination } from '../CclUtils/useFilteredPagination';
 export const MetadataPaginatedListing = (props) => {
-  const { geonetwork_identifiers_items } = props;
-  const use_pagination = useFilteredPagination(geonetwork_identifiers_items);
+  const { geonetwork_identifiers_items, id } = props;
+  const use_pagination = useFilteredPagination(
+    geonetwork_identifiers_items,
+    10,
+    id,
+  );
   const p_functions = use_pagination.functions;
   const p_data = use_pagination.data;
   const { pagination, currentPage, paginationSize, dataList } = p_data;

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -1,18 +1,28 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
-import { Checkbox, Modal, Segment, Select, Table } from 'semantic-ui-react';
+import {
+  Checkbox,
+  Modal,
+  Segment,
+  Select,
+  Table,
+  Pagination,
+} from 'semantic-ui-react';
 
 import { Icon } from '@plone/volto/components';
 import { Toast } from '@plone/volto/components';
 import addDocumentSVG from '@plone/volto/icons/add-document.svg';
 import removeSVG from '@plone/volto/icons/delete.svg';
+import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
+import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 import { cleanDuplicatesEntries } from '@eeacms/volto-clms-utils/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { getDownloadtool, postDownloadtool } from '../../actions';
+import { useFilteredPagination } from '../CclUtils/useFilteredPagination';
 import './cart-table.less';
 import {
   getDownloadToolPostBody,
@@ -21,6 +31,7 @@ import {
   isChecked,
   contentOrDash,
 } from './cartUtils';
+
 import {
   TypeNaming,
   AreaNaming,
@@ -47,12 +58,6 @@ const CLMSCartContent = (props) => {
   );
   const downloadtool_state = useSelector((state) => state.downloadtool);
   const datasetTimeseries = useSelector((state) => state.datasetTimeseries);
-
-  // component states
-  const [openedModal, setOpenedModal] = useState(false);
-  const [cartSelection, setCartSelection] = useState([]);
-  const [loadingTable, setLoadingTable] = useState(false);
-  const [cartItems, setCartItems] = useState([]);
   const datasets_items = useSelector(
     (state) => state.datasetsByUid.datasets.items,
   );
@@ -63,11 +68,28 @@ const CLMSCartContent = (props) => {
     (state) => state.downloadtool.projections_in_progress,
   );
   const nutsnames = useSelector((state) => state.nutsnames);
+
+  // component states
+  const [openedModal, setOpenedModal] = useState(false);
+  const [cartSelection, setCartSelection] = useState([]);
+  const [loadingTable, setLoadingTable] = useState(false);
+  const [cartItems, setCartItems] = useState([]);
+
   useEffect(() => {
     setCartItemInProgress(post_download_in_progress.unique_ids || '');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [post_download_in_progress]);
 
+  const use_p = useFilteredPagination(cartItems);
+  const p_f = use_p.functions;
+  const p_data = use_p.data;
+  const { pagination, currentPage, paginationSize, dataList } = p_data;
+
+  useEffect(() => {
+    if (cartItems.length > 0) {
+      p_f.setOriginalDataList(cartItems);
+    }
+  }, [cartItems]);
   useEffect(() => {
     const array_ids =
       cart.length > 0 ? cart?.map((item) => item.unique_id) : [];
@@ -200,10 +222,16 @@ const CLMSCartContent = (props) => {
     setCartItems([...cartItems]);
   };
 
+  const hascollection = (collection) => collection.value > 0;
+  const ref = React.useRef();
+
+  const handleScroll = (ref) => {
+    ref.scrollIntoView({ behavior: 'smooth' });
+  };
   return (
     <>
-      {cartItems?.length !== 0 ? (
-        <div className="custom-table cart-table">
+      {pagination?.length !== 0 ? (
+        <div ref={ref} className="custom-table cart-table">
           <Segment basic loading={loadingTable}>
             <h2>My cart</h2>
             <Table responsive>
@@ -229,8 +257,8 @@ const CLMSCartContent = (props) => {
                 </Table.Row>
               </Table.Header>
               <tbody>
-                {cartItems.length > 0 &&
-                  cartItems.map((item, key) => (
+                {pagination.length > 0 &&
+                  pagination.map((item, key) => (
                     <tr
                       key={key}
                       style={
@@ -285,15 +313,19 @@ const CLMSCartContent = (props) => {
                         <div className="mb-2">
                           <strong>Type: </strong>
                         </div>
-                        <div className="mb-2">
-                          <strong>Collection: </strong>
-                        </div>
+                        {item?.type_options?.some(hascollection) && (
+                          <div className="mb-2">
+                            <strong>Collection: </strong>
+                          </div>
+                        )}
                         <div className="mb-2">
                           <strong>Format: </strong>
                         </div>
-                        <div className="mb-2">
-                          <strong>Layer/Band: </strong>
-                        </div>
+                        {item?.layer !== null && (
+                          <div className="mb-2">
+                            <strong>Layer/Band: </strong>
+                          </div>
+                        )}
                       </td>
                       <td>
                         <div className="mb-2">
@@ -304,14 +336,16 @@ const CLMSCartContent = (props) => {
                             setCartItems={setCartItems}
                           />
                         </div>
-                        <div className="mb-2">
-                          <CollectionNaming
-                            item={item}
-                            datasets_items={datasets_items}
-                            cartItems={cartItems}
-                            setCartItems={setCartItems}
-                          />
-                        </div>
+                        {item?.type_options?.some(hascollection) && (
+                          <div className="mb-2">
+                            <CollectionNaming
+                              item={item}
+                              datasets_items={datasets_items}
+                              cartItems={cartItems}
+                              setCartItems={setCartItems}
+                            />
+                          </div>
+                        )}
                         <div className="mb-2">
                           {formatConversionTable && item && (
                             <FormatNaming
@@ -322,13 +356,15 @@ const CLMSCartContent = (props) => {
                             />
                           )}
                         </div>
-                        <div className="mb-2">
-                          <LayerNaming
-                            item={item}
-                            cartItems={cartItems}
-                            setCartItems={setCartItems}
-                          />
-                        </div>
+                        {item?.layer !== null && (
+                          <div className="mb-2">
+                            <LayerNaming
+                              item={item}
+                              cartItems={cartItems}
+                              setCartItems={setCartItems}
+                            />
+                          </div>
+                        )}
                       </td>
                       <td className="table-td-projections">
                         {!item.file_id ? (
@@ -446,11 +482,41 @@ const CLMSCartContent = (props) => {
               </tbody>
             </Table>
           </Segment>
+          {dataList.length / paginationSize > 1 && (
+            <div className="pagination-wrapper">
+              <Pagination
+                activePage={currentPage}
+                totalPages={Math.ceil(dataList.length / paginationSize)}
+                onPageChange={(e, { activePage }) => {
+                  if (ref.current) handleScroll(ref.current);
+                  p_f.setCurrentPage(activePage);
+                }}
+                firstItem={null}
+                lastItem={null}
+                prevItem={{
+                  content: <Icon name={paginationLeftSVG} size="18px" />,
+                  icon: true,
+                  'aria-disabled': currentPage === 1,
+                  className: currentPage === 1 ? 'disabled' : null,
+                }}
+                nextItem={{
+                  content: <Icon name={paginationRightSVG} size="18px" />,
+                  icon: true,
+                  'aria-disabled':
+                    currentPage === Math.ceil(dataList.length / paginationSize),
+                  className:
+                    currentPage === Math.ceil(dataList.length / paginationSize)
+                      ? 'disabled'
+                      : null,
+                }}
+              ></Pagination>
+            </div>
+          )}
         </div>
       ) : (
         <h2 style={{ textAlign: 'center' }}>Empty cart</h2>
       )}
-      {cartItems?.length !== 0 && (
+      {pagination?.length !== 0 && (
         <CclButton
           onClick={() => downloadModal()}
           disabled={cartSelection.length === 0}

package/src/components/CLMSDownloadCartView/TimeseriesPicker.jsx

@@ -112,6 +112,9 @@ export const TimeseriesPicker = (props) => {
               <CclButton
                 isButton={true}
                 mode={'filled'}
+                disabled={
+                  startValue?.getTime() > endValue?.getTime() || !endValue
+                }
                 onClick={() => {
                   setTimeseriesValue(item.unique_id, {
                     StartDate: startValue,

package/src/components/CLMSDownloadCartView/cartUtils.js

@@ -160,7 +160,7 @@ export const duplicateCartItem = (
 export const refreshCart = (cartItems, setCartItems, updateCart) => {
   setCartItems([...cartItems]);
   updateCart([
-    ...cartItems.map((c_i) => {
+    ...[...cartItems].reverse().map((c_i) => {
       const file_id = c_i.file_id ? { file_id: c_i.file_id } : {};
       const id = c_i.id ? { id: c_i.id } : {};
       return {
@@ -183,7 +183,7 @@ export const concatRequestedCartItem = (
   nutsnames,
 ) => {
   let newCartItems = [...cartItems];
-  localSessionCart.forEach((localItem) => {
+  [...localSessionCart].reverse().forEach((localItem) => {
     const requestedItem = datasets_items
       ? datasets_items.find((req) => req.UID === localItem.UID)
       : false;

package/src/components/CclUtils/useFilteredPagination.js

@@ -1,19 +1,26 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import qs from 'query-string';
 import { dynamicSort } from './dynamicSort';
 export const useFilteredPagination = (
   original_data = [],
   defaultPaginationSize = 10,
+  id = '',
+  searchParamsExecution = () => {},
 ) => {
   const [originalDataList, setOriginalDataList] = useState(original_data);
   const [dataList, setDataList] = useState(original_data);
   const [paginationSize, setPaginationSize] = useState(defaultPaginationSize);
   const [currentPage, setCurrentPage] = useState(1);
+  const currentPage_ref = useRef(currentPage);
   const [pagination, setPagination] = useState(
     original_data.slice(
       (currentPage - 1) * paginationSize,
       (currentPage - 1) * paginationSize + paginationSize,
     ),
   );
+  const history = useHistory();
+  const location = useLocation();
   const [search, setSearch] = useState({});
   const applySearch = (e, { value }, field, setter) => {
     const new_filters = { [field]: value };
@@ -27,6 +34,9 @@ export const useFilteredPagination = (
     setDataList(originalDataList);
     setSearch({});
   };
+  useEffect(() => {
+    setDataList(originalDataList);
+  }, [originalDataList]);
   useEffect(() => {
     let filtered_data_list = [...originalDataList];
     Object.entries(search).forEach((filter) => {
@@ -53,6 +63,27 @@ export const useFilteredPagination = (
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataList, currentPage, paginationSize]);
+  useEffect(() => {
+    if (id) {
+      if (currentPage !== currentPage_ref.current) {
+        history.replace({
+          search: qs.stringify({
+            ...qs.parse(location.search),
+            [`page-${id}`]: currentPage,
+          }),
+        });
+      } else if (
+        qs.parse(location.search)?.[`page-${id}`] &&
+        qs.parse(location.search)?.[`page-${id}`] !== currentPage
+      ) {
+        // add here the execution on the first load with search params such as pagination
+        searchParamsExecution();
+        setCurrentPage(qs.parse(location.search)?.[`page-${id}`]);
+      }
+    }
+    currentPage_ref.current = currentPage;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage]);
 
   return {
     functions: {

package/src/index.js

@@ -52,6 +52,9 @@ import CLMSLoginView from './components/CLMSLoginView/CLMSLogin';
 //SLATE CONFIGURATION
 import installLinkEditor from '@plone/volto-slate/editor/plugins/AdvancedLink';
 
+//APPEXTRA
+import CustomMatomoAppExtra from './components/AppExtra/AppExtra';
+
 const applyConfig = (config) => {
   config.views = {
     ...config.views,
@@ -122,6 +125,10 @@ const applyConfig = (config) => {
         match: '*',
         component: CookieBanner,
       },
+      {
+        match: '',
+        component: CustomMatomoAppExtra,
+      },
     ],
     nonContentRoutes: [
       ...config.settings.nonContentRoutes,
@@ -166,6 +173,7 @@ const applyConfig = (config) => {
     },
     showTags: false,
     ownDomain: 'land.copernicus.eu',
+    track_search_paths: ['/en/global-search', '/en/dataset-catalog'],
   };
 
   config.settings.slate.toolbarButtons = [