@eeacms/volto-clms-theme 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.1](https://github.com/eea/volto-clms-theme/compare/1.1.0...1.1.1) - 30 May 2023
+
+#### :rocket: New Features
+
+- feat: CLMS-1719 show categorization in technical library cards [Mikel Larreategi - [`e4c9422`](https://github.com/eea/volto-clms-theme/commit/e4c9422561bf0561fc1ff3575305cb14c2e5521a)]
+- feat: CLMS-2129 Historic Downloads view [Mikel Larreategi - [`f6bfcc2`](https://github.com/eea/volto-clms-theme/commit/f6bfcc25689c8f006d42515114a43c5e46692eae)]
+
+#### :hammer_and_wrench: Others
+
+- test [Unai - [`0f12b81`](https://github.com/eea/volto-clms-theme/commit/0f12b81dfeb75c6b9ba010c01c99546fc78380e9)]
+- mail validators unified [Unai - [`cd3c51d`](https://github.com/eea/volto-clms-theme/commit/cd3c51da8b35d6a8173a75dc21f9c775d6f6f4a5)]
+- sitemap indent css [Zaloa Etxaniz - [`fc6f971`](https://github.com/eea/volto-clms-theme/commit/fc6f971b14fb612a3d7c5936a0a22a5b65b221fc)]
 ### [1.1.0](https://github.com/eea/volto-clms-theme/compare/1.0.211...1.1.0) - 29 May 2023
 
 #### :rocket: New Features
@@ -1158,6 +1170,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - related products and datasets added to news and meeting views and login-plone route created [Unai - [`5704a1a`](https://github.com/eea/volto-clms-theme/commit/5704a1a766148746162b60efaf232ea90dc20cf4)]
+- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`46eb694`](https://github.com/eea/volto-clms-theme/commit/46eb69415280a3c982405299135027ae4221426a)]
 - sort items according to the lowercased label and put those with special meaning at the end [Mikel Larreategi - [`6410abe`](https://github.com/eea/volto-clms-theme/commit/6410abe096f60dcad54dced2026c9df9b7946d68)]
 - lint fix [Unai - [`1264a7a`](https://github.com/eea/volto-clms-theme/commit/1264a7adfe8d679fea1bd821ad087add20f4271d)]
 - footer newsletter subscription change, global search maxLength change from 8000 to 200 and /login design change [Unai - [`a09d24a`](https://github.com/eea/volto-clms-theme/commit/a09d24adbb6fa053fb2a2cc0071506b906593b42)]
@@ -1308,6 +1321,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - search block new features [ionlizarazu - [`8e814cb`](https://github.com/eea/volto-clms-theme/commit/8e814cbd359782540c21fe37b37ef146d331f0d6)]
 - language selector cookie management [ionlizarazu - [`1385ac9`](https://github.com/eea/volto-clms-theme/commit/1385ac95795702206d3623ba6e780faa43a89e0a)]
 - toolbar cookie management [ionlizarazu - [`5c23200`](https://github.com/eea/volto-clms-theme/commit/5c23200790b20e1d4f1bc966463c37bf4c808f47)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`0316a0d`](https://github.com/eea/volto-clms-theme/commit/0316a0d8b6fb0fa14af13002415f3c95d9f8ede3)]
 ### [1.0.84](https://github.com/eea/volto-clms-theme/compare/1.0.83...1.0.84) - 18 March 2022
 
 #### :hammer_and_wrench: Others
@@ -2212,11 +2226,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - replace @collective/volto-dropdownmenu with volto-dropdownmenu [ionlizarazu - [`07f004f`](https://github.com/eea/volto-clms-theme/commit/07f004fe0219e403fb51bc045c83d34f3b981f76)]
+- yarn.lock [ionlizarazu - [`fe1ca04`](https://github.com/eea/volto-clms-theme/commit/fe1ca04889d29fe7b653db4c69af2751b84b8a1a)]
 - add NODE_ENV parameter [ionlizarazu - [`101f27c`](https://github.com/eea/volto-clms-theme/commit/101f27c25b8fbd192e1b11865e95cf5ffee08c1b)]
 - upgrade volto-dropdownmenu version [ionlizarazu - [`2081855`](https://github.com/eea/volto-clms-theme/commit/2081855301f4c708776e0dbab39db143cee00dbc)]
 - HomeSearch block missing url behaviour [ionlizarazu - [`d20a378`](https://github.com/eea/volto-clms-theme/commit/d20a378ce3f254b8343692348f314bf281974542)]
 - babel configuration [ionlizarazu - [`203ea2d`](https://github.com/eea/volto-clms-theme/commit/203ea2de07f99ca3403e4ca220ca74d7ce69b61d)]
 - prettier [ionlizarazu - [`e79e26b`](https://github.com/eea/volto-clms-theme/commit/e79e26bf2fa40ba7b4eb53a24dabd87928221c28)]
+- add yarn lock [ionlizarazu - [`e1ab28b`](https://github.com/eea/volto-clms-theme/commit/e1ab28b060d5a74431c368b0de82a68dabce1eab)]
 - Jenkinsfile cypress test [ionlizarazu - [`b385d65`](https://github.com/eea/volto-clms-theme/commit/b385d65986f717c60f8c434a08fc11b829d08eb4)]
 - cypress [ionlizarazu - [`a243cf0`](https://github.com/eea/volto-clms-theme/commit/a243cf0182fa3dd113c16ff495c71e310252d83b)]
 - some fixes [ionlizarazu - [`046279b`](https://github.com/eea/volto-clms-theme/commit/046279b9d05bea8a64eca03eed493e02621534c9)]

package/package.json

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

package/src/components/CLMSDownloadsView/CLMSDownloadTasks.jsx

@@ -13,6 +13,7 @@ import { Grid } from 'semantic-ui-react';
 import { dynamicSort } from '../CclUtils';
 
 const CLMSDownloadTasks = (props) => {
+  const { all = false } = props;
   const dispatch = useDispatch();
   const [queued, setQueued] = useState([]);
   const [taskInProgress, setTaskInProgress] = useState([]);
@@ -92,7 +93,7 @@ const CLMSDownloadTasks = (props) => {
           })
           .sort(dynamicSort('-RegistrationDateTime'))
           .filter((item) => {
-            return filterItemByDate(item);
+            return all || filterItemByDate(item);
           })
       : [];
 

package/src/components/CLMSDownloadsView/CLMSHistoricDownloadsView.jsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { Segment } from 'semantic-ui-react';
+
+import { Forbidden, Unauthorized } from '@plone/volto/components';
+import { Helmet } from '@plone/volto/helpers';
+import { helmetTitle } from '@eeacms/volto-clms-theme/components/CclUtils';
+import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
+
+import {
+  getDatasetsByUid,
+  getExtraBreadcrumbItems,
+  getDownloadtool,
+} from '../../actions';
+import CLMSDownloadTask from './CLMSDownloadTasks';
+
+/**
+ * CLMSDownloadsView.
+ * @module components/CLMSDownloadsView/CLMSDownloadsView
+ */
+
+const useInterval = (f, delay) => {
+  const [timer, setTimer] = useState(undefined);
+  const start = () => {
+    if (timer) return;
+    setTimer(setInterval(f, delay));
+  };
+  const stop = () => {
+    if (!timer) return;
+    setTimer(clearInterval(timer));
+  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => stop, []);
+  return start;
+};
+
+const CLMSDownloadsView = (props) => {
+  const dispatch = useDispatch();
+  const downloadtool = useSelector((state) => state.downloadtool);
+  const datasetsByUid = useSelector((state) => state.datasetsByUid);
+  const content = useSelector((state) => state.content.data);
+  /* DISPATCH THE getDownloadtool ACTION EVERY 60 SECONDS */
+  const start = useInterval((_) => dispatch(getDownloadtool()), 60000);
+  const { isLoggedIn } = useCartState();
+
+  const { formatMessage } = useIntl();
+  const messages = defineMessages({
+    CartDownloads: {
+      id: 'Downloads',
+      defaultMessage: 'Downloads',
+    },
+  });
+
+  useEffect(() => {
+    dispatch(
+      getExtraBreadcrumbItems([
+        {
+          title: formatMessage(messages.CartDownloads),
+          pathname: props.location.pathname,
+        },
+      ]),
+    );
+    // returned function will be called on component unmount
+    return () => {
+      dispatch(getExtraBreadcrumbItems([]));
+    };
+  }, [
+    dispatch,
+    formatMessage,
+    messages.CartDownloads,
+    props.location.pathname,
+  ]);
+
+  function getUIDList(download_data) {
+    let uidList = [];
+    let data_keys = Object.keys(download_data);
+    if (data_keys?.length !== 0) {
+      uidList = [
+        ...new Set(
+          data_keys
+            .map((taskID) =>
+              download_data[taskID].Datasets.map(
+                (dataset) => dataset.DatasetID,
+              ),
+            )
+            .reduce((elem1, elem2) => elem1.concat(elem2)),
+        ),
+      ];
+    }
+    return uidList;
+  }
+
+  useEffect(() => {
+    if (
+      downloadtool?.download_queued &&
+      downloadtool?.download_in_progress &&
+      downloadtool?.download_finished_ok &&
+      downloadtool?.download_finished_nok &&
+      downloadtool?.download_rejected &&
+      downloadtool?.download_cancelled
+    ) {
+      let queuedUidsList = getUIDList(downloadtool.download_queued);
+      let downloadInProgressUidsList = getUIDList(
+        downloadtool?.download_in_progress,
+      );
+      let finishedOKUidsList = getUIDList(downloadtool?.download_finished_ok);
+      let finishedNOKUidsList = getUIDList(downloadtool?.download_finished_nok);
+      let rejectedUidsList = getUIDList(downloadtool?.download_rejected);
+      let cancelledUidsList = getUIDList(downloadtool?.download_cancelled);
+      let uidsList = [
+        ...new Set(
+          rejectedUidsList.concat(
+            finishedNOKUidsList.concat(
+              finishedOKUidsList.concat(
+                downloadInProgressUidsList.concat(
+                  queuedUidsList.concat(cancelledUidsList),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ];
+      if (uidsList.length > 0) {
+        dispatch(getDatasetsByUid(uidsList));
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [downloadtool, dispatch]);
+
+  useEffect(() => {
+    if (downloadtool.delete_download_in_progress) {
+      dispatch(getDownloadtool());
+      start();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, downloadtool.delete_download_in_progress]);
+
+  return (
+    <>
+      <Helmet
+        title={helmetTitle(formatMessage(messages.CartDownloads), content)}
+      />
+      <div className="ui container">
+        {!isLoggedIn && (
+          <>
+            {props.token ? (
+              <Forbidden
+                pathname={props.pathname}
+                staticContext={props.staticContext}
+              />
+            ) : (
+              <Unauthorized
+                pathname={props.pathname}
+                staticContext={props.staticContext}
+              />
+            )}
+          </>
+        )}
+        {isLoggedIn && (
+          <>
+            <h1 className="page-title">
+              {formatMessage(messages.CartDownloads)}
+            </h1>
+            <div className="ccl-container">
+              <Segment
+                basic
+                loading={downloadtool.loading || datasetsByUid.loading}
+              >
+                <CLMSDownloadTask all={true} />
+              </Segment>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CLMSDownloadsView;

package/src/components/CLMSSubscriptionView/SubscriptionView.jsx

@@ -76,6 +76,10 @@ const messages = defineMessages({
     defaultMessage:
       'You must agree privacy policy and enter a valid email address',
   },
+  invalid_mail: {
+    id: 'The entered mail address is not valid',
+    defaultMessage: 'The entered email address is not valid',
+  },
   subscribe: {
     id: 'Subscribe',
     defaultMessage: 'Subscribe',
@@ -141,6 +145,19 @@ class SubscriptionView extends Component {
     this.setState({
       value: event.target.value,
     });
+    const input =
+      typeof window !== 'undefined' && document.getElementById('email') !== null
+        ? document.getElementById('email')
+        : '';
+    if (!validator.isEmail(event.target.value)) {
+      input.setCustomValidity(
+        this.props.intl.formatMessage(messages.invalid_mail),
+      );
+      input.reportValidity();
+    } else {
+      input.setCustomValidity('');
+      input.reportValidity();
+    }
   }
 
   emptyFieldErrorToast = () => {

package/src/components/CclCard/CclCard.jsx

@@ -3,7 +3,6 @@ import './cards.less';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import React from 'react';
 // import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 import { When } from '@eeacms/volto-clms-theme/components/CclWhen/CclWhen';
 import { Label } from 'semantic-ui-react';
@@ -14,6 +13,9 @@ import { Icon as VoltoIcon } from '@plone/volto/components';
 
 import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
 import { cclDateFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getVocabulary } from '@plone/volto/actions';
 
 const CardImage = ({ card, size = 'preview', isCustomCard }) => {
   return card?.image_field ? (
@@ -49,6 +51,49 @@ const CardLink = ({ url, children, className, condition = true }) => {
 };
 
 const DocCard = ({ card, url, showEditor, children }) => {
+  const dispatch = useDispatch();
+  const CATEGORIZATION_VOCABULARY_NAME =
+    'collective.taxonomy.technical_library_categorization';
+  useEffect(() => {
+    if (card?.taxonomy_technical_library_categorization.length > 0) {
+      dispatch(
+        getVocabulary({ vocabNameOrURL: CATEGORIZATION_VOCABULARY_NAME }),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [card, dispatch]);
+
+  const vocabularies_state = useSelector(
+    (state) => state.vocabularies[CATEGORIZATION_VOCABULARY_NAME],
+  );
+
+  const vocabItems = vocabularies_state?.loaded
+    ? vocabularies_state?.items
+    : [];
+
+  const vocabItemsDict = vocabItems.reduce((obj, item) => {
+    return {
+      ...obj,
+      [item['value']]: item['label'].replace(/^[0-9][0-9]#/, ''),
+    };
+  }, {});
+
+  const TechnicalLibraryCategorization = ({ categorization }) => {
+    return vocabularies_state?.loaded && categorization ? (
+      <>
+        {categorization
+          .map((item) => {
+            return vocabItemsDict[item].split(' » ').length > 1
+              ? vocabItemsDict[item].split(' » ').slice(-1)
+              : null;
+          })
+          .map((item) => {
+            return item && <Label>{item}</Label>;
+          })}
+      </>
+    ) : null;
+  };
+
   return (
     <>
       <div className="card-doc-header">
@@ -59,7 +104,7 @@ const DocCard = ({ card, url, showEditor, children }) => {
             <Link to={url}>{card?.title}</Link>
           )}
           {card?.Type === 'TechnicalLibrary' && showEditor && (
-            <Link to={`${url}/edit`} class="technical-library-edit-link">
+            <Link to={`${url}/edit`} className="technical-library-edit-link">
               <VoltoIcon
                 name={penSVG}
                 size="12px"
@@ -74,8 +119,21 @@ const DocCard = ({ card, url, showEditor, children }) => {
         )}
       </div>
       {card?.Type === 'TechnicalLibrary' &&
-        (card.publication_date || card.version) && (
+        (card.publication_date ||
+          card.version ||
+          card.taxonomy_technical_library_categorization) && (
           <div className="card-doc-extrametadata">
+            {card?.Type === 'TechnicalLibrary' &&
+              vocabItemsDict &&
+              card.taxonomy_technical_library_categorization && (
+                <TechnicalLibraryCategorization
+                  categorization={
+                    card.taxonomy_technical_library_categorization
+                  }
+                />
+              )}{' '}
+            <br />
+            <br />
             {card?.Type === 'TechnicalLibrary' && card.publication_date && (
               <>
                 <strong>Publication date: </strong>

package/src/components/CclCard/CclCard.test.jsx

@@ -2,8 +2,32 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import CclCard from './CclCard';
 import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+const mockStore = configureStore();
 
 describe('CclCard', () => {
+  const store = mockStore({
+    content: {
+      create: {},
+      data: {},
+    },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    users: {
+      user: {
+        roles: ['Manager'],
+      },
+    },
+    vocabularies: {
+      'Product manuals': ['Technical guidelines', 'User manuals'],
+      'Product methodological': ['Metodology', 'Description'],
+    },
+    taxonomy_technical_library_categorization: ['1', '2', '3'],
+  });
   const card = {
     title: 'title example',
     description: 'description example',
@@ -28,6 +52,7 @@ describe('CclCard', () => {
       download: 'false',
       alt: 'Placeholder',
     },
+    taxonomy_technical_library_categorization: ['1', '2', '3'],
     file: {
       'content-type': 'text/html',
       src:
@@ -40,11 +65,14 @@ describe('CclCard', () => {
   it('Check doc card', () => {
     const cardtest = renderer
       .create(
-        <MemoryRouter>
-          <CclCard type="doc" card={card}>
-            <p>Doc card test</p>
-          </CclCard>
-        </MemoryRouter>,
+        <Provider store={store}>
+          <MemoryRouter>
+            <CclCard type="doc" card={card}>
+              <p>Doc card test</p>
+            </CclCard>
+          </MemoryRouter>
+          ,
+        </Provider>,
       )
       .toJSON();
     expect(cardtest).toBeDefined();

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -93,6 +93,10 @@ const messages = defineMessages({
     id: 'Success',
     defaultMessage: 'Success',
   },
+  invalid_mail: {
+    id: 'The entered mail address is not valid',
+    defaultMessage: 'The entered email address is not valid',
+  },
   agreePrivacyPolicyCheck: {
     id: 'agreePrivacyPolicyCheck',
     defaultMessage: 'You have to agree to the privacy policy',
@@ -150,6 +154,19 @@ class Footer extends Component {
     this.setState({
       value: event.target.value,
     });
+    const input =
+      typeof window !== 'undefined' && document.getElementById('email') !== null
+        ? document.getElementById('email')
+        : '';
+    if (!validator.isEmail(event.target.value)) {
+      input.setCustomValidity(
+        this.props.intl.formatMessage(messages.invalid_mail),
+      );
+      input.reportValidity();
+    } else {
+      input.setCustomValidity('');
+      input.reportValidity();
+    }
   }
 
   emptyFieldErrorToast = () => {
@@ -359,6 +376,7 @@ class Footer extends Component {
                     maxLength="8000"
                     placeholder="Enter an email adress"
                     type="text"
+                    id="email"
                     value={this.state.value}
                     onChange={this.handleChange}
                   />

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -73,6 +73,14 @@ const HeaderDropdown = ({ user }) => {
             Downloads
           </Link>
         </li>
+        <li>
+          <Link
+            to={`/${intl.locale}/all-downloads`}
+            className="header-login-link"
+          >
+            Historic Downloads
+          </Link>
+        </li>
         <li>
           <Link to="/logout" className="header-login-link">
             <FormattedMessage id="logout" defaultMessage="Logout" />

package/src/index.js

@@ -10,6 +10,7 @@ import CLMSDatasetDetailView from '@eeacms/volto-clms-theme/components/CLMSDatas
 import CLMSDownloadCartView from './components/CLMSDownloadCartView/CLMSDownloadCartView';
 import CLMSDownloadableFileView from '@eeacms/volto-clms-theme/components/CLMSDownloadableFileView/CLMSDownloadableFileView';
 import CLMSDownloadsView from './components/CLMSDownloadsView/CLMSDownloadsView';
+import CLMSHistoricDownloadsView from './components/CLMSDownloadsView/CLMSHistoricDownloadsView';
 import CLMSMapViewerView from './components/CLMSMapViewerView/CLMSMapViewerView';
 import CLMSMeetingEmailView from '@eeacms/volto-clms-theme/components/CLMSMeetingView/CLMSMeetingEmailView';
 import CLMSMeetingEmailsView from '@eeacms/volto-clms-theme/components/CLMSMeetingView/CLMSMeetingEmailsView';
@@ -128,6 +129,7 @@ const applyConfig = (config) => {
       '/download-by-area',
       '/cart',
       '/cart-downloads',
+      '/all-downloads',
       '/newsletter-notification-subscription',
       '/newsletter-notification-unsubscription',
     ],
@@ -263,6 +265,10 @@ const applyConfig = (config) => {
       path: '/**/cart-downloads',
       component: CLMSDownloadsView,
     },
+    {
+      path: '/**/all-downloads',
+      component: CLMSHistoricDownloadsView,
+    },
     {
       path: `/(${config.settings.supportedLanguages.join('|')})/sitemap`,
       component: Sitemap,

package/theme/clms/css/styles.less

@@ -1249,19 +1249,11 @@ div#page-document h1.documentFirstHeading {
 }
 
 /*Sitemap*/
-#page-sitemap ul li {
-  margin-left: 2rem;
-  line-height: 2.25rem;
-}
 
-#page-sitemap ul > li {
-  margin-bottom: 1rem;
-}
 
-#page-sitemap ul > li > ul > li {
-  margin-bottom: 0;
+.section-portal-sitemap #page-document ul > ul {
+  margin-left: 35px;
 }
-
 .slate-editor ul > ul {
   margin-left: 35px;
 }