@eeacms/volto-clms-theme 1.1.151 → 1.1.152

package/CHANGELOG.md

@@ -4,11 +4,16 @@ 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.151](https://github.com/eea/volto-clms-theme/compare/1.1.150...1.1.151) - 14 May 2024
+### [1.1.152](https://github.com/eea/volto-clms-theme/compare/1.1.151...1.1.152) - 22 May 2024
 
 #### :hammer_and_wrench: Others
 
-- add condition to the chouces[0].key [Ion Lizarazu - [`457a83d`](https://github.com/eea/volto-clms-theme/commit/457a83d26165d7b40c0b1b8e5fc6457ede05232a)]
+- Projection naming popup [Ion Lizarazu - [`ab2414c`](https://github.com/eea/volto-clms-theme/commit/ab2414cb724dff204608edf850c6502b5254ac37)]
+- add request param for selectors in volto-form-block [Ion Lizarazu - [`2b173aa`](https://github.com/eea/volto-clms-theme/commit/2b173aabef528a30e02dc35e553b7bf468166463)]
+- fix TextareaWithRequestData request data [Ion Lizarazu - [`41ddf9e`](https://github.com/eea/volto-clms-theme/commit/41ddf9eb739e2bd560a206f58c8122f84766bdc0)]
+- initial override for volto-form-block SelectWidget [Ion Lizarazu - [`47126ba`](https://github.com/eea/volto-clms-theme/commit/47126ba0d67424e8a7346713286f2d66678727e7)]
+### [1.1.151](https://github.com/eea/volto-clms-theme/compare/1.1.150...1.1.151) - 14 May 2024
+
 ### [1.1.150](https://github.com/eea/volto-clms-theme/compare/1.1.149...1.1.150) - 14 May 2024
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/Blocks/customBlocks.js

@@ -66,6 +66,7 @@ import CclFAQBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclFAQBl
 import CclHelpdeskDocBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclHelpdeskDocBlock/CclHelpdeskDocBlockEdit';
 import CclHelpdeskDocBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclHelpdeskDocBlock/CclHelpdeskDocBlockView';
 import containerSVG from '@plone/volto/icons/apps.svg';
+import { SelectionSchemaExtender } from 'volto-form-block/components/FieldTypeSchemaExtenders';
 import {
   customIdFieldSchema,
   CheckboxSchemaExtender,
@@ -83,6 +84,7 @@ import infoSVG from '@plone/volto/icons/info.svg';
 import ImageWidget from '@eeacms/volto-clms-theme/components/Widgets/ImageWidget';
 import AttachmentWithSizeLimit from '@eeacms/volto-clms-theme/components/Widgets/AttachmentWithSizeLimit';
 import TextareaWithRequestData from '@eeacms/volto-clms-theme/components/Widgets/TextareaWithRequestData';
+import SelectWithRequestWidget from '@eeacms/volto-clms-theme/components/Widgets/SelectWithRequestWidget';
 import TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
 import TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
 import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
@@ -559,6 +561,7 @@ const customBlocks = (config) => ({
     fieldTypeSchemaExtenders: {
       ...config.blocks.blocksConfig.form.fieldTypeSchemaExtenders,
       checkbox_html: CheckboxSchemaExtender,
+      select_with_request_data: SelectionSchemaExtender,
     },
     additionalFields: [
       {
@@ -626,6 +629,11 @@ const customBlocks = (config) => ({
         label: 'CCL Text Area with Request Data',
         component: TextareaWithRequestData,
       },
+      {
+        id: 'select_with_request_data',
+        label: 'CCL List with Request Data',
+        component: SelectWithRequestWidget,
+      },
     ],
   },
   maps: {

package/src/components/CLMSDownloadCartView/Fields/ProjectionNaming.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Select, Loader } from 'semantic-ui-react';
+import { Select, Loader, Popup } from 'semantic-ui-react';
 import { baseSources } from '../../../constants/utmProjections';
 import { getUtm } from './utils';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export const ProjectionNaming = ({ item, cartItems, setCartItems }) => {
   const [loading, setLoading] = useState(true);
@@ -93,18 +94,32 @@ export const ProjectionNaming = ({ item, cartItems, setCartItems }) => {
     loading ? (
       <Loader active inline />
     ) : (
-      <Select
-        placeholder="Select projection"
-        value={
-          item?.projection ??
-          choices.find((ch) => ch.default)?.key ??
-          choices[0]?.key
-        }
-        options={choices}
-        onChange={(e, data) => {
-          setProjectionValue(item?.unique_id, data.value, cartItems);
-        }}
-      />
+      <>
+        <Select
+          placeholder="Select projection"
+          value={
+            item?.projection ??
+            choices.find((ch) => ch.default)?.key ??
+            choices[0]?.key
+          }
+          options={choices}
+          onChange={(e, data) => {
+            setProjectionValue(item?.unique_id, data.value, cartItems);
+          }}
+          style={{ marginRight: '15%' }}
+        />
+        {!choices.find((ch) => ch.default) && choices.length === 4 && (
+          <Popup
+            content="You have selected an area that covers more that one EPSG code. For this we only offer to reproject the data to a EPSG code that includes the whole area selected by you"
+            trigger={
+              <FontAwesomeIcon
+                color="#000000"
+                icon={['fas', 'exclamation-circle']}
+              />
+            }
+          />
+        )}
+      </>
     )
   ) : (
     '-'

package/src/components/CLMSDownloadCartView/cart-table.less

@@ -84,6 +84,12 @@ div.mb-2 {
   text-align: center;
 }
 
+.ui.table td.table-td-projections {
+  display: flex;
+  align-items: center;
+  border-bottom: none;
+}
+
 .cart-modal-trigger {
   border-color: #a0b128;
   color: #a0b128;

package/src/components/Widgets/SelectWithRequestWidget.jsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import SelectWidget from 'volto-form-block/components/Widget/SelectWidget';
+import { useLocation } from 'react-router-dom';
+
+const SelectWithRequestWidget = (props) => {
+  const { onChange, id, choices, required, field_custom_id } = props;
+  const { search } = useLocation();
+  let params = new URLSearchParams(search);
+
+  useEffect(() => {
+    if (choices.find((ch) => ch[0] === params.get(field_custom_id))) {
+      onChange(
+        id,
+        choices.find((ch) => ch[0] === params.get(field_custom_id))[0],
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.get(field_custom_id)]);
+  return (
+    <SelectWidget
+      {...props}
+      defaultValue={
+        choices.find((ch) => ch[0] === params.get(field_custom_id))
+          ? params.get(field_custom_id)
+          : null
+      }
+      noValueOption={!required}
+    />
+  );
+};
+
+export default SelectWithRequestWidget;

package/src/components/Widgets/TextareaWithRequestData.jsx

@@ -7,22 +7,21 @@ import TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidge
 const TextareaWithRequestData = (props) => {
   const { onChange, id } = props;
   const { search } = useLocation();
-
-  const hashMatch = decodeURIComponent(
-    search.includes('text')
-      ? search.match(/.*(\?text=.*)/)[1].replace(/\?text=/, '')
-      : '',
-  );
+  let params = new URLSearchParams(search);
 
   useEffect(() => {
-    if (hashMatch) {
-      onChange(id, hashMatch);
+    if (params.get('text')) {
+      onChange(id, params.get('text'));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hashMatch]);
+  }, [params.get('text')]);
 
   return (
-    <TextareaWidget {...props} defaultValue={hashMatch} formHasErrors={false} />
+    <TextareaWidget
+      {...props}
+      defaultValue={params.get('text')}
+      formHasErrors={false}
+    />
   );
 };
 

package/src/customizations/volto-form-block/components/Field.jsx

@@ -235,6 +235,7 @@ const Field = ({
               isDisabled={disabled}
               formHasErrors={formHasErrors}
               invalid={isInvalid().toString()}
+              choices={[...(input_values?.map((v) => [v, v]) ?? [])]}
               {...(isInvalid() ? { className: 'is-invalid' } : {})}
               {...rest}
             />,

package/src/customizations/volto-form-block/components/Widget/SelectWidget.jsx

@@ -0,0 +1,326 @@
+/**
+ * SelectWidget component.
+ * @module components/manage/Widgets/SelectWidget
+ * added aria- attributes
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { map } from 'lodash';
+import { defineMessages, injectIntl } from 'react-intl';
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { FormFieldWrapper } from '@plone/volto/components';
+import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+
+import {
+  customSelectStyles,
+  DropdownIndicator,
+  ClearIndicator,
+  Option,
+  selectTheme,
+  MenuList,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import {
+  getReactSelectAriaLiveMessages,
+  getReactSelectScreenReaderStatus,
+} from 'volto-form-block/helpers/react-select';
+
+const messages = defineMessages({
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  idTitle: {
+    id: 'Short Name',
+    defaultMessage: 'Short Name',
+  },
+  idDescription: {
+    id: 'Used for programmatic access to the fieldset.',
+    defaultMessage: 'Used for programmatic access to the fieldset.',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  close: {
+    id: 'Close',
+    defaultMessage: 'Close',
+  },
+  choices: {
+    id: 'Choices',
+    defaultMessage: 'Choices',
+  },
+  required: {
+    id: 'Required',
+    defaultMessage: 'Required',
+  },
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_value: {
+    id: 'No value',
+    defaultMessage: 'No value',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+/**
+ * SelectWidget component class.
+ * @function SelectWidget
+ * @returns {string} Markup of the component.
+ */
+class SelectWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    getVocabulary: PropTypes.func.isRequired,
+    getVocabularyTokenTitle: PropTypes.func.isRequired,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.bool,
+      PropTypes.func,
+      PropTypes.array,
+    ]),
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    onClick: PropTypes.func,
+    onEdit: PropTypes.func,
+    onDelete: PropTypes.func,
+    wrapped: PropTypes.bool,
+    noValueOption: PropTypes.bool,
+    customOptionStyling: PropTypes.any,
+    isMulti: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    onChange: () => {},
+    onBlur: () => {},
+    onClick: () => {},
+    onEdit: null,
+    onDelete: null,
+    noValueOption: true,
+    customOptionStyling: null,
+  };
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      (!this.props.choices || this.props.choices?.length === 0) &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.intl.locale,
+      });
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const {
+      id,
+      choices,
+      value,
+      defaultValue,
+      intl,
+      onChange,
+      required,
+      invalid,
+      title,
+    } = this.props;
+    const normalizedValue = normalizeValue(
+      choices,
+      value ?? defaultValue,
+      intl,
+    );
+    // Make sure that both disabled and isDisabled (from the DX layout feat work)
+    const disabled = this.props.disabled || this.props.isDisabled;
+    const Select = this.props.reactSelect.default;
+
+    let options = this.props.vocabBaseUrl
+      ? this.props.choices
+      : [
+          ...map(choices, (option) => ({
+            value: option[0],
+            label:
+              // Fix "None" on the serializer, to remove when fixed in p.restapi
+              option[1] !== 'None' && option[1] ? option[1] : option[0],
+          })),
+          // Only set "no-value" option if there's no default in the field
+          // TODO: also if this.props.defaultValue?
+          ...(this.props.noValueOption && !this.props.default
+            ? [
+                {
+                  label: this.props.intl.formatMessage(messages.no_value),
+                  value: 'no-value',
+                },
+              ]
+            : []),
+        ];
+
+    const isMulti = this.props.isMulti
+      ? this.props.isMulti
+      : id === 'roles' || id === 'groups';
+
+    let attributes = {};
+    if (required) {
+      attributes.required = true;
+      attributes['aria-required'] = true;
+    }
+
+    const isInvalid = invalid === true || invalid === 'true';
+    if (isInvalid) {
+      attributes['aria-invalid'] = true;
+    }
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <Select
+          id={`field-${id}`}
+          key={choices}
+          name={id}
+          isDisabled={disabled}
+          isSearchable={true}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          isMulti={isMulti}
+          options={options}
+          defaultValue={defaultValue}
+          {...attributes}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(options?.length > 25 && {
+              MenuList,
+            }),
+            DropdownIndicator,
+            ClearIndicator,
+            Option: this.props.customOptionStyling || Option,
+          }}
+          value={normalizedValue}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={(selectedOption) => {
+            if (isMulti) {
+              return onChange(
+                id,
+                selectedOption.map((el) => el.value),
+              );
+            }
+            return onChange(
+              id,
+              selectedOption && selectedOption.value !== 'no-value'
+                ? selectedOption.value
+                : undefined,
+            );
+          }}
+          isClearable
+          aria-label={title}
+          ariaLiveMessages={getReactSelectAriaLiveMessages(intl)}
+          screenReaderStatus={getReactSelectScreenReaderStatus(intl)}
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const SelectWidgetComponent = injectIntl(SelectWidget);
+
+export default compose(
+  injectLazyLibs(['reactSelect']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl = !props.choices
+        ? getVocabFromHint(props) ||
+          getVocabFromField(props) ||
+          getVocabFromItems(props)
+        : '';
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[props.intl.locale];
+
+      // If the schema already has the choices in it, then do not try to get the vocab,
+      // even if there is one
+      if (props.choices) {
+        return {
+          choices: props.choices,
+        };
+      } else if (vocabState) {
+        return {
+          vocabBaseUrl,
+          choices: vocabState?.items ?? [],
+        };
+        // There is a moment that vocabState is not there yet, so we need to pass the
+        // vocabBaseUrl to the component.
+      } else if (vocabBaseUrl) {
+        return {
+          vocabBaseUrl,
+        };
+      }
+      return {};
+    },
+    { getVocabulary, getVocabularyTokenTitle },
+  ),
+)(SelectWidgetComponent);