@eeacms/volto-clms-theme 1.0.183 → 1.0.185

package/CHANGELOG.md

@@ -4,6 +4,24 @@ 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.185](https://github.com/eea/volto-clms-theme/compare/1.0.184...1.0.185) - 13 March 2023
+
+#### :hammer_and_wrench: Others
+
+- comment MenuList [Unai - [`b8dfeff`](https://github.com/eea/volto-clms-theme/commit/b8dfeff240130c803fd6c33dd6460cd8252f90af)]
+- volto 16 array widget [Unai - [`a29aab8`](https://github.com/eea/volto-clms-theme/commit/a29aab86c035f352e32ca1c20edd926591566094)]
+### [1.0.184](https://github.com/eea/volto-clms-theme/compare/1.0.183...1.0.184) - 10 March 2023
+
+#### :rocket: New Features
+
+- feat: clms-1924 hide validation status when it is empty [Mikel Larreategi - [`b0326a0`](https://github.com/eea/volto-clms-theme/commit/b0326a07cc12636ad36ccc9335c4e5cb8aff670b)]
+
+#### :hammer_and_wrench: Others
+
+- subscribe button style fix [Unai - [`af24b06`](https://github.com/eea/volto-clms-theme/commit/af24b06869bb13350b91d7f419bdff99861fee5d)]
+- change date format in Vacancy and Tenders [Mikel Larreategi - [`48ef2c0`](https://github.com/eea/volto-clms-theme/commit/48ef2c0c850c8a9d73c50abd082b9a17d59993f7)]
+- breadcrumbs margin fix [Unai - [`008fbce`](https://github.com/eea/volto-clms-theme/commit/008fbcedf5f36883b73de5efb90ebd68dd3da818)]
+- dateformat utils fix with null dates [Unai - [`bcd620e`](https://github.com/eea/volto-clms-theme/commit/bcd620e9621cec5ccecdd1eb4b87f76b5e620509)]
 ### [1.0.183](https://github.com/eea/volto-clms-theme/compare/1.0.182...1.0.183) - 8 March 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -60,13 +60,15 @@ const DataSetInfoContent = (props) => {
   }
   return (
     <div>
-      {validation?.data && validation?.data !== '<p><br/></p>' && (
-        <CclCitation
-          title="Validation status"
-          marginBottom={true}
-          children={<StringToHTML string={validation.data} />}
-        ></CclCitation>
-      )}
+      {validation?.data &&
+        validation?.data !== '<p><br/></p>' &&
+        validation?.data !== '<p></p>' && (
+          <CclCitation
+            title="Validation status"
+            marginBottom={true}
+            children={<StringToHTML string={validation.data} />}
+          ></CclCitation>
+        )}
       <CclInfoContainer>
         {props?.description ? (
           <CclInfoDescription

package/src/components/CclUtils/dateFormats.js

@@ -18,7 +18,7 @@ export const cclDateTimeFormat = (date) => {
 
 export const workOpportunitiesCclDateTimeFormat = (date, lang) => {
   const internal = getInternalValue(date, lang);
-  return internal.format('DD.MM.YYYY hh.mm A');
+  return internal?.format('DD.MM.YYYY HH.mm');
 };
 
 export const cclDateFormat = (date) => {

package/src/customizations/volto/components/manage/Widgets/ArrayWidget.jsx

@@ -0,0 +1,424 @@
+/**
+ * ArrayWidget component.
+ * @module components/manage/Widgets/ArrayWidget
+ */
+
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { find, isObject } from 'lodash';
+
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { getVocabulary } from '@plone/volto/actions';
+
+import {
+  Option,
+  DropdownIndicator,
+  ClearIndicator,
+  selectTheme,
+  customSelectStyles,
+  // MenuList,
+  SortableMultiValue,
+  SortableMultiValueLabel,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+const messages = defineMessages({
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_value: {
+    id: 'No value',
+    defaultMessage: 'No value',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+function arrayMove(array, from, to) {
+  const slicedArray = array.slice();
+  slicedArray.splice(
+    to < 0 ? array.length + to : to,
+    0,
+    slicedArray.splice(from, 1)[0],
+  );
+  return slicedArray;
+}
+
+function normalizeArrayValue(choices, value) {
+  if (!value || !Array.isArray(value)) return [];
+  if (value.length === 0) return value;
+
+  if (typeof value[0] === 'string') {
+    // raw value like ['foo', 'bar']
+    return value.map((v) => {
+      return {
+        label: find(choices, (c) => c.value === v)?.label || v,
+        value: v,
+      };
+    });
+  }
+
+  if (
+    isObject(value[0]) &&
+    Object.keys(value[0]).includes('token') // Array of objects, w/ label+value
+  ) {
+    return value
+      .map((v) => {
+        const item = find(choices, (c) => c.value === v.token);
+        return item
+          ? {
+              label: item.label || item.title || item.token,
+              value: v.token,
+            }
+          : {
+              // avoid a crash if choices doesn't include this item
+              label: v.label,
+              value: v.token,
+            };
+      })
+      .filter((f) => !!f);
+  }
+
+  return [];
+}
+
+function normalizeChoices(choices) {
+  if (Array.isArray(choices) && choices.length && Array.isArray(choices[0])) {
+    return choices.map((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],
+    }));
+  }
+
+  return choices;
+}
+
+/**
+ * Compare values and return true if equal.
+ * Consider upper and lower case.
+ * @method compareOption
+ * @param {*} inputValue
+ * @param {*} option
+ * @param {*} accessors
+ * @returns {boolean}
+ */
+const compareOption = (inputValue = '', option, accessors) => {
+  const candidate = String(inputValue);
+  const optionValue = String(accessors.getOptionValue(option));
+  const optionLabel = String(accessors.getOptionLabel(option));
+  return optionValue === candidate || optionLabel === candidate;
+};
+
+/**
+ * ArrayWidget component class.
+ * @class ArrayWidget
+ * @extends Component
+ *
+ * A createable select array widget will be rendered if the named vocabulary is
+ * in the widget definition (hint) like:
+ *
+ * ```
+ * list_field_voc_unconstrained = schema.List(
+ *     title=u"List field with values from vocabulary but not constrained to them.",
+ *     description=u"zope.schema.List",
+ *     value_type=schema.TextLine(),
+ *     required=False,
+ *     missing_value=[],
+ * )
+ * directives.widget(
+ *     "list_field_voc_unconstrained",
+ *     AjaxSelectFieldWidget,
+ *     vocabulary="plone.app.vocabularies.PortalTypes",
+ * )
+ * ```
+ */
+class ArrayWidget 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,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    vocabLoading: PropTypes.bool,
+    vocabLoaded: PropTypes.bool,
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    ),
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    wrapped: PropTypes.bool,
+    creatable: PropTypes.bool, //if widget has no vocab and you want to be creatable
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    creatable: false,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs Actions
+   */
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      !this.props.items?.choices?.length &&
+      !this.props.choices?.length &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    if (
+      !this.props.items?.choices?.length &&
+      !this.props.choices?.length &&
+      this.props.vocabLoading === undefined &&
+      !this.props.vocabLoaded &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  /**
+   * Handle the field change, store it in the local state and back to simple
+   * array of tokens for correct serialization
+   * @method handleChange
+   * @param {array} selectedOption The selected options (already aggregated).
+   * @returns {undefined}
+   */
+  handleChange(selectedOption) {
+    this.props.onChange(
+      this.props.id,
+      selectedOption ? selectedOption.map((item) => item.value) : null,
+    );
+  }
+
+  onSortEnd = (selectedOption, { oldIndex, newIndex }) => {
+    const newValue = arrayMove(selectedOption, oldIndex, newIndex);
+
+    this.handleChange(newValue);
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const choices = normalizeChoices(this.props?.choices || []);
+    const selectedOption = normalizeArrayValue(choices, this.props.value);
+
+    const CreatableSelect = this.props.reactSelectCreateable.default;
+    const { SortableContainer } = this.props.reactSortableHOC;
+    const Select = this.props.reactSelect.default;
+    const SortableSelect =
+      // It will be only createable if the named vocabulary is in the widget definition
+      // (hint) like:
+      // list_field_voc_unconstrained = schema.List(
+      //     title=u"List field with values from vocabulary but not constrained to them.",
+      //     description=u"zope.schema.List",
+      //     value_type=schema.TextLine(),
+      //     required=False,
+      //     missing_value=[],
+      // )
+      // directives.widget(
+      //     "list_field_voc_unconstrained",
+      //     AjaxSelectFieldWidget,
+      //     vocabulary="plone.app.vocabularies.PortalTypes",
+      // )
+      this.props?.choices &&
+      !getVocabFromHint(this.props) &&
+      !this.props.creatable
+        ? SortableContainer(Select)
+        : SortableContainer(CreatableSelect);
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <SortableSelect
+          useDragHandle
+          // react-sortable-hoc props:
+          axis="xy"
+          onSortEnd={this.onSortEnd}
+          menuShouldScrollIntoView={false}
+          distance={4}
+          // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
+          getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+          id={`field-${this.props.id}`}
+          key={this.props.id}
+          isDisabled={this.props.disabled || this.props.isDisabled}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          /* eslint-disable jsx-a11y/no-autofocus */
+          autoFocus={this.props.focus}
+          /* eslint-enable jsx-a11y/no-autofocus */
+          options={
+            this.props.vocabBaseUrl
+              ? choices
+              : this.props.choices
+              ? [
+                  ...choices,
+                  ...(this.props.noValueOption && !this.props.default
+                    ? [
+                        {
+                          label: this.props.intl.formatMessage(
+                            messages.no_value,
+                          ),
+                          value: 'no-value',
+                        },
+                      ]
+                    : []),
+                ]
+              : [
+                  {
+                    label: this.props.intl.formatMessage(messages.no_value),
+                    value: 'no-value',
+                  },
+                ]
+          }
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            // ...(this.props.choices?.length > 25 && {
+            //   MenuList,
+            // }),
+            MultiValueContainer,
+            MultiValue: SortableMultiValue,
+            MultiValueLabel: SortableMultiValueLabel,
+            DropdownIndicator,
+            ClearIndicator,
+            Option,
+          }}
+          value={selectedOption || []}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={this.handleChange}
+          isValidNewOption={(
+            inputValue,
+            selectValue,
+            selectOptions,
+            accessors,
+          ) =>
+            !(
+              !inputValue ||
+              selectValue.some((option) =>
+                compareOption(inputValue, option, accessors),
+              ) ||
+              selectOptions.some((option) =>
+                compareOption(inputValue, option, accessors),
+              )
+            )
+          }
+          isClearable
+          isMulti
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const ArrayWidgetComponent = injectIntl(ArrayWidget);
+
+export default compose(
+  injectIntl,
+  injectLazyLibs(['reactSelect', 'reactSelectCreateable', 'reactSortableHOC']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl =
+        getVocabFromHint(props) ||
+        getVocabFromField(props) ||
+        getVocabFromItems(props);
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.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.items?.choices) {
+        return {
+          choices: props.items.choices,
+          lang: state.intl.locale,
+        };
+      } else if (vocabState) {
+        return {
+          choices: vocabState.items,
+          vocabBaseUrl,
+          vocabLoading: vocabState.loading,
+          vocabLoaded: vocabState.loaded,
+          lang: state.intl.locale,
+        };
+      }
+      return { vocabBaseUrl, lang: state.intl.locale };
+    },
+    { getVocabulary },
+  ),
+)(ArrayWidget);

package/theme/clms/css/menu.css

@@ -31,6 +31,7 @@
 
 .ccl-breadcrumb .ccl-breadcrumb__segment {
   display: block;
+  margin-left: 0 !important;
   font-size: 1rem;
   line-height: 1.25;
 }
@@ -301,7 +302,8 @@
   height: 20px;
 }
 
-.filters-element select:focus-visible, .filters-element select:focus {
+.filters-element select:focus-visible,
+.filters-element select:focus {
   outline: none;
 }
 
@@ -320,7 +322,10 @@
   font-weight: bold;
 }
 
-.filters-container .react-select__control .react-select__dropdown-indicator svg {
+.filters-container
+  .react-select__control
+  .react-select__dropdown-indicator
+  svg {
   fill: #273b4b !important;
 }
 
@@ -368,14 +373,14 @@
 .block.search .filter-list-header .filter-list-title svg {
   margin-right: 0.5rem;
   transform: rotate(0deg) !important;
-  -webkit-transition: transform .3s ease-out;
-  transition: transform 0.3s ease-out; 
+  -webkit-transition: transform 0.3s ease-out;
+  transition: transform 0.3s ease-out;
 }
 
 .block.search .active.filter-list-header .filter-list-title svg {
   transform: rotate(-180deg) !important;
-  -webkit-transition: transform .3s ease-out;
-  transition: transform 0.3s ease-out; 
+  -webkit-transition: transform 0.3s ease-out;
+  transition: transform 0.3s ease-out;
 }
 
 .block.search .filter-listing .trash.icon {
@@ -398,7 +403,6 @@
   margin: 0.25rem !important;
 }
 
-
 /* Filters modal */
 .modal-filters {
   display: none;
@@ -422,7 +426,7 @@
   width: 100%;
   background: white;
 }
-@media (min-width: 576px) { 
+@media (min-width: 576px) {
   .modal-filters-container {
     width: 70%;
   }
@@ -461,7 +465,7 @@
   font-size: 0.85rem;
   padding-right: 1rem;
   margin-right: 1rem;
-  border-right: solid 1px #273B4B;
+  border-right: solid 1px #273b4b;
   line-height: 1.5rem;
   cursor: pointer;
 }
@@ -513,28 +517,28 @@
 }
 
 .modal-filters-dropdown .ccl-expandable__button::after {
-  font-family: "ccl-icons";
+  font-family: 'ccl-icons';
   color: #a0b128;
   margin-right: 1.5rem;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   position: absolute;
   right: 0;
-  -webkit-transition: all .3s ease-in-out;
-  transition: all .3s  ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 .modal-filters-dropdown .ccl-expandable__button[aria-expanded='false']::after {
   content: '\e914';
   transform: rotate(0deg);
-  -webkit-transition: transform .3s ease-out;
-  transition: transform 0.3s ease-out; 
+  -webkit-transition: transform 0.3s ease-out;
+  transition: transform 0.3s ease-out;
 }
 
 .modal-filters-dropdown .ccl-expandable__button[aria-expanded='true']::after {
   content: '\e914';
   transform: rotate(-180deg);
-  -webkit-transition: transform .3s ease-out;
+  -webkit-transition: transform 0.3s ease-out;
   transition: transform 0.3s ease-out;
 }
 
@@ -563,7 +567,10 @@
   padding: 1rem 1.5rem;
 }
 
-.modal-filters-dropdown .ccl-expandable__button + .ccl-form .ccl-expandable__button {
+.modal-filters-dropdown
+  .ccl-expandable__button
+  + .ccl-form
+  .ccl-expandable__button {
   background-color: transparent;
   margin: 0;
   padding: 0;
@@ -573,7 +580,11 @@
   margin-top: 1.66rem;
 }
 
-.modal-filters-dropdown .ccl-expandable__button + .ccl-form .ccl-expandable__button .ccl-form {
+.modal-filters-dropdown
+  .ccl-expandable__button
+  + .ccl-form
+  .ccl-expandable__button
+  .ccl-form {
   padding: 0;
 }
 
@@ -604,10 +615,10 @@
 }
 
 .modal-filters-dropdown .filters-tag .checkbox input:checked + label {
-  color:white;
+  color: white;
   background: #a0b128;
-  -webkit-transition: all .3s ease-out;
-  transition: all .3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
 .modal-filters-dropdown .filters-tag .checkbox label {
@@ -617,8 +628,8 @@
   border: solid 1px #a0b128;
   cursor: pointer;
   text-align: center;
-  -webkit-transition: all .3s ease-out;
-  transition: all .3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
 .modal-filters-dropdown .ui.checkbox input:focus ~ label {
@@ -626,7 +637,7 @@
 }
 
 .modal-filters-dropdown .filters-tag .checkbox label:hover {
-  color:white;
+  color: white;
   background: #a0b128;
 }
 
@@ -643,7 +654,7 @@
 .modal-filters-dropdown .ui.checkbox input:checked:focus ~ label:after {
   color: #a0b128;
 }
-.modal-filters-dropdown .ui.checkbox input:checked ~ label:before, 
+.modal-filters-dropdown .ui.checkbox input:checked ~ label:before,
 .modal-filters-dropdown .ui.checkbox input:checked:focus ~ label:before {
   border: 1px solid #a0b128;
 }

package/theme/clms/css/styles.less

@@ -1213,7 +1213,7 @@ div#page-document h1.documentFirstHeading {
   margin-bottom: 1.5rem;
 }
 
-.title-subscribe-container > div > div {
+.title-subscribe-container > div {
   display: flex;
   align-items: flex-end;
 }