design-comuni-plone-theme 11.31.2 → 11.32.1

package/src/components/ItaliaTheme/Blocks/Listing/TableTemplate.jsx

@@ -0,0 +1,163 @@
+/*
+ * Template a tabella
+ */
+import React, { useEffect } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl, defineMessages } from 'react-intl';
+import { getCTSchema } from 'design-comuni-plone-theme/actions';
+import { Table, Container } from 'design-react-kit';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { getWidget } from '@plone/volto/helpers/Widget/utils';
+
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  title: { id: 'tabletemplate_column_title', defaultMessage: 'Titolo' },
+});
+
+const TableTemplate = (props) => {
+  const {
+    columns,
+    alternate_rows,
+    items,
+    isEditMode,
+    linkAlign,
+    linkTitle,
+    linkHref,
+    linkmore_id_lighthouse,
+  } = props;
+
+  const intl = useIntl();
+  const { views } = config.widgets;
+
+  // necessario per gli edditor nel momento in cui aggiungono nuove colonne
+  const ct_schema = useSelector((state) => state.ct_schema?.subrequests);
+
+  let render_columns =
+    (columns ?? []).filter((c) => c.field === 'title').length > 0
+      ? columns
+      : [
+          { field: 'title', title: intl.formatMessage(messages.title) },
+          ...(columns ?? []),
+        ];
+  return (
+    <div className="table-template">
+      <Container className="px-4 pt-3">
+        <Table size="sm" responsive bordered striped={alternate_rows ?? false}>
+          <thead className="table-light">
+            <tr>
+              {render_columns.map((c, index) => {
+                const field_properties =
+                  c.field_properties ??
+                  ct_schema?.[c.ct]?.result?.properties?.[c.field] ??
+                  {};
+
+                return (
+                  <th
+                    scope="col"
+                    className={cx(c.ct + '-' + c.field, {
+                      'date-column':
+                        field_properties.widget === 'date' ||
+                        field_properties.widget === 'datetime',
+                    })}
+                    key={index}
+                  >
+                    {c.title}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item, index) => (
+              <tr key={index}>
+                {render_columns.map((c, index) => {
+                  const field_properties =
+                    c.field_properties ??
+                    ct_schema?.[c.ct]?.result?.properties?.[c.field] ??
+                    {};
+                  let render_value = JSON.stringify(item[c.field]);
+
+                  if (field_properties) {
+                    const field = {
+                      ...field_properties,
+                      id: c.field,
+                      widget: getWidget(c.field, field_properties),
+                    };
+                    const Widget = views?.getWidget(field);
+
+                    const widget_props = {
+                      behavior: field_properties.behavior,
+                    };
+                    switch (c.field) {
+                      case 'apertura_bando':
+                      case 'chiusura_procedimento_bando':
+                      case 'scadenza_domande_bando':
+                      case 'scadenza_bando':
+                        widget_props.format = 'DD MMM yyyy';
+                        break;
+                      default:
+                        break;
+                    }
+                    // rimuove ora, se non valorizzata
+                    if (
+                      field_properties.widget === 'datetime' &&
+                      c.field !== 'whole_day' &&
+                      c.field !== 'open_end' &&
+                      item?.[c.field]?.indexOf('T00:00') > 0
+                    ) {
+                      widget_props.format = 'DD MMM yyyy';
+                    }
+                    if (field_properties.vocabulary) {
+                      widget_props.vocabulary =
+                        field_properties.vocabulary['@id'];
+                    }
+                    render_value = (
+                      <Widget value={item[c.field]} {...widget_props} />
+                    );
+                  }
+                  if (c.field === 'title') {
+                    render_value = (
+                      <UniversalLink
+                        item={!isEditMode ? item : null}
+                        href={isEditMode ? '#' : ''}
+                        className="img-link"
+                      >
+                        {item[c.field]}
+                      </UniversalLink>
+                    );
+                  }
+
+                  // return <td key={index}>ciao</td>;
+                  return <td key={index}>{render_value}</td>;
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+
+        <ListingLinkMore
+          title={linkTitle}
+          href={linkHref}
+          linkAlign={linkAlign}
+          className="my-4"
+          linkmoreIdLighthouse={linkmore_id_lighthouse}
+        />
+      </Container>
+    </div>
+  );
+};
+
+TableTemplate.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  linkTitle: PropTypes.any,
+  linkHref: PropTypes.any,
+  isEditMode: PropTypes.bool,
+  title: PropTypes.string,
+};
+
+export default TableTemplate;

package/src/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/TableTemplateSkeleton.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Table, Container } from 'design-react-kit';
+
+const SimpleListTemplateSkeleton = (props) => {
+  const { title, linkHref } = props;
+  return (
+    <div className="table-skeleton-template">
+      <Container className="px-4">
+        <div className="skeleton-template">
+          {title && (
+            <Row>
+              <Col>
+                <h2 className="mb-4">{title}</h2>
+              </Col>
+            </Row>
+          )}
+
+          <Table size="sm" responsive bordered>
+            <thead>
+              <tr>
+                {[0, 1, 2, 3, 4].map((i) => (
+                  <th scope="col" key={i}></th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+                <tr key={i}>
+                  {[0, 1, 2, 3, 4].map((i) => (
+                    <td key={i}></td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          {linkHref && <div className="link-button text-center my-5"></div>}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+SimpleListTemplateSkeleton.propTypes = {
+  linkHref: PropTypes.any,
+  isEditMode: PropTypes.bool,
+  title: PropTypes.string,
+};
+
+export default SimpleListTemplateSkeleton;

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

@@ -176,7 +176,8 @@ const SideMenu = ({ data, content_uid }) => {
                 <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">

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,
+      },
     },
   };
 };