@eeacms/volto-clms-theme 1.0.103 → 1.0.104

package/CHANGELOG.md

@@ -4,8 +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.0.104](https://github.com/eea/volto-clms-theme/compare/1.0.103...1.0.104)
+
+- 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.104",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

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/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="8000"
+        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,
+          }),
+      },
+    ],
   },
 });