fix: date in tabella per trasparenza

package.json

@@ -87,6 +87,7 @@
     "design-react-kit": "5.0.0-10",
     "htmldiff-js": "1.0.5",
     "marked": "9.0.0",
+    "moment-timezone": "0.6.0",
     "react-focus-lock": "2.12.1",
     "react-highlight-words": "0.20.0",
     "react-slick": "0.30.2",

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

@@ -39,7 +39,7 @@ const TableTemplate = (props) => {
   // necessario per gli edditor nel momento in cui aggiungono nuove colonne
   const ct_schema = useSelector((state) => state.ct_schema?.subrequests);
 
-  let render_columns =
+  const render_columns =
     (columns ?? []).filter((c) => c.field === 'title').length > 0
       ? columns
       : [
@@ -87,6 +87,7 @@ const TableTemplate = (props) => {
                     ct_schema?.[c.ct]?.result?.properties?.[c.field] ??
                     {};
                   let render_value = JSON.stringify(item[c.field]);
+                  let field_value = item[c.field];
 
                   if (field_properties) {
                     const field = {
@@ -100,23 +101,45 @@ const TableTemplate = (props) => {
                       behavior: field_properties.behavior,
                     };
                     if (field_properties.widget === 'datetime') {
-                      widget_props.format = 'DD/MM/yyyy HH:MM';
-                    }
-                    // per questi campi si è deciso dii non pubblicare ora:minuti
-                    switch (c.field) {
-                      case 'apertura_bando':
-                      case 'chiusura_procedimento_bando':
-                      case 'scadenza_domande_bando':
-                      case 'scadenza_bando':
+                      if (field_value?.indexOf('T') > 0) {
+                        widget_props.format = 'DD/MM/yyyy HH:mm';
+                        field_value =
+                          field_value +
+                          (field_value.indexOf('Z') < 0 &&
+                          field_value.indexOf('+') < 0
+                            ? 'Z'
+                            : '');
+                      } else {
                         widget_props.format = 'DD/MM/yyyy';
+                      }
+                    }
+                    // per questi campi si è deciso di non pubblicare ora:minuti
+                    // XXX: queste personalizzazioni sul formato dei datetime, basate sui nomi
+                    //      dei field sono da rivedere in modo differente
+                    switch (c.ct) {
+                      case 'ATAvviso':
+                      case 'ATGara':
+                      case 'ATAffidamento':
+                      case 'ATConcorso':
                         break;
                       default:
-                        break;
+                        switch (c.field) {
+                          case 'apertura_bando':
+                          case 'chiusura_procedimento_bando':
+                          case 'scadenza_domande_bando':
+                          case 'scadenza_bando':
+                            widget_props.format = 'DD/MM/yyyy';
+                            break;
+                          default:
+                            break;
+                        }
                     }
-                    // rimuove ora, se non valorizzata
+                    // rimuove ora, se non valorizzata (XXX: in realtà se la data è UTC
+                    // non fa quello che ci si aspetterebbe)
                     if (
                       field_properties.widget === 'datetime' &&
-                      item[c.field]?.indexOf('T00:00') > 0
+                      (field_value?.indexOf('T00:00') >= 0 ||
+                        field_value?.indexOf('T23:59') >= 0)
                     ) {
                       widget_props.format = 'DD/MM/yyyy';
                     }
@@ -126,7 +149,7 @@ const TableTemplate = (props) => {
                     }
 
                     render_value = (
-                      <Widget value={item[c.field]} {...widget_props} />
+                      <Widget value={field_value} {...widget_props} />
                     );
                   }
                   if (c.field === 'title') {
@@ -136,7 +159,7 @@ const TableTemplate = (props) => {
                         href={isEditMode ? '#' : ''}
                         className="img-link"
                       >
-                        {item[c.field]}
+                        {field_value}
                       </UniversalLink>
                     );
                   }

src/components/View/Bando/Dates.jsx

@@ -2,8 +2,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import React from 'react';
 import { Card, CardTitle, CardBody } from 'design-react-kit';
 import PropTypes from 'prop-types';
-
+import { useSelector } from 'react-redux';
 import { viewDate } from 'io-sanita-theme/helpers';
+import moment from 'moment-timezone';
 
 const messages = defineMessages({
   effective: {
@@ -88,43 +89,51 @@ const BandoDates = ({ content }) => {
   return content ? <Dates dates={dates} /> : null;
 };
 
-const Dates = ({ dates }) => (
-  <div className="point-list-wrapper my-4 mb-5">
-    {dates.map((item, index) => {
-      return (
-        item.date && (
-          <div className="point-list" key={index}>
-            <div
-              className="point-list-aside point-list-warning"
-              aria-label={item.date.format('DD MMMM Y')}
-            >
-              <span className="point-date text-monospace" aria-hidden={true}>
-                {item.date.format('DD')}
-              </span>
-              <span className="point-month text-monospace" aria-hidden={true}>
-                {item.date.format('MMM')}/{item.date.format('YY')}
-              </span>
-            </div>
-            <div className="point-list-content">
-              <Card
-                className="card card-teaser rounded shadow"
-                noWrapper={true}
-                tag="div"
+const Dates = ({ dates }) => {
+  const site = useSelector((state) => state.site.data);
+  const tz = site?.['plone.portal_timezone'] ?? 'Europe/Rome';
+
+  return (
+    <div className="point-list-wrapper my-4 mb-5">
+      {dates.map((item, index) => {
+        return (
+          item.date && (
+            <div className="point-list" key={index}>
+              <div
+                className="point-list-aside point-list-warning"
+                aria-label={moment.tz(item.date, tz).format('DD MMMM Y')}
               >
-                <CardBody tag="div" className={'card-body'}>
-                  <CardTitle tag="p">
-                    {item.show_hour && <>{item.date.format('HH:mm')} - </>}
-                    {item.label}
-                  </CardTitle>
-                </CardBody>
-              </Card>
+                <span className="point-date text-monospace" aria-hidden={true}>
+                  {moment.tz(item.date, tz).format('DD')}
+                </span>
+                <span className="point-month text-monospace" aria-hidden={true}>
+                  {moment.tz(item.date, tz).format('MMM')}/
+                  {moment.tz(item.date, tz).format('YY')}
+                </span>
+              </div>
+              <div className="point-list-content">
+                <Card
+                  className="card card-teaser rounded shadow"
+                  noWrapper={true}
+                  tag="div"
+                >
+                  <CardBody tag="div" className={'card-body'}>
+                    <CardTitle tag="p">
+                      {item.show_hour && (
+                        <>{moment.tz(item.date, tz).format('HH:mm')} - </>
+                      )}
+                      {item.label}
+                    </CardTitle>
+                  </CardBody>
+                </Card>
+              </div>
             </div>
-          </div>
-        )
-      );
-    })}
-  </div>
-);
+          )
+        );
+      })}
+    </div>
+  );
+};
 
 export { Dates };
 

src/customizations/volto/components/theme/Widgets/DatetimeWidget.jsx

@@ -0,0 +1,31 @@
+/*
+ * customization from @plone/volto 18.9.1
+ *
+ * show time using the server timezone
+ *
+ */
+
+import React from 'react';
+import cx from 'classnames';
+import moment from 'moment-timezone';
+import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+
+const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
+  const lang = useSelector((state) => state.intl.locale);
+  const tz = useSelector(
+    (state) => state.site?.data?.['plone.portal_timezone'] ?? 'Europe/Rome',
+  );
+  moment.locale(toBackendLang(lang));
+  return value ? (
+    <span className={cx(className, 'datetime', 'widget')}>
+      {children
+        ? children(moment.tz(value, tz).format(format))
+        : moment.tz(value, tz).format(format)}
+    </span>
+  ) : (
+    ''
+  );
+};
+
+export default DatetimeWidget;