@eeacms/volto-clms-theme 1.0.103 → 1.0.106

package/CHANGELOG.md

@@ -4,8 +4,46 @@ 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.106](https://github.com/eea/volto-clms-theme/compare/1.0.105...1.0.106)
+
+- new field types for form [`a452429`](https://github.com/eea/volto-clms-theme/commit/a452429eff799806d58e05e3e4164bc885d6eeb9)
+- handle SelectWidget choices until the vocabulary is loaded [`0614fb5`](https://github.com/eea/volto-clms-theme/commit/0614fb584f52571d15e37fbe921e0694594a01f4)
+- EmailWidget fix and ImageWidget created for form block [`fc1d16b`](https://github.com/eea/volto-clms-theme/commit/fc1d16baf2466dec09d835147fc3df839811e409)
+- lint fix [`af5f960`](https://github.com/eea/volto-clms-theme/commit/af5f9605ec147cb010245a58696087abaed55c35)
+- EmailWidget override for correct anguage and size limitation [`8a6c253`](https://github.com/eea/volto-clms-theme/commit/8a6c253f590fcf753d1a274e8ab7767f366d8c1e)
+- number of current filters [`195cc43`](https://github.com/eea/volto-clms-theme/commit/195cc43d351d0e9793a0f462ecf8bdf9433a1def)
+- subscription modal block [`30db876`](https://github.com/eea/volto-clms-theme/commit/30db876826dd53db6bbb11507de11af10a71a4eb)
+
+#### [1.0.105](https://github.com/eea/volto-clms-theme/compare/1.0.104...1.0.105)
+
+> 11 July 2022
+
+- Develop [`#275`](https://github.com/eea/volto-clms-theme/pull/275)
+- 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)

package/package.json

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

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionEdit.jsx

@@ -1,4 +1,4 @@
-import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import { SidebarPortal } from '@plone/volto/components';
 import { SubscriptionSchema } from './schema';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
@@ -16,7 +16,7 @@ const SubscriptionBlockEdit = (props) => {
           aria-hidden="true"
         />
       </div>
-      <SubscriptionView type={data.type || 'events'} />
+      <CclButton mode={'filled'}>{data.title || 'Text example...'}</CclButton>
       <SidebarPortal selected={selected}>
         <InlineForm
           schema={SubscriptionSchema()}

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionView.jsx

@@ -1,9 +1,20 @@
 import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 
 const SubscriptionBlockView = (props) => {
   const { data } = props;
 
-  return <SubscriptionView type={data.type || 'events'} />;
+  return (
+    <CclModal
+      trigger={
+        <CclButton mode={'filled'}>{data.title || 'Text example...'}</CclButton>
+      }
+      size="small"
+    >
+      <SubscriptionView type={data.type || 'events'} />
+    </CclModal>
+  );
 };
 
 export default SubscriptionBlockView;

package/src/components/Blocks/CclSubscriptionBlock/schema.js

@@ -4,7 +4,7 @@ export const SubscriptionSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['type'],
+      fields: ['type', 'title'],
     },
   ],
   properties: {
@@ -16,6 +16,10 @@ export const SubscriptionSchema = () => ({
         ['newsletter', 'newsletter'],
       ],
     },
+    title: {
+      title: 'Title',
+      type: 'string',
+    },
   },
   required: ['product'],
 });

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

@@ -0,0 +1,69 @@
+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/FilterList.jsx

@@ -25,7 +25,7 @@ const FilterList = (props) => {
         (v) =>
           v[1] &&
           baseFacets.length > 0 &&
-          !baseFacets.map((bf) => bf.field?.value).includes(v[0]),
+          baseFacets.map((bf) => bf.field?.value).includes(v[0]),
       ),
   );
 

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';

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,11 +59,13 @@ 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';
 import navSVG from '@plone/volto/icons/nav.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
+import ImageWidget from '@eeacms/volto-clms-theme/components/Widgets/ImageWidget';
 
 export const customGroupBlocksOrder = [
   {
@@ -462,6 +464,43 @@ 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,
+          }),
+      },
+      {
+        id: 'topic_vocabulary',
+        label: 'Topics Vocabulary',
+        component: (props) =>
+          VocabularyWidget({
+            ...props,
+            vocabulary: 'clms.types.TopicsVocabulary',
+            isMulti: true,
+          }),
+      },
+      {
+        id: 'spatial_coverage_vocabulary',
+        label: 'Spatial Coverage Vocabulary',
+        component: (props) =>
+          VocabularyWidget({
+            ...props,
+            vocabulary: 'clms.types.UseCaseSpatialCoverageVocabulary',
+            isMulti: true,
+          }),
+      },
+      {
+        id: 'image_field_widget',
+        label: 'Image Field Widget',
+        component: ImageWidget,
+      },
+    ],
   },
 });
 

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

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -1,7 +1,7 @@
 import './meetingstyles.less';
 
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Header, Image, Message, Segment } from 'semantic-ui-react';
+import { Header, Image, Message, Segment, Grid } from 'semantic-ui-react';
 import { Icon, Toast } from '@plone/volto/components';
 import {
   Recurrence,
@@ -20,6 +20,9 @@ import { postMeetingRegister } from '../../actions';
 import { toast } from 'react-toastify';
 import { LightGalleryListing } from './CclLightGallery';
 import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards';
+import config from '@plone/volto/registry';
+import AnimateHeight from 'react-animate-height';
+import { Accordion } from 'semantic-ui-react';
 
 export const CLMSMeetingView = (props) => {
   const { content, intl } = props;
@@ -182,6 +185,36 @@ export const CLMSMeetingView = (props) => {
       intl.formatMessage(messages.no_fullname_customfield),
     );
 
+  const [activeIndex, setActiveIndex] = React.useState([99]);
+
+  const handleClick = ({ index }) => {
+    const newIndex =
+      activeIndex.indexOf(index) === -1
+        ? [...activeIndex, index]
+        : activeIndex.filter((item) => item !== index);
+
+    setActiveIndex(newIndex);
+  };
+
+  const [activeDatasetIndex, setActiveDatasetIndex] = React.useState([99]);
+
+  const handleDatasetClick = ({ datasetindex }) => {
+    const newDatasetIndex =
+      activeDatasetIndex.indexOf(datasetindex) === -1
+        ? [...activeDatasetIndex, datasetindex]
+        : activeDatasetIndex.filter((item) => item !== datasetindex);
+
+    setActiveDatasetIndex(newDatasetIndex);
+  };
+
+  const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
+
+  function iconName(iconData, iTitleIcons) {
+    return iconData?.right_arrows
+      ? iTitleIcons.rightPosition
+      : iTitleIcons.leftPosition;
+  }
+
   return (
     <div className="ccl-container">
       <h1 className="page-title">{content.title}</h1>
@@ -399,6 +432,121 @@ export const CLMSMeetingView = (props) => {
             linkHref={`${files['@id']}/@@download/file`}
           />
         )}
+        <div className="dataset-info-documents dropdown">
+          <div className="accordion-block"></div>
+          {content?.products?.length > 0 && (
+            <Accordion fluid styled>
+              <Accordion.Title
+                as={'h2'}
+                onClick={() => handleClick({ index: 0 })}
+                className={'accordion-title align-arrow-right'}
+              >
+                {activeIndex.includes(0) ? (
+                  <Icon
+                    name={iconName(content, titleIcons.opened)}
+                    size="24px"
+                  />
+                ) : (
+                  <Icon
+                    name={iconName(content, titleIcons.closed)}
+                    size="24px"
+                  />
+                )}
+                <span>Related products</span>
+              </Accordion.Title>
+              <Accordion.Content active={activeIndex.includes(0)}>
+                <AnimateHeight animateOpacity duration={500} height={'auto'}>
+                  <ul>
+                    {content.products.map((product, key) => (
+                      <li key={key}>
+                        <Grid columns={2}>
+                          <Grid.Column width={2}>
+                            {product.image_field && (
+                              <img
+                                src={
+                                  product.image_field
+                                    ? `${product['@id']}/@@images/image`
+                                    : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+                                }
+                                alt={
+                                  product.image_field
+                                    ? product.image?.filename
+                                    : 'Placeholder'
+                                }
+                              />
+                            )}
+                          </Grid.Column>
+                          <Grid.Column width={10}>
+                            <a href={product['@id']}>
+                              <strong>{product.title}</strong>
+                            </a>
+                            <p>{product.description}</p>
+                          </Grid.Column>
+                        </Grid>
+                      </li>
+                    ))}
+                  </ul>
+                </AnimateHeight>
+              </Accordion.Content>
+            </Accordion>
+          )}
+          {content?.datasets?.length > 0 && (
+            <Accordion fluid styled>
+              <Accordion.Title
+                as={'h2'}
+                onClick={() => handleDatasetClick({ datasetindex: 0 })}
+                className={'accordion-title align-arrow-right'}
+              >
+                {activeDatasetIndex.includes(0) ? (
+                  <Icon
+                    name={iconName(content, titleIcons.opened)}
+                    size="24px"
+                  />
+                ) : (
+                  <Icon
+                    name={iconName(content, titleIcons.closed)}
+                    size="24px"
+                  />
+                )}
+                <span>Related datasets</span>
+              </Accordion.Title>
+              <Accordion.Content active={activeDatasetIndex.includes(0)}>
+                <AnimateHeight animateOpacity duration={500} height={'auto'}>
+                  <ul>
+                    {content.datasets.map((dataset, key) => (
+                      <li key={key}>
+                        <Grid columns={2}>
+                          <Grid.Column width={2}>
+                            {dataset.image_field && (
+                              <img
+                                src={
+                                  dataset.image_field
+                                    ? `${dataset['@id']}/@@images/image`
+                                    : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+                                }
+                                alt={
+                                  dataset.image_field
+                                    ? dataset.image?.filename
+                                    : 'Placeholder'
+                                }
+                              />
+                            )}
+                          </Grid.Column>
+                          <Grid.Column width={10}>
+                            <a href={dataset['@id']}>
+                              <strong>{dataset.title}</strong>
+                            </a>
+                            <p>{dataset.description}</p>
+                          </Grid.Column>
+                        </Grid>
+                      </li>
+                    ))}
+                  </ul>
+                </AnimateHeight>
+              </Accordion.Content>
+            </Accordion>
+          )}
+        </div>
       </Segment>
     </div>
   );