@eeacms/volto-clms-theme 1.0.102 → 1.0.105

package/CHANGELOG.md

@@ -4,8 +4,51 @@ 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.105](https://github.com/eea/volto-clms-theme/compare/1.0.104...1.0.105)
+
+- File card [`#274`](https://github.com/eea/volto-clms-theme/pull/274)
+- sort items taxonomy items [`#272`](https://github.com/eea/volto-clms-theme/pull/272)
+- Changes in download cart [`#271`](https://github.com/eea/volto-clms-theme/pull/271)
+- related products and datasets added to news and meeting views and login-plone route created [`5704a1a`](https://github.com/eea/volto-clms-theme/commit/5704a1a766148746162b60efaf232ea90dc20cf4)
+- sort items according to the lowercased label and put those with special meaning at the end [`6410abe`](https://github.com/eea/volto-clms-theme/commit/6410abe096f60dcad54dced2026c9df9b7946d68)
+- lint fix [`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 [`a09d24a`](https://github.com/eea/volto-clms-theme/commit/a09d24adbb6fa053fb2a2cc0071506b906593b42)
+- show Collection on download cart, add dropdown selection to it and remove from Type [`3a13417`](https://github.com/eea/volto-clms-theme/commit/3a13417b92c15187fe0e91ca891ccf9f8b0ed3f1)
+- change form label [`c512a2e`](https://github.com/eea/volto-clms-theme/commit/c512a2e1048c977847cedc8379f58f42adebba18)
+
+#### [1.0.104](https://github.com/eea/volto-clms-theme/compare/1.0.103...1.0.104)
+
+> 30 June 2022
+
+- Develop [`#270`](https://github.com/eea/volto-clms-theme/pull/270)
+- use a combined vocabulary of Products and Datasets [`9f9d0c6`](https://github.com/eea/volto-clms-theme/commit/9f9d0c693a1e870614eb8adc07c58657d9d72a06)
+- allow multiple values [`1edb5dd`](https://github.com/eea/volto-clms-theme/commit/1edb5dd166f31ade19bdcae0b7fa92836dbad420)
+- Products Vocabulary for volto-form-block CLMS-747 [`3f48358`](https://github.com/eea/volto-clms-theme/commit/3f48358dab6a3c20a8367bf4be93c94af6c86350)
+- CLMS-935 and input limitation at 8000 [`9971910`](https://github.com/eea/volto-clms-theme/commit/9971910fbe3c291faed7c0c7d458ae34597e7dc4)
+
+#### [1.0.103](https://github.com/eea/volto-clms-theme/compare/1.0.102...1.0.103)
+
+> 29 June 2022
+
+- Develop [`#269`](https://github.com/eea/volto-clms-theme/pull/269)
+- footer button disabled if email is not valid and privacy check is not clicked [`ab6a061`](https://github.com/eea/volto-clms-theme/commit/ab6a06174dd3cd5fb38bd5ae35cc530a7d3baf4e)
+- download table change and home product block fix [`480d83f`](https://github.com/eea/volto-clms-theme/commit/480d83f1772b3cdfe9b2906edfc7505dac420c8e)
+- rename Sort on selection texts CLMS-745 [`2e2f8c6`](https://github.com/eea/volto-clms-theme/commit/2e2f8c60bce7c09844f4e8f17d79f91de47d134b)
+- remove Searched for text CLMS-746 [`ac36c64`](https://github.com/eea/volto-clms-theme/commit/ac36c6461464e52e214989e56c8b7c3b2df83190)
+- remove Search Facets ordering CLMS-743 [`ee9a138`](https://github.com/eea/volto-clms-theme/commit/ee9a138b55517350e5566d54d0946a8ceefd2f90)
+- remove base filter from currentFilters list CLMS-755 [`38c2b8e`](https://github.com/eea/volto-clms-theme/commit/38c2b8e65fed847470aebaed3f2ad141f17e1fd8)
+- Checkbox tree facet selection CLMS-761 [`46e03b5`](https://github.com/eea/volto-clms-theme/commit/46e03b51e193381bf6d899f4a85334801ec969f6)
+- styling differences fixed [`ec7558d`](https://github.com/eea/volto-clms-theme/commit/ec7558d7b7532226722c64da29ec56a1f5da493f)
+- popup unification CLMS-938 [`2757b51`](https://github.com/eea/volto-clms-theme/commit/2757b519d44dc44a8db341c834578438affea124)
+- ESLint fix [`427d34c`](https://github.com/eea/volto-clms-theme/commit/427d34ca20f5a0b8dca5da13a4eb36fdc17dac0f)
+- unautorized page change and log out redirection [`737b53f`](https://github.com/eea/volto-clms-theme/commit/737b53ff09c8ef595c71c92a270b7c6ddc394e55)
+- doubling DownloadTask card CLMS-939 [`86dd1e7`](https://github.com/eea/volto-clms-theme/commit/86dd1e777f927dd33b0835da7483271ab4d0d71b)
+
 #### [1.0.102](https://github.com/eea/volto-clms-theme/compare/1.0.101...1.0.102)
 
+> 23 June 2022
+
+- Develop [`#268`](https://github.com/eea/volto-clms-theme/pull/268)
 - minor improvements to file listing in Event and News Items [`f67f15b`](https://github.com/eea/volto-clms-theme/commit/f67f15b95a96d6104f016ea26a4d2dcfd9ad9610)
 - polish the downloads list: remove the Finished Not OK tasks, and extract the 'no tasks' message to the component. Extract also the filtering function [`d31b94f`](https://github.com/eea/volto-clms-theme/commit/d31b94f20775d1947545f0618b005db594806e95)
 - improve messages [`f7df892`](https://github.com/eea/volto-clms-theme/commit/f7df892e5f1562e55705f3e1a5960d3013e72b28)

package/package.json

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

package/src/components/Blocks/CclHomeProductsBlock/CclHomeProductsBlockView.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isUrl } from '@plone/volto/helpers';
 
 const CclHomeProductsBlockView = (props) => {
   const { data } = props;
@@ -18,12 +19,18 @@ const CclHomeProductsBlockView = (props) => {
           }
           tabIndex={0}
           onClick={() => {
-            window.location.href =
-              product?.linkSelector[0]['@id'] || props.path;
+            window.location.href = isUrl(product?.linkSelector)
+              ? product.linkSelector
+              : isUrl('http://' + product?.linkSelector)
+              ? 'http://' + product.linkSelector
+              : '#';
           }}
           onKeyDown={() => {
-            window.location.href =
-              product?.linkSelector[0]['@id'] || props.path;
+            window.location.href = isUrl(product?.linkSelector)
+              ? product.linkSelector
+              : isUrl('http://' + product?.linkSelector)
+              ? 'http://' + product.linkSelector
+              : '#';
           }}
           id={product.productIcon === 'iconless' ? '' : product.productIcon}
         >

package/src/components/Blocks/CclHomeProductsBlock/HomeProductsSchema.js

@@ -52,12 +52,12 @@ export const ProductSchema = () => ({
       ],
     },
     linkSelector: {
-      title: 'Product link selector',
-      description: 'Select site content or paste external url',
-      widget: 'object_browser',
-      mode: 'link',
+      title: 'Url',
+      description: 'Paste external url',
+      /* mode: 'link',
+      widget: 'url',
       selectedItemAttrs: ['Title', 'Description', '@type', '@id'],
-      allowExternals: true,
+      allowExternals: true, */
     },
   },
   required: [],

package/src/components/Blocks/CustomTemplates/VoltoFormBlock/VocabularyWidget.jsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
+import { useIntl, defineMessages } from 'react-intl';
+import { getVocabulary } from '@plone/volto/actions';
+import { useDispatch, useSelector } from 'react-redux';
+
+const messages = defineMessages({
+  select_a_value: {
+    id: 'form_select_a_value',
+    defaultMessage: 'Select a value',
+  },
+});
+
+const VocabularyWidget = ({
+  name,
+  label,
+  description,
+  value,
+  onChange,
+  disabled,
+  invalid,
+  title,
+  required,
+  vocabulary,
+  isMulti,
+}) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      getVocabulary({
+        vocabNameOrURL: vocabulary,
+        size: -1,
+      }),
+    );
+  }, [dispatch, vocabulary]);
+  const vocabItems = useSelector((state) => state.vocabularies[vocabulary]);
+  return (
+    <SelectWidget
+      id={name}
+      name={name}
+      title={title}
+      required={required}
+      description={description}
+      getVocabulary={() => {}}
+      getVocabularyTokenTitle={() => {}}
+      choices={
+        vocabItems?.loaded && [
+          ...vocabItems.items.map((item) => {
+            return [item.label, item.label];
+          }),
+        ]
+      }
+      value={value}
+      onChange={onChange}
+      placeholder={intl.formatMessage(messages.select_a_value)}
+      aria-label={intl.formatMessage(messages.select_a_value)}
+      classNamePrefix="react-select"
+      isDisabled={disabled}
+      invalid={invalid}
+      isMulti={isMulti}
+      {...(invalid === 'true' ? { className: 'is-invalid' } : {})}
+    />
+  );
+};
+
+export default VocabularyWidget;

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

@@ -11,6 +11,31 @@ import {
   selectFacetValueToQuery,
 } from '@plone/volto/components/manage/Blocks/Search/components/base';
 
+const hasAllChildrensSelected = (value, childrens) => {
+  var result = true;
+  if (!childrens || childrens.length === 0) {
+    result = false;
+  }
+  childrens.forEach((ch) => {
+    if (value.filter((v) => v.value === ch.value).length === 0) {
+      result = false;
+    }
+  });
+  return result;
+};
+
+const checkAllChildren = (value, childrens) => {
+  if (!childrens || childrens.length === 0) {
+    return value;
+  }
+  childrens.forEach((ch) => {
+    if (value.filter((v) => v.value === ch.value).length === 0) {
+      value.push(ch);
+    }
+  });
+  return value;
+};
+
 const CheckboxTreeFacet = (props) => {
   const { facet, choices, onChange, value } = props;
   const facetValue = value;
@@ -62,20 +87,31 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
             onChange={(event, { checked }) => {
               checked
                 ? onChange(id, [
+                    // if this option has children, check them all
+                    ...checkAllChildren(value, option.childrens).map(
+                      (f) => f.value,
+                    ),
+                  ])
+                : onChange(id, [
                     ...value
-                      .filter((f) => f.value !== option.value)
+                      .filter((item) => item.value !== option.value)
+                      .filter(
+                        (item) =>
+                          option.childrens?.length > 0 &&
+                          !option.childrens
+                            .map((ch) => ch.value)
+                            .includes(item.value),
+                      )
                       .map((f) => f.value),
-                    ...(checked ? [option.value] : []),
-                  ])
-                : onChange(
-                    id,
-                    value.filter((item) => item.value !== option.value),
-                  );
+                  ]);
             }}
             label={
               <label htmlFor={`field-${option.value}`}>{option.label}</label>
             }
-            checked={value.some((item) => item.value === option.value)}
+            checked={
+              value.some((item) => item.value === option.value) ||
+              hasAllChildrensSelected(value, option.childrens)
+            }
             value={option.value}
           />
         </List.Header>

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

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

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

@@ -2,11 +2,10 @@ import { Button, Grid, Segment } from 'semantic-ui-react';
 import {
   Facets,
   SearchDetails,
-  SearchInput,
   SortOn,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import { defineMessages, useIntl } from 'react-intl';
-
+import SearchInput from './SearchInput';
 import FilterList from './FilterList';
 import CclFiltersModal from '@eeacms/volto-clms-theme/components/CclFiltersModal/CclFiltersModal';
 import { Icon } from '@plone/volto/components';
@@ -59,6 +58,15 @@ const RightModalFacets = (props) => {
   const { showSearchButton } = data;
   const isLive = !showSearchButton;
   const intl = useIntl();
+  if (querystring?.sortable_indexes?.effective?.title) {
+    querystring.sortable_indexes.effective.title = 'Publication date';
+  }
+  if (querystring?.sortable_indexes?.sortable_title?.title) {
+    querystring.sortable_indexes.sortable_title.title = 'Sort by title';
+  }
+  if (querystring?.sortable_indexes?.modified?.title) {
+    querystring.sortable_indexes.modified.title = 'Last edited';
+  }
   return (
     <Grid className="searchBlock-facets right-column-facets" stackable>
       {data?.headline && (
@@ -104,7 +112,7 @@ const RightModalFacets = (props) => {
           </div>
 
           <div className="search-results-count-sort search-filters">
-            <SearchDetails text={searchedText} total={totalItems} />
+            <SearchDetails total={totalItems} />
             <div className="filters-container">
               {data.showSortOn && (
                 <SortOn

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

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { Button, Input } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import loupeSVG from '@plone/volto/icons/zoom.svg';
+
+const messages = defineMessages({
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+});
+
+const SearchInput = (props) => {
+  const {
+    data,
+    searchText,
+    setSearchText,
+    isLive,
+    onTriggerSearch,
+    ...rest
+  } = props;
+  const intl = useIntl();
+
+  useEffect(() => {
+    onTriggerSearch(rest.searchedText);
+    setSearchText(rest.searchedText);
+  }, [rest.searchedText, onTriggerSearch, setSearchText]);
+
+  return (
+    <div className="search-input">
+      <Input
+        maxLength="200"
+        id={`${props.id}-searchtext`}
+        value={searchText}
+        placeholder={
+          data.searchInputPrompt || intl.formatMessage(messages.search)
+        }
+        fluid
+        onKeyPress={(event) => {
+          if (isLive || event.key === 'Enter') onTriggerSearch(searchText);
+        }}
+        onChange={(event, { value }) => {
+          setSearchText(value);
+          if (isLive) {
+            onTriggerSearch(searchText);
+          }
+        }}
+      />
+      {isLive && (
+        <Button basic icon className="search-input-live-icon-button">
+          <Icon name={loupeSVG} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default SearchInput;

package/src/components/Blocks/customBlocks.js

@@ -59,6 +59,7 @@ import SubscriptionBlockView from '@eeacms/volto-clms-theme/components/Blocks/Cc
 import SubscriptionBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionEdit';
 import containerSVG from '@plone/volto/icons/apps.svg';
 import customIdFieldSchema from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoFormBlock/customIdFieldSchema';
+import VocabularyWidget from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoFormBlock/VocabularyWidget';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import homeBand from '@plone/volto/icons/image-wide.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
@@ -462,6 +463,18 @@ const customBlocks = (config) => ({
   form: {
     ...config.blocks.blocksConfig.form,
     fieldSchema: customIdFieldSchema,
+    additionalFields: [
+      {
+        id: 'product_vocabulary',
+        label: 'Products Vocabulary',
+        component: (props) =>
+          VocabularyWidget({
+            ...props,
+            vocabulary: 'clms.types.ProductsAndDatasetsVocabulary',
+            isMulti: true,
+          }),
+      },
+    ],
   },
 });
 

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -214,6 +214,24 @@ const CLMSCartContent = (props) => {
   };
 
   const TypeNaming = (typeProps) => {
+    const { item } = typeProps;
+    if (item.file_id) {
+      return (
+        <span className={'tag tag-' + item?.type?.toLowerCase()}>
+          {contentOrDash(item.type)}
+        </span>
+      );
+    } 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 : '.';
+    }
+  };
+
+  const CollectionNaming = (typeProps) => {
     const { item } = typeProps;
     if (item.file_id) {
       return (
@@ -237,11 +255,7 @@ const CLMSCartContent = (props) => {
           return {
             key: option.id,
             value: option.id,
-            text:
-              option.name +
-              ((option.collection !== undefined &&
-                ' (' + option.collection + ')') ||
-                ''),
+            text: (option.collection === undefined && '-') || option.collection,
           };
         })}
         onChange={(e, data) => {
@@ -290,6 +304,7 @@ const CLMSCartContent = (props) => {
                   <th>Source</th>
                   <th>Area</th>
                   <th>Type</th>
+                  <th>Collection</th>
                   <th>Format</th>
                   <th>Projection</th>
                   <th></th>
@@ -346,6 +361,9 @@ const CLMSCartContent = (props) => {
                       <td>
                         <TypeNaming item={item} />
                       </td>
+                      <td>
+                        <CollectionNaming item={item} />
+                      </td>
                       <td className="table-td-format">
                         {!item.file_id ? (
                           <Select

package/src/components/CLMSDownloadsView/CLMSDownloadTasks.jsx

@@ -96,7 +96,7 @@ const CLMSDownloadTasks = (props) => {
       : [];
 
     return filtered_tasks.length > 0 ? (
-      <Grid columns={2}>
+      <Grid doubling columns={2}>
         {filtered_tasks.map((item, key) => (
           <Grid.Column key={key}>
             <FileCard

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -227,33 +227,33 @@ const FileCard = (props) => {
                   className="red-loader"
                 />
               ) : (
-                <Popup
-                  content="Remove task"
-                  size="small"
-                  trigger={
-                    <button
-                      onClick={() => {
-                        deleteTaskInProgress(item?.TaskID);
-                      }}
-                      style={{
-                        backgroundColor: 'transparent',
-                        color: 'inherit',
-                        border: 'none',
-                        padding: 0,
-                        font: 'inherit',
-                        cursor: 'pointer',
-                        outline: 'inherit',
-                      }}
-                    >
-                      <Icon
-                        name={removeSVG}
-                        size={30}
-                        color="#e40166"
-                        title={'Remove task'}
-                      />
-                    </button>
-                  }
-                />
+                <span
+                  className="info-icon"
+                  tooltip="Remove task"
+                  direction="up"
+                >
+                  <button
+                    onClick={() => {
+                      deleteTaskInProgress(item?.TaskID);
+                    }}
+                    style={{
+                      backgroundColor: 'transparent',
+                      color: 'inherit',
+                      border: 'none',
+                      padding: 0,
+                      font: 'inherit',
+                      cursor: 'pointer',
+                      outline: 'inherit',
+                    }}
+                  >
+                    <Icon
+                      name={removeSVG}
+                      size={30}
+                      color="#e40166"
+                      title={'Remove task'}
+                    />
+                  </button>
+                </span>
               )}
             </Grid.Column>
           )}

package/src/components/CLMSLoginView/CLMSLogin.css

@@ -0,0 +1,17 @@
+.header-login-link {
+  color: white;
+}
+
+.green-login-link {
+  color: #a0b128bf;
+  cursor: pointer;
+}
+
+.login {
+  margin-top: 3rem;
+}
+
+.login-button {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}

package/src/components/CLMSLoginView/CLMSLogin.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import config from '@plone/volto/registry';
+import { toPublicURL } from '@plone/volto/helpers/Url/Url';
+import './CLMSLogin.css';
+
+/**
+ * Login Modal component doc.
+ * @function CclLoginModal
+ * @example <CclLoginModal />
+ *
+ */
+function CLMSLoginView(props) {
+  const registryRecords = useSelector((state) => state.registry.records);
+  const [loginUrl, setLoginUrl] = React.useState('');
+  const registry_key = config.settings?.registry?.login_url || null;
+
+  useEffect(() => {
+    if (registryRecords && registry_key in registryRecords) {
+      setLoginUrl(
+        registryRecords[registry_key] + '?came_from=' + window.location.href,
+      );
+    }
+  }, [registryRecords, registry_key]);
+
+  return (
+    <>
+      <div className="ccl-container login">
+        <h1 className="page-title">Registration / Login</h1>
+        <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="login-button">
+        <div className="modal-buttons">
+          <a
+            href={toPublicURL(loginUrl) || '#'}
+            className="ccl-button ccl-button-green"
+          >
+            Login using EU Login
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}
+export default CLMSLoginView;