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 1/2] 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;

From a772a6561fc9388fe109160c1f46deb74ee88605 Mon Sep 17 00:00:00 2001
From: Adrian Schulz <adrian.schulz@fhnw.ch>
Date: Mon, 13 May 2024 16:00:40 +0200
Subject: [PATCH 2/2] formatted shadowed summarytemplate

---
 .../manage/Blocks/Listing/SummaryTemplate.jsx   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

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
index a9de0cf..6f8fcae 100644
--- 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
@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ConditionalLink, Component, FormattedDate } from '@plone/volto/components';
+import {
+  ConditionalLink,
+  Component,
+  FormattedDate,
+} from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
@@ -28,11 +32,12 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, 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>
-                  )
-                }
+                {item.start && item.end && (
+                  <p>
+                    <FormattedDate date={item.start} /> -{' '}
+                    <FormattedDate date={item.end} />
+                  </p>
+                )}
                 <p>{item.description}</p>
               </div>
             </ConditionalLink>