feat: added new AttachmentCardTemplate listing variation

RELEASE.md

@@ -50,7 +50,7 @@
 
 ### Novità
 
-- ...
+- Aggiunto una nuova variazione del blocco elenco "Allegati" che permette di scaricare oggetti di tipo File o aprire l'anteprima di file PDF.
 
 ### Fix
 

locales/de/LC_MESSAGES/volto.po

@@ -859,6 +859,7 @@ msgstr ""
 msgid "assessore_riferimento"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/View/Commons/Attachment
 # defaultMessage: Allegato
 msgid "attachment"
@@ -2300,6 +2301,7 @@ msgstr ""
 msgid "legend_required"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
@@ -3599,6 +3601,16 @@ msgstr ""
 msgid "show_only_first_ribbon"
 msgstr ""
 
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.
+msgid "show_pdf_desc"
+msgstr ""
+
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Mostra i PDF in anteprima
+msgid "show_pdf_preview"
+msgstr ""
+
 #: config/Blocks/ListingOptions/simpleListTemplate
 # defaultMessage: Mostra elenco puntato
 msgid "show_pointer_list"

locales/en/LC_MESSAGES/volto.po

@@ -844,6 +844,7 @@ msgstr "Councilor of"
 msgid "assessore_riferimento"
 msgstr "Reference councilor"
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/View/Commons/Attachment
 # defaultMessage: Allegato
 msgid "attachment"
@@ -2285,6 +2286,7 @@ msgstr "Internal services or offices"
 msgid "legend_required"
 msgstr "Fields marked with (*) are required."
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
@@ -3584,6 +3586,16 @@ msgstr ""
 msgid "show_only_first_ribbon"
 msgstr ""
 
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.
+msgid "show_pdf_desc"
+msgstr "Allows you to open the preview of all the PDFs in this list in a separate tab otherwise they will be downloaded."
+
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Mostra i PDF in anteprima
+msgid "show_pdf_preview"
+msgstr "Show PDFs in preview"
+
 #: config/Blocks/ListingOptions/simpleListTemplate
 # defaultMessage: Mostra elenco puntato
 msgid "show_pointer_list"

locales/es/LC_MESSAGES/volto.po

@@ -853,6 +853,7 @@ msgstr "Concejal de"
 msgid "assessore_riferimento"
 msgstr "Concejal de referencia"
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/View/Commons/Attachment
 # defaultMessage: Allegato
 msgid "attachment"
@@ -2294,6 +2295,7 @@ msgstr "Servicios internos u oficinas"
 msgid "legend_required"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
@@ -3593,6 +3595,16 @@ msgstr "Mostrar el mapa en ancho completo"
 msgid "show_only_first_ribbon"
 msgstr "Mostrar la cinta solo en la primera tarjeta"
 
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.
+msgid "show_pdf_desc"
+msgstr "Le permite abrir la vista previa de todos los archivos PDF en esta lista en una pestaña separada, de lo contrario, se descargarán."
+
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Mostra i PDF in anteprima
+msgid "show_pdf_preview"
+msgstr "Mostrar archivos PDF en vista previa"
+
 #: config/Blocks/ListingOptions/simpleListTemplate
 # defaultMessage: Mostra elenco puntato
 msgid "show_pointer_list"

locales/fr/LC_MESSAGES/volto.po

@@ -861,6 +861,7 @@ msgstr "Conseiller de"
 msgid "assessore_riferimento"
 msgstr "Référence du conseiller"
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/View/Commons/Attachment
 # defaultMessage: Allegato
 msgid "attachment"
@@ -2302,6 +2303,7 @@ msgstr ""
 msgid "legend_required"
 msgstr "Les champs marqués d'une (*) sont obligatoires."
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
@@ -3601,6 +3603,16 @@ msgstr ""
 msgid "show_only_first_ribbon"
 msgstr ""
 
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.
+msgid "show_pdf_desc"
+msgstr "Permet d'ouvrir l'aperçu de tous les PDF de cette liste dans un onglet séparé sinon ils seront téléchargés."
+
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Mostra i PDF in anteprima
+msgid "show_pdf_preview"
+msgstr "Afficher les PDF en aperçu"
+
 #: config/Blocks/ListingOptions/simpleListTemplate
 # defaultMessage: Mostra elenco puntato
 msgid "show_pointer_list"

locales/it/LC_MESSAGES/volto.po

@@ -844,6 +844,7 @@ msgstr "Assessore di"
 msgid "assessore_riferimento"
 msgstr "Assessore di riferimento"
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/View/Commons/Attachment
 # defaultMessage: Allegato
 msgid "attachment"
@@ -2285,6 +2286,7 @@ msgstr "Servizi o uffici interni"
 msgid "legend_required"
 msgstr "I campi contrassegnati da (*) sono obbligatori."
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
@@ -3584,6 +3586,16 @@ msgstr "Mostra la mappa a tutta larghezza"
 msgid "show_only_first_ribbon"
 msgstr "Mostra il nastro solo sulla prima card"
 
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.
+msgid "show_pdf_desc"
+msgstr "Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati."
+
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Mostra i PDF in anteprima
+msgid "show_pdf_preview"
+msgstr "Mostra i PDF in anteprima"
+
 #: config/Blocks/ListingOptions/simpleListTemplate
 # defaultMessage: Mostra elenco puntato
 msgid "show_pointer_list"

locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-03-07T15:23:38.346Z\n"
+"POT-Creation-Date: 2024-03-27T08:54:22.652Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -846,6 +846,7 @@ msgstr ""
 msgid "assessore_riferimento"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/View/Commons/Attachment
 # defaultMessage: Allegato
 msgid "attachment"
@@ -2287,6 +2288,7 @@ msgstr ""
 msgid "legend_required"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
@@ -3586,6 +3588,16 @@ msgstr ""
 msgid "show_only_first_ribbon"
 msgstr ""
 
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.
+msgid "show_pdf_desc"
+msgstr ""
+
+#: config/Blocks/ListingOptions/attachmentCardTemplate
+# defaultMessage: Mostra i PDF in anteprima
+msgid "show_pdf_preview"
+msgstr ""
+
 #: config/Blocks/ListingOptions/simpleListTemplate
 # defaultMessage: Mostra elenco puntato
 msgid "show_pointer_list"

src/components/ItaliaTheme/Blocks/Listing/AttachmentCardTemplate.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { defineMessages, useIntl } from 'react-intl';
+import { UniversalLink } from '@plone/volto/components';
+import { Container, Card, CardBody, CardTitle } from 'design-react-kit';
+import {
+  Icon,
+  ListingLinkMore,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+const messages = defineMessages({
+  link: {
+    id: 'link',
+    defaultMessage: 'Collegamento',
+  },
+  attachment: {
+    id: 'attachment',
+    defaultMessage: 'Allegato',
+  },
+});
+
+const AttachmentCardTemplate = ({
+  items,
+  isEditMode,
+  linkTitle,
+  linkHref,
+  show_pdf_preview,
+  show_block_bg,
+  title,
+  id_lighthouse,
+  linkAlign,
+  titleLine,
+  linkmore_id_lighthouse,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Container className="px-4">
+      <div className="simple-card-compact-template">
+        {title && (
+          <h2
+            className={cx('mb-4', {
+              'mt-5': !show_block_bg,
+              'title-bottom-line': titleLine,
+            })}
+          >
+            {title}
+          </h2>
+        )}
+        <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal card-teaser-block-3 mb-3">
+          {items.map((item, index) => {
+            let itemUrl = { ...item };
+            if (item['@type'] === 'File') {
+              itemUrl = {
+                ...item,
+                file: item,
+                '@id':
+                  show_pdf_preview && item?.mime_type === 'application/pdf'
+                    ? item?.['@id'] + '/@@display-file/file'
+                    : item?.['@id'] + '/@@download/file',
+              };
+            }
+
+            return (
+              <Card
+                className="card card-teaser shadow p-4 mt-3 rounded attachment"
+                noWrapper={true}
+                tag="div"
+              >
+                {item['@type'] === 'File' ? (
+                  <Icon
+                    icon="it-clip"
+                    alt={intl.formatMessage(messages.attachment)}
+                  />
+                ) : (
+                  <Icon
+                    icon="it-link"
+                    alt={intl.formatMessage(messages.link)}
+                  />
+                )}
+                <CardBody tag="div">
+                  <CardTitle tag="h5" className="mb-0">
+                    <UniversalLink
+                      item={!isEditMode ? itemUrl : null}
+                      href={isEditMode ? '#' : null}
+                      data-element={id_lighthouse}
+                    >
+                      {item.title || item.id}
+                    </UniversalLink>
+                  </CardTitle>
+                </CardBody>
+              </Card>
+            );
+          })}
+        </div>
+
+        <ListingLinkMore
+          title={linkTitle}
+          href={linkHref}
+          className="my-4"
+          linkAlign={linkAlign}
+          linkmoreIdLighthouse={linkmore_id_lighthouse}
+        />
+      </div>
+    </Container>
+  );
+};
+
+AttachmentCardTemplate.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+  linkTitle: PropTypes.any,
+};
+
+export default AttachmentCardTemplate;

src/config/Blocks/ListingOptions/attachmentCardTemplate.js

@@ -0,0 +1,40 @@
+import { defineMessages } from 'react-intl';
+
+import { templatesOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions';
+
+const messages = defineMessages({
+  show_pdf_preview: {
+    id: 'show_pdf_preview',
+    defaultMessage: 'Mostra i PDF in anteprima',
+  },
+  show_pdf_desc: {
+    id: 'show_pdf_desc',
+    defaultMessage:
+      "Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.",
+  },
+});
+
+export const addAttachmentCardTemplateOptions = (
+  schema,
+  formData,
+  intl,
+  position = 1,
+) => {
+  let pos = position;
+
+  pos = templatesOptions(
+    schema,
+    formData,
+    intl,
+    ['show_pdf_preview'],
+    {
+      show_pdf_preview: {
+        default: false,
+        label: intl.formatMessage(messages.show_pdf_preview),
+        description: intl.formatMessage(messages.show_pdf_desc),
+      },
+    },
+    pos,
+  );
+  return pos;
+};

src/config/Blocks/ListingOptions/index.js

@@ -22,3 +22,4 @@ export { addSimpleListTemplateOptions } from 'design-comuni-plone-theme/config/B
 export { addCardWithSlideUpTextTemplateOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/cardWithSlideUpTextTemplate';
 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';