add effective date option and some extra options to image position

codesyntax · Oct 28, 2021 · b66ab77 · b66ab77
1 parent 2adf33e
commit b66ab77
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 14 deletions.
diff --git a/src/AdvancedListingBlockTemplate.jsx b/src/AdvancedListingBlockTemplate.jsx
@@ -7,7 +7,8 @@ import config from '@plone/volto/registry';
 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 moment from 'moment';
+import { useIntl } from 'react-intl';
 const AdvancedListingBlockTemplate = ({
   items,
   linkTitle,
@@ -16,6 +17,7 @@ const AdvancedListingBlockTemplate = ({
   imageSide,
   imageWidth,
   howManyColumns,
+  effectiveDate,
   titleTag,
 }) => {
   let link = null;
@@ -32,16 +34,21 @@ const AdvancedListingBlockTemplate = ({
 
   const { settings } = config;
   const hasImage = imageSide !== null;
-  imageWidth = imageWidth ? imageWidth : 2;
+  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);
+  const intl = useIntl();
+  moment.locale(intl.locale);
   return (
     <>
-      <Grid columns={howManyColumns ? howManyColumns : 1}>
+      <Grid columns={howManyColumns ? howManyColumns : 1} stretched>
         {items.map((item) => (
-          <Grid.Column key={item['@id']}>
+          < Grid.Column key={item['@id']} >
             <ConditionalLink item={item} condition={!isEditMode}>
-              <Grid columns={hasImage ? 2 : 1}>
-                {imageSide === 'left' && (
-                  <Grid.Column width={imageWidth}>
+              <Grid columns={columnSize}>
+                {['up', 'left'].includes(imageSide) && (
+                  <Grid.Column width={imageGridWidth}>
                     {!item[settings.listingPreviewImageField] && (
                       <Image
                         src={DefaultImageSVG}
@@ -61,16 +68,19 @@ const AdvancedListingBlockTemplate = ({
                     )}
                   </Grid.Column>
                 )}
-                <Grid.Column width={hasImage ? 12 - imageWidth : 12}>
+                <Grid.Column width={contentGridWidth}>
                   {titleTag ? (
                     titleTag(item.title ? item.title : item.id)
                   ) : (
                     <h3>{item.title ? item.title : item.id}</h3>
                   )}
+                  {effectiveDate &&
+                    <p>{moment(item.effective).format("L")}</p>
+                  }
                   <p>{item.description}</p>
                 </Grid.Column>
-                {imageSide === 'right' && (
-                  <Grid.Column width={imageWidth}>
+                {['right', 'down'].includes(imageSide) && (
+                  <Grid.Column width={imageGridWidth}>
                     {!item[settings.listingPreviewImageField] && (
                       <Image
                         src={DefaultImageSVG}

diff --git a/src/advancedSchema.js b/src/advancedSchema.js
@@ -2,8 +2,8 @@ import React from 'react';
 import messages from './messages';
 
 export const advancedSchema = (props) => {
-  const { intl, schema } = props;
-
+  const { intl, schema, formData } = props;
+  const imageWidth = ['right', 'left'].includes(formData.imageSide) ? ['imageWidth'] : [];
   return {
     ...schema,
     fieldsets: [
@@ -25,13 +25,18 @@ export const advancedSchema = (props) => {
       {
         id: 'image',
         title: intl.formatMessage(messages.imageConfiguration),
-        fields: ['imageSide', 'imageWidth'],
+        fields: ['imageSide', ...imageWidth],
       },
       {
         id: 'title',
         title: intl.formatMessage(messages.titleConfiguration),
         fields: ['titleTag'],
       },
+      {
+        id: 'date',
+        title: intl.formatMessage(messages.dateConfiguration),
+        fields: ['effectiveDate'],
+      },
     ],
     properties: {
       ...schema.properties,
@@ -64,8 +69,11 @@ export const advancedSchema = (props) => {
         ),
         choices: [
           [null, 'No image'],
-          ['right', 'right'],
+          ['up', 'up'],
           ['left', 'left'],
+          ['right', 'right'],
+          ['down', 'down'],
+
         ],
       },
       titleTag: {
@@ -79,6 +87,13 @@ export const advancedSchema = (props) => {
           [(children) => <h4>{children}</h4>, 'H4'],
         ],
       },
+      effectiveDate: {
+        title: intl.formatMessage(messages.dateConfiguration),
+        description: intl.formatMessage(
+          messages.dateConfigurationDescription,
+        ),
+        type: 'boolean'
+      },
     },
   };
 };
diff --git a/src/messages.js b/src/messages.js
@@ -44,6 +44,14 @@ const messages = defineMessages({
     id: 'Default HTML tag will be H3',
     defaultMessage: 'Default HTML tag will be H3',
   },
+  dateConfiguration: {
+    id: 'effectiveDate',
+    defaultMessage: 'effectiveDate',
+  },
+  dateConfigurationDescription: {
+    id: 'Show effectiveDate',
+    defaultMessage: 'Show effectiveDate',
+  },
 });
 
 export default messages;