@eeacms/volto-cca-policy 0.1.43 → 0.1.44

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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).
 
+### [0.1.44](https://github.com/eea/volto-cca-policy/compare/0.1.43...0.1.44) - 22 September 2023
+
+#### :hammer_and_wrench: Others
+
+- Allow subsite behavior in folders that are not subsites [Tiberiu Ichim - [`28faeb4`](https://github.com/eea/volto-cca-policy/commit/28faeb41c43833352da3ed4002c82cc0429e4a47)]
+- Support subsite logo uploaded as svg [Tiberiu Ichim - [`c1c0874`](https://github.com/eea/volto-cca-policy/commit/c1c08740c838da4f3f5fe2a8b74c4fa87364edce)]
+- Refs #161483 - Fix description html - C3S Indicators Overview block. [GhitaB - [`0853fc4`](https://github.com/eea/volto-cca-policy/commit/0853fc449b64620d173582cadfe6763d73ce8551)]
+- Refs #161483 - Use universal link - C3S Indicators Overview block. [GhitaB - [`054fa8d`](https://github.com/eea/volto-cca-policy/commit/054fa8d62bfd9824ceddf52cc3ebc51b456c935b)]
+- Refs #161483 - Select category - C3S Indicators Overview block. [GhitaB - [`eb75b38`](https://github.com/eea/volto-cca-policy/commit/eb75b3858d6e83fbe87f123381df65f9de4b84ca)]
+- Refs #161483 - Add C3S Indicators Overview block. [GhitaB - [`cf86213`](https://github.com/eea/volto-cca-policy/commit/cf862135713780355a38a1eb683abd1166041cb9)]
+- Cleanup in read more block [kreafox - [`20ac717`](https://github.com/eea/volto-cca-policy/commit/20ac7171575a1966a8aabb50d5ae9e2808429423)]
+- Refs #161485 - Fix error in GeocharsWidget. [GhitaB - [`6fda82d`](https://github.com/eea/volto-cca-policy/commit/6fda82ded95cba32b7519c8bcfa49358887bac6b)]
+- Add read more block [kreafox - [`7fafeaa`](https://github.com/eea/volto-cca-policy/commit/7fafeaabf7bb091db76f9fc083cf61fce2bf6c06)]
+- Refs #161485 - Fix field for Observatory partner. Add facet in search landing page. [GhitaB - [`c21d23e`](https://github.com/eea/volto-cca-policy/commit/c21d23e38ce07733775a3513544c2d3bb5f99edb)]
 ### [0.1.43](https://github.com/eea/volto-cca-policy/compare/0.1.42...0.1.43) - 15 September 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/C3SIndicatorsOverviewBlock/C3SIndicatorsOverviewBlockEdit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import C3SIndicatorsOverviewBlockView from './C3SIndicatorsOverviewBlockView';
+import schema from './schema';
+
+export default function C3SIndicatorsOverviewBlockEdit(props) {
+  const { block, data, onChangeBlock, selected, id } = props;
+
+  return (
+    <div>
+      <C3SIndicatorsOverviewBlockView data={data} id={id} mode="edit" />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+        />
+      </SidebarPortal>
+    </div>
+  );
+}

package/src/components/manage/Blocks/C3SIndicatorsOverviewBlock/C3SIndicatorsOverviewBlockView.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import axios from 'axios';
+import { UniversalLink } from '@plone/volto/components';
+
+export default function C3SIndicatorsOverviewBlockView(props) {
+  const [pageDescription, setPageDescription] = React.useState('');
+  const [indicators, setIndicators] = React.useState([]);
+
+  const category = props.data.category;
+
+  const getIndicatorsData = () => {
+    const url =
+      '/++api++/en/knowledge/european-climate-data-explorer/' +
+      category +
+      '/@c3s_indicators_overview';
+
+    axios
+      .get(url)
+      .then((response) => {
+        setPageDescription(response.data.c3s_indicators_overview.description);
+        setIndicators(response.data.c3s_indicators_overview.items);
+      })
+      .catch((error) => {
+        // console.error(error);
+      });
+  };
+
+  React.useEffect(() => {
+    getIndicatorsData();
+  });
+
+  return (
+    <div className="block c3sindicators-overview-block">
+      <div
+        className="description"
+        dangerouslySetInnerHTML={{
+          __html: pageDescription,
+        }}
+      />
+
+      {indicators ? (
+        <ul>
+          {indicators.map((item, index) => (
+            <li key={index}>
+              <UniversalLink href={item.url}>{item.title}</UniversalLink>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+}

package/src/components/manage/Blocks/C3SIndicatorsOverviewBlock/index.js

@@ -0,0 +1,28 @@
+import zoomSVG from '@plone/volto/icons/zoom.svg';
+import C3SIndicatorsOverviewBlockEdit from './C3SIndicatorsOverviewBlockEdit';
+import C3SIndicatorsOverviewBlockView from './C3SIndicatorsOverviewBlockView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
+
+export default function installBlock(config) {
+  const blocksConfig = config.blocks.blocksConfig;
+
+  blocksConfig.c3SIndicatorsOverviewBlock = {
+    id: 'c3SIndicatorsOverviewBlock',
+    title: 'C3S Indicators Overview',
+    icon: zoomSVG,
+    group: 'site',
+    view: C3SIndicatorsOverviewBlockView,
+    edit: C3SIndicatorsOverviewBlockEdit,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
+  };
+
+  return config;
+}

package/src/components/manage/Blocks/C3SIndicatorsOverviewBlock/schema.js

@@ -0,0 +1,35 @@
+const fields = ['category'];
+
+export default {
+  title: 'C3S Indicators Overview',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields,
+    },
+  ],
+
+  properties: {
+    category: {
+      title: 'Category',
+      type: 'string',
+      factory: 'Choice',
+      choices: [
+        ['health', 'Health'],
+        ['agriculture', 'Agriculture'],
+        ['forestry', 'Forestry'],
+        ['energy', 'Energy'],
+        ['tourism', 'Tourism'],
+        ['water-and-coastal', 'Water and Coastal'],
+      ],
+      default: 'health',
+      description: 'Choose indicators category to be used as filter.',
+      required: true,
+      noValueOption: false,
+    },
+  },
+
+  required: [],
+};

package/src/components/manage/Blocks/ReadMore/ReadMoreEdit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import ReadMoreView from './ReadMoreView';
+import schema from './schema';
+
+const ReadMoreEdit = (props) => {
+  const { block, data, onChangeBlock, selected, id } = props;
+
+  return (
+    <>
+      <ReadMoreView data={data} id={id} mode="edit" />
+
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+export default ReadMoreEdit;

package/src/components/manage/Blocks/ReadMore/ReadMoreView.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Button, Icon } from 'semantic-ui-react';
+import { BodyClass } from '@plone/volto/helpers';
+import cx from 'classnames';
+
+import './style.less';
+
+const ReadMoreView = (props) => {
+  const { data, mode } = props;
+  const isEditMode = mode === 'edit';
+  const { label_opened, label_closed, label_position, height } = data;
+
+  const [isReadMore, setIsReadMore] = React.useState(true);
+  const [wrapperHeight, setWrapperHeight] = React.useState(height);
+  const [mounted, setMounted] = React.useState(false);
+  const readMoreRef = React.createRef();
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  React.useEffect(() => {
+    if (isEditMode || !mounted) return;
+
+    const button = readMoreRef.current;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'panel-wrapper';
+
+    const nodes = [];
+    let prev_elem = button.previousSibling;
+    while (prev_elem) {
+      nodes.push(prev_elem);
+      prev_elem = prev_elem.previousSibling;
+    }
+    const section = document.getElementsByClassName('panel-wrapper');
+    if (section.length > 0) return;
+
+    Array.from(nodes).forEach((e) => {
+      wrapper.appendChild(e);
+    });
+
+    button.parentNode.insertBefore(wrapper, button);
+    wrapper.append(...Array.from(wrapper.childNodes).reverse());
+  }, [mounted, readMoreRef, isEditMode]);
+
+  React.useEffect(() => {
+    if (isEditMode || !mounted) return;
+
+    const wrapper = document.getElementsByClassName('panel-wrapper')[0];
+
+    if (wrapper) {
+      wrapper.style.height = wrapperHeight;
+    }
+  }, [mounted, wrapperHeight, isEditMode]);
+
+  React.useEffect(() => {
+    isReadMore ? setWrapperHeight(height) : setWrapperHeight('auto');
+  }, [height, isReadMore]);
+
+  return (
+    <div
+      ref={readMoreRef}
+      id="read-more-button"
+      className={cx('styled-readMoreBlock', {
+        left: label_position === 'left',
+        right: label_position === 'right',
+      })}
+    >
+      <BodyClass className={`${isReadMore ? 'closed' : 'opened'}`} />
+      <Button basic icon primary onClick={() => setIsReadMore(!isReadMore)}>
+        {isReadMore ? (
+          <>
+            <strong>{label_closed || 'Read more'}</strong>
+            <Icon className="ri-arrow-down-s-line" />
+          </>
+        ) : (
+          <>
+            <strong>{label_opened || 'Read less'}</strong>
+            <Icon className="ri-arrow-up-s-line" />
+          </>
+        )}
+      </Button>
+    </div>
+  );
+};
+export default ReadMoreView;

package/src/components/manage/Blocks/ReadMore/index.js

@@ -0,0 +1,22 @@
+import ReadMoreEdit from './ReadMoreEdit';
+import ReadMoreView from './ReadMoreView';
+import iconSVG from '@plone/volto/icons/divide-horizontal.svg';
+
+export default function installBlock(config) {
+  config.blocks.blocksConfig.readMoreBlock = {
+    id: 'readMoreBlock',
+    title: 'Read more',
+    icon: iconSVG,
+    group: 'site',
+    edit: ReadMoreEdit,
+    view: ReadMoreView,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+}

package/src/components/manage/Blocks/ReadMore/schema.js

@@ -0,0 +1,42 @@
+export default {
+  title: 'Read more',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['label_closed', 'label_opened', 'label_position', 'height'],
+    },
+  ],
+  properties: {
+    label_closed: {
+      title: 'Closed button',
+      default: 'Read more',
+    },
+    label_opened: {
+      title: 'Opened button',
+      default: 'Read less',
+    },
+    label_position: {
+      title: 'Button position',
+      choices: [
+        ['left', 'Left'],
+        ['right', 'Right'],
+      ],
+      default: 'right',
+    },
+    height: {
+      title: (
+        <a
+          rel="noreferrer"
+          target="_blank"
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
+        >
+          CSS height
+        </a>
+      ),
+      default: '50vh',
+      description: 'Visible section height',
+    },
+  },
+  required: [],
+};

package/src/components/manage/Blocks/ReadMore/style.less

@@ -0,0 +1,25 @@
+.styled-readMoreBlock {
+  display: flex;
+  margin: 1.5em 0;
+
+  &.right {
+    flex-direction: row-reverse;
+  }
+
+  button {
+    display: flex !important;
+    align-items: center !important;
+    font-size: 18px !important;
+  }
+
+  i.icon {
+    font-size: 26px !important;
+  }
+}
+
+body.closed {
+  .panel-wrapper {
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
+  }
+}

package/src/components/manage/Blocks/index.js

@@ -11,6 +11,8 @@ import installCountryMapHeatIndex from './CountryMapHeatIndex';
 import installCountryMapProfile from './CountryMapProfile';
 import installListing from './Listing';
 import installRAST from './RASTBlock';
+import installC3SIndicatorsOverviewBlock from './C3SIndicatorsOverviewBlock';
+import installReadMore from './ReadMore';
 
 export default function installBlocks(config) {
   config.blocks.blocksConfig.title.restricted = false;
@@ -18,6 +20,8 @@ export default function installBlocks(config) {
 
   return compose(
     installRAST,
+    installReadMore,
+    installC3SIndicatorsOverviewBlock,
     installMKHMap,
     installECDEIndicatorsBlock,
     installCaseStudyExplorerBlock,

package/src/components/theme/Header.jsx

@@ -20,6 +20,7 @@ import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
 import { find } from 'lodash';
 import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
+import { toPublicURL } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 import { compose } from 'recompose';
@@ -72,7 +73,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     return removeTrailingSlash(state.router?.location?.pathname) || '';
   });
 
-  const isSubsite = subsite?.['@type'] === 'Subsite';
+  const isSubsite = ['Folder', 'Subsite'].indexOf(subsite?.['@type']) > -1;
 
   const isHomePageInverse = useSelector((state) => {
     const layout = state.content?.data?.layout;
@@ -115,6 +116,11 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     }
   }, [token, dispatch, pathname, previousToken]);
 
+  const subsiteLogo = subsite?.subsite_logo
+    ? subsite.subsite_logo.scales?.preview?.download ||
+      toPublicURL(`${subsite['@id']}/@@images/subsite_logo`)
+    : null;
+
   return (
     <Header menuItems={items}>
       {isHomePageInverse && <BodyClass className="homepage" />}
@@ -238,7 +244,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
               <>
                 {subsite.subsite_logo ? (
                   <Logo
-                    src={subsite.subsite_logo?.scales.preview.download}
+                    src={subsiteLogo}
                     title={subsite.title}
                     alt={subsite.title}
                     url={flattenToAppURL(subsite['@id'])}

package/src/components/theme/Widgets/GeocharsWidget.jsx

@@ -110,7 +110,7 @@ const SelectCountries = (props) => {
           key={country.code}
           value={country.code}
           label={country.name}
-          checked={countries.includes(country.code)}
+          checked={countries?.includes(country.code) || false}
           onChange={handleSelect}
         />
       ))}

package/src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -69,7 +69,6 @@ const DefaultView = (props) => {
   let currentNavigation = config.settings.contextNavigationLocations.find(
     (element) => location.pathname.indexOf(element.rootPath) > -1,
   );
-  // console.log('CurrentNavigation', currentNavigation);
 
   const gridColumns =
     currentNavigation && currentNavigation?.columns

package/src/search/config-health.js

@@ -106,6 +106,12 @@ export default function installMainSearch(config) {
         'Heat',
       ],
     },
+    {
+      id: 'observatoryPartner',
+      title: 'Observatory partner',
+      facetField: 'cca_partner_contributors.keyword',
+      sortOn: 'alpha',
+    },
   ];
 
   if (typeof window !== 'undefined') {

package/src/search/facets-health.js

@@ -173,7 +173,7 @@ const facets = [
     sortOnCustomLabel: 'Alphabetical',
   },
   {
-    field: 'cca_origin_websites.keyword',
+    field: 'cca_partner_contributors.keyword',
     factory: 'MultiTermFacet',
     label: 'Observatory partner',
     showInFacetsList: true,