@eeacms/volto-clms-theme 1.0.75 → 1.0.78

package/CHANGELOG.md

@@ -4,8 +4,34 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.78](https://github.com/eea/volto-clms-theme/compare/1.0.77...1.0.78)
+
+- refactor card link [`e3ab510`](https://github.com/eea/volto-clms-theme/commit/e3ab51012c21a1bc62e2600431aac225dbd76003)
+- add link to the entire card [`aee0981`](https://github.com/eea/volto-clms-theme/commit/aee09811585c925a050347259bb10369c0ec4845)
+
+#### [1.0.77](https://github.com/eea/volto-clms-theme/compare/1.0.76...1.0.77)
+
+> 3 March 2022
+
+- Develop [`#222`](https://github.com/eea/volto-clms-theme/pull/222)
+- cardContainerBlock refactoring, remove cardBlock and make ImageEditor… [`#221`](https://github.com/eea/volto-clms-theme/pull/221)
+- fix image uploading workflow [`86c10e6`](https://github.com/eea/volto-clms-theme/commit/86c10e6b9bf2d0e82aa1415539d291d04b6f86e9)
+- cardContainerBlock refactoring, remove cardBlock and make ImageEditor reusable [`2292c6b`](https://github.com/eea/volto-clms-theme/commit/2292c6bdb11eeac3f99df080b096b2d923ed2926)
+
+#### [1.0.76](https://github.com/eea/volto-clms-theme/compare/1.0.75...1.0.76)
+
+> 2 March 2022
+
+- Develop [`#220`](https://github.com/eea/volto-clms-theme/pull/220)
+- add modal when download requests are both standard downloads or prepackaged files [`#219`](https://github.com/eea/volto-clms-theme/pull/219)
+- upgrade volto-accordion-block [`cf8a7a6`](https://github.com/eea/volto-clms-theme/commit/cf8a7a6909b1d38f855ef01f0642add7e882e804)
+- add modal when downloading files are prepackaged and mapviewer [`c974d37`](https://github.com/eea/volto-clms-theme/commit/c974d37f42fd13d0de53416c36ed4b8f8a8ba2c0)
+
 #### [1.0.75](https://github.com/eea/volto-clms-theme/compare/1.0.74...1.0.75)
 
+> 1 March 2022
+
+- New release [`#218`](https://github.com/eea/volto-clms-theme/pull/218)
 - add elvis operator [`#217`](https://github.com/eea/volto-clms-theme/pull/217)
 - no need to tinker with dates, we configure the listing in Volto [`#215`](https://github.com/eea/volto-clms-theme/pull/215)
 - use new placeholder image [`#216`](https://github.com/eea/volto-clms-theme/pull/216)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.75",
+  "version": "1.0.78",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -30,7 +30,7 @@
     "@eeacms/volto-taxonomy"
   ],
   "dependencies": {
-    "@eeacms/volto-accordion-block": "3.4.7",
+    "@eeacms/volto-accordion-block": "3.4.13",
     "@eeacms/volto-arcgis-block": "*",
     "@eeacms/volto-clms-utils": "0.1.6",
     "@eeacms/volto-columns-block": "4.4.3",

package/src/components/Blocks/CclCardContainerBlock/CardContainerSchema.js

@@ -1,10 +1,10 @@
-export const CardContainerSchema = (types, extras) => ({
+export const CardContainerSchema = () => ({
   title: 'Card container',
   fieldsets: [
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'cardStyle', 'cardOrigin', ...extras],
+      fields: ['title', 'variation', 'customCards'],
     },
   ],
   properties: {
@@ -13,43 +13,13 @@ export const CardContainerSchema = (types, extras) => ({
       description: 'Card container block friendly name',
       type: 'string',
     },
-    cardStyle: {
-      title: 'Card style',
-      choices: [
-        ['line', 'Line Image card'],
-        ['line-color', 'Colored Line card'],
-        ['doc', 'Line card'],
-        ['block', 'Block card'],
-        ['event', 'Event card'],
-      ],
-      default: 'line',
-    },
-    contentTypes: {
-      title: 'Content Types',
-      choices: types,
-      isMulti: true,
-    },
-    cardOrigin: {
-      title: 'Cards origin',
-      choices: [
-        ['current', 'Current folder children'],
-        ['selection', 'Selected folder children'],
-        ['custom', 'Customized cards'],
-      ],
-      default: 'current',
-    },
-    containerSelection: {
-      title: 'Card container selector',
-      widget: 'object_browser',
-      mode: 'link',
-    },
     customCards: {
       title: 'Custom cards',
       type: 'panels',
       schema: CardBlockSchema,
     },
   },
-  required: ['cardStyle', 'cardOrigin'],
+  required: ['variation', 'cardOrigin'],
 });
 
 export const CardBlockSchema = () => ({
@@ -58,7 +28,7 @@ export const CardBlockSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'image', 'description', 'url'],
+      fields: ['title', 'description', 'url'],
     },
   ],
   properties: {
@@ -77,7 +47,9 @@ export const CardBlockSchema = () => ({
     },
     url: {
       title: 'url',
-      type: 'string',
+      widget: 'object_browser',
+      mode: 'link',
+      allowExternals: true,
     },
   },
   required: [],

package/src/components/Blocks/CclCardContainerBlock/CclCardContainerBlockEdit.jsx

@@ -1,67 +1,37 @@
-import './styles.less';
-
 import { CardBlockSchema, CardContainerSchema } from './CardContainerSchema';
 import React, { useState } from 'react';
 import { emptyCard, getPanels } from '../utils';
 
 import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import { SidebarPortal } from '@plone/volto/components'; // BlocksForm, Icon,
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components'; // BlocksForm, Icon,
+import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import { compose } from 'redux';
 import { injectIntl } from 'react-intl';
 import { isEmpty } from 'lodash';
-import { useSelector } from 'react-redux';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+import CclImageEditor from '@eeacms/volto-clms-theme/components/CclImageEditor/CclImageEditor';
+import { defineMessages } from 'react-intl';
+import config from '@plone/volto/registry';
+import getListingBodyVariation from './utils.js';
 
-const CclCardContainerBlockEdit = (props) => {
-  const { block, data, onChangeBlock, selected } = props;
-
-  const regex = /[a-zA-Z]+(?!.*[a-zA-Z]+)/;
-  const types = useSelector((state) => state.types.types);
-  const type_options = types.map((type) => [
-    type['@id'].match(regex)[0],
-    type.title,
-  ]);
+const messages = defineMessages({
+  template: {
+    id: 'Variation',
+    defaultMessage: 'Variation',
+  },
+});
 
-  const card = {
-    '@id': '/en/product-portfolio/how-our-products-are-created',
-    title: 'Dataset preview title',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus mauris ante, a iaculis leo placerat quis. Nullam vitae vulputate leo, et ultricies dolor.',
-    image: {
-      scales: {
-        icon: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        large: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        listing: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        mini: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        preview: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        thumb: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        tile: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-      },
-    },
-    url: '/en/product-portfolio/how-our-products-are-created',
-  };
+const CclCardContainerBlockEdit = ({
+  block,
+  data,
+  onChangeBlock,
+  selected,
+  editable,
+  setSidebarTab,
+  openObjectBrowser,
+  pathname,
+  intl,
+}) => {
   const properties = isEmpty(data?.customCards?.blocks)
     ? emptyCard(2)
     : data.customCards;
@@ -80,21 +50,24 @@ const CclCardContainerBlockEdit = (props) => {
     /* eslint-disable-next-line */
   }, []);
 
-  const [selectedBlock, setSelectedBlock] = useState(-1);
-  React.useEffect(() => {
-    if (!selected) {
-      setSelectedBlock(-1);
-    }
-  }, [selected]);
+  const [selectedCardBlock, setSelectedCardBlock] = useState(-1);
+
+  let schema = CardContainerSchema();
+
+  schema = addExtensionFieldToSchema({
+    schema,
+    name: 'variation',
+    items: config.blocks.blocksConfig.listing.variations,
+    intl,
+    title: { id: intl.formatMessage(messages.template) },
+  });
 
-  let extras = [];
-  if (data.cardOrigin === 'selection') {
-    extras.push('containerSelection');
-    extras.push('contentTypes');
-  } else if (data.cardOrigin === 'current') {
-    extras.push('contentTypes');
-  } else if (data.cardOrigin === 'custom') {
-    extras.push('customCards');
+  const variation = getListingBodyVariation(data);
+  let containerClass = '';
+  if (['news', 'event'].includes(variation.templateID)) {
+    containerClass = 'ccl-container';
+  } else if (!['line', 'doc', 'globalSearch'].includes(variation.templateID)) {
+    containerClass = 'card-container';
   }
 
   return (
@@ -102,46 +75,44 @@ const CclCardContainerBlockEdit = (props) => {
       <div
         className="cardContainer-header"
         onClick={() => {
-          props.setSidebarTab(1);
-          setSelectedBlock(-1);
+          setSidebarTab(1);
+          setSelectedCardBlock(-1);
         }}
         aria-hidden="true"
       >
         {data.title || 'Card container'}
       </div>
-      <div>
-        {data.cardOrigin === 'custom' ? (
-          <>
-            {panels.map(([uid, panel], index) => (
-              <div
-                key={index}
-                className={uid === selectedBlock && 'block selected'}
-                onClick={() => {
-                  setSelectedBlock(uid);
-                }}
-                onKeyDown={() => {
-                  setSelectedBlock(uid);
-                }}
-                role="button"
-                tabIndex="0"
-              >
-                <CclCard
-                  type={data.cardStyle || 'line'}
-                  card={data.customCards.blocks[uid]}
-                />
-              </div>
-            ))}
-          </>
-        ) : (
-          <div className="card-container">
-            <CclCard type={data.cardStyle} card={card} />
-            <CclCard type={data.cardStyle} card={card} />
-          </div>
-        )}
+      <div className={containerClass}>
+        {panels.map(([uid, panel], index) => (
+          <CclCard
+            key={index}
+            type={variation?.templateID || 'doc'}
+            card={panel}
+            onClickImage={() => {
+              setSelectedCardBlock(uid);
+            }}
+            isCustomCard={true}
+            CclImageEditor={
+              <CclImageEditor
+                block={block}
+                data={data}
+                editable={editable}
+                imageUrl={panel?.image?.url}
+                onChangeBlock={onChangeBlock}
+                openObjectBrowser={openObjectBrowser}
+                pathname={pathname}
+                selected={selected}
+                selectedCardBlock={selectedCardBlock}
+                setSelectedCardBlock={setSelectedCardBlock}
+                uid={uid}
+              />
+            }
+          />
+        ))}
       </div>
-      <SidebarPortal selected={selected && selectedBlock === -1}>
-        <InlineForm
-          schema={CardContainerSchema(type_options, extras)}
+      <SidebarPortal selected={selected && selectedCardBlock === -1}>
+        <BlockDataForm
+          schema={schema}
           title="Card container block"
           onChangeField={(id, value) => {
             onChangeBlock(block, {
@@ -153,9 +124,11 @@ const CclCardContainerBlockEdit = (props) => {
         />
       </SidebarPortal>
       <SidebarPortal
-        selected={selected && selectedBlock !== -1 && data.customCards?.blocks}
+        selected={
+          selected && selectedCardBlock !== -1 && data.customCards?.blocks
+        }
       >
-        <InlineForm
+        <BlockDataForm
           schema={CardBlockSchema()}
           title="Card block"
           onChangeField={(id, value) => {
@@ -165,15 +138,15 @@ const CclCardContainerBlockEdit = (props) => {
                 ...data.customCards,
                 blocks: {
                   ...data.customCards.blocks,
-                  [selectedBlock]: {
-                    ...data.customCards.blocks[selectedBlock],
+                  [selectedCardBlock]: {
+                    ...data.customCards.blocks[selectedCardBlock],
                     [id]: value,
                   },
                 },
               },
             });
           }}
-          formData={data.customCards?.blocks[selectedBlock]}
+          formData={data.customCards?.blocks[selectedCardBlock]}
         />
       </SidebarPortal>
     </>

package/src/components/Blocks/CclCardContainerBlock/CclCardContainerBlockView.jsx

@@ -1,54 +1,31 @@
-import { useDispatch, useSelector } from 'react-redux';
-
 import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
 import React from 'react';
-import { searchContent } from '@plone/volto/actions';
+import getListingBodyVariation from './utils.js';
 
 const CclCardContainerBlockView = (props) => {
-  const { data, metadata, properties, id } = props;
+  const { data } = props;
+  let cards = data?.customCards?.blocks_layout?.items.map(
+    (uid) => data.customCards.blocks[uid],
+  );
 
-  const searchSubrequests = useSelector((state) => state.search.subrequests);
-  const dispatch = useDispatch();
-  let cards = searchSubrequests?.[props.id]?.items;
+  const variation = getListingBodyVariation(data);
 
-  let path = '';
-  if (data.cardOrigin === 'current') {
-    path = metadata ? metadata['@id'] : properties['@id'];
-  } else if (data.cardOrigin === 'selection') {
-    path = data.containerSelection ? data.containerSelection[0]['@id'] : '';
-  } else if (data.cardOrigin === 'custom') {
-    cards = data?.customCards?.blocks_layout?.items.map(
-      (uid) => data.customCards.blocks[uid],
-    );
+  let containerClass = '';
+  if (['news', 'event'].includes(variation.templateID)) {
+    containerClass = 'ccl-container';
+  } else if (!['line', 'doc', 'globalSearch'].includes(variation.templateID)) {
+    containerClass = 'card-container';
   }
-
-  React.useEffect(() => {
-    let portal_type =
-      data.contentTypes?.length > 0 ? { portal_type: data.contentTypes } : {};
-    dispatch(
-      searchContent(
-        path,
-        {
-          sort_on: 'effective',
-          sort_order: 'reverse',
-          fullobjects: 1,
-          ...portal_type,
-        },
-        id,
-      ),
-    );
-  }, [path, data, id, dispatch]);
-
-  var cardStyle = data.cardStyle || 'line';
   return (
-    <div
-      className={
-        cardStyle === 'line' || cardStyle === 'doc' ? '' : 'card-container'
-      }
-    >
+    <div className={containerClass}>
       {cards &&
         cards.map((card, index) => (
-          <CclCard key={index} type={cardStyle} card={card} />
+          <CclCard
+            key={index}
+            type={variation.templateID}
+            card={card}
+            isCustomCard={true}
+          />
         ))}
     </div>
   );

package/src/components/Blocks/CclCardContainerBlock/utils.js

@@ -0,0 +1,13 @@
+import config from '@plone/volto/registry';
+const getListingBodyVariation = (data) => {
+  const { variations } = config.blocks.blocksConfig.listing;
+  const variation = data.variation
+    ? variations.find(
+        ({ id, templateID }) => id === data.variation && templateID,
+      )
+    : variations.find(({ isDefault, templateID }) => isDefault && templateID);
+
+  return variation;
+};
+
+export default getListingBodyVariation;