Introduce start and enddate within SummaryView for Listings including…

… events

frontend/src/addons/volto-plonede/src/customizations/volto/components/manage/Blocks/Listing/SummaryTemplate.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ConditionalLink, Component, FormattedDate } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+
+const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
+  let link = null;
+  let href = linkHref?.[0]?.['@id'] || '';
+
+  if (isInternalURL(href)) {
+    link = (
+      <ConditionalLink to={flattenToAppURL(href)} condition={!isEditMode}>
+        {linkTitle || href}
+      </ConditionalLink>
+    );
+  } else if (href) {
+    link = <a href={href}>{linkTitle || href}</a>;
+  }
+
+  return (
+    <>
+      <div className="items">
+        {items.map((item) => (
+          <div className="listing-item" key={item['@id']}>
+            <ConditionalLink item={item} condition={!isEditMode}>
+              <Component componentName="PreviewImage" item={item} alt="" />
+              <div className="listing-body">
+                <h3>{item.title || item.id}</h3>
+                {
+                  item.start && item.end && (
+                    <p><FormattedDate date={item.start} /> - <FormattedDate date={item.end} /></p>
+                  )
+                }
+                <p>{item.description}</p>
+              </div>
+            </ConditionalLink>
+          </div>
+        ))}
+      </div>
+
+      {link && <div className="footer">{link}</div>}
+    </>
+  );
+};
+
+SummaryTemplate.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  linkMore: PropTypes.any,
+  isEditMode: PropTypes.bool,
+};
+
+export default SummaryTemplate;