Optional Event Information and Simplified UI

CHANGELOG.md

@@ -2,7 +2,18 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [0.10.1]
+
+> 24 October 2022
+
+- Optional Event Date (End dates shows if different from Start Date)
+- Optional Event Time (Separator show if both date and time are selected)
+- Optional Event Location
+- Simplified Block side menu to reduce the number of collapsible accordions
+- Simplified fields labels
+- Move Heading information to the same location as default variants 
+
 
 #### [0.10.0](https://github.com/codesyntax/volto-listingadvanced-variation/compare/0.9.0...0.10.0)
 

README.md

@@ -4,11 +4,17 @@ Volto addon to add an additional variation to the default listing block with adv
 
 This add-on adds a fully customizable variation to the default listing block. It adds the following features:
 
+- Select the number of columns in which the content will be shown
 - Select to show the image of the item or not
 - Select the position of the image in the item card
 - Select the size of the card (to build mosaic-like listings)
+- An option to select to show the description
 - An option to select to show the publication date
-- Select the number of columns in which the content will be shown
+- An option to select to show the event date
+- An option to select to show the event time
+- An option to select to show the event location
+
+![volto-listingadvanced-variation block details](https://github.com/rnunez80/volto-listingadvanced-variation/blob/main/Screenshot%202022-10-24%20at%2012.28.49%20PM.png?raw=true)
 
 Installation:
 

src/AdvancedListingBlockTemplate.jsx

@@ -1,28 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ConditionalLink } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import {ConditionalLink} from '@plone/volto/components';
+import {flattenToAppURL} from '@plone/volto/helpers';
 
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
-import { isInternalURL } from '@plone/volto/helpers/Url/Url';
-import { Grid, Image } from 'semantic-ui-react';
+import {isInternalURL} from '@plone/volto/helpers/Url/Url';
+import {Grid, Image} from 'semantic-ui-react';
 import moment from 'moment';
