From 204f28e21ea13a3381c3315c37b3e6ca91b3e7e3 Mon Sep 17 00:00:00 2001
From: Adrian Schulz <adrian.schulz@fhnw.ch>
Date: Mon, 13 May 2024 15:49:35 +0200
Subject: [PATCH] Introduce start and enddate within SummaryView for Listings
 including events

---
 .../manage/Blocks/Listing/SummaryTemplate.jsx | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 frontend/src/addons/volto-plonede/src/customizations/volto/components/manage/Blocks/Listing/SummaryTemplate.jsx

diff --git a/frontend/src/addons/volto-plonede/src/customizations/volto/components/manage/Blocks/Listing/SummaryTemplate.jsx b/frontend/src/addons/volto-plonede/src/customizations/volto/components/manage/Blocks/Listing/SummaryTemplate.jsx
new file mode 100644
index 0000000..a9de0cf
--- /dev/null
+++ b/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;