@eeacms/volto-clms-theme 1.1.219 → 1.1.220

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.1.220](https://github.com/eea/volto-clms-theme/compare/1.1.219...1.1.220) - 13 March 2025
+
+#### :rocket: New Features
+
+- feat: Product portfolio - Implement the improvements established for the section -refs #282695 [ana-oprea - [`6383c1d`](https://github.com/eea/volto-clms-theme/commit/6383c1da4716ce2646a90cafea76fbda0f96472f)]
+
 ### [1.1.219](https://github.com/eea/volto-clms-theme/compare/1.1.218...1.1.219) - 10 March 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.219",
+  "version": "1.1.220",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclProductLinksBlock/CclProductLinksEdit.jsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { injectIntl } from 'react-intl';
+import { compose } from 'redux';
+
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components'; // BlocksForm, Icon,
+import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+
+import { emptyCard, getPanels } from '../utils';
+import { CardBlockSchema, CardContainerSchema } from './schema';
+
+import { isEmpty } from 'lodash';
+import ProductLink from './ProductLink.jsx';
+
+const CclProductLinksEdit = ({
+  block,
+  data,
+  onChangeBlock,
+  selected,
+  setSidebarTab,
+}) => {
+  const properties = isEmpty(data?.customCards?.blocks)
+    ? emptyCard(2)
+    : data.customCards;
+
+  const panelData = properties;
+  const panels = getPanels(panelData);
+  React.useEffect(() => {
+    if (isEmpty(data?.customCards)) {
+      onChangeBlock(block, {
+        ...data,
+        customCards: {
+          ...properties,
+        },
+      });
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
+  const [selectedCardBlock, setSelectedCardBlock] = useState(-1);
+
+  let schema = CardContainerSchema();
+  let cardSchema = CardBlockSchema();
+
+  return (
+    <>
+      <div
+        className="cardContainer-header"
+        onClick={() => {
+          setSidebarTab(1);
+          setSelectedCardBlock(-1);
+        }}
+        aria-hidden="true"
+      >
+        {data.title || 'Product links container'}
+      </div>
+      <div className={'product-column-links'}>
+        <>
+          {panels.map(([uid, panel], index) => (
+            <ProductLink
+              key={index}
+              card={panel}
+              onClickImage={() => {
+                setSelectedCardBlock(uid);
+              }}
+              isCustomCard={true}
+              isEditMode
+            />
+          ))}
+        </>
+      </div>
+      <SidebarPortal selected={selected && selectedCardBlock === -1}>
+        <BlockDataForm
+          schema={schema}
+          title="Product Link container block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+      <SidebarPortal
+        selected={
+          selected && selectedCardBlock !== -1 && data.customCards?.blocks
+        }
+      >
+        <BlockDataForm
+          schema={cardSchema}
+          title="Card block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              customCards: {
+                ...data.customCards,
+                blocks: {
+                  ...data.customCards.blocks,
+                  [selectedCardBlock]: {
+                    ...data.customCards.blocks[selectedCardBlock],
+                    [id]: value,
+                  },
+                },
+              },
+            });
+          }}
+          formData={data.customCards?.blocks[selectedCardBlock]}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default compose(withObjectBrowser, injectIntl)(CclProductLinksEdit);

package/src/components/Blocks/CclProductLinksBlock/CclProductLinksView.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { isEmpty } from 'lodash';
+import { getPanels } from '../utils';
+import ProductLink from './ProductLink';
+
+const CclProductLinksView = (props) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    setSidebarTab,
+    setSelectedCardBlock,
+  } = props;
+
+  const properties = data?.customCards;
+
+  const panelData = properties;
+  const panels = getPanels(panelData);
+  useEffect(() => {
+    if (isEmpty(data?.customCards)) {
+      onChangeBlock(block, {
+        ...data,
+        customCards: {
+          ...properties,
+        },
+      });
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
+  return (
+    <>
+      <div
+        className="cardContainer-header"
+        onClick={() => {
+          setSidebarTab(1);
+          setSelectedCardBlock(-1);
+        }}
+        aria-hidden="true"
+      >
+        {data?.title && data.title}
+      </div>
+      <div className={'product-column-links'}>
+        <>
+          {panels.map(([uid, panel], index) => (
+            <ProductLink
+              key={index}
+              card={panel}
+              isCustomCard={true}
+              isEditMode={false}
+            />
+          ))}
+        </>
+      </div>
+    </>
+  );
+};
+
+export default CclProductLinksView;

package/src/components/Blocks/CclProductLinksBlock/ProductLink.jsx

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+
+const ProductLink = (props) => {
+  const {
+    card,
+    onClickImage = () => {
+      return '';
+    },
+    isEditMode,
+  } = props;
+
+  const [hasLink, setHasLink] = useState(false);
+  const href = card.url?.[0]?.['@id'] || card.url;
+
+  useEffect(() => {
+    if (isEditMode) {
+      setHasLink(false);
+    } else {
+      if (card.url) {
+        if (card.url && card.url.length > 0) {
+          setHasLink(true);
+        }
+        if (card.url.length === 0) {
+          setHasLink(false);
+        }
+      }
+    }
+  }, [isEditMode, card.url]);
+
+  const url = hasLink && isInternalURL(href) ? flattenToAppURL(href) : href;
+  const As = hasLink && isInternalURL(url) ? Link : 'a';
+
+  return (
+    <As
+      href={hasLink ? url : null}
+      to={hasLink ? url : null}
+      onClick={() => {
+        onClickImage();
+        if (isEditMode === false)
+          window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: 'smooth',
+          });
+      }}
+      onKeyDown={() => {
+        onClickImage();
+        if (isEditMode === false)
+          window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: 'smooth',
+          });
+      }}
+      className={hasLink ? 'card-with-link' : ''}
+    >
+      {card?.title || 'New link title'}
+    </As>
+  );
+};
+
+export default ProductLink;

package/src/components/Blocks/CclProductLinksBlock/schema.js

@@ -0,0 +1,46 @@
+export const CardContainerSchema = () => ({
+  title: 'Card container',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['customCards'],
+    },
+  ],
+  properties: {
+    customCards: {
+      title: 'Custom cards',
+      type: 'panels',
+      schema: CardBlockSchema,
+    },
+  },
+  required: ['cardOrigin'],
+});
+
+export const CardBlockSchema = () => {
+  return {
+    title: 'Card block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['title', 'url'],
+      },
+    ],
+    properties: {
+      title: {
+        title: 'Title',
+        description: 'Card title',
+        type: 'string',
+        placeholder: 'Card title here',
+      },
+      url: {
+        title: 'URL',
+        widget: 'object_browser',
+        mode: 'link',
+        allowExternals: true,
+      },
+    },
+    required: [],
+  };
+};