feat: add time to listing and imagecard blocks

intk · Mar 22, 2024 · f9d603b · f9d603b
1 parent 9d1918e
commit f9d603b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/backend/src/haagshistorischmuseum/src/haagshistorischmuseum/profiles/default/catalog.xml b/backend/src/haagshistorischmuseum/src/haagshistorischmuseum/profiles/default/catalog.xml
@@ -1,13 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <object name="portal_catalog">
-  <!-- Index
-  <index meta_type="FieldIndex"
-         name="industry"
-  >
-    <indexed_attr value="industry" />
-  </index>
--->
-  <!-- Metadata
-  <column value="industry" />
--->
+  <column value="whole_day" />
+  <column value="open_end" />
+  <column value="recurrence" />
 </object>
diff --git a/frontend/src/components/blocks/Listing/HomepageSliderTemplate.jsx b/frontend/src/components/blocks/Listing/HomepageSliderTemplate.jsx
@@ -29,6 +29,7 @@ const messages = defineMessages({
 
 const Card = ({ item, index, hideText }) => {
   const { title, start, end, whole_day } = item || {};
+  const wholeDay = typeof whole_day === 'boolean' ? whole_day : false;
   const isEvent = item?.['@type'] === 'Event';
   const endDate = new Date(end || Date.now());
   const startDate = new Date(start || Date.now());
@@ -87,7 +88,7 @@ const Card = ({ item, index, hideText }) => {
                         intl.locale,
                         startDate,
                         endDate,
-                        whole_day,
+                        wholeDay,
                       )}
                     </p>
                   )}

diff --git a/frontend/src/components/blocks/Listing/ListingTemplate.jsx b/frontend/src/components/blocks/Listing/ListingTemplate.jsx
@@ -8,6 +8,7 @@ import { Grid } from 'semantic-ui-react';
 
 const Card = ({ item, showDescription = true, hideDates = false }) => {
   const intl = useIntl();
+  const wholeDay = typeof item.whole_day === 'boolean' ? item.whole_day : false;
   const start = item.start ? new Date(item.start) : undefined;
   const end = item.end ? new Date(item.end) : undefined;
   const image = item?.image_field
@@ -34,14 +35,14 @@ const Card = ({ item, showDescription = true, hideDates = false }) => {
           {item['@type'] === 'Event' && start && end && (
             <div className="listing-dates">
               <div className={`listing-dates-wrapper`}>
-                {getDateRangeDescription(intl.locale, start, end)}
+                {getDateRangeDescription(intl.locale, start, end, wholeDay)}
               </div>
             </div>
           )}
           {item['@type'] === 'News Item' && (
             <div className="listing-dates">
               <div className={`listing-dates-wrapper`}>
-                {getDateRangeDescription(intl.locale, start, end)}
+                {getDateRangeDescription(intl.locale, start, end, wholeDay)}
               </div>
             </div>
           )}

diff --git a/frontend/src/helpers/getDateRangeDescription.js b/frontend/src/helpers/getDateRangeDescription.js
@@ -1,17 +1,16 @@
 export function getDateRangeDescription(lang, start, end, wholeDay = true) {
-  // const startTime = new Intl.DateTimeFormat(lang, {
-  //   hour: 'numeric',
-  //   minute: 'numeric',
-  // }).format(start);
+  const startTime = new Intl.DateTimeFormat(lang, {
+    hour: 'numeric',
+    minute: 'numeric',
+  }).format(start);
 
-  // const endTime = new Intl.DateTimeFormat(lang, {
-  //   hour: 'numeric',
-  //   minute: 'numeric',
-  // }).format(end);
+  const endTime = new Intl.DateTimeFormat(lang, {
+    hour: 'numeric',
+    minute: 'numeric',
+  }).format(end);
 
-  // const time =
-  //   wholeDay || startTime === endTime ? '' : `, ${startTime} - ${endTime}`;
-  const time = '';
+  const time =
+    wholeDay || startTime === endTime ? '' : `, ${startTime} - ${endTime}`;
 
   if (
     !end ||