@eeacms/volto-clms-theme 1.0.82 → 1.0.83

package/CHANGELOG.md

@@ -4,8 +4,39 @@ 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.83](https://github.com/eea/volto-clms-theme/compare/1.0.82...1.0.83)
+
+- 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

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "clms.land.copernicus.eu,volto.eea.europa.eu"
         DEPENDENCIES = ""
+        VOLTO = "14.10.0"
     }
 
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.82",
+  "version": "1.0.83",
   "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",

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/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/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);
-  });
-});