@eeacms/volto-clms-theme 1.1.222 → 1.1.224

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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.224](https://github.com/eea/volto-clms-theme/compare/1.1.223...1.1.224) - 23 March 2025
+
+#### :rocket: New Features
+
+- feat: add a message about the range of the time series datasets in the Download tab of the dataset -refs #283619 [ana-oprea - [`abddead`](https://github.com/eea/volto-clms-theme/commit/abddeadc7b5c276c46341aa0fa5712648f483fcb)]
+
+### [1.1.223](https://github.com/eea/volto-clms-theme/compare/1.1.222...1.1.223) - 19 March 2025
+
+#### :bug: Bug Fixes
+
+- fix: cards link, add custom button block and change product links component url widget [ana-oprea - [`ed05876`](https://github.com/eea/volto-clms-theme/commit/ed05876fb1f917fa7dee45f88017f6c5db3d9107)]
+
+#### :house: Internal changes
+
+- chore: change widgets [ana-oprea - [`270b678`](https://github.com/eea/volto-clms-theme/commit/270b67851a60da8382ba612cab90cfd931be3d8f)]
+- chore: delete comment [ana-oprea - [`ecdfb91`](https://github.com/eea/volto-clms-theme/commit/ecdfb91106050dce7d7cc7ff8d17f1b13abbce94)]
+
 ### [1.1.222](https://github.com/eea/volto-clms-theme/compare/1.1.221...1.1.222) - 18 March 2025
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.222",
+  "version": "1.1.224",
   "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/ProductLink.jsx

@@ -12,17 +12,20 @@ const ProductLink = (props) => {
   } = props;
 
   const [hasLink, setHasLink] = useState(false);
-  const href = card.url?.[0]?.['@id'] || card.url;
+  const href = card.url?.[0]?.['@id'] || card.url?.external?.external_link;
 
   useEffect(() => {
     if (isEditMode) {
       setHasLink(false);
     } else {
-      if (card.url) {
-        if (card.url && card.url.length > 0) {
+      if (card.url?.external?.external_link) {
+        if (
+          card.url?.external?.external_link &&
+          card.url?.external?.external_link.length > 0
+        ) {
           setHasLink(true);
         }
-        if (card.url.length === 0) {
+        if (card.url?.external?.external_link.length === 0) {
           setHasLink(false);
         }
       }

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

@@ -1,3 +1,24 @@
+import externalSVG from '@plone/volto/icons/link.svg';
+
+export const ExternalLinkSchema = {
+  title: 'External link',
+  fieldsets: [
+    {
+      id: 'external',
+      title: 'External',
+      fields: ['external_link'],
+    },
+  ],
+  properties: {
+    external_link: {
+      title: 'External URL',
+      description:
+        'URL can be relative within this site or absolute if it starts with http:// or https://',
+    },
+  },
+  required: [],
+};
+
 export const CardContainerSchema = () => ({
   title: 'Card container',
   fieldsets: [
@@ -36,9 +57,14 @@ export const CardBlockSchema = () => {
       },
       url: {
         title: 'URL',
-        widget: 'object_browser',
-        mode: 'link',
-        allowExternals: true,
+        widget: 'object_by_type',
+        schemas: [
+          {
+            id: 'external',
+            icon: externalSVG,
+            schema: ExternalLinkSchema,
+          },
+        ],
       },
     },
     required: [],

package/src/components/Blocks/FamilyCardButtonBlock/FamilyCardButtonEdit.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import { InlineForm } from '@plone/volto/components';
+import { cclButtonSchema } from './Schema';
+
+const FamilyCardButtonEdit = (props) => {
+  const { block, data, onChangeBlock, selected } = props;
+
+  return (
+    <>
+      <div className="ccl-block-editor-header">
+        <legend
+          onClick={() => {
+            props.setSidebarTab(1);
+          }}
+          aria-hidden="true"
+        >
+          {data.style || 'Default'} button {data.disabled && 'disabled'}
+        </legend>
+      </div>
+
+      <CclButton
+        url="#"
+        disabled={data.disabled}
+        download={data.download}
+        mode={data.style}
+      >
+        {data.title || 'Text example...'}
+      </CclButton>
+
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={cclButtonSchema(
+            Array.isArray(data?.href) && data?.href.length
+              ? ['download', 'target']
+              : [],
+          )}
+          title="Button component block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default FamilyCardButtonEdit;

package/src/components/Blocks/FamilyCardButtonBlock/FamilyCardButtonView.jsx

@@ -0,0 +1,46 @@
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import React from 'react';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+
+const FamilyCardButtonView = (props) => {
+  const { data } = props;
+  const flattern_url = flattenToAppURL(data?.href?.external?.external_link);
+  function buttonURL(bData, bFlattern_url) {
+    return bData.download && bData?.href?.[0]?.['@type'] === 'File'
+      ? bFlattern_url + '/@@download/file'
+      : bFlattern_url;
+  }
+  return {
+    ...(data.style === 'left menu' ? (
+      <div className="left-menu-detail">
+        <CclButton
+          url={buttonURL(data, flattern_url)}
+          disabled={data?.disabled}
+          download={data?.download || data?.href?.[0]?.['@type'] === 'File'}
+          target={
+            data.target ||
+            (data.download && data.href[0]['@type'] === 'File' && '_blank')
+          }
+          mode={data.style}
+        >
+          {data.title || 'Text example...'}
+        </CclButton>
+      </div>
+    ) : (
+      <CclButton
+        url={buttonURL(data, flattern_url)}
+        disabled={data?.disabled}
+        download={data?.download || data?.href?.[0]?.['@type'] === 'File'}
+        target={
+          data.target ||
+          (data.download && data.href[0]['@type'] === 'File' && '_blank')
+        }
+        mode={data.style}
+      >
+        {data.title || 'Text example...'}
+      </CclButton>
+    )),
+  };
+};
+
+export default FamilyCardButtonView;

package/src/components/Blocks/FamilyCardButtonBlock/Schema.js

@@ -0,0 +1,85 @@
+import externalSVG from '@plone/volto/icons/link.svg';
+
+export const ExternalLinkSchema = {
+  title: 'External link',
+  fieldsets: [
+    {
+      id: 'external',
+      title: 'External',
+      fields: ['external_link'],
+    },
+  ],
+  properties: {
+    external_link: {
+      title: 'External URL',
+      description:
+        'URL can be relative within this site or absolute if it starts with http:// or https://',
+    },
+  },
+  required: [],
+};
+
+export const cclButtonSchema = (extras) => ({
+  title: 'Button default',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'href', ...extras],
+    },
+    {
+      id: 'style',
+      title: 'Style',
+      fields: ['style', 'disabled'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+      description: 'Add button text',
+      type: 'string',
+    },
+    href: {
+      title: 'URL',
+      description: 'Select site content or paste external url',
+      widget: 'object_by_type',
+      schemas: [
+        {
+          id: 'external',
+          icon: externalSVG,
+          schema: ExternalLinkSchema,
+        },
+      ],
+    },
+    style: {
+      title: 'Button style',
+      choices: [
+        ['default', 'Default'],
+        ['filled', 'Filled'],
+        ['left menu', 'Left Menu block'],
+      ],
+      default: 'default',
+    },
+    disabled: {
+      title: 'Disabled',
+      type: 'boolean',
+      default: false,
+    },
+    download: {
+      title: 'Download',
+      type: 'boolean',
+      description: 'Add download attribute',
+      default: false,
+    },
+    target: {
+      title: 'Target',
+      description: 'Select target type',
+      choices: [
+        ['_self', 'Default'],
+        ['_blank', 'Blank'],
+      ],
+      default: '_self',
+    },
+  },
+  required: ['title', 'style'],
+});

package/src/components/Blocks/customBlocks.js

@@ -44,6 +44,8 @@ import { ARCGIS_BLOCK } from '@eeacms/volto-arcgis-block/constants';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
 import CclButtonBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclButtonBlock/CclButtonBlockEdit';
 import CclButtonBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclButtonBlock/CclButtonBlockView';
+import FamilyCardButtonView from '@eeacms/volto-clms-theme/components/Blocks/FamilyCardButtonBlock/FamilyCardButtonView';
+import FamilyCardButtonEdit from '@eeacms/volto-clms-theme/components/Blocks/FamilyCardButtonBlock/FamilyCardButtonEdit';
 import CclCardContainerBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclCardContainerBlock/CclCardContainerBlockEdit';
 import CclCardContainerBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclCardContainerBlock/CclCardContainerBlockView';
 import CclContextNavigationBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclContextNavigationBlock/CclContextNavigationBlockEdit';
@@ -347,6 +349,22 @@ const customBlocks = (config) => ({
       view: [], // Future proof (not implemented yet) view user role(s)
     },
   },
+  familyCardButtonComponent: {
+    id: 'familyCardButtonComponent', // The name (id) of the block
+    title: 'Family Card Button', // The display name of the block
+    icon: linkSVG, // The icon used in the block chooser
+    group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
+    view: FamilyCardButtonView, // The view mode component
+    edit: FamilyCardButtonEdit, // The edit mode component
+    restricted: false, // If the block is restricted, it won't show in the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
+    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+  },
   useCaseList: {
     id: 'useCaseList', // The name (id) of the block
     title: 'UseCase List', // The display name of the block

package/src/components/CLMSDatasetDetailView/DownloadDataSetContent.jsx

@@ -10,7 +10,9 @@ import {
   sanitizedHTML,
 } from '@eeacms/volto-clms-theme/components/CclUtils';
 
-const DownloadDataSetContent = (data, token) => {
+import InfoDownloadDataSet from './InfoDownloadDataSet';
+
+const DownloadDataSetContent = (data, token, fontAwesomeSolid) => {
   const user = useSelector((state) => state?.users?.user);
   const locale = useSelector((state) => state?.intl?.locale);
   let download_other_ways_access_dataset = sanitizedHTML(
@@ -26,7 +28,16 @@ const DownloadDataSetContent = (data, token) => {
   return (
     <div>
       {data?.downloadable_full_dataset && (
-        <div className="dataset-download-area">
+        <div
+          className={
+            data.download_limit_temporal_extent &&
+            user?.['@id'] &&
+            (data.mapviewer_istimeseries ||
+              data.download_show_auxiliary_calendar)
+              ? ''
+              : 'dataset-download-area'
+          }
+        >
           {data.mapviewer_istimeseries ||
           data.download_show_auxiliary_calendar ? (
             <>
@@ -49,11 +60,18 @@ const DownloadDataSetContent = (data, token) => {
           {user?.['@id'] ? (
             data.mapviewer_istimeseries ||
             data.download_show_auxiliary_calendar ? (
-              <CclButton
-                url={'/' + locale + '/map-viewer?dataset=' + data?.UID}
-              >
-                Go to download by area and time
-              </CclButton>
+              <>
+                <CclButton
+                  url={'/' + locale + '/map-viewer?dataset=' + data?.UID}
+                >
+                  Go to download by area and time
+                </CclButton>
+                {data.download_limit_temporal_extent && (
+                  <InfoDownloadDataSet
+                    temporalLimitExtent={data.download_limit_temporal_extent}
+                  />
+                )}
+              </>
             ) : (
               <CclButton
                 url={'/' + locale + '/map-viewer?dataset=' + data?.UID}
@@ -98,7 +116,7 @@ const DownloadDataSetContent = (data, token) => {
 
       {download_other_ways_access_dataset !== '' && (
         <div className="dataset-access-container">
-          <h2>You can also access this dataset</h2>
+          <h2>Access data on external site(s)</h2>
           <StringToHTML
             string={data?.download_other_ways_access_dataset?.data || ''}
           />

package/src/components/CLMSDatasetDetailView/InfoDownloadDataSet.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+import { withFontAwesomeLibs } from '@eeacms/volto-clms-utils/helpers';
+
+function InfoDownloadDataSet({ temporalLimitExtent, fontAwesomeSolid }) {
+  return (
+    <div className="info-download-dataset-container">
+      <span className="info-download-icon" direction="up">
+        <FontAwesomeIcon icon={fontAwesomeSolid.faInfoCircle} />
+      </span>
+      <div className="info-download-dataset-description">
+        For this product the maximum download period is{' '}
+        <span className="info-download-days">{temporalLimitExtent} days.</span>
+      </div>
+    </div>
+  );
+}
+
+export default withFontAwesomeLibs(InfoDownloadDataSet);

package/src/components/CclCard/CclCard.jsx

@@ -425,7 +425,9 @@ function CclCard(props) {
                   )}
                 </div>
                 <div className="card-text">
-                  <div className="card-title">{card?.title}</div>
+                  <div className="card-title">
+                    <CardLink url={url}>{card?.title}</CardLink>
+                  </div>
                   <div className="card-description">{card?.description}</div>
                   {children}
                 </div>

package/theme/site/extras/custom.overrides

@@ -26,4 +26,5 @@
 @import 'order-documents-widget';
 @import 'column-product-card';
 @import 'product-tab-toggle';
-@import 'clms-table';
+@import 'clms-table';
+@import 'dataset-info-section';

package/theme/site/extras/dataset-info-section.less

@@ -0,0 +1,22 @@
+.info-download-dataset-container {
+  background-color: #f5f5f5;
+  padding: 0.5rem;
+  width: fit-content;
+  color: #262626;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 5px;
+
+  .info-download-icon {
+    color: #262626;
+    margin-right: 0.5rem;
+  }
+
+  .info-download-dataset-description {
+    display: inline-block;
+
+    .info-download-days {
+      font-weight: bold;
+    }
+  }
+}