@eeacms/volto-clms-theme 1.0.168 → 1.0.170

package/CHANGELOG.md

@@ -4,6 +4,38 @@ 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.0.170](https://github.com/eea/volto-clms-theme/compare/1.0.169...1.0.170) - 14 February 2023
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Mikel Larreategi - [`3f4bc70`](https://github.com/eea/volto-clms-theme/commit/3f4bc70e0c6468071887c671cda9960b6660b730)]
+### [1.0.169](https://github.com/eea/volto-clms-theme/compare/1.0.168...1.0.169) - 14 February 2023
+
+#### :rocket: New Features
+
+- feat: add a select for the cart Type column and add the possibility to duplicate a row [ionlizarazu - [`4e4ee1b`](https://github.com/eea/volto-clms-theme/commit/4e4ee1b418a1837da30b94d511f37d9771da75ec)]
+
+#### :bug: Bug Fixes
+
+- fix: cart icons [ionlizarazu - [`07377c9`](https://github.com/eea/volto-clms-theme/commit/07377c9fa15df658b615c93f5bc23cca4fc94679)]
+- fix: wrong functionalities of cart [ionlizarazu - [`4cb2c78`](https://github.com/eea/volto-clms-theme/commit/4cb2c783fa3f678bdb179d454fced2b0656557eb)]
+
+#### :hammer_and_wrench: Others
+
+- typo [ionlizarazu - [`39dc6f6`](https://github.com/eea/volto-clms-theme/commit/39dc6f68540fbb9f89f8fa18f4e7319c5031925c)]
+- add search input and pagination to related listing blocks with more than 10 elements [ionlizarazu - [`ea2df24`](https://github.com/eea/volto-clms-theme/commit/ea2df24074b54d4341fa0f9f2bf3f5cf041b8304)]
+- download_full_dataset_text from Plone [ionlizarazu - [`33d57a1`](https://github.com/eea/volto-clms-theme/commit/33d57a1f10bee79693d9bedf31c9e342bd08e07d)]
+- dynamicSort and useFilteredPagination [ionlizarazu - [`3d0c3fe`](https://github.com/eea/volto-clms-theme/commit/3d0c3fe54c0be7e16c05e18149705a53a0291bcf)]
+- don't show selector when there is only one collection for this type [ionlizarazu - [`d741b92`](https://github.com/eea/volto-clms-theme/commit/d741b92bac7336058f40c16e9fc5b5d03dcce36f)]
+- add items as downloadableObjects in case we are rendering them with Universal Link [Mikel Larreategi - [`d6d64d5`](https://github.com/eea/volto-clms-theme/commit/d6d64d57dbff70cc145f2d29a3c173ed348c5ba0)]
+- new DoubleRange facet for Spatial resolutions [ionlizarazu - [`dee81d4`](https://github.com/eea/volto-clms-theme/commit/dee81d407282aae8afeabffa69d2d9668bd50d6d)]
+- search block with no facets [ionlizarazu - [`5ea89fc`](https://github.com/eea/volto-clms-theme/commit/5ea89fc6282143c28fdc2056a85509cda31c26b8)]
+- comment deleted [Unai - [`5dcadea`](https://github.com/eea/volto-clms-theme/commit/5dcadeaf8f4343c527c3676bfbe0a074205d6070)]
+- comment deleted [Unai - [`3dbd923`](https://github.com/eea/volto-clms-theme/commit/3dbd923b37e5734c96c13b954c94dfed0127abea)]
+- unused code [Unai - [`e8c9bce`](https://github.com/eea/volto-clms-theme/commit/e8c9bcefb7d23e7fa5c71443b6b8c3bc802a6ded)]
+- lint fix [Unai - [`620390c`](https://github.com/eea/volto-clms-theme/commit/620390cf7a6f7381bc409c4ddd727207f3d4ea77)]
+- prettier fix [Unai - [`39942ee`](https://github.com/eea/volto-clms-theme/commit/39942ee85949c2277840deb8baa2256ccba42931)]
+- slate style overrided and margin-left -15rem added to fix 1426 [Unai - [`1ff3792`](https://github.com/eea/volto-clms-theme/commit/1ff3792eacd42b527979bd1b4bb905b8e78d1eb3)]
 ### [1.0.168](https://github.com/eea/volto-clms-theme/compare/1.0.167...1.0.168) - 7 February 2023
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.168",
+  "version": "1.0.170",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -37,7 +37,7 @@
     "volto-cookie-banner": "2.1.0",
     "@eeacms/volto-accordion-block": "3.5.0",
     "@eeacms/volto-arcgis-block": "*",
-    "@eeacms/volto-clms-utils": "0.1.6",
+    "@eeacms/volto-clms-utils": "0.1.7",
     "@eeacms/volto-columns-block": "4.4.3",
     "@eeacms/volto-metadata-block": "^2.1.0",
     "@eeacms/volto-react-table-widget": "0.1.1",

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

@@ -1,12 +1,22 @@
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Segment, Input, Pagination } from 'semantic-ui-react';
 
-import React from 'react';
-import config from '@plone/volto/registry';
 import { searchContent } from '@plone/volto/actions';
-import { Segment } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
+import paginationRightSVG from '@plone/volto/icons/right-key.svg';
+import config from '@plone/volto/registry';
+
+import { useFilteredPagination } from '../../CclUtils/useFilteredPagination';
 
 const CclRelatedListingView = (props) => {
   const { data, id, properties, metadata } = props;
+  const use_pagination = useFilteredPagination([]);
+  const p_functions = use_pagination.functions;
+  const p_data = use_pagination.data;
+  const { pagination, currentPage, paginationSize, dataList } = p_data;
+
   const dispatch = useDispatch();
   const searchSubrequests = useSelector(
     (state) => state.search.subrequests?.[props.id],
@@ -59,6 +69,11 @@ const CclRelatedListingView = (props) => {
   }
 
   React.useEffect(() => {
+    if (searchSubrequests?.loaded) {
+      p_functions.setOriginalDataList([...searchSubrequests.items]);
+      p_functions.setDataList([...searchSubrequests.items]);
+    }
+
     uid &&
       !searchSubrequests?.loading &&
       !searchSubrequests?.loaded &&
@@ -83,7 +98,55 @@ const CclRelatedListingView = (props) => {
   return (
     <>
       {searchSubrequests?.loaded && libraries.length > 0 ? (
-        <TemplateView items={libraries} variation={template_id} />
+        <div>
+          {paginationSize < libraries.length && (
+            <div className="block search">
+              <div className="search-wrapper">
+                <div className="search-input">
+                  <Input
+                    id={`${props.id}-searchtext`}
+                    placeholder={'Search in the following items'}
+                    fluid
+                    onChange={(event, value) => {
+                      p_functions.applySearch(event, value, 'title');
+                      p_functions.setCurrentPage(1);
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+          <TemplateView items={pagination} variation={template_id} />
+          {dataList.length / paginationSize > 1 && (
+            <div className="pagination-wrapper">
+              <Pagination
+                activePage={currentPage}
+                totalPages={Math.ceil(dataList.length / paginationSize)}
+                onPageChange={(e, { activePage }) => {
+                  p_functions.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>
       ) : (
         <p>There are no related items.</p>
       )}

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeSpatialFacet.jsx

@@ -0,0 +1,163 @@
+import 'react-input-range/lib/css/index.css';
+import './range.css';
+
+import React from 'react';
+
+import InputRange from 'react-input-range';
+import { Segment } from 'semantic-ui-react';
+import {
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
+
+const doubleRangeSpatialFacetSchemaEnhancer = ({ schema, formData }) => {
+  // adds (enables) the 'multiple' field after the 'type' dropdown
+  let { fields } = schema.fieldsets[0];
+  const pos = fields.indexOf('type') + 1;
+  fields = [
+    ...fields.slice(0, pos),
+    'step',
+    'multiple',
+    ...fields.slice(pos, fields.length),
+  ];
+
+  schema.properties = {
+    ...schema.properties,
+    step: { title: 'Step', type: 'number', default: 1 },
+  };
+  schema.fieldsets[0].fields = fields;
+  return schema;
+};
+
+const mToKm = (m) => {
+  return m >= 1000 ? Math.round((m / 1000) * 10) / 10 + 'km' : m + 'm';
+};
+
+const realToCoded = (number, step) => {
+  // the meters are going to be the same
+  if (number <= 1000) return number;
+  // for the km we are going to code any km after the first as tens
+  // so 2 km will be 1020 and 3 km will be 1040
+  const relation = step ? parseInt(step) : 1;
+  const thousands = Math.floor(number / 1000);
+  const hundreds = Math.floor((number - thousands * 1000) / 100);
+  const tens = Math.floor((number - thousands * 1000 - hundreds * 100) / 10);
+  let finalThousands = thousands;
+  if (hundreds > 0 || tens > 0) finalThousands = thousands + 1;
+  return 1000 + parseInt(finalThousands * relation);
+};
+
+const codedToReal = (number, step) => {
+  // the meters are going to be the same
+  if (number <= 1000) return number;
+  // for the km we have to decode any tens after 1000
+  // so 1020 will be 2 km and 1040 will be 3 km
+  const relation = step ? parseInt(step) : 1;
+  const codedThousands = parseInt(number) - 1000;
+  return parseInt(codedThousands * (1000 / relation));
+};
+
+const convertToRange = (values, step) => {
+  return {
+    min: realToCoded(
+      Math.min.apply(
+        Math,
+        values.map(function (o) {
+          return o.value.replace(/[a-zA-Z]/, '');
+        }),
+      ),
+      step,
+    ),
+    max: realToCoded(
+      Math.max.apply(
+        Math,
+        values.map(function (o) {
+          return o.value.replace(/[a-zA-Z]/, '');
+        }),
+      ),
+      step,
+    ),
+  };
+};
+
+const DoubleRangeSpatialFacet = (props) => {
+  const { facet, choices, onChange, value } = props;
+  const facetValue = value;
+  var [open, setOpen] = React.useState(false);
+
+  const startingValues = convertToRange(choices, facet?.step);
+
+  const onChangeRange = (nValue, onChangeR, sValue) => {
+    const fixedValue = {
+      min: nValue.min < sValue.min ? sValue.min : nValue.min,
+      max: nValue.max > sValue.max ? sValue.max : nValue.max,
+    };
+    onChangeR(
+      facet.field.value,
+      [...Array(fixedValue.max - fixedValue.min + 1).keys()].map((i) =>
+        (i + fixedValue.min).toString(),
+      ),
+    );
+  };
+
+  return (
+    <fieldset className="ccl-fieldset">
+      <div
+        className="ccl-expandable__button"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+        onKeyDown={() => setOpen(!open)}
+        tabIndex={0}
+        role={'button'}
+      >
+        <legend className="ccl-form-legend">{facet.title}</legend>
+      </div>
+      <div className="range-container">
+        <Segment basic padded>
+          <InputRange
+            minValue={startingValues.min}
+            maxValue={startingValues.max}
+            step={facet.step ? parseInt(facet.step) : 1}
+            value={
+              facetValue.length > 0
+                ? {
+                    min: convertToRange(facetValue, facet?.step).min,
+                    max: convertToRange(facetValue, facet?.step).max,
+                  }
+                : {
+                    min: startingValues.min,
+                    max: startingValues.max,
+                  }
+            }
+            onChange={(changedValue) =>
+              onChangeRange(
+                {
+                  min: codedToReal(changedValue.min, facet?.step),
+                  max: codedToReal(changedValue.max, facet?.step),
+                },
+                onChange,
+                {
+                  min: codedToReal(startingValues.min, facet?.step),
+                  max: codedToReal(startingValues.max, facet?.step),
+                },
+              )
+            }
+            formatLabel={(value) => {
+              if (facet.field.value === 'spatial_resolution') {
+                return mToKm(codedToReal(value, facet?.step));
+              } else {
+                return value;
+              }
+            }}
+          />
+        </Segment>
+        <br />
+      </div>
+    </fieldset>
+  );
+};
+
+DoubleRangeSpatialFacet.schemaEnhancer = doubleRangeSpatialFacetSchemaEnhancer;
+DoubleRangeSpatialFacet.stateToValue = selectFacetStateToValue;
+DoubleRangeSpatialFacet.valueToQuery = selectFacetValueToQuery;
+export default DoubleRangeSpatialFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/FilterList.jsx

@@ -18,14 +18,14 @@ const FilterList = (props) => {
   const { facets, setFacets, isEditMode, data, querystring } = props;
   const showFilterList = !Object.values(facets).every((facet) => !facet.length);
 
-  const baseFacets = data.facets;
+  const baseFacets = data?.facets;
   const currentFilters = Object.fromEntries(
     Object.entries(facets)
       .filter((v) => v[1] && v[0] !== 'SearchableText')
       .filter(
         (v) =>
           v[1] &&
-          baseFacets.length > 0 &&
+          baseFacets?.length > 0 &&
           baseFacets.map((bf) => bf.field?.value).includes(v[0]),
       ),
   );

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/index.js

@@ -1,3 +1,4 @@
+import DoubleRangeSpatialFacet from './DoubleRangeSpatialFacet';
 import DoubleRangeFacet from './DoubleRangeFacet';
 import AccordionFacet from './AccordionFacet';
 import RightModalFacets from './RightModalFacets';
@@ -11,6 +12,7 @@ export {
   AccordionFacet,
   WithType,
   DoubleRangeFacet,
+  DoubleRangeSpatialFacet,
   CheckboxTreeFacet,
   CheckboxTreeParentFacet,
   rewriteOptions,

package/src/components/Blocks/customBlocks.js

@@ -3,6 +3,7 @@ import {
   RightModalFacets,
   WithType,
   DoubleRangeFacet,
+  DoubleRangeSpatialFacet,
   CheckboxTreeFacet,
   CheckboxTreeParentFacet,
   rewriteOptions,
@@ -385,6 +386,16 @@ const customBlocks = (config) => ({
             valueToQuery: DoubleRangeFacet.valueToQuery,
             filterListComponent: SelectFacetFilterListEntry,
           },
+          {
+            id: 'doubleRangeSpatialFacet',
+            title: 'Double Range for Spatial Resolutions',
+            view: WithType(DoubleRangeSpatialFacet, 'range'),
+            isDefault: false,
+            schemaEnhancer: DoubleRangeSpatialFacet.schemaEnhancer,
+            stateToValue: DoubleRangeSpatialFacet.stateToValue,
+            valueToQuery: DoubleRangeSpatialFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
+          },
           {
             id: 'checkboxTreeFacet',
             title: 'Checkbox Tree',

package/src/components/CLMSDatasetDetailView/DownloadDataSetContent.jsx

@@ -6,7 +6,7 @@ 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';
 import CclLoginModal from '@eeacms/volto-clms-theme/components/CclLoginModal/CclLoginModal';
-import { UniversalLink } from '@plone/volto/components';
+import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const DownloadDataSetContent = (data, token) => {
   const location = useLocation();
@@ -58,13 +58,12 @@ const DownloadDataSetContent = (data, token) => {
           <br />
           <br />
           <h2>Download full dataset</h2>
-          <p>
-            If you want to download the full dataset, click{' '}
-            <UniversalLink href="/en/how-to-guides/how-to-download-spatial-data/how-to-download-m2m">
-              here
-            </UniversalLink>{' '}
-            to learn more
-          </p>
+          {data.download_full_dataset_text?.data && (
+            <StringToHTML
+              string={data.download_full_dataset_text?.data || ''}
+            />
+          )}
+
           {/* {data.token === '' ? (
             <CclButton
               url={location.pathname + '/download-by-area'}

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -1,33 +1,38 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/**
- * CLMSCartContent container.
- * @module components/CLMSDownloadCartView/CLMSCartContent
- */
-
-import { Checkbox, Modal, Segment, Select } from 'semantic-ui-react';
 import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Checkbox, Modal, Segment, Select } from 'semantic-ui-react';
+
+import { Icon } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
+import removeSVG from '@plone/volto/icons/delete.svg';
+import addDocumentSVG from '@plone/volto/icons/add-document.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 {
-  getCartObjectFromMapviewer,
-  getCartObjectFromPrepackaged,
   getDownloadToolPostBody,
   formatNaming,
   originalFormatNaming,
+  getCollectionByItem,
+  duplicateCartItem,
+  concatRequestedCartItem,
 } from './cartUtils';
-import { getDownloadtool, postDownloadtool } from '../../actions';
-import { useDispatch, useSelector } from 'react-redux';
-
-import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Toast } from '@plone/volto/components';
-import { cleanDuplicatesEntries } from '@eeacms/volto-clms-utils/utils';
 import { getAvailableConversion } from './conversion';
 import { toast } from 'react-toastify';
-import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * CLMSCartContent container.
+ * @module components/CLMSDownloadCartView/CLMSCartContent
+ */
 
 const CLMSCartContent = (props) => {
   const { localSessionCart } = props;
   const dispatch = useDispatch();
-  const { removeCartItem, removeCartItems } = useCartState();
+  const { removeCartItem, removeCartItems, updateCart } = useCartState();
 
   // state connections
   const cart = useSelector((state) => state.cart_items.items);
@@ -67,46 +72,17 @@ const CLMSCartContent = (props) => {
       cart.length > 0 &&
       cart.length !== newCart.length
     ) {
-      concatRequestedCartItem();
+      concatRequestedCartItem(
+        cartItems,
+        setCartItems,
+        localSessionCart,
+        datasets_items,
+        projections,
+        nutsnames,
+      );
     }
   }, [cart, datasets_items]);
 
-  useEffect(() => {
-    if (Object.keys(nutsnames).length > 0 && cart.length > 0) {
-      concatRequestedCartItem();
-    }
-  }, [nutsnames]);
-
-  function concatRequestedCartItem() {
-    let newCartItems = [...cartItems];
-    localSessionCart.forEach((localItem) => {
-      const requestedItem = datasets_items
-        ? datasets_items.find((req) => req.UID === localItem.UID)
-        : false;
-      if (requestedItem) {
-        const file_data = requestedItem?.downloadable_files?.items.find(
-          (item) => item['@id'] === localItem.file_id,
-        );
-        if (file_data) {
-          newCartItems.push(
-            getCartObjectFromPrepackaged(file_data, requestedItem),
-          );
-          setCartItems(cleanDuplicatesEntries(newCartItems));
-        } else {
-          newCartItems.push(
-            getCartObjectFromMapviewer(
-              localItem,
-              requestedItem,
-              projections,
-              nutsnames,
-            ),
-          );
-          setCartItems(cleanDuplicatesEntries(newCartItems));
-        }
-      }
-    });
-  }
-
   const selectAllCart = (checked) => {
     if (checked) {
       setCartSelection(
@@ -212,8 +188,11 @@ const CLMSCartContent = (props) => {
     }
   };
 
-  const TypeNaming = (typeProps) => {
-    const { item } = typeProps;
+  const TypeNaming = ({ item }) => {
+    const types_options =
+      item?.type_options?.length > 0
+        ? [...new Set(item.type_options.map((ddi) => ddi.name))]
+        : [];
     if (item.file_id) {
       return (
         <span className={'tag tag-' + item?.type?.toLowerCase()}>
@@ -223,22 +202,51 @@ const CLMSCartContent = (props) => {
     } else if (!item.type) {
       return '-';
     } else {
-      let values = item.type_options.filter((myitem) => {
-        return myitem['id'] === item.type;
-      });
-      return values.length > 0 ? values[0].name : '.';
+      let defaultType = getCollectionByItem(item);
+      return types_options.length > 1 ? (
+        <Select
+          placeholder="Select type"
+          value={defaultType.name}
+          options={types_options.map((option) => {
+            return {
+              key: option,
+              value: option,
+              text: option,
+            };
+          })}
+          onChange={(e, data) => {
+            const new_cartItems = [...cartItems];
+            const objIndex = new_cartItems.findIndex(
+              (obj) => obj.unique_id === item.unique_id,
+            );
+            const first_type_id = item.type_options.filter(
+              (t_o) => t_o.name === data.value,
+            )[0].id;
+            new_cartItems[objIndex].type = first_type_id;
+            const dataset = datasets_items
+              ? datasets_items.find((req) => req.UID === item.dataset_uid)
+              : false;
+            const format_item = dataset.dataset_download_information.items.find(
+              (item) => item['@id'] === first_type_id,
+            );
+            new_cartItems[objIndex].format = format_item.full_format;
+            setCartItems([...new_cartItems]);
+          }}
+        />
+      ) : (
+        defaultType.name
+      );
     }
   };
 
-  const CollectionNaming = (typeProps) => {
-    const { item } = typeProps;
+  const CollectionNaming = ({ item }) => {
     if (item.file_id) {
       return '-';
     } else if (!item.type) {
       return '-';
     }
-
-    return (
+    return item.type_options.filter((t_o) => t_o.id === item.type).length >
+      1 ? (
       <Select
         placeholder="Select type"
         value={
@@ -248,30 +256,65 @@ const CLMSCartContent = (props) => {
         }
         options={
           item?.type_options?.length > 0 &&
-          item?.type_options.map((option) => {
-            return {
-              key: option.id,
-              value: option.id,
-              text:
-                (option.collection === undefined && '-') || option.collection,
-            };
-          })
+          item?.type_options
+            .filter(
+              (o) =>
+                o.name ===
+                item?.type_options.find((t_o) => t_o.id === item.type).name,
+            )
+            .map((option) => {
+              return {
+                key: option.id,
+                value: option.id,
+                text: option.collection ?? '-',
+              };
+            })
         }
         onChange={(e, data) => {
-          const objIndex = cartItems.findIndex(
+          const new_cartItems = [...cartItems];
+          const objIndex = new_cartItems.findIndex(
             (obj) => obj.unique_id === item.unique_id,
           );
-          cartItems[objIndex].type = data.value;
+          new_cartItems[objIndex].type = data.value;
           const dataset = datasets_items
             ? datasets_items.find((req) => req.UID === item.dataset_uid)
             : false;
           const format_item = dataset.dataset_download_information.items.find(
             (item) => item['@id'] === data.value,
           );
-          cartItems[objIndex].format = format_item.full_format;
-          setCartItems([...cartItems]);
+          new_cartItems[objIndex].format = format_item.full_format;
+          setCartItems([...new_cartItems]);
         }}
       />
+    ) : (
+      getCollectionByItem(item).collection ?? '-'
+    );
+  };
+  const FormatNaming = ({ item }) => {
+    const format_options = getAvailableConversion(
+      formatConversionTable,
+      originalFormatNaming(item),
+    );
+    const item_format_name = formatNaming(item);
+    return !item.file_id ? (
+      format_options.length > 1 ? (
+        <Select
+          placeholder="Select format"
+          value={item_format_name}
+          options={format_options}
+          onChange={(e, data) => {
+            const objIndex = cartItems.findIndex(
+              (obj) => obj.unique_id === item.unique_id,
+            );
+            cartItems[objIndex].format = data.value;
+            setCartItems([...cartItems]);
+          }}
+        />
+      ) : (
+        item_format_name
+      )
+    ) : (
+      item_format_name
     );
   };
 
@@ -307,6 +350,7 @@ const CLMSCartContent = (props) => {
                   <th>Format</th>
                   <th>Projection</th>
                   <th></th>
+                  <th></th>
                 </tr>
               </thead>
               <tbody>
@@ -364,25 +408,7 @@ const CLMSCartContent = (props) => {
                         <CollectionNaming item={item} />
                       </td>
                       <td className="table-td-format">
-                        {!item.file_id ? (
-                          <Select
-                            placeholder="Select format"
-                            value={formatNaming(item)}
-                            options={getAvailableConversion(
-                              formatConversionTable,
-                              originalFormatNaming(item),
-                            )}
-                            onChange={(e, data) => {
-                              const objIndex = cartItems.findIndex(
-                                (obj) => obj.unique_id === item.unique_id,
-                              );
-                              cartItems[objIndex].format = data.value;
-                              setCartItems([...cartItems]);
-                            }}
-                          />
-                        ) : (
-                          formatNaming(item)
-                        )}
+                        <FormatNaming item={item} />
                       </td>
                       <td className="table-td-projections">
                         {!item.file_id ? (
@@ -407,14 +433,73 @@ const CLMSCartContent = (props) => {
                       <td>
                         {item.task_in_progress ? (
                           <FontAwesomeIcon icon="spinner" spin />
+                        ) : !item.file_id ? (
+                          <span
+                            className="info-icon"
+                            tooltip="Add a duplicated row below"
+                            direction="up"
+                          >
+                            <button
+                              onClick={() => {
+                                duplicateCartItem(
+                                  item.unique_id,
+                                  cartItems,
+                                  setCartItems,
+                                  updateCart,
+                                );
+                              }}
+                              style={{
+                                backgroundColor: 'transparent',
+                                color: 'inherit',
+                                border: 'none',
+                                padding: 0,
+                                font: 'inherit',
+                                cursor: 'pointer',
+                                outline: 'inherit',
+                              }}
+                            >
+                              <Icon
+                                name={addDocumentSVG}
+                                size={25}
+                                title={'Add a duplicated row below'}
+                              />
+                            </button>
+                          </span>
                         ) : (
-                          <FontAwesomeIcon
-                            icon={['fas', 'trash']}
-                            style={{ cursor: 'pointer' }}
-                            onClick={() => {
-                              removeCartItem(item.unique_id);
-                            }}
-                          />
+                          <></>
+                        )}
+                      </td>
+                      <td>
+                        {item.task_in_progress ? (
+                          <FontAwesomeIcon icon="spinner" spin />
+                        ) : (
+                          <span
+                            className="info-icon"
+                            tooltip="Remove this row from the cart"
+                            direction="up"
+                          >
+                            <button
+                              onClick={() => {
+                                removeCartItem(item.unique_id);
+                              }}
+                              style={{
+                                backgroundColor: 'transparent',
+                                color: 'inherit',
+                                border: 'none',
+                                padding: 0,
+                                font: 'inherit',
+                                cursor: 'pointer',
+                                outline: 'inherit',
+                              }}
+                            >
+                              <Icon
+                                name={removeSVG}
+                                size={25}
+                                color="#e40166"
+                                title={'Remove this row from the cart'}
+                              />
+                            </button>
+                          </span>
                         )}
                       </td>
                     </tr>

package/src/components/CLMSDownloadCartView/cartUtils.js

@@ -1,13 +1,22 @@
+import { cleanDuplicatesEntries } from '@eeacms/volto-clms-utils/utils';
+
 export const formatNaming = (item) => {
   return item?.format?.token || item?.format;
 };
 
 export const originalFormatNaming = (item) => {
   const original = item?.original_format?.token || item?.original_format;
-  const format = item?.format?.token || item?.format;
+  const collection = getCollectionByItem(item);
+  const format = collection?.full_format?.token || collection?.full_format;
   return format ? format : original;
 };
 
+export const getCollectionByItem = (item) => {
+  return item?.type_options
+    ? item.type_options.find((t_o) => t_o['id'] === item.type)
+    : { id: '' };
+};
+
 export const getDownloadToolPostBody = (selectedItems) => {
   const datasetList = selectedItems.map((item) => {
     let body_extras = {};
@@ -108,3 +117,80 @@ export const getCartObjectFromMapviewer = (
     timeExtent: local_cart_data.timeExtent || [],
   };
 };
+
+export const duplicateCartItem = (
+  unique_id,
+  cartItems,
+  setCartItems,
+  updateCart,
+) => {
+  if (cartItems.length > 0) {
+    const itemIndex = cartItems.findIndex((obj) => obj.unique_id === unique_id);
+    const new_item = Object.assign(
+      {},
+      {
+        ...cartItems[itemIndex],
+        unique_id: cartItems[itemIndex].unique_id + '-copy',
+      },
+    );
+    while (cartItems.some((c_i) => c_i.unique_id === new_item.unique_id)) {
+      new_item['unique_id'] = new_item.unique_id + '-copy';
+    }
+    cartItems.splice(itemIndex + 1, 0, new_item);
+    refreshCart(cartItems, setCartItems, updateCart);
+  }
+};
+
+export const refreshCart = (cartItems, setCartItems, updateCart) => {
+  setCartItems([...cartItems]);
+  updateCart([
+    ...cartItems.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 {
+        ...file_id,
+        ...id,
+        UID: c_i.dataset_uid,
+        unique_id: c_i.unique_id,
+        area: c_i.area,
+      };
+    }),
+  ]);
+};
+
+export const concatRequestedCartItem = (
+  cartItems,
+  setCartItems,
+  localSessionCart,
+  datasets_items,
+  projections,
+  nutsnames,
+) => {
+  let newCartItems = [...cartItems];
+  localSessionCart.forEach((localItem) => {
+    const requestedItem = datasets_items
+      ? datasets_items.find((req) => req.UID === localItem.UID)
+      : false;
+    if (requestedItem) {
+      const file_data = requestedItem?.downloadable_files?.items.find(
+        (item) => item['@id'] === localItem.file_id,
+      );
+      if (file_data) {
+        newCartItems.push(
+          getCartObjectFromPrepackaged(file_data, requestedItem),
+        );
+        setCartItems(cleanDuplicatesEntries(newCartItems));
+      } else {
+        newCartItems.push(
+          getCartObjectFromMapviewer(
+            localItem,
+            requestedItem,
+            projections,
+            nutsnames,
+          ),
+        );
+        setCartItems(cleanDuplicatesEntries(newCartItems));
+      }
+    }
+  });
+};

package/src/components/CLMSDownloadsView/CLMSDownloadTasks.jsx

@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import FileCard from './FileCard';
 import { FormattedMessage } from 'react-intl';
 import { Grid } from 'semantic-ui-react';
+import { dynamicSort } from '../CclUtils';
 
 const CLMSDownloadTasks = (props) => {
   const dispatch = useDispatch();
@@ -145,22 +146,6 @@ const CLMSDownloadTasks = (props) => {
     setter(intermediate);
   }
 
-  const dynamicSort = (property) => {
-    var sortOrder = 1;
-    if (property[0] === '-') {
-      sortOrder = -1;
-      property = property.substr(1);
-    }
-    return function (a, b) {
-      /* next line works with strings and numbers,
-       * and you may want to customize it to your needs
-       */
-      var result =
-        a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0;
-      return result * sortOrder;
-    };
-  };
-
   const deleteTaskInProgress = (task_id) => {
     setShowDeleteTaskLoading(task_id);
     dispatch(deleteDownloadtool(task_id));

package/src/components/CclUtils/dynamicSort.js

@@ -0,0 +1,15 @@
+export const dynamicSort = (property) => {
+  var sortOrder = 1;
+  if (property[0] === '-') {
+    sortOrder = -1;
+    property = property.substr(1);
+  }
+  return function (a, b) {
+    /* next line works with strings and numbers,
+     * and you may want to customize it to your needs
+     */
+    var result =
+      a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0;
+    return result * sortOrder;
+  };
+};

package/src/components/CclUtils/index.js

@@ -1,9 +1,8 @@
 import StringToHTML from './StringToHTML';
 
-export { toBase64, fromBase64 } from './base64';
-
 export { StringToHTML };
-
+export { toBase64, fromBase64 } from './base64';
+export { dynamicSort } from './dynamicSort';
 export {
   workOpportunitiesCclDateFormat,
   workOpportunitiesCclDateTimeFormat,

package/src/components/CclUtils/useFilteredPagination.js

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { dynamicSort } from './dynamicSort';
+export const useFilteredPagination = (original_data) => {
+  const [originalDataList, setOriginalDataList] = useState(original_data);
+  const [dataList, setDataList] = useState(original_data);
+  const [paginationSize, setPaginationSize] = useState(10);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pagination, setPagination] = useState(
+    original_data.slice(
+      (currentPage - 1) * paginationSize,
+      (currentPage - 1) * paginationSize + paginationSize,
+    ),
+  );
+  const [search, setSearch] = useState({});
+  const applySearch = (e, { value }, field, setter) => {
+    const new_filters = { [field]: value };
+    setSearch(new_filters);
+  };
+
+  const applyOrder = (criteria) => {
+    setDataList([...dataList.sort(dynamicSort(criteria))]);
+  };
+  const clearSearch = () => {
+    setDataList(originalDataList);
+    setSearch({});
+  };
+  useEffect(() => {
+    let filtered_data_list = [...originalDataList];
+    Object.entries(search).forEach((filter) => {
+      const filter_key = filter[0];
+      const filter_data = filter[1];
+      if (filter_data.length > 0) {
+        filtered_data_list = filtered_data_list.filter((data) => {
+          return data[filter_key]
+            .toLowerCase()
+            .includes(filter_data.toLowerCase());
+        });
+      }
+    });
+    setDataList(filtered_data_list);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search]);
+
+  useEffect(() => {
+    setPagination(
+      dataList.slice(
+        (currentPage - 1) * paginationSize,
+        (currentPage - 1) * paginationSize + paginationSize,
+      ),
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataList, currentPage, paginationSize]);
+
+  return {
+    functions: {
+      setCurrentPage,
+      setPaginationSize,
+      applySearch,
+      setDataList,
+      setOriginalDataList,
+      clearSearch,
+      applyOrder,
+    },
+    data: {
+      pagination,
+      currentPage,
+      paginationSize,
+      originalDataList,
+      dataList,
+      search,
+    },
+  };
+};

package/src/customizations/volto-slate/editor/less/editor.less

@@ -0,0 +1,166 @@
+@import 'globals.less';
+
+@addon: 'volto-slate';
+@addontype: 'editor';
+@addonelement: 'slate';
+
+// TODO: move these to less variables
+
+& {
+  .slate-inline-toolbar {
+    position: absolute;
+
+    /* should be above admin panes (100), and below the Link modal form (1000) */
+    z-index: 1500;
+
+    top: -10000px;
+    left: -10000px;
+
+    max-width: 100vw;
+    opacity: 0;
+
+    &.upper {
+      transform: translateY(-100%);
+    }
+  }
+
+  .toolbar-wrapper.active {
+    margin-bottom: 0.6em;
+  }
+
+  .slate-editor p {
+    /* In editor the <p> are wrapped in weird markup */
+    margin-bottom: 0 !important;
+  }
+
+  .slate-toolbar {
+    display: flex;
+    box-sizing: border-box;
+    padding: 3px;
+    border: none;
+    margin-left: -15rem;
+    background: #fff;
+    border-radius: 2px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    font-family: 'Poppins', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-size: 1rem;
+    font-weight: normal;
+
+    .expando {
+      flex-grow: 1;
+      background-color: #fff;
+    }
+
+    .toolbar-separator {
+      display: inline-block;
+      height: 32px;
+      border-right: 1px solid #ddd;
+      margin: 0 0.5rem;
+    }
+
+    .toolbar-separator + .button-wrapper {
+      margin-left: 0px;
+    }
+
+    .button-wrapper {
+      display: inline-block;
+      margin-left: 3px;
+
+      .ui.tiny.compact.icon.toggle.button {
+        width: 32px;
+        height: 32px;
+        box-sizing: border-box;
+        padding: 4px !important;
+        border: 0;
+        background: rgba(255, 255, 255, 0.975);
+        border-radius: 1px;
+        color: @brown;
+        font-size: 18px;
+        vertical-align: bottom;
+
+        & > svg {
+          fill: #888;
+        }
+
+        &:hover,
+        &:focus {
+          background: #f3f3f3;
+          outline: 0; /* reset for :focus */
+        }
+
+        &.active {
+          background: #efefef !important;
+          border-radius: 3px;
+          box-shadow: inset 0 0 0 1px @blue !important;
+          color: @blue !important;
+
+          & > svg {
+            fill: #444;
+          }
+        }
+      }
+    }
+
+    .ui.buttons {
+      width: 100%;
+    }
+
+    .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
+      margin: auto auto auto auto !important;
+    }
+
+    .ui.button:last-child {
+      margin-right: 0 !important;
+    }
+  }
+
+  .highlight-selection {
+    background-color: grey;
+    color: white;
+  }
+
+  .ui.input.editor-link input {
+    padding: 0;
+    border: none;
+  }
+}
+
+.sidebar-container {
+  .slate-editor {
+    ul {
+      li {
+        display: list-item;
+        padding: 0;
+
+        span {
+          display: initial;
+        }
+      }
+    }
+  }
+}
+
+.power-user-menu {
+  position: absolute;
+  z-index: 10;
+  top: 29px;
+  left: -9px;
+  width: 210px;
+  background-color: rgba(255, 255, 255, 0.975);
+  border-radius: 2px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
+
+  .ui.menu {
+    border: 0;
+    border-radius: 2px;
+
+    .icon {
+      margin-right: 12px;
+      vertical-align: middle;
+    }
+
+    .item.active {
+      background: #efefef !important;
+    }
+  }
+}

package/src/customizations/volto-slate/editor/less/globals.less

@@ -0,0 +1,18 @@
+/* Needed by semantic.less */
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+/* Enables customization of addons */
+.loadAddonOverrides() {
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.overrides';
+}
+
+/* Helper to load variables */
+.loadAddonVariables() {
+  @import (optional) '@{addonelement}.variables';
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.variables';
+}

package/src/index.js

@@ -110,6 +110,7 @@ const applyConfig = (config) => {
   };
   config.settings = {
     ...config.settings,
+    downloadableObjects: ['File', 'TechnicalLibrary'],
     appExtras: [
       ...config.settings.appExtras,
       {

package/theme/clms/css/styles.less

@@ -150,9 +150,9 @@ a:hover,
 /* CLMS-1356 */
 @media only screen and (max-width: 768px) {
   .ccl-container {
-    width: auto!important;
-    margin-right: 1em!important;
-    margin-left: 1em!important;
+    width: auto !important;
+    margin-right: 1em !important;
+    margin-left: 1em !important;
   }
 }
 
@@ -568,8 +568,9 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
 /* Downloads cart CLMS-1357 */
 @media only screen and (max-width: 500px) {
   .center.aligned.middle.aligned.two.wide.column {
-    padding:0px;
+    padding: 0px;
   }
+
   .ui.olive.segment {
     padding-left: 2px;
   }
@@ -920,11 +921,11 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
 .dataset-download-table .ui.message {
   left: 25%;
   width: 50%;
-  background-color: #F8F8F9;
+  background-color: #f8f8f9;
+  box-shadow: 0px 0px 4px 0px #dadada;
   color: inherit;
   font-size: 1rem;
   font-weight: bold;
-  box-shadow: 0px 0px 4px 0px #dadada;
 }
 
 .dataset-download-table .ui.checkbox input:checked ~ label:before,
@@ -942,8 +943,8 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
 }
 
 .dataset-download-table > .ui.basic.segment {
-  padding-left: 0px;
   padding-right: 0px;
+  padding-left: 0px;
 }
 
 /* Downloads */
@@ -1255,14 +1256,15 @@ div#page-document h1.documentFirstHeading {
 
 // CLMS-1344
 #sidebar-metadata .react-select__option {
-  white-space: nowrap;
   width: fit-content;
+  white-space: nowrap;
 }
 
 // CLMS-1424
 .cart-table td {
   word-break: unset !important;
 }
+
 .cart-table .dropdown {
   min-width: 7rem !important;
 }
@@ -1273,8 +1275,8 @@ div#page-document h1.documentFirstHeading {
 
 // CLMS-1460
 .technical-library-edit-link {
-  vertical-align: middle;
   margin-left: 5px;
+  vertical-align: middle;
 }
 
 // CLMS-1542
@@ -1294,4 +1296,4 @@ main {
 // CLMS-1588
 .carousel-text-link-container {
   min-height: 30px;
-}
+}