design-comuni-plone-theme 11.31.2 → 11.32.0

package/src/components/ItaliaTheme/View/Commons/SideMenuByTitles.jsx

@@ -20,11 +20,16 @@ const messages = defineMessages({
     id: 'index',
     defaultMessage: 'Indice della pagina',
   },
+  sideMenuNavigation: {
+    id: 'sideMenuNavigation',
+    defaultMessage: 'Navigazione della pagina',
+  },
 });
 
 const extractHeaders = (elements, intl) => {
   let item;
   let headers = [];
+
   for (var index = 0; index < elements.length; index++) {
     item = elements[index];
 
@@ -140,7 +145,10 @@ const SideMenuByTitles = ({ data, content_uid, index_title }) => {
 
   return headers?.length > 0 ? (
     <div className="sticky-wrapper navbar-wrapper page-side-menu">
-      <nav className="navbar it-navscroll-wrapper navbar-expand-lg">
+      <nav
+        className="navbar it-navscroll-wrapper navbar-expand-lg"
+        aria-label={intl.formatMessage(messages.sideMenuNavigation)}
+      >
         <div className="menu-wrapper">
           <div className="link-list-wrapper menu-link-list">
             <div className="accordion-wrapper">
@@ -151,20 +159,20 @@ const SideMenuByTitles = ({ data, content_uid, index_title }) => {
                     setIsNavOpen(!isNavOpen);
                   }}
                   aria-controls="side-menu-body"
+                  aria-expanded={isNavOpen}
                 >
-                  <h3>{index_title ?? intl.formatMessage(messages.index)}</h3>
+                  <h2 className="h3">
+                    {index_title ?? intl.formatMessage(messages.index)}
+                  </h2>
                 </AccordionHeader>
                 <div className="mb-3">
                   <Progress
                     value={progressValue > 0 ? 100 * progressValue : 0}
-                    role="progressbar"
+                    role="progressbar"                    
+                    aria-labelledby={`item-${activeSection}`}
                   />
                 </div>
-                <AccordionBody
-                  active={isNavOpen}
-                  id="side-menu-body"
-                  role="region"
-                >
+                <AccordionBody active={isNavOpen} id="side-menu-body">
                   <ul className="link-list" data-element="page-index">
                     {headers.map((item, i) => {
                       return (

package/src/components/ItaliaTheme/index.js

@@ -17,6 +17,11 @@ export FileWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/
 export PathFiltersWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/PathFiltersWidget';
 export LocationFiltersWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/LocationFiltersWidget';
 export CanaleDigitaleWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget';
+export CTFieldsWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/CTFieldsWidget';
+export CTTitleColumnWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/CTTitleColumnWidget';
+export BlocksViewWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/BlocksViewWidget.jsx';
+export PDCViewWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/PDCViewWidget.jsx';
+export DataGridWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/DataGridWidget.jsx';
 
 /********* ICONS ********* */
 export getItemIcon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/common/common';

package/src/components/ItaliaTheme/manage/Widgets/BlocksViewWidget.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { RichTextRender } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+const BlocksViewWidget = ({ value, children, className }) => {
+  return <RichTextRender data={value} add_class={className} serif={false} />;
+};
+
+export default BlocksViewWidget;

package/src/components/ItaliaTheme/manage/Widgets/CTFieldsWidget.jsx

@@ -0,0 +1,84 @@
+import React, { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { getCTSchema } from 'design-comuni-plone-theme/actions';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+
+import {
+  Option,
+  DropdownIndicator,
+  selectTheme,
+  customSelectStyles,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+
+const CTFieldsWidget = ({ ct, reactSelect, value, ...props }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const Select = reactSelect.default;
+  const exclude_fieldsets = ['ownership', 'seo', 'settings'];
+  const ct_schema = useSelector(
+    (state) => state.ct_schema?.subrequests?.[ct]?.result,
+  );
+
+  useEffect(() => {
+    if (!ct_schema) {
+      dispatch(getCTSchema(ct));
+    }
+  }, [ct, ct_schema, dispatch]);
+
+  const groups_choices =
+    ct_schema?.fieldsets
+      ?.filter((fieldset) => exclude_fieldsets.indexOf(fieldset.id) < 0)
+      .map((fieldset) => {
+        return {
+          label: fieldset.title,
+          options: fieldset.fields.map((f) => {
+            return {
+              value: f,
+              label: ct_schema.properties[f].title,
+            };
+          }),
+        };
+      }) ?? [];
+
+  const disabled = props.disabled || props.isDisabled;
+  const normalizedValue = normalizeValue(
+    groups_choices.reduce((acc, fieldset) => {
+      return [...acc, ...fieldset.options];
+    }, []),
+    value,
+    intl,
+  );
+
+  return groups_choices?.length > 0 ? (
+    <FormFieldWrapper {...props}>
+      <Select
+        id={`field-${props.id}`}
+        name={props.id}
+        disabled={disabled}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        placeholder={props.placeholder ?? 'Seleziona un valore'}
+        options={groups_choices}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option }}
+        value={normalizedValue}
+        onChange={(selectedOption) => {
+          props.onChange(
+            props.id,
+            selectedOption && selectedOption.value !== 'no-value'
+              ? selectedOption.value
+              : undefined,
+          );
+        }}
+      />
+    </FormFieldWrapper>
+  ) : (
+    <></>
+  );
+};
+
+export default injectLazyLibs('reactSelect')(CTFieldsWidget);

package/src/components/ItaliaTheme/manage/Widgets/CTTitleColumnWidget.jsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { TextWidget } from '@plone/volto/components';
+
+const CTTitleColumnWidget = (props) => {
+  const { onChange, id } = props;
+  const { ct, field } = props.objectvalue;
+  const ct_schema = useSelector(
+    (state) => state.ct_schema?.subrequests?.[ct]?.result,
+  );
+
+  useEffect(() => {
+    const field_label = ct_schema?.properties?.[field]?.title;
+    if (field_label) {
+      onChange(id, field_label);
+    }
+  }, [field]);
+
+  return <TextWidget {...props} className="text" />;
+};
+
+export default CTTitleColumnWidget;

package/src/components/ItaliaTheme/manage/Widgets/DataGridWidget.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import cx from 'classnames';
+
+const DataGridWidget = ({ value, children, className }) => {
+  return value ? (
+    <span className={cx(className, 'array', 'widget')}>
+      {value.map((item, key) =>
+        Object.keys(item).length > 0 ? (
+          <div>
+            {Object.keys(item).map((el) => (
+              <div>
+                <span className="fw-bold">{el}</span>: <span>{item[el]}</span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <></>
+        ),
+      )}
+    </span>
+  ) : (
+    ''
+  );
+};
+
+export default DataGridWidget;

package/src/components/ItaliaTheme/manage/Widgets/PDCViewWidget.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { renderPDCItemValue } from 'design-comuni-plone-theme/helpers';
+const PDCViewWidget = ({ value }) => {
+  const intl = useIntl();
+
+  return (
+    <div className="d-flex flex-column">
+      {value
+        ? value.map((pdc) => (
+            <div>
+              <span className="me-2">{pdc.pdc_desc}</span>
+              <span>{renderPDCItemValue(pdc, intl)}</span>
+            </div>
+          ))
+        : null}
+    </div>
+  );
+};
+
+export default PDCViewWidget;

package/src/config/Blocks/ListingOptions/index.js

@@ -23,3 +23,4 @@ export { addCardWithSlideUpTextTemplateOptions } from 'design-comuni-plone-theme
 export { addPhotogalleryTemplateOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/photogalleryTemplate';
 export { addSmallBlockLinksTemplateOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/smallBlockLinksTemplate';
 export { addAttachmentCardTemplateOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/attachmentCardTemplate';
+export { addTableTemplateOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/tableTemplate';

package/src/config/Blocks/ListingOptions/tableTemplate.js

@@ -0,0 +1,105 @@
+import { defineMessages } from 'react-intl';
+import cloneDeep from 'lodash/cloneDeep';
+
+import { addSchemaField } from 'design-comuni-plone-theme/config/Blocks/ListingOptions';
+
+const messages = defineMessages({
+  columns: {
+    id: 'table_variation_columns',
+    defaultMessage: 'Colonne della tabella',
+  },
+  alternate_rows: {
+    id: 'table_variation_alternate_rows',
+    defaultMessage: 'Colore delle righe alternato',
+  },
+  column: {
+    id: 'table_variaton_column',
+    defaultMessage: 'Colonna',
+  },
+  ct: { id: 'table_variaton_ct', defaultMessage: 'Tipo di contenuto' },
+  field: { id: 'table_variaton_field', defaultMessage: 'Campo' },
+  title: {
+    id: 'table_variaton_title',
+    defaultMessage: 'Titolo',
+  },
+  title_description: {
+    id: 'table_variaton_title_description',
+    defaultMessage:
+      'Titolo della colonna. Se vuoi, puoi modificare il titolo di default.',
+  },
+  //sortable: { id: 'table_variaton_sortable', defaultMessage: 'Ordinabile' },
+});
+
+const ColumnSchema = ({ intl }) => ({
+  title: intl.formatMessage(messages.column),
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['ct' /*'field', 'title', 'sortable'*/], //questi campi commentati vengono aggiunti solo quando è valorizzato il campo ct
+    },
+  ],
+  properties: {
+    ct: {
+      title: intl.formatMessage(messages.ct),
+      vocabulary: {
+        '@id': 'plone.app.vocabularies.ReallyUserFriendlyTypes',
+      },
+    },
+    field: {
+      title: intl.formatMessage(messages.field),
+      widget: 'ct_fields',
+    },
+    title: {
+      title: intl.formatMessage(messages.title),
+      description: intl.formatMessage(messages.title_description),
+      widget: 'ct_title_column',
+    },
+    // sortable: {
+    //   title: intl.formatMessage(messages.sortable),
+    //   type: 'boolean',
+    // },
+  },
+});
+
+export const addTableTemplateOptions = (
+  schema,
+  formData,
+  intl,
+  position = 1,
+) => {
+  let pos = position;
+
+  addSchemaField(
+    schema,
+    'alternate_rows',
+    intl.formatMessage(messages.alternate_rows),
+    null,
+    { type: 'boolean', default: true },
+    pos,
+  );
+  pos++;
+
+  addSchemaField(
+    schema,
+    'columns',
+    intl.formatMessage(messages.columns),
+    null,
+    {
+      widget: 'object_list',
+      schema: ColumnSchema({ intl }),
+      schemaExtender: (schema, data, intl) => {
+        const mutated = cloneDeep(schema);
+        if (data.ct) {
+          mutated.fieldsets[0].fields.push('field', 'title' /*, 'sortable'*/);
+          mutated.properties.field.ct = data.ct;
+        }
+        return mutated;
+      },
+    },
+    pos,
+  );
+  pos++;
+
+  return pos;
+};

package/src/config/Blocks/listingVariations.js

@@ -47,6 +47,8 @@ import CardWithSlideUpTextTemplateSkeleton from 'design-comuni-plone-theme/compo
 
 import AttachmentCardTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate';
 
+import TableTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TableTemplate.jsx';
+import TableTemplateSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/TableTemplateSkeleton';
 // import AmministrazioneTrasparenteTablesTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/AmministrazioneTrasparenteTablesTemplate';
 // import AmministrazioneTrasparenteTablesTemplateSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/AmministrazioneTrasparenteTablesTemplateSkeleton';
 
@@ -67,6 +69,7 @@ import {
   addSmallBlockLinksTemplateOptions,
   addAttachmentCardTemplateOptions,
   cloneBlock,
+  addTableTemplateOptions,
 } from 'design-comuni-plone-theme/config/Blocks/ListingOptions';
 
 import { addLighthouseField } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/utils';
@@ -293,6 +296,21 @@ const italiaListingVariations = [
     },
     cloneData: cloneBlock,
   },
+  {
+    id: 'table',
+    isDefault: false,
+    title: 'Tabella',
+    template: TableTemplate,
+    skeleton: TableTemplateSkeleton,
+    schemaEnhancer: ({ schema, formData, intl }) => {
+      let pos = addDefaultOptions(schema, formData, intl);
+      addTableTemplateOptions(schema, formData, intl, pos);
+      addLinkMoreOptions(schema, formData, intl);
+      return schema;
+    },
+    fullobjects: true,
+    cloneData: cloneBlock,
+  },
   //  {
   //    id: 'amministrazioneTrasparenteTablesTemplate',
   //    isDefault: false,

package/src/config/Widgets/widgets.js

@@ -10,12 +10,20 @@ import MenuConfigurationForm from 'design-comuni-plone-theme/components/ItaliaTh
 import SecondaryMenuConfigurationForm from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/SecondaryMenuConfigurationForm';
 import SubFooterConfigurationForm from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/SubFooterConfigurationForm';
 import SearchSectionsConfigurationWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/SearchSectionsConfigurationWidget/SearchSectionsConfigurationWidget';
-import { defaultIconWidgetOptions } from 'design-comuni-plone-theme/helpers';
+import {
+  defaultIconWidgetOptions,
+  getWidgetView,
+} from 'design-comuni-plone-theme/helpers';
 import {
   ColorListWidget,
   PathFiltersWidget,
   LocationFiltersWidget,
   CanaleDigitaleWidget,
+  CTFieldsWidget,
+  CTTitleColumnWidget,
+  BlocksViewWidget,
+  PDCViewWidget,
+  DataGridWidget,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import LuoghiCorrelatiEventoWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/LuoghiCorrelatiEventoWidget';
 
@@ -88,6 +96,21 @@ const getItaliaWidgets = (config) => {
       path_filters: PathFiltersWidget,
       location_filter: LocationFiltersWidget,
       luoghi_correlati_evento: LuoghiCorrelatiEventoWidget,
+      ct_fields: CTFieldsWidget,
+      ct_title_column: CTTitleColumnWidget,
+    },
+    views: {
+      ...config.widgets.views,
+      getWidget: getWidgetView,
+      widget: {
+        ...config.widgets.views.widget,
+        blocks: BlocksViewWidget,
+        data_grid: DataGridWidget,
+      },
+      id: {
+        ...config.widgets.views.id,
+        value_punto_contatto: PDCViewWidget,
+      },
     },
   };
 };

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -2,13 +2,17 @@
  * Html helper.
  * @module helpers/Html
  */
+
 /*
- CUSTOMIZATIONS:
- - Rimosso <link rel="shortcut icon" href="/favicon.ico" /> perchè creato da volto-site-settings
- - Add shrink-to-fit=no in viewport meta
- - Remove link for manifest and svg/apple icons
+ * original: https://raw.githubusercontent.com/plone/volto/refs/tags/17.20.4/src/helpers/Html/Html.jsx
+ *
+ * CUSTOMIZATIONS:
+ * - Rimossi <link per rle favicon perchè creato da volto-site-settings
+ * - Add shrink-to-fit=no in viewport meta
+ * - Remove link for manifest and svg/apple icons
+ * - Aggiunto og:type website
  */
-
+  
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
@@ -97,8 +101,10 @@ class Html extends Component {
       this.props;
     const head = Helmet.rewind();
     const bodyClass = join(BodyClass.rewind(), ' ');
+    const htmlAttributes = head.htmlAttributes.toComponent();
+
     return (
-      <html lang="en">
+      <html lang={htmlAttributes.lang}>
         <head>
           <meta charSet="utf-8" />
           {head.base.toComponent()}
@@ -122,13 +128,21 @@ class Html extends Component {
               })};`,
             }}
           />
-          {/* <link rel="shortcut icon" href="/favicon.ico" /> */}
+
+          {/* 
+            * <link rel="icon" href="/favicon.ico" sizes="any" />
+            * <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+            * <link
+            * rel="apple-touch-icon"
+            * sizes="180x180"
+            * href="/apple-touch-icon.png"
+            * />
+            * <link rel="manifest" href="/site.webmanifest" /> 
+            */}
+
           <meta property="og:type" content="website" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no"
-          />
+          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
           <meta name="apple-mobile-web-app-capable" content="yes" />
           {process.env.NODE_ENV === 'production' && criticalCss && (
             <style
@@ -143,8 +157,8 @@ class Html extends Component {
               rel: !criticalCss
                 ? elem.props.rel
                 : elem.props.as === 'style'
-                  ? 'prefetch'
-                  : elem.props.rel,
+                ? 'prefetch'
+                : elem.props.rel,
             }),
           )}
           {/* Styles in development are loaded with Webpack's style-loader, in production,
@@ -177,7 +191,7 @@ class Html extends Component {
         <body className={bodyClass}>
           <div role="navigation" aria-label="Toolbar" id="toolbar" />
           <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
-          <div id="sidebar" />
+          <div role="complementary" aria-label="Sidebar" id="sidebar" />
           <script
             dangerouslySetInnerHTML={{
               __html: `window.__data=${serialize(

package/src/helpers/getWidgetView.js

@@ -0,0 +1,112 @@
+import config from '@plone/volto/registry';
+
+/**
+ * Get widget by field's `id` attribute
+ * @method getWidgetByFieldId
+ * @param {string} id Id
+ * @returns {string} Widget component.
+ */
+const getWidgetByFieldId = (id) => config.widgets.views.id[id] || null;
+
+/**
+ * Get widget by field's `front end options` attribute
+ * @method getWidgetFromTaggedValues
+ * @param {object} widgetOptions widgetOptions
+ * @returns {string} Widget component.
+ */
+const getWidgetFromTaggedValues = (widgetOptions) =>
+  typeof widgetOptions?.frontendOptions?.widget === 'string'
+    ? config.widgets.views.widget[widgetOptions.frontendOptions.widget]
+    : null;
+
+/**
+ * Get widget by field's `widget` attribute
+ * @method getWidgetByName
+ * @param {string} widget Widget
+ * @returns {string} Widget component.
+ */
+const getWidgetByName = (widget) =>
+  typeof widget === 'string' ? config.widgets.views.widget[widget] : null;
+/**
+ * Get widget by field's `vocabulary` attribute
+ * @method getWidgetByVocabulary
+ * @param {string} vocabulary Widget
+ * @returns {string} Widget component.
+ */
+const getWidgetByVocabulary = (vocabulary) =>
+  vocabulary && vocabulary['@id']
+    ? config.widgets.views.vocabulary[
+        vocabulary['@id'].replace(
+          `${config.settings.apiPath}/@vocabularies/`,
+          '',
+        )
+      ]
+    : null;
+
+/**
+ * Get widget by field's hints `vocabulary` attribute in widgetOptions
+ * @method getWidgetByVocabularyFromHint
+ * @param {string} props Widget props
+ * @returns {string} Widget component.
+ */
+const getWidgetByVocabularyFromHint = (props) =>
+  props.widgetOptions && props.widgetOptions.vocabulary
+    ? config.widgets.views.vocabulary[
+        props.widgetOptions.vocabulary['@id'].replace(
+          `${config.settings.apiPath}/@vocabularies/`,
+          '',
+        )
+      ]
+    : null;
+
+/**
+ * Get widget by field's `choices` attribute
+ * @method getWidgetByChoices
+ * @param {string} choices Widget
+ * @returns {string} Widget component.
+ */
+const getWidgetByChoices = (props) => {
+  if (props.choices) {
+    return config.widgets.views.choices;
+  }
+
+  if (props.vocabulary) {
+    // If vocabulary exists, then it means it's a choice field in disguise with
+    // no widget specified that probably contains a string then we force it
+    // to be a select widget instead
+    return config.widgets.views.choices;
+  }
+
+  return null;
+};
+
+/**
+ * Get widget by field's `type` attribute
+ * @method getWidgetByType
+ * @param {string} type Type
+ * @returns {string} Widget component.
+ */
+const getWidgetByType = (type) => config.widgets.views.type[type] || null;
+
+/**
+ * Get default widget
+ * @method getWidgetDefault
+ * @returns {string} Widget component.
+ */
+const getWidgetDefault = () => config.widgets.views.default;
+
+/**
+ * Get Widget View
+ * @method getWidgetView
+ * @param {dict} props Props
+ * @returns {string} Widget component.
+ */
+export const getWidgetView = (props) =>
+  getWidgetByFieldId(props.id) ||
+  getWidgetFromTaggedValues(props.widgetOptions) ||
+  getWidgetByName(props.widget) ||
+  getWidgetByChoices(props) ||
+  getWidgetByVocabulary(props.vocabulary) ||
+  getWidgetByVocabularyFromHint(props) ||
+  getWidgetByType(props.type) ||
+  getWidgetDefault();

package/src/helpers/index.js

@@ -63,3 +63,4 @@ export {
   useFallbackImageSrc,
   contentHasImage,
 } from 'design-comuni-plone-theme/helpers/images';
+export { getWidgetView } from 'design-comuni-plone-theme/helpers/getWidgetView';