-import { useIntl } from 'react-intl';
+import {useIntl} from 'react-intl';
+
 const AdvancedListingBlockTemplate = ({
-  items,
-  moreLinkText,
-  moreLinkUrl,
-  header,
-  headerUrl,
-  headerTag,
-  isEditMode,
-  imageSide,
-  imageWidth,
-  howManyColumns,
-  effectiveDate,
-  titleTag,
-  showDescription,
-}) => {
+                                        items,
+                                        moreLinkText,
+                                        moreLinkUrl,
+                                        header,
+                                        headerUrl,
+                                        headerTag,
+                                        isEditMode,
+                                        imageSide,
+                                        imageWidth,
+                                        howManyColumns,
+                                        effectiveDate,
+                                        titleTag,
+                                        showDescription,
+                                        eventDate,
+                                        eventLocation,
+                                        eventTime
+                                      }) => {
   let moreLink = null;
   let moreHref = moreLinkUrl?.[0]?.['@id'] || '';
   if (isInternalURL(moreHref)) {
@@ -46,16 +50,58 @@ const AdvancedListingBlockTemplate = ({
   } else if (headerHref) {
     moreLink = <a href={headerHref}>{moreLinkText || headerHref}</a>;
   }
+  const getEventDate = (item) => {
+    let start = '',
+      end = '';
+
+    if (item.start) {
+      const parsedDate = new Date(Date.parse(item.start));
+      start = `${parsedDate.toLocaleString('default', {
+        month: 'short',
+      })} ${parsedDate.getDate()}, ${parsedDate.getFullYear()}`;
+    }
+
+    if (item.end) {
+      const parsedDate = new Date(Date.parse(item.end));
+      end = `${parsedDate.toLocaleString('default', {
+        month: 'short',
+      })} ${parsedDate.getDate()}, ${parsedDate.getFullYear()}`;
+    }
+    if (end == start) {return start}
+    else {return start + ' - ' + end;};
+  };
+  const getEventTime = (item) => {
+    let start = '',
+      end = '';
 
+    if (item.start) {
+      const parsedDate = new Date(Date.parse(item.start));
+      start = `${parsedDate.toLocaleString(
+        'en-US',
+        {hour: 'numeric', minute: 'numeric', hour12: true},
+      )}`;
+    }
+
+    if (item.end) {
+      const parsedDate = new Date(Date.parse(item.end));
+      end = ` - ${parsedDate.toLocaleString('en-US', {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+      })}`;
+    }
+
+    return start + end;
+  };
   const hasImage = imageSide !== null;
   const oneColumnElement = ['up', 'down', null].includes(imageSide);
   const columnSize = oneColumnElement ? 1 : 2;
   const imageGridWidth = oneColumnElement ? 12 : imageWidth ? imageWidth : 2;
   const contentGridWidth = oneColumnElement
     ? 12
     : hasImage
-    ? 12 - imageWidth
-    : 12;
+      ? 12 - imageWidth
+      : 12;
   const intl = useIntl();
   const TitleTag = titleTag ? titleTag : 'h3';
   const HeaderTag = headerTag ? headerTag : 'h3';
@@ -99,10 +145,15 @@ const AdvancedListingBlockTemplate = ({
                     {item.title ? item.title : item.id}
                   </ConditionalLink>
                 </TitleTag>
+                {eventDate|eventTime && <p class="event-when">{eventDate && <span className="start-date">{getEventDate(item)}</span>}
+                {eventTime && eventDate && <span> | </span>}
+                  {eventTime && <span className="start-time">{getEventTime(item)}</span>}</p>||null}
+                {eventLocation && <p>{item.location}</p>}
                 {effectiveDate && <p>{moment(item.effective).format('L')}</p>}
                 {showDescription && item.description && (
                   <p>{item.description}</p>
                 )}
+
               </Grid.Column>
               {['right', 'down'].includes(imageSide) && (
                 <Grid.Column width={imageGridWidth}>

src/advancedSchema.js

@@ -1,10 +1,10 @@
 import messages from './messages';
 
 export const advancedSchema = (props) => {
-  const { intl, schema, formData } = props;
-  const imageWidth = ['right', 'left'].includes(formData.imageSide)
-    ? ['imageWidth']
-    : [];
+  const {intl, schema, formData} = props;
+  // const imageWidth = ['right', 'left'].includes(formData.imageSide)
+  //   ? ['imageWidth']
+  //   : [];
   const headingChoices = [
     ['h2', 'H2'],
     ['h3', 'H3'],
@@ -13,45 +13,21 @@ export const advancedSchema = (props) => {
   return {
     ...schema,
     fieldsets: [
+      ...schema.fieldsets,
+      // {
+      //   id: 'default',
+      //   title: 'Default',
+      //   fields: ['variation', 'headline', 'headlineTag'],
+      // },
+      // {
+      //   id: 'querystring',
+      //   title: intl.formatMessage(messages.querystring),
+      //   fields: ['querystring'],
+      // },
       {
-        id: 'default',
-        title: 'Default',
-        fields: ['variation'],
-      },
-      {
-        id: 'querystring',
-        title: intl.formatMessage(messages.querystring),
-        fields: ['querystring'],
-      },
-      {
-        id: 'header',
-        title: intl.formatMessage(messages.headerConfiguration),
-        fields: ['header', 'headerUrl', 'headerTag'],
-      },
-      {
-        id: 'columns',
-        title: intl.formatMessage(messages.columnsConfiguration),
-        fields: ['howManyColumns'],
-      },
-      {
-        id: 'image',
-        title: intl.formatMessage(messages.imageConfiguration),
-        fields: ['imageSide', ...imageWidth],
-      },
-      {
-        id: 'title',
-        title: intl.formatMessage(messages.titleConfiguration),
-        fields: ['titleTag'],
-      },
-      {
-        id: 'description',
-        title: intl.formatMessage(messages.descriptionConfiguration),
-        fields: ['showDescription'],
-      },
-      {
-        id: 'date',
-        title: intl.formatMessage(messages.dateConfiguration),
-        fields: ['effectiveDate'],
+        id: 'display',
+        title: intl.formatMessage(messages.itemDisplayOptions),
+        fields: ['howManyColumns', 'imageSide', 'imageWidth', 'titleTag', 'showDescription', 'effectiveDate', 'eventDate', 'eventTime', 'eventLocation'],
       },
       {
         id: 'moreLink',
@@ -61,22 +37,6 @@ export const advancedSchema = (props) => {
     ],
     properties: {
       ...schema.properties,
-      header: {
-        title: intl.formatMessage(messages.header),
-        description: intl.formatMessage(messages.headerDescription),
-      },
-      headerUrl: {
-        title: intl.formatMessage(messages.headerUrl),
-        description: intl.formatMessage(messages.headerUrlDescription),
-        widget: 'object_browser',
-        mode: 'link',
-        allowExternals: true,
-      },
-      headerTag: {
-        title: intl.formatMessage(messages.headerTag),
-        description: intl.formatMessage(messages.headerTagDescription),
-        choices: [['h1', 'H1'], ...headingChoices],
-      },
       howManyColumns: {
         title: intl.formatMessage(messages.columnsCount),
         choices: [
@@ -99,7 +59,6 @@ export const advancedSchema = (props) => {
       },
       imageSide: {
         title: intl.formatMessage(messages.imagePosition),
-        description: intl.formatMessage(messages.imagePositionDescription),
         choices: [
           [null, 'No image'],
           ['up', 'up'],
@@ -110,18 +69,27 @@ export const advancedSchema = (props) => {
       },
       titleTag: {
         title: intl.formatMessage(messages.titleTag),
-        description: intl.formatMessage(messages.titleTagDescription),
         choices: headingChoices,
       },
       showDescription: {
         title: intl.formatMessage(messages.descriptionTitle),
-        description: intl.formatMessage(messages.descriptionDescription),
         type: 'boolean',
         default: true,
       },
       effectiveDate: {
         title: intl.formatMessage(messages.date),
-        description: intl.formatMessage(messages.dateDescription),
+        type: 'boolean',
+      },
+      eventDate: {
+        title: intl.formatMessage(messages.eventDate),
+        type: 'boolean',
+      },
+      eventTime: {
+        title: intl.formatMessage(messages.eventTime),
+        type: 'boolean',
+      },
+      eventLocation: {
+        title: intl.formatMessage(messages.eventLocation),
         type: 'boolean',
       },
       moreLinkText: {