@eeacms/volto-clms-theme 1.0.82 → 1.0.85

package/CHANGELOG.md

@@ -4,8 +4,60 @@ 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.85](https://github.com/eea/volto-clms-theme/compare/1.0.84...1.0.85)
+
+- Volto 15 upgrade [`#240`](https://github.com/eea/volto-clms-theme/pull/240)
+- jest config [`5e0723b`](https://github.com/eea/volto-clms-theme/commit/5e0723b1c1006609811a84d6fb9a3b6744c8d1be)
+- sort downloads [`50cdd33`](https://github.com/eea/volto-clms-theme/commit/50cdd332f992e45a8745483bddaf25e01ecd5db5)
+- condition valid Start date [`dce8883`](https://github.com/eea/volto-clms-theme/commit/dce8883f386676c682af2b5a68f7451d3ccd49dd)
+- search block new features [`8e814cb`](https://github.com/eea/volto-clms-theme/commit/8e814cbd359782540c21fe37b37ef146d331f0d6)
+- language selector cookie management [`1385ac9`](https://github.com/eea/volto-clms-theme/commit/1385ac95795702206d3623ba6e780faa43a89e0a)
+- toolbar cookie management [`5c23200`](https://github.com/eea/volto-clms-theme/commit/5c23200790b20e1d4f1bc966463c37bf4c808f47)
+
+#### [1.0.84](https://github.com/eea/volto-clms-theme/compare/1.0.83...1.0.84)
+
+> 18 March 2022
+
+- Develop [`#239`](https://github.com/eea/volto-clms-theme/pull/239)
+- lightgallery style imports [`7b6c1a9`](https://github.com/eea/volto-clms-theme/commit/7b6c1a9d2b269a74d7c0ec699b078f41035c7e23)
+- lightGallery added for meeting view [`4047d5c`](https://github.com/eea/volto-clms-theme/commit/4047d5c18ce4c64b03fbcc3db761b3c0f4cd26d3)
+
+#### [1.0.83](https://github.com/eea/volto-clms-theme/compare/1.0.82...1.0.83)
+
+> 17 March 2022
+
+- Develop [`#236`](https://github.com/eea/volto-clms-theme/pull/236)
+- new widget to edit the component controlpanel [`#237`](https://github.com/eea/volto-clms-theme/pull/237)
+- use volto-react-table widget [`#238`](https://github.com/eea/volto-clms-theme/pull/238)
+- Bugs n improvements [`#235`](https://github.com/eea/volto-clms-theme/pull/235)
+- Develop [`#234`](https://github.com/eea/volto-clms-theme/pull/234)
+- remove duplicated [`0739aef`](https://github.com/eea/volto-clms-theme/commit/0739aef163cac91233a936c49f488fbc9daec5be)
+- add volto-react-table-widget [`f4b1e99`](https://github.com/eea/volto-clms-theme/commit/f4b1e998e38f31a63b475760d0bf2157451f9af4)
+- fix packages.json [`44848a0`](https://github.com/eea/volto-clms-theme/commit/44848a0e07a0a960dc17ee6d0c08febac320688d)
+- remove unneeded code [`e37e121`](https://github.com/eea/volto-clms-theme/commit/e37e121ca910b4fbaf2f9da80393fc577a6923c7)
+- adjust dependnecies [`a7f67fe`](https://github.com/eea/volto-clms-theme/commit/a7f67fec4c56d09b038ce052e88b04a601da6db3)
+- adjust import [`66bb59a`](https://github.com/eea/volto-clms-theme/commit/66bb59a22a1b623bc6dcf13996c98572b14526db)
+- add VOLTO version to addon tests execution [`a94a491`](https://github.com/eea/volto-clms-theme/commit/a94a4918413aa5a2a75eea14ab837338d24d2e32)
+- fix cart type selector [`47046b0`](https://github.com/eea/volto-clms-theme/commit/47046b0ba02400c572aee981cc52ad481d560b77)
+- reorder cart modal buttons and remove duplicates of dataset titles from modal [`03171f2`](https://github.com/eea/volto-clms-theme/commit/03171f2e7b85878d1fac186130af2dc8a8813937)
+- ESLint fix [`6e4faad`](https://github.com/eea/volto-clms-theme/commit/6e4faad26bbf412a691e827333541e6e8d302590)
+- use ReactTableWidget [`18d8777`](https://github.com/eea/volto-clms-theme/commit/18d8777cc134a6d13ed0ab1324d38c2edc5f5426)
+- Modal homogenization [`33d41b5`](https://github.com/eea/volto-clms-theme/commit/33d41b5d90094addf6d3e4301225727e801c45b5)
+- use datset title instead of dataResourceTitle [`4a9dc98`](https://github.com/eea/volto-clms-theme/commit/4a9dc98c965d96d1d796a81b94ccf5c0283309d7)
+- get header from schema [`8851314`](https://github.com/eea/volto-clms-theme/commit/8851314f92b1798428790dc4db02fd7688fbc5af)
+- use onBlur [`bdfcc7e`](https://github.com/eea/volto-clms-theme/commit/bdfcc7ecc28c48d0c84261166b824ac20e746d4f)
+- implement search and filtering [`8b748eb`](https://github.com/eea/volto-clms-theme/commit/8b748ebc17a3edbbf1e6b2d24df016f8bb86a333)
+- use react-papaparse to import/export CSV files [`d07fe9d`](https://github.com/eea/volto-clms-theme/commit/d07fe9d17ef963b839bb98b22a008921b83f9f3d)
+- add CSV export [`8bd1ea5`](https://github.com/eea/volto-clms-theme/commit/8bd1ea5451e2b2e8ce8ea1521a13acc1bfcfc7bb)
+- modify the data in the props so Volto keeps its value [`6d5b19a`](https://github.com/eea/volto-clms-theme/commit/6d5b19a081a2487d2680696ba7c993ef8f3bd50e)
+- remove styles [`c677afe`](https://github.com/eea/volto-clms-theme/commit/c677afe47ec10b0274311252941639d1ab3d326b)
+- initial demo using react-table to edit downloadable files. right now without edit functionality [`dafa015`](https://github.com/eea/volto-clms-theme/commit/dafa015e43272101c141456200c75a4c0d65d3dc)
+
 #### [1.0.82](https://github.com/eea/volto-clms-theme/compare/1.0.81...1.0.82)
 
+> 11 March 2022
+
+- Develop [`#233`](https://github.com/eea/volto-clms-theme/pull/233)
 - add new field in prepackaged downloadable files [`#232`](https://github.com/eea/volto-clms-theme/pull/232)
 
 #### [1.0.81](https://github.com/eea/volto-clms-theme/compare/1.0.80...1.0.81)

package/Jenkinsfile

@@ -4,8 +4,9 @@ pipeline {
   environment {
         GIT_NAME = "volto-clms-theme"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "clms.land.copernicus.eu,volto.eea.europa.eu"
+        SONARQUBE_TAGS = "clms.land.copernicus.eu,volto.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu"
         DEPENDENCIES = ""
+        VOLTO = "15.2.1"
     }
 
   stages {
@@ -77,7 +78,7 @@ pipeline {
               script {
                 try {
                   sh '''docker pull plone/volto-addon-ci'''
-                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci'''
+                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e VOLTO=$VOLTO -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci'''
                   sh '''rm -rf xunit-reports'''
                   sh '''mkdir -p xunit-reports'''
                   sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/coverage xunit-reports/'''
@@ -125,7 +126,7 @@ pipeline {
               script {
                 try {
                   sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''

package/jest-addon.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
+  testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s(x)?'],
   collectCoverageFrom: [
     'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
     '!src/**/*.d.ts',
@@ -15,6 +15,7 @@ module.exports = {
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
     'volto-clms-theme/(.*)$': '<rootDir>/src/addons/volto-clms-theme/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
@@ -38,4 +39,7 @@ module.exports = {
       statements: 5,
     },
   },
+  roots: ['<rootDir>'],
+  modulePaths: ['<rootDir>'],
+  moduleDirectories: ['node_modules'],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.82",
+  "version": "1.0.85",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -26,6 +26,7 @@
     "@eeacms/volto-resize-helper",
     "@eeacms/volto-tabs-block",
     "@eeacms/volto-clms-utils",
+    "@eeacms/volto-react-table-widget",
     "volto-form-block",
     "@eeacms/volto-taxonomy"
   ],
@@ -35,6 +36,7 @@
     "@eeacms/volto-clms-utils": "0.1.6",
     "@eeacms/volto-columns-block": "4.4.3",
     "@eeacms/volto-metadata-block": "^2.1.0",
+    "@eeacms/volto-react-table-widget": "0.1.1",
     "@eeacms/volto-resize-helper": "0.2.1",
     "@eeacms/volto-tabs-block": "1.2.7",
     "@eeacms/volto-taxonomy": "^1.0.0",
@@ -50,7 +52,8 @@
     "slick-carousel": "1.8.1",
     "volto-dropdownmenu": "2.2.7",
     "volto-form-block": "2.2.2",
-    "react-input-range": "^1.3.0"
+    "react-input-range": "^1.3.0",
+    "lightgallery": "^2.4.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

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

@@ -1,5 +1,10 @@
 import { Checkbox } from 'semantic-ui-react';
 import React from 'react';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
 
 const AccordionFacet = (props) => {
   const {
@@ -79,4 +84,7 @@ const AccordionFacet = (props) => {
   );
 };
 
+AccordionFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+AccordionFacet.stateToValue = selectFacetStateToValue;
+AccordionFacet.valueToQuery = selectFacetValueToQuery;
 export default AccordionFacet;

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

@@ -5,6 +5,12 @@ import React, { useState } from 'react';
 import { Checkbox, List } from 'semantic-ui-react';
 import { structure_taxonomy_terms } from '@eeacms/volto-clms-theme/components';
 
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
+
 const CheckboxTreeFacet = (props) => {
   const { facet, choices, onChange, value } = props;
   const facetValue = value;
@@ -120,4 +126,7 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
   );
 };
 
+CheckboxTreeFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+CheckboxTreeFacet.stateToValue = selectFacetStateToValue;
+CheckboxTreeFacet.valueToQuery = selectFacetValueToQuery;
 export default CheckboxTreeFacet;

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

@@ -5,6 +5,11 @@ import React, { useState } from 'react';
 
 import InputRange from 'react-input-range';
 import { Segment } from 'semantic-ui-react';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
 
 const DoubleRangeFacet = (props) => {
   const { facet, choices, onChange, value } = props;
@@ -73,4 +78,7 @@ const DoubleRangeFacet = (props) => {
   );
 };
 
+DoubleRangeFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+DoubleRangeFacet.stateToValue = selectFacetStateToValue;
+DoubleRangeFacet.valueToQuery = selectFacetValueToQuery;
 export default DoubleRangeFacet;

package/src/components/Blocks/customBlocks.js

@@ -6,6 +6,7 @@ import {
   CheckboxTreeFacet,
   rewriteOptions,
 } from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoSearchBlock';
+import { SelectFacetFilterListEntry } from '@plone/volto/components/manage/Blocks/Search/components';
 import {
   CclCarouselView,
   CclProductTabsView,
@@ -305,24 +306,40 @@ const customBlocks = (config) => ({
             title: 'Accordion Checkbox',
             view: WithType(AccordionFacet, 'checkbox'),
             isDefault: true,
+            schemaEnhancer: AccordionFacet.schemaEnhancer,
+            stateToValue: AccordionFacet.stateToValue,
+            valueToQuery: AccordionFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'accordionLabelFacet',
             title: 'Accordion Label',
             view: WithType(AccordionFacet, 'label'),
             isDefault: false,
+            schemaEnhancer: AccordionFacet.schemaEnhancer,
+            stateToValue: AccordionFacet.stateToValue,
+            valueToQuery: AccordionFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'doubleRangeFacet',
             title: 'Double Range',
             view: DoubleRangeFacet,
             isDefault: false,
+            schemaEnhancer: DoubleRangeFacet.schemaEnhancer,
+            stateToValue: DoubleRangeFacet.stateToValue,
+            valueToQuery: DoubleRangeFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'checkboxTreeFacet',
             title: 'Checkbox Tree',
             view: CheckboxTreeFacet,
             isDefault: false,
+            schemaEnhancer: CheckboxTreeFacet.schemaEnhancer,
+            stateToValue: CheckboxTreeFacet.stateToValue,
+            valueToQuery: CheckboxTreeFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
 
           ...config.blocks.blocksConfig.search.extensions.facetWidgets.types,

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -4,7 +4,7 @@
  * @module components/CLMSDownloadCartView/CLMSCartContent
  */
 
-import { Checkbox, Grid, Modal, Segment, Select } from 'semantic-ui-react';
+import { Checkbox, Modal, Segment, Select } from 'semantic-ui-react';
 import React, { useEffect, useState } from 'react';
 import {
   getCartObjectFromMapviewer,
@@ -226,7 +226,11 @@ const CLMSCartContent = (props) => {
     return (
       <Select
         placeholder="Select type"
-        value={item.type_options.length > 0 && item.type_options[0].id}
+        value={
+          item.type
+            ? item.type
+            : item.type_options.length > 0 && item.type_options[0].id
+        }
         options={item.type_options.map((option) => {
           return { key: option.id, value: option.id, text: option.name };
         })}
@@ -436,36 +440,32 @@ const CLMSCartContent = (props) => {
               <br />
               <strong>Map viewer selection:</strong>
               <ul>
-                {getSelectedCartItems()
-                  .filter((item) => item.area)
-                  .map((item, key) => (
-                    <li key={key}>{item.name}</li>
-                  ))}
+                {[
+                  ...new Set(
+                    getSelectedCartItems()
+                      .filter((item) => !item.file_id)
+                      .map((item) => item.name),
+                  ),
+                ].map((item, key) => (
+                  <li key={key}>{item}</li>
+                ))}
               </ul>
             </div>
           </div>
         </Modal.Content>
         <Modal.Actions>
-          <Grid columns={2} stackable textAlign="center">
-            <Grid.Row verticalAlign="middle">
-              <Grid.Column>
-                <CclButton
-                  mode={'filled'}
-                  onClick={() => {
-                    setOpenedModal(false);
-                    startDownloading();
-                  }}
-                >
-                  Accept
-                </CclButton>
-              </Grid.Column>
-              <Grid.Column>
-                <CclButton onClick={() => setOpenedModal(false)}>
-                  Cancel
-                </CclButton>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
+          <div className="modal-buttons">
+            <CclButton
+              mode={'filled'}
+              onClick={() => {
+                setOpenedModal(false);
+                startDownloading();
+              }}
+            >
+              Accept
+            </CclButton>
+            <CclButton onClick={() => setOpenedModal(false)}>Cancel</CclButton>
+          </div>
         </Modal.Actions>
       </Modal>
     </>

package/src/components/CLMSDownloadCartView/cartUtils.js

@@ -70,7 +70,7 @@ export const getCartObjectFromMapviewer = (
     });
   }
   return {
-    name: dataset_data.dataResourceTitle || '-',
+    name: dataset_data.title || '-',
     area: area || '-',
     format:
       dataset_data.dataset_full_format?.token ||

package/src/components/CLMSDownloadsView/CLMSDownloadTasks.jsx

@@ -67,15 +67,23 @@ const CLMSDownloadTasks = (props) => {
     return (
       <Grid columns={2}>
         {tasks?.length > 0 &&
-          tasks.map((item, key) => (
-            <Grid.Column key={key}>
-              <FileCard
-                item={item}
-                showDeleteTaskLoading={showDel}
-                deleteTaskInProgress={delTask}
-              />
-            </Grid.Column>
-          ))}
+          tasks
+            .map((item) => {
+              if (!item.RegistrationDateTime) {
+                item.RegistrationDateTime = '1970-01-01T00:00:00.000Z';
+              }
+              return item;
+            })
+            .sort(dynamicSort('-RegistrationDateTime'))
+            .map((item, key) => (
+              <Grid.Column key={key}>
+                <FileCard
+                  item={item}
+                  showDeleteTaskLoading={showDel}
+                  deleteTaskInProgress={delTask}
+                />
+              </Grid.Column>
+            ))}
       </Grid>
     );
   };
@@ -108,6 +116,22 @@ 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));
@@ -220,7 +244,7 @@ const CLMSDownloadTasks = (props) => {
         <h2>
           <FormattedMessage id="Cancelled" defaultMessage="Cancelled" />
         </h2>
-        {cancelled?.length !== 0 ? (
+        {cancelled?.length > 0 ? (
           <MapTasks tasks={cancelled} showDel={showDeleteTaskLoading} />
         ) : (
           <p>

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -125,18 +125,25 @@ const FileCard = (props) => {
           >
             <Header as="h3">{`Task ID: ${item?.TaskID}`}</Header>
             <Segment basic className="file-datetimes">
-              Start date:{' '}
-              {new Date(item?.RegistrationDateTime).toLocaleString('en-GB', {
-                timeZone: 'UTC',
-              })}{' '}
-              <span
-                className="info-icon"
-                tooltip="Dates and times are in UTC"
-                direction="up"
-              >
-                <FontAwesomeIcon icon={faInfoCircle} />
-              </span>
-              <br />
+              {item?.RegistrationDateTime && (
+                <>
+                  Start date:
+                  {new Date(item?.RegistrationDateTime).toLocaleString(
+                    'en-GB',
+                    {
+                      timeZone: 'UTC',
+                    },
+                  )}
+                  <span
+                    className="info-icon"
+                    tooltip="Dates and times are in UTC"
+                    direction="up"
+                  >
+                    <FontAwesomeIcon icon={faInfoCircle} />
+                  </span>
+                  <br />
+                </>
+              )}
               {item?.FinalizationDateTime && (
                 <>
                   End date:{' '}

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -18,6 +18,7 @@ import { createContent } from '@plone/volto/actions';
 import jwtDecode from 'jwt-decode';
 import { postMeetingRegister } from '../../actions';
 import { toast } from 'react-toastify';
+import { LightGalleryListing } from './CclLightGallery';
 
 export const CLMSMeetingView = (props) => {
   const { content, intl } = props;
@@ -156,6 +157,7 @@ export const CLMSMeetingView = (props) => {
           );
     });
   };
+
   var formErrorMessagesList = [];
   !content.anonymous_registration_form?.published &&
     formErrorMessagesList.push(
@@ -379,6 +381,7 @@ export const CLMSMeetingView = (props) => {
           </figure>
         )}
         <StringToHTML string={content.text?.data || ''} />
+        <LightGalleryListing />
       </Segment>
     </div>
   );

package/src/components/CLMSMeetingView/CclLightGallery.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import LightGallery from 'lightgallery/react';
+import lgZoom from 'lightgallery/plugins/zoom';
+import 'lightgallery/css/lightgallery.css';
+import 'lightgallery/css/lg-zoom.css';
+import { Image } from 'semantic-ui-react';
+import './styles.less';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { useDispatch, useSelector } from 'react-redux';
+import { searchContent } from '@plone/volto/actions';
+
+export const LightGalleryListing = () => {
+  const dispatch = useDispatch();
+  const images = useSelector(
+    (state) => state?.search?.subrequests?.images?.items,
+  );
+
+  React.useEffect(() => {
+    dispatch(
+      searchContent(
+        window.location.pathname,
+        {
+          'path.depth': 1,
+          portal_type: 'Image',
+          fullobjects: true,
+        },
+        'images',
+      ),
+    );
+    return () => {
+      dispatch(searchContent([]));
+    };
+  }, [dispatch]);
+
+  return (
+    <>
+      <div>
+        <LightGallery plugins={[lgZoom]} mode="lg-fade">
+          {images?.map((item, index) => (
+            <a
+              key={index}
+              className="gallery-item"
+              href={flattenToAppURL(item?.image?.download)}
+              data-sub-html={item.description}
+              data-src={flattenToAppURL(item?.image?.scales?.huge?.download)}
+            >
+              <Image
+                src={flattenToAppURL(item?.image?.scales?.large?.download)}
+                className="img-responsive"
+                alt={item.description}
+              />
+            </a>
+          ))}
+        </LightGallery>
+      </div>
+    </>
+  );
+};
+LightGalleryListing.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any),
+};
+export default LightGalleryListing;

package/src/components/CLMSMeetingView/styles.less

@@ -0,0 +1,49 @@
+@type: 'extra';
+@element: 'custom';
+@import (multiple) '../../theme.config';
+
+h1,
+p {
+  font-family: Lato;
+}
+
+body {
+  margin: 0;
+}
+
+.gallery-item {
+  display: inline-block;
+  margin: 5px;
+}
+
+.img-responsive {
+  display: flex;
+  width: 8rem !important;
+  height: 8rem !important;
+  object-fit: cover;
+}
+
+.image-message {
+  opacity: 0.8;
+}
+
+.image-editor-icon {
+  border-radius: 0.2rem;
+  font-size: 0.8rem;
+}
+
+.ui.image:hover {
+  background-color: #e0e1e2;
+  border-radius: 0.2rem;
+  cursor: pointer;
+}
+
+.lightgallery .lg-react-element {
+  display: flex;
+  flex-wrap: wrap;
+}
+@media (ma-width: 770px) {
+  .lightgallery .lg-react-element {
+    justify-content: center;
+  }
+}

package/src/components/CclLanguageSelector/CclLanguageSelector.jsx

@@ -4,21 +4,26 @@
  */
 
 import { Helmet, flattenToAppURL, langmap } from '@plone/volto/helpers';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import React from 'react';
 import config from '@plone/volto/registry';
-import cookie from 'react-cookie';
 import cx from 'classnames';
 import { find } from 'lodash';
-import { updateIntl } from 'react-intl-redux';
 
 let locales = {};
 
+const messages = defineMessages({
+  switchLanguageTo: {
+    id: 'Switch to',
+    defaultMessage: 'Switch to',
+  },
+});
+
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     import('~/../locales/' + lang + '.json').then((locale) => {
@@ -31,12 +36,9 @@ function Capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-const ModalContent = ({
-  translations,
-  currentLang,
-  onClickAction,
-  changeLanguage,
-}) => {
+const ModalContent = (props) => {
+  const intl = useIntl();
+  const { translations, currentLang, onClickAction } = props;
   return (
     <div className="ccl-container">
       <div className="modal-language-header">
@@ -64,6 +66,9 @@ const ModalContent = ({
                 <span className="language-link" lang-code={lang}>
                   {lang !== currentLang ? (
                     <Link
+                      aria-label={`${intl.formatMessage(
+                        messages.switchLanguageTo,
+                      )} ${langmap[lang].nativeName.toLowerCase()}`}
                       to={
                         translation
                           ? flattenToAppURL(translation['@id'])
@@ -72,7 +77,6 @@ const ModalContent = ({
                       title={langmap[lang].nativeName}
                       onClick={() => {
                         onClickAction();
-                        changeLanguage(lang);
                       }}
                       key={`language-selector-${lang}`}
                     >
@@ -92,26 +96,11 @@ const ModalContent = ({
 };
 
 function CclLanguageSelector(props) {
-  const dispatch = useDispatch();
   const currentLang = useSelector((state) => state.intl.locale);
   const translations = useSelector(
     (state) => state.content.data?.['@components']?.translations?.items,
   );
 
-  function changeLanguage(language) {
-    cookie.save('I18N_LANGUAGE', language, {
-      expires: new Date((2 ** 31 - 1) * 1000),
-      path: '/',
-    });
-
-    dispatch(
-      updateIntl({
-        locale: language,
-        messages: locales[language],
-      }),
-    );
-  }
-
   return config.settings.isMultilingual ? (
     <div className="ccl-header-lang">
       <CclModal
@@ -129,7 +118,6 @@ function CclLanguageSelector(props) {
           translations={translations}
           currentLang={currentLang}
           onClickAction={props.onClickAction}
-          changeLanguage={changeLanguage}
         />
       </CclModal>
 
@@ -142,7 +130,6 @@ function CclLanguageSelector(props) {
             translations={translations}
             currentLang={currentLang}
             onClickAction={props.onClickAction}
-            changeLanguage={changeLanguage}
           />
         </CclModal>
       </div>

package/src/components/CclLoginModal/CclLoginModal.jsx

@@ -45,33 +45,39 @@ function CclLoginModal() {
       size="tiny"
       modalStatus={modalStatus}
     >
-      <div className="modal-login-title">Registration / Login</div>
-      <div className="modal-login-text">
-        <p>
-          This site uses EU Login to handle user registration and login. You can
-          read more about this service in the{' '}
-          <a href="https://ecas.ec.europa.eu/cas/about.html">
-            EU Login site help
+      <div className="content">
+        <div className="modal-login-title">Registration / Login</div>
+        <div className="modal-login-text">
+          <p>
+            This site uses EU Login to handle user registration and login. You
+            can read more about this service in the{' '}
+            <a href="https://ecas.ec.europa.eu/cas/about.html">
+              EU Login site help
+            </a>
+            .
+          </p>
+          <p>
+            {' '}
+            When you clik on the following link, you will be sent to EU Login
+            and after a successful login there you will be redirected back to
+            this site.
+          </p>
+          <p>
+            If you have any issues or questions, please contact us using the
+            <a href="/en/contact-service-helpdesk"> helpdesk</a>.
+          </p>
+        </div>
+      </div>
+      <div className="actions">
+        <div className="modal-buttons">
+          <a
+            href={toPublicURL(loginUrl) || '#'}
+            className="ccl-button ccl-button-green"
+          >
+            Login using EU Login
           </a>
-          .
-        </p>
-        <p>
-          {' '}
-          When you clik on the following link, you will be sent to EU Login and
-          after a successful login there you will be redirected back to this
-          site.
-        </p>
-        <p>
-          If you have any issues or questions, please contact us using the
-          <a href="/en/contact-service-helpdesk"> helpdesk</a>.
-        </p>
+        </div>
       </div>
-      <a
-        href={toPublicURL(loginUrl) || '#'}
-        className="ccl-button ccl-button-green"
-      >
-        Login using EU Login
-      </a>
     </CclModal>
   );
 }

package/src/components/CclModal/CclModal.jsx

@@ -30,21 +30,17 @@ function CclModal(props) {
       className={'modal-clms'}
       size={size}
     >
-      <div className={'modal-clms-background'}>
-        <div className={'modal-clms-container'}>
-          <div className={'modal-close modal-clms-close'}>
-            <span
-              className="ccl-icon-close"
-              aria-label="Close"
-              onClick={() => closeModal()}
-              onKeyDown={() => closeModal()}
-              tabIndex="0"
-              role="button"
-            ></span>
-          </div>
-          {children}
-        </div>
+      <div className={'modal-close modal-clms-close'}>
+        <span
+          className="ccl-icon-close"
+          aria-label="Close"
+          onClick={() => closeModal()}
+          onKeyDown={() => closeModal()}
+          tabIndex="0"
+          role="button"
+        ></span>
       </div>
+      {children}
     </Modal>
   );
 }

package/src/components/CclModal/modal.less

@@ -99,11 +99,6 @@
   text-align: right;
 }
 
-.modal-clms .ccl-button {
-  width: 60%;
-  margin: 2rem auto 0;
-}
-
 .modal-clms hr {
   height: 1px;
   padding: 0;
@@ -116,6 +111,28 @@
   line-height: 1.5rem;
 }
 
+.modal-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 1rem;
+}
+
+.modal-buttons .ccl-button {
+  width: auto;
+  margin: 0;
+}
+
+.modal-buttons .ccl-button:only-child {
+  margin: 0 auto;
+}
+
+@media only screen and (max-width: 767px) {
+  .modal-clms.ui.modal > .content,
+  .modal-clms.ui.modal > .actions {
+    padding: 1.5rem !important;
+  }
+}
+
 /* Language modal */
 .modals.dimmer .ui.scrolling.modal.modal-clms {
   margin-top: 0;

package/src/components/Widgets/{DownloadableFilesWidget.jsx → DownloadableFilesTableWidget.jsx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
+import { ReactTableWidget } from '@eeacms/volto-react-table-widget';
 
 const ItemSchema = () => ({
   title: 'Downloadable File',
@@ -18,6 +18,7 @@ const ItemSchema = () => ({
       title: 'Year',
       description: 'Enter the year of this file.',
       type: 'number',
+      minimum: 1900,
     },
     version: {
       title: 'Version',
@@ -36,8 +37,6 @@ const ItemSchema = () => ({
         ['Raster', 'Raster'],
         ['Vector', 'Vector'],
       ],
-      // type: 'string',
-      // controlled vocabulary: 'raster' or 'vector'
     },
     format: {
       title: 'Format',
@@ -84,15 +83,17 @@ const ItemSchema = () => ({
   required: [],
 });
 
-const DownloadableFilesWidget = (props) => {
+const DownloadableFilesTableWidget = (props) => {
   return (
-    <ObjectListWidget
+    <ReactTableWidget
       schema={ItemSchema()}
       {...props}
+      csvexport={true}
+      csvimport={true}
       value={props.value?.items || props.default?.items || []}
       onChange={(id, value) => props.onChange(id, { items: value })}
     />
   );
 };
 
-export default DownloadableFilesWidget;
+export default DownloadableFilesTableWidget;

package/src/components/Widgets/ProductComponentsWidget.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
+
+const ItemSchema = () => ({
+  title: 'Product component',
+  properties: {
+    name: {
+      title: 'Name',
+      description: 'Enter the name of this component.',
+      type: 'string',
+    },
+    description: {
+      title: 'Description',
+      description: 'Enter the description of this component.',
+      type: 'text',
+    },
+  },
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Component',
+      fields: ['name', 'description'],
+    },
+  ],
+  required: [],
+});
+
+const ProductComponentsWidget = (props) => {
+  return (
+    <ObjectListWidget
+      schema={ItemSchema()}
+      {...props}
+      value={props.value?.items || props.default?.items || []}
+      onChange={(id, value) => props.onChange(id, { items: value })}
+    />
+  );
+};
+
+export default ProductComponentsWidget;

package/src/customizations/volto/components/manage/Toolbar/Toolbar.jsx

@@ -3,41 +3,44 @@
  * @module components/manage/Toolbar/Toolbar
  */
 
-import { BodyClass, getBaseUrl } from '@plone/volto/helpers';
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import jwtDecode from 'jwt-decode';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { withCookies } from 'react-cookie';
 import { filter, find } from 'lodash';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+import More from '@plone/volto/components/manage/Toolbar/More';
+import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
+import Types from '@plone/volto/components/manage/Toolbar/Types';
+import PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
+import PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
+import StandardWrapper from '@plone/volto/components/manage/Toolbar/StandardWrapper';
 import {
   getTypes,
   listActions,
   setExpandedToolbar,
   unlockContent,
 } from '@plone/volto/actions';
-
 import { Icon } from '@plone/volto/components';
-import { Link } from 'react-router-dom';
-import More from '@plone/volto/components/manage/Toolbar/More';
-import PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
-import PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
-import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
+import { BodyClass, getBaseUrl } from '@plone/volto/helpers';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
-import PropTypes from 'prop-types';
-import StandardWrapper from '@plone/volto/components/manage/Toolbar/StandardWrapper';
-import Types from '@plone/volto/components/manage/Toolbar/Types';
-import addSVG from '@plone/volto/icons/add-document.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import { compose } from 'redux';
-import config from '@plone/volto/registry';
-import { connect } from 'react-redux';
-import cookie from 'react-cookie';
-import cx from 'classnames';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-import folderSVG from '@plone/volto/icons/folder.svg';
-import jwtDecode from 'jwt-decode';
-import moreSVG from '@plone/volto/icons/more.svg';
+
 import penSVG from '@plone/volto/icons/pen.svg';
 import unlockSVG from '@plone/volto/icons/unlock.svg';
+import folderSVG from '@plone/volto/icons/folder.svg';
+import addSVG from '@plone/volto/icons/add-document.svg';
+import moreSVG from '@plone/volto/icons/more.svg';
 import userSVG from '@plone/volto/icons/user.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+// import cookie from 'react-cookie';
 
 const messages = defineMessages({
   edit: {
@@ -174,17 +177,21 @@ class Toolbar extends Component {
     types: [],
   };
 
-  state = {
-    expanded: cookie.load('toolbar_expanded') !== 'false',
-    showMenu: false,
-    menuStyle: {},
-    menuComponents: [],
-    loadedComponents: [],
-    hideToolbarBody: false,
-  };
-
   toolbarWindow = React.createRef();
 
+  constructor(props) {
+    super(props);
+    const { cookies } = props;
+    this.state = {
+      expanded: cookies.get('toolbar_expanded') !== 'false',
+      showMenu: false,
+      menuStyle: {},
+      menuComponents: [],
+      loadedComponents: [],
+      hideToolbarBody: false,
+    };
+  }
+
   /**
    * Component will mount
    * @method componentDidMount
@@ -225,8 +232,11 @@ class Toolbar extends Component {
   }
 
   handleShrink = () => {
-    cookie.save('toolbar_expanded', !this.state.expanded, {
-      expires: new Date((2 ** 31 - 1) * 1000),
+    const { cookies } = this.props;
+    cookies.set('toolbar_expanded', !this.state.expanded, {
+      expires: new Date(
+        new Date().getTime() + config.settings.cookieExpires * 1000,
+      ),
       path: '/',
     });
     this.setState(
@@ -303,6 +313,7 @@ class Toolbar extends Component {
       id: 'folderContents',
     });
     const { expanded } = this.state;
+
     if (this.props.roles && this.props.roles?.includes('Manager')) {
       return (
         this.props.token && (
@@ -583,6 +594,7 @@ class Toolbar extends Component {
 
 export default compose(
   injectIntl,
+  withCookies,
   connect(
     (state, props) => ({
       actions: state.actions.actions,

package/src/index.js

@@ -1,12 +1,11 @@
-// COMPONENTS FOR ROUTES
-import { ContactForm, Search, Sitemap } from '@plone/volto/components';
-// CUSTOMIZED BLOCKS IMPORTS
 import customBlocks, {
   customGroupBlocksOrder,
 } from '@eeacms/volto-clms-theme/components/Blocks/customBlocks';
 
-import BoundingWidget from './components/Widgets/BoundingWidget';
-// VIEWS IMPORTS
+// ROUTE VIEWS
+import { ContactForm, Search, Sitemap } from '@plone/volto/components';
+
+// VIEWS
 import CLMSDatasetDetailView from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView/CLMSDatasetDetailView';
 import CLMSDownloadCartView from './components/CLMSDownloadCartView/CLMSDownloadCartView';
 import CLMSDownloadableFileView from '@eeacms/volto-clms-theme/components/CLMSDownloadableFileView/CLMSDownloadableFileView';
@@ -21,17 +20,21 @@ import CLMSNewsItemView from '@eeacms/volto-clms-theme/components/CLMSNewsItemVi
 import ConfirmSubscriptionView from './components/CLMSSubscriptionView/ConfirmSubscriptionView';
 import ProfileView from './components/CLMSProfileView/CLMSProfileView';
 import SubscriptionView from './components/CLMSSubscriptionView/SubscriptionView';
-// WIDGET IMPORTS
-import TabsWidget from './components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget';
-import TextLinkWidget from './components/Widgets/TextLinkWidget';
+
+// WIDGET
+import BoundingWidget from './components/Widgets/BoundingWidget';
 import ContactWidget from './components/Widgets/ContactWidget';
+import DatasetDownloadInformationWidget from './components/Widgets/DatasetDownloadInformationWidget';
 import DistributionInfoWidget from './components/Widgets/DistributionInfoWidget';
-import DownloadableFilesWidget from './components/Widgets/DownloadableFilesWidget';
+import DownloadableFilesTableWidget from './components/Widgets/DownloadableFilesTableWidget';
 import GeonetworkIdentifiersWidget from './components/Widgets/GeonetworkIdentifiersWidget';
 import MapLayersWidget from './components/Widgets/MapLayersWidget';
+import TabsWidget from './components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget';
 import TaxonomyWidget from './components/Widgets/TaxonomyWidget';
-import DatasetDownloadInformationWidget from './components/Widgets/DatasetDownloadInformationWidget';
+import ProductComponentsWidget from './components/Widgets/ProductComponentsWidget';
 // CUSTOM REDUCERS IMPORT
+import TextLinkWidget from './components/Widgets/TextLinkWidget';
+
 import reducers from './reducers';
 
 const applyConfig = (config) => {
@@ -63,7 +66,7 @@ const applyConfig = (config) => {
     ...config.widgets.widget,
     bounding_widget: BoundingWidget,
     layer_widget: MapLayersWidget,
-    downloadable_files_widget: DownloadableFilesWidget,
+    downloadable_files_widget: DownloadableFilesTableWidget,
     contact_widget: ContactWidget,
     distribution_info_widget: DistributionInfoWidget,
     geonetwork_identifiers_widget: GeonetworkIdentifiersWidget,
@@ -73,6 +76,7 @@ const applyConfig = (config) => {
   config.widgets.id = {
     ...config.widgets.id,
     taxonomy_technical_library_categorization: TaxonomyWidget,
+    product_components: ProductComponentsWidget,
   };
   config.settings = {
     ...config.settings,

package/src/components/Widgets/DownloadableFilesWidget.test.jsx

@@ -1,5 +0,0 @@
-describe('Initial test', () => {
-  it('Initial test', () => {
-    expect(1).toBe(1);
-  });
-});