new field to configure the description appearance

codesyntax · Jan 9, 2022 · 1c5c43c · 1c5c43c
1 parent 13812e4
commit 1c5c43c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git a/src/AdvancedListingBlockTemplate.jsx b/src/AdvancedListingBlockTemplate.jsx
@@ -19,6 +19,7 @@ const AdvancedListingBlockTemplate = ({
   howManyColumns,
   effectiveDate,
   titleTag,
+  showDescription,
 }) => {
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
@@ -36,15 +37,19 @@ const AdvancedListingBlockTemplate = ({
   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);
+  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} stretched>
         {items.map((item) => (
-          < Grid.Column key={item['@id']} >
+          <Grid.Column key={item['@id']}>
             <ConditionalLink item={item} condition={!isEditMode}>
               <Grid columns={columnSize}>
                 {['up', 'left'].includes(imageSide) && (
@@ -74,10 +79,10 @@ const AdvancedListingBlockTemplate = ({
                   ) : (
                     <h3>{item.title ? item.title : item.id}</h3>
                   )}
-                  {effectiveDate &&
-                    <p>{moment(item.effective).format("L")}</p>
-                  }
-                  <p>{item.description}</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}>

diff --git a/src/advancedSchema.js b/src/advancedSchema.js
@@ -3,7 +3,9 @@ import messages from './messages';
 
 export const advancedSchema = (props) => {
   const { intl, schema, formData } = props;
-  const imageWidth = ['right', 'left'].includes(formData.imageSide) ? ['imageWidth'] : [];
+  const imageWidth = ['right', 'left'].includes(formData.imageSide)
+    ? ['imageWidth']
+    : [];
   return {
     ...schema,
     fieldsets: [
@@ -32,6 +34,11 @@ export const advancedSchema = (props) => {
         title: intl.formatMessage(messages.titleConfiguration),
         fields: ['titleTag'],
       },
+      {
+        id: 'description',
+        title: intl.formatMessage(messages.descriptionConfiguration),
+        fields: ['showDescription'],
+      },
       {
         id: 'date',
         title: intl.formatMessage(messages.dateConfiguration),
@@ -73,7 +80,6 @@ export const advancedSchema = (props) => {
           ['left', 'left'],
           ['right', 'right'],
           ['down', 'down'],
-
         ],
       },
       titleTag: {
@@ -87,12 +93,18 @@ export const advancedSchema = (props) => {
           [(children) => <h4>{children}</h4>, 'H4'],
         ],
       },
-      effectiveDate: {
-        title: intl.formatMessage(messages.dateConfiguration),
+      showDescription: {
+        title: intl.formatMessage(messages.descriptionConfigurationTitle),
         description: intl.formatMessage(
-          messages.dateConfigurationDescription,
+          messages.descriptionConfigurationDescription,
         ),
-        type: 'boolean'
+        type: 'boolean',
+        default: true,
+      },
+      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,19 @@ const messages = defineMessages({
     id: 'Default HTML tag will be H3',
     defaultMessage: 'Default HTML tag will be H3',
   },
+  descriptionConfiguration: {
+    id: 'description',
+    defaultMessage: 'Description',
+  },
+  descriptionConfigurationTitle: {
+    id: 'descriptionConfigurationTitle',
+    defaultMessage: 'Show the description?',
+  },
+  descriptionConfigurationDescription: {
+    id: 'descriptionConfigurationDescription',
+    defaultMessage: 'If selected, the description will be shown',
+  },
+
   dateConfiguration: {
     id: 'effectiveDate',
     defaultMessage: 'effectiveDate',