io-sanita-theme 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.11.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.10.0...2.11.0) (2025-03-25)
+
+### Features
+
+* Table listing template ([#75](https://github.com/RedTurtle/io-sanita-theme/issues/75)) ([9f478e2](https://github.com/RedTurtle/io-sanita-theme/commit/9f478e248761f6becf40660da4b66bf64b3796e3))
+
 ## [2.10.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.9.1...2.10.0) (2025-03-24)
 
 ### Features

package/RELEASE.md

@@ -41,6 +41,12 @@
 - ...
  -->
 
+## Versione 2.11.0 (25/03/2025)
+
+### Novità
+
+- Aggiunto il template 'tabella' del blocco elenco in cui è possibile selezionare quali colonne dei content-type mostrare
+
 ## Versione 2.10.0 (24/03/2025)
 
 ### Novità

package/locales/de/LC_MESSAGES/volto.po

@@ -3952,6 +3952,46 @@ msgstr ""
 msgid "successivo"
 msgstr ""
 
+#. Default: "Colore delle righe alternato"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#. Default: "Colonne della tabella"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_columns"
+msgstr ""
+
+#. Default: "Colonna"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_column"
+msgstr ""
+
+#. Default: "Tipo di contenuto"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_ct"
+msgstr ""
+
+#. Default: "Campo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_field"
+msgstr ""
+
+#. Default: "Titolo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title"
+msgstr ""
+
+#. Default: "Titolo della colonna. Se vuoi, puoi modificare il titolo di default."
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title_description"
+msgstr ""
+
+#. Default: "Titolo"
+#: components/Blocks/Listing/Table/TableTemplate
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #. Default: "Telefono"
 #: components/View/PuntoDiContatto/PuntoDiContattoContatti
 msgid "telefono"

package/locales/en/LC_MESSAGES/volto.po

@@ -3947,6 +3947,46 @@ msgstr "Operating unit"
 msgid "successivo"
 msgstr "Next"
 
+#. Default: "Colore delle righe alternato"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#. Default: "Colonne della tabella"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_columns"
+msgstr ""
+
+#. Default: "Colonna"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_column"
+msgstr ""
+
+#. Default: "Tipo di contenuto"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_ct"
+msgstr ""
+
+#. Default: "Campo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_field"
+msgstr ""
+
+#. Default: "Titolo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title"
+msgstr ""
+
+#. Default: "Titolo della colonna. Se vuoi, puoi modificare il titolo di default."
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title_description"
+msgstr ""
+
+#. Default: "Titolo"
+#: components/Blocks/Listing/Table/TableTemplate
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #. Default: "Telefono"
 #: components/View/PuntoDiContatto/PuntoDiContattoContatti
 msgid "telefono"

package/locales/es/LC_MESSAGES/volto.po

@@ -3954,6 +3954,46 @@ msgstr ""
 msgid "successivo"
 msgstr ""
 
+#. Default: "Colore delle righe alternato"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#. Default: "Colonne della tabella"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_columns"
+msgstr ""
+
+#. Default: "Colonna"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_column"
+msgstr ""
+
+#. Default: "Tipo di contenuto"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_ct"
+msgstr ""
+
+#. Default: "Campo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_field"
+msgstr ""
+
+#. Default: "Titolo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title"
+msgstr ""
+
+#. Default: "Titolo della colonna. Se vuoi, puoi modificare il titolo di default."
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title_description"
+msgstr ""
+
+#. Default: "Titolo"
+#: components/Blocks/Listing/Table/TableTemplate
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #. Default: "Telefono"
 #: components/View/PuntoDiContatto/PuntoDiContattoContatti
 msgid "telefono"

package/locales/fr/LC_MESSAGES/volto.po

@@ -3954,6 +3954,46 @@ msgstr ""
 msgid "successivo"
 msgstr ""
 
+#. Default: "Colore delle righe alternato"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#. Default: "Colonne della tabella"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_columns"
+msgstr ""
+
+#. Default: "Colonna"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_column"
+msgstr ""
+
+#. Default: "Tipo di contenuto"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_ct"
+msgstr ""
+
+#. Default: "Campo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_field"
+msgstr ""
+
+#. Default: "Titolo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title"
+msgstr ""
+
+#. Default: "Titolo della colonna. Se vuoi, puoi modificare il titolo di default."
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title_description"
+msgstr ""
+
+#. Default: "Titolo"
+#: components/Blocks/Listing/Table/TableTemplate
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #. Default: "Telefono"
 #: components/View/PuntoDiContatto/PuntoDiContattoContatti
 msgid "telefono"

package/locales/it/LC_MESSAGES/volto.po

@@ -3947,6 +3947,46 @@ msgstr ""
 msgid "successivo"
 msgstr ""
 
+#. Default: "Colore delle righe alternato"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#. Default: "Colonne della tabella"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_columns"
+msgstr ""
+
+#. Default: "Colonna"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_column"
+msgstr ""
+
+#. Default: "Tipo di contenuto"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_ct"
+msgstr ""
+
+#. Default: "Campo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_field"
+msgstr ""
+
+#. Default: "Titolo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title"
+msgstr ""
+
+#. Default: "Titolo della colonna. Se vuoi, puoi modificare il titolo di default."
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title_description"
+msgstr ""
+
+#. Default: "Titolo"
+#: components/Blocks/Listing/Table/TableTemplate
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #. Default: "Telefono"
 #: components/View/PuntoDiContatto/PuntoDiContattoContatti
 msgid "telefono"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-03-24T09:51:21.877Z\n"
+"POT-Creation-Date: 2025-03-25T11:31:34.827Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -3949,6 +3949,46 @@ msgstr ""
 msgid "successivo"
 msgstr ""
 
+#. Default: "Colore delle righe alternato"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_alternate_rows"
+msgstr ""
+
+#. Default: "Colonne della tabella"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variation_columns"
+msgstr ""
+
+#. Default: "Colonna"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_column"
+msgstr ""
+
+#. Default: "Tipo di contenuto"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_ct"
+msgstr ""
+
+#. Default: "Campo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_field"
+msgstr ""
+
+#. Default: "Titolo"
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title"
+msgstr ""
+
+#. Default: "Titolo della colonna. Se vuoi, puoi modificare il titolo di default."
+#: config/blocks/listing/ListingOptions/tableTemplate
+msgid "table_variaton_title_description"
+msgstr ""
+
+#. Default: "Titolo"
+#: components/Blocks/Listing/Table/TableTemplate
+msgid "tabletemplate_column_title"
+msgstr ""
+
 #. Default: "Telefono"
 #: components/View/PuntoDiContatto/PuntoDiContattoContatti
 msgid "telefono"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",

package/src/actions/ctSchema.js

@@ -0,0 +1,13 @@
+export const GET_CT_SCHEMA = 'GET_CT_SCHEMA';
+
+export function getCTSchema(type, url) {
+  url = typeof url !== 'undefined' ? url : '';
+  return {
+    type: GET_CT_SCHEMA,
+    subrequest: type,
+    request: {
+      op: 'get',
+      path: `${url}/@types/${type}`,
+    },
+  };
+}

package/src/actions/index.js

@@ -19,6 +19,7 @@ import {
   getTassonomieSearch,
   GET_TASSONOMIE_SEARCH,
 } from './search';
+import { getCTSchema, GET_CT_SCHEMA } from './ctSchema';
 
 import { getFarmacia, GET_FARMACIA } from './getFarmacia';
 import {
@@ -57,4 +58,6 @@ export {
   RESET_QUERYSTRING_RESULTS,
   getSearchBandiFilters,
   GET_SEARCH_BANDI_FILTERS,
+  getCTSchema,
+  GET_CT_SCHEMA,
 };

package/src/components/Blocks/Accordion/Container.jsx

@@ -5,7 +5,7 @@ import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 const AccordionContainer = ({ data, headerChildren, children }) => {
   return data.show_block_bg ? (
     <div className="public-ui">
-      <div className="full-width section section-muted section-inset-shadow py-5">
+      <div className="full-width section section-muted section-inset-shadow py-5 mb-4">
         <Container className="px-md-4">
           <Card className="card-bg rounded no-after" noWrapper={false}>
             {(data.title || data.description || headerChildren) && (

package/src/components/Blocks/Listing/AttachmentCard/AttachmentCardTemplate.jsx

@@ -7,8 +7,6 @@ import { ListingContainer } from 'io-sanita-theme/components/Blocks';
 import { LinkMore } from 'io-sanita-theme/components';
 import { CardFile } from 'io-sanita-theme/components';
 
-import AttachmentCardTemplateSkeleton from '../Skeletons/AttachmentCardTemplateSkeleton';
-
 const AttachmentCardTemplate = (props) => {
   const {
     items,

package/src/components/Blocks/Listing/Skeletons/TableTemplateSkeleton.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { Row, Col, Table } from 'design-react-kit';
+import { ListingContainer } from 'io-sanita-theme/components/Blocks';
+
+const SimpleListTemplateSkeleton = (props) => {
+  const { isEditMode, title, linkHref, show_block_bg, show_pointer_list } =
+    props;
+  return (
+    <div className="table-skeleton-template">
+      <ListingContainer data={props} isEditMode={isEditMode}>
+        <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 scope="col" key={i}></td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          {linkHref && <div className="link-button text-center my-5"></div>}
+        </div>
+      </ListingContainer>
+    </div>
+  );
+};
+
+SimpleListTemplateSkeleton.propTypes = {
+  linkHref: PropTypes.any,
+  isEditMode: PropTypes.bool,
+  title: PropTypes.string,
+};
+
+export default SimpleListTemplateSkeleton;

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

@@ -0,0 +1,162 @@
+/*
+ * 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 'io-sanita-theme/actions';
+import { Row, Col, Table } from 'design-react-kit';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+import {
+  ListingImage,
+  ListingContainer,
+} from 'io-sanita-theme/components/Blocks';
+import { LinkMore } from 'io-sanita-theme/components';
+import { getWidget } from '@plone/volto/helpers/Widget/utils';
+
+import config from '@plone/volto/registry';
+import './table-templates.scss';
+
+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 dispatch = useDispatch();
+  const { views } = config.widgets;
+  const ct_schemas = useSelector((state) => state.ct_schema?.subrequests);
+
+  useEffect(() => {
+    (columns ?? []).forEach((c) => {
+      if (!ct_schemas[c.ct]) {
+        dispatch(getCTSchema(c.ct));
+      }
+    });
+  }, [columns]);
+
+  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">
+      <ListingContainer data={props} isEditMode={isEditMode}>
+        <Table size="sm" responsive bordered striped={alternate_rows ?? false}>
+          <thead className="table-light">
+            <tr>
+              {render_columns.map((c, index) => {
+                const field_properties =
+                  ct_schemas?.[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 =
+                    ct_schemas?.[c.ct]?.result?.properties?.[c.field];
+                  let render_value = JSON.stringify(item[c.field]);
+
+                  if (field_properties) {
+                    let field = {
+                      ...field_properties,
+                      id: c.field,
+                      widget: getWidget(c.field, field_properties),
+                    };
+
+                    let Widget = views?.getWidget(field);
+
+                    let widget_props = {};
+                    switch (c.field) {
+                      case 'apertura_bando':
+                      case 'chiusura_procedimento_bando':
+                      case 'scadenza_domande_bando':
+                      case 'scadenza_bando':
+                        widget_props.format = 'd MMM yyyy';
+                        break;
+                      default:
+                        break;
+                    }
+
+                    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}>{render_value}</td>;
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+
+        <LinkMore
+          title={linkTitle}
+          href={linkHref}
+          linkAlign={linkAlign}
+          className="my-4"
+          linkmoreIdLighthouse={linkmore_id_lighthouse}
+        />
+      </ListingContainer>
+    </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/Blocks/Listing/Table/table-templates.scss

@@ -0,0 +1,41 @@
+.table-template {
+  table.table {
+    th {
+      vertical-align: top;
+    }
+    td {
+      background-color: #fff;
+    }
+
+    &,
+    p,
+    ul,
+    ul,
+    li,
+    ol {
+      font-size: 0.9rem;
+    }
+
+    .date-column {
+      min-width: 6.5rem;
+    }
+
+    ul.relations.widget {
+      list-style-type: none;
+      padding-left: 0;
+      li {
+        a {
+          .icon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  + .pagination-wrapper {
+    .mt-5.pagination-wrapper {
+      margin-top: 0 !important;
+    }
+  }
+}

package/src/components/Blocks/index.js

@@ -84,6 +84,7 @@ export RassegnaInfo from 'io-sanita-theme/components/Blocks/Listing/commons/Rass
 export ListingContainer from 'io-sanita-theme/components/Blocks/Listing/commons/ListingContainer';
 
 /*Listing variations*/
+export AttachmentCardTemplate from 'io-sanita-theme/components/Blocks/Listing/AttachmentCard/AttachmentCardTemplate';
 export BandiTemplate from 'io-sanita-theme/components/Blocks/Listing/Bandi/BandiTemplate';
 export CardWithImageTemplate from 'io-sanita-theme/components/Blocks/Listing/CardWithImage/CardWithImageTemplate';
 export CardWithSlideUpTextTemplate from 'io-sanita-theme/components/Blocks/Listing/CardWithSlideUpText/CardWithSlideUpTextTemplate';
@@ -94,9 +95,9 @@ export MapTemplate from 'io-sanita-theme/components/Blocks/Listing/Map/MapTempla
 export SimpleCardTemplate from 'io-sanita-theme/components/Blocks/Listing/SimpleCard/SimpleCardTemplate';
 export SimpleListTemplate from 'io-sanita-theme/components/Blocks/Listing/SimpleList/SimpleListTemplate';
 export SmallBlockLinksTemplate from 'io-sanita-theme/components/Blocks/Listing/SmallBlockLinks/SmallBlockLinksTemplate';
-export AttachmentCardTemplate from 'io-sanita-theme/components/Blocks/Listing/AttachmentCard/AttachmentCardTemplate';
 
 /*Skeleton*/
+export AttachmentCardTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/AttachmentCardTemplateSkeleton';
 export BandiTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/BandiTemplateSkeleton';
 export CardWithImageTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/CardWithImageTemplateSkeleton';
 export CardWithSlideUpTextTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/CardWithSlideUpTextTemplateSkeleton';
@@ -107,7 +108,7 @@ export InEvidenceTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listin
 export MapTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/MapTemplateSkeleton';
 export SimpleListTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/SimpleListTemplateSkeleton';
 export SmallBlockLinksTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/SmallBlockLinksTemplateSkeleton';
-export AttachmentCardTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/AttachmentCardTemplateSkeleton';
+export TableTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/Skeletons/TableTemplateSkeleton';
 
 /*Rss block (as listing)*/
 export CardWithoutImageRssTemplate from 'io-sanita-theme/components/Blocks/Rss/CardWithoutImageRssTemplate';

package/src/components/View/Widgets/BlocksViewWidget.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { RichTextRender } from 'io-sanita-theme/helpers';
+const BlocksViewWidget = ({ value, children, className }) => {
+  return <RichTextRender data={value} add_class={className} serif={false} />;
+};
+
+export default BlocksViewWidget;

package/src/components/View/Widgets/ParliamoDiWidgetView.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { AGGREGATION_PAGE_ARGOMENTO } from 'io-sanita-theme/config/ioSanitaConfig';
+import { Chip, ChipLabel } from 'design-react-kit';
+
+const ParliamoDiWidgetView = ({ value, children, className }) => {
+  return value?.length > 0 ? (
+    <div className="topics-view-widget">
+      {value.map((item, i) => (
+        <UniversalLink
+          href={AGGREGATION_PAGE_ARGOMENTO + item.token}
+          key={item.token}
+          className="text-decoration-none me-2 d-inline-block"
+        >
+          <Chip color="accent" simple>
+            <ChipLabel>{item.title}</ChipLabel>
+          </Chip>
+        </UniversalLink>
+      ))}
+    </div>
+  ) : (
+    ''
+  );
+};
+
+export default ParliamoDiWidgetView;

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

@@ -0,0 +1,84 @@
+import React, { useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { getCTSchema } from 'io-sanita-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]);
+
+  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/manage/Widgets/CTTitleColumnWidget/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/config/blocks/listing/ListingOptions/index.js

@@ -27,3 +27,4 @@ export { addPhotogalleryTemplateOptions } from 'io-sanita-theme/config/blocks/li
 export { addSmallBlockLinksTemplateOptions } from 'io-sanita-theme/config/blocks/listing/ListingOptions/smallBlockLinksTemplate';
 export { addAttachmentCardTemplateOptions } from 'io-sanita-theme/config/blocks/listing/ListingOptions/attachmentCardTemplate';
 export { addCarouselTemplateOptions } from 'io-sanita-theme/config/blocks/listing/ListingOptions/carouselTemplate';
+export { addTableTemplateOptions } from 'io-sanita-theme/config/blocks/listing/ListingOptions/tableTemplate';

package/src/config/blocks/listing/ListingOptions/tableTemplate.js

@@ -0,0 +1,105 @@
+import { defineMessages } from 'react-intl';
+import cloneDeep from 'lodash/cloneDeep';
+
+import { addSchemaField } from 'io-sanita-theme/config/blocks/listing/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/listing/listingVariations.js

@@ -1,4 +1,6 @@
 import {
+  AttachmentCardTemplate,
+  AttachmentCardTemplateSkeleton,
   BandiTemplate,
   BandiTemplateSkeleton,
   CardWithImageTemplate,
@@ -18,8 +20,7 @@ import {
   SimpleListTemplateSkeleton,
   SmallBlockLinksTemplate,
   SmallBlockLinksTemplateSkeleton,
-  AttachmentCardTemplate,
-  AttachmentCardTemplateSkeleton
+  TableTemplateSkeleton,
 } from 'io-sanita-theme/components/Blocks';
 
 import CarouselTemplate from 'io-sanita-theme/components/Blocks/Listing/Carousel/CarouselTemplate.jsx';
@@ -28,7 +29,7 @@ import SlideItemDefault from 'io-sanita-theme/components/Blocks/Listing/Carousel
 import SlideGalleryItem from 'io-sanita-theme/components/Blocks/Listing/Carousel/SlideAppearance/SlideGalleryItem';
 import SlideItemSimpleCard from 'io-sanita-theme/components/Blocks/Listing/SimpleCard/Card/SimpleCardDefault';
 import SlideItemImageCard from 'io-sanita-theme/components/Blocks/Listing/CardWithImage/Card/CardWithImageDefault';
-
+import TableTemplate from 'io-sanita-theme/components/Blocks/Listing/Table/TableTemplate';
 // import RibbonCardTemplate from 'io-sanita-theme/components/Blocks/Listing/RibbonCardTemplate';
 // import RibbonCardTemplateSkeleton from 'io-sanita-theme/components/Blocks/Listing/TemplatesSkeletons/RibbonCardTemplateSkeleton';
 
@@ -56,6 +57,7 @@ import {
   addSmallBlockLinksTemplateOptions,
   addCarouselTemplateOptions,
   addAttachmentCardTemplateOptions,
+  addTableTemplateOptions,
   // addRibbonCardTemplateOptions,
   // addBandiInEvidenceTemplateOptions,
 
@@ -234,6 +236,21 @@ const iosanitaListingVariations = [
       gallery_item: SlideGalleryItem,
     },
   },
+  {
+    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: 'ribbonCardTemplate',
   //   isDefault: false,

package/src/config/widgets/widgets.js

@@ -2,6 +2,16 @@ import React from 'react';
 import loadable from '@loadable/component';
 import { defaultIconWidgetOptions } from 'io-sanita-theme/components/manage/Widgets';
 
+const CTFieldsWidget = loadable(() =>
+  import(
+    /* webpackChunkName: "ISManage" */ 'io-sanita-theme/components/manage/Widgets/CTFieldsWidget/CTFieldsWidget'
+  ),
+);
+const CTTitleColumnWidget = loadable(() =>
+  import(
+    /* webpackChunkName: "ISManage" */ 'io-sanita-theme/components/manage/Widgets/CTTitleColumnWidget/CTTitleColumnWidget'
+  ),
+);
 const QuickSearchConfigurationWidget = loadable(() =>
   import(
     /* webpackChunkName: "ISManage" */ 'io-sanita-theme/components/manage/Widgets/QuickSearch/QuickSearchConfigurationWidget'
@@ -28,11 +38,24 @@ const SubsiteSocialLinksWidget = loadable(() =>
     /* webpackChunkName: "ISManage" */ 'io-sanita-theme/components/manage/Widgets/SubsiteSocialLinksWidget/SubsiteSocialLinksWidget'
   ),
 );
+
+const ParliamoDiWidgetView = loadable(() =>
+  import(
+    /* webpackChunkName: "ISWidgetView" */ 'io-sanita-theme/components/View/Widgets/ParliamoDiWidgetView'
+  ),
+);
+const BlocksViewWidget = loadable(() =>
+  import(
+    /* webpackChunkName: "ISWidgetView" */ 'io-sanita-theme/components/View/Widgets/BlocksViewWidget'
+  ),
+);
+
 const PanelsWidget = loadable(() =>
   import(
     /* webpackChunkName: "ISManage" */ 'io-sanita-theme/components/manage/Widgets/PanelsWidget/PanelsWidget'
   ),
 );
+
 export const LinkToWidget = loadable(() =>
   import(
     /* webpackChunkName: "ISManage" */ 'io-sanita-theme/components/manage/Widgets/LinkToWidget/LinkToWidget'
@@ -70,6 +93,13 @@ const getIoSanitaWidgets = (config) => {
       ...config.widgets.widget,
       icon: IconWidget,
       linkTo: LinkToWidget,
+      ct_fields: CTFieldsWidget,
+      ct_title_column: CTTitleColumnWidget,
+    },
+    views: {
+      ...config.widgets.views,
+      id: { ...config.widgets.views.id, parliamo_di: ParliamoDiWidgetView },
+      widget: { ...config.widgets.views.widget, blocks: BlocksViewWidget },
     },
     type: {
       ...config.widgets.type,

package/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx

@@ -85,7 +85,7 @@ const Headline = ({ headlineTag, id, data = {}, listingItems, isEditMode }) => {
               )}
             </Col>
           )}
-          {path_filters_buttons && (
+          {/* {path_filters_buttons && (
             <Col md={6}>
               <PathFilters
                 {...data}
@@ -93,7 +93,7 @@ const Headline = ({ headlineTag, id, data = {}, listingItems, isEditMode }) => {
                 addFilters={addFilters}
               />
             </Col>
-          )}
+          )} */}
         </Row>
       </ListingContainer>
     )
@@ -115,8 +115,8 @@ const ListingBody = withQuerystringResults((props) => {
     hasLoaded,
     id,
     block,
-    additionalFilters,
-    addFilters,
+    // additionalFilters,
+    // addFilters,
   } = props;
 
   let ListingBodyTemplate;
@@ -173,8 +173,8 @@ const ListingBody = withQuerystringResults((props) => {
               listingItems={listingItems}
               data={data}
               isEditMode={isEditMode}
-              additionalFilters={additionalFilters}
-              addFilters={addFilters}
+              // additionalFilters={additionalFilters}
+              // addFilters={addFilters}
             />
             <div
               ref={listingRef}

package/src/reducers/ctSchema.js

@@ -0,0 +1,80 @@
+import { GET_CT_SCHEMA } from 'io-sanita-theme/actions';
+
+const initialState = {
+  error: null,
+  result: {},
+  loaded: false,
+  loading: false,
+  subrequests: {},
+};
+
+export function ctSchema(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${GET_CT_SCHEMA}_PENDING`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                ...state.subrequests[action.subrequest],
+                result: {},
+                error: null,
+                loaded: false,
+                loading: true,
+              },
+            },
+          }
+        : {
+            ...state,
+            error: null,
+            loading: true,
+            loaded: false,
+          };
+    case `${GET_CT_SCHEMA}_SUCCESS`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                error: null,
+                result: action.result,
+                loaded: true,
+                loading: false,
+              },
+            },
+          }
+        : {
+            ...state,
+            error: null,
+            result: action.result,
+            loaded: true,
+            loading: false,
+          };
+    case `${GET_CT_SCHEMA}_FAIL`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                error: action.error,
+                result: {},
+                loading: false,
+                loaded: false,
+              },
+            },
+          }
+        : {
+            ...state,
+            error: action.error,
+            result: {},
+
+            loading: false,
+            loaded: false,
+          };
+    default:
+      return state;
+  }
+}

package/src/reducers/index.js

@@ -19,6 +19,7 @@ import { searchBandiFiltersReducer } from './searchBandiFiltersReducer';
 // import { breadcrumbs } from './breadcrumbs';
 import { iosanita_settings } from './settings';
 import { farmaciaReducer } from './farmaciaReducer';
+import { ctSchema } from './ctSchema';
 
 /**
  * Root reducer.
@@ -41,6 +42,7 @@ const reducers = {
   // breadcrumbs: breadcrumbs,
   iosanita_settings,
   farmacia: farmaciaReducer,
+  ct_schema: ctSchema,
 };
 
 export default reducers;

package/src/theme/_bootstrap-italia.scss

@@ -65,6 +65,7 @@
   @import 'bootstrap-italia/src/scss/custom/grid';
   @import './bootstrap-italia/custom/grid';
   @import 'bootstrap-italia/src/scss/custom/tables';
+  @import './bootstrap-italia/custom/tables';
   @import 'bootstrap-italia/src/scss/custom/breadcrumb';
   @import 'bootstrap-italia/src/scss/custom/modal';
   @import 'bootstrap-italia/src/scss/custom/accordion';

package/src/theme/_variables.scss

@@ -15,7 +15,7 @@ $primary-darker: hsl(
 $accent: #9c0769 !default;
 
 $info: hsl(189, 47%, 54%) !default;
-
+$light: hsl(189, 28%, 88%) !default;
 $primary-text: #fff !default;
 $accent-contrast-text: #fff !default;
 $bg-primary-lightest: hsl($primary-h, 50%, 97%) !default; //#F4FAFB;

package/src/theme/bootstrap-italia/custom/_tables.scss

@@ -0,0 +1 @@
+@include table-variant('light', #c5c7c9); //override light table variant

package/src/theme/io-sanita/components/blocks/_skeleton.scss

@@ -141,15 +141,17 @@
 
     th,
     td {
-      height: 3.6em;
+      height: 2.5rem;
+      //min-width: 4rem;
+      @extend %skeleton-animation;
     }
 
     th {
-      background-color: var(--skeleton-item);
+      background-color: var(--skeleton-bg) !important;
     }
 
     td {
-      background-color: var(--skeleton-bg);
+      background-color: #fff;
     }
   }