@eeacms/volto-clms-theme 1.0.108 → 1.0.111

package/CHANGELOG.md

@@ -4,9 +4,40 @@ 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.111](https://github.com/eea/volto-clms-theme/compare/1.0.110...1.0.111)
+
+- bump accordion block [`f64f037`](https://github.com/eea/volto-clms-theme/commit/f64f037cbcb1200f15d70590beaf4131f7bf464d)
+- Use Case view [`c60b74f`](https://github.com/eea/volto-clms-theme/commit/c60b74f110f98faff7d15a42167e45e410efeec1)
+- textWidget limit to 1000 characters and textAreaWidget show error with more than 8000 characters [`662f035`](https://github.com/eea/volto-clms-theme/commit/662f035fa9ecd7b61b7bb8aa17acb0ce89718df8)
+- relationship between Datasets Use Cases/News [`b1f1848`](https://github.com/eea/volto-clms-theme/commit/b1f184858685783b3ea408930b9e3b1884b381a8)
+
+#### [1.0.110](https://github.com/eea/volto-clms-theme/compare/1.0.109...1.0.110)
+
+> 28 July 2022
+
+- Develop [`#282`](https://github.com/eea/volto-clms-theme/pull/282)
+- Subscription header [`#281`](https://github.com/eea/volto-clms-theme/pull/281)
+- eea.meeting editor box condition [`1cb1361`](https://github.com/eea/volto-clms-theme/commit/1cb13611bee071293875e5425a4e63fa689ae640)
+- fix contents invalid time error [`87dc051`](https://github.com/eea/volto-clms-theme/commit/87dc051c8f8eb0278c0372685adf7a0e3ee2fc09)
+- add volto-tableau [`8d182ef`](https://github.com/eea/volto-clms-theme/commit/8d182ef1f9bce724097630731010df5ed62809cd)
+- checkbox tree parents [`2d7432b`](https://github.com/eea/volto-clms-theme/commit/2d7432b39c5b91d160267f2de3791afef55a2310)
+- add Helmet title to User profile page [`cbca5b3`](https://github.com/eea/volto-clms-theme/commit/cbca5b39f8a8b5ba8b40414561036eb27346e36f)
+
+#### [1.0.109](https://github.com/eea/volto-clms-theme/compare/1.0.108...1.0.109)
+
+> 26 July 2022
+
+- Develop [`#280`](https://github.com/eea/volto-clms-theme/pull/280)
+- add ImageSizeWidget to fix volto-style-block incompatibility with Volto 15 [`15e4d97`](https://github.com/eea/volto-clms-theme/commit/15e4d9785aa3d34787ca151319aeaf8a4d8930b4)
+- breadcrumbs on file views [`03ff26a`](https://github.com/eea/volto-clms-theme/commit/03ff26acf75090ebe61a71fb6f9c144548df1615)
+- prettier [`b1f7295`](https://github.com/eea/volto-clms-theme/commit/b1f72954e990a789c84c6a4cc0764bbf98fcb6a2)
+- email field style login popup and footer subscribe [`0561cb5`](https://github.com/eea/volto-clms-theme/commit/0561cb51cacb93f83c448ce82ef4079947942922)
+
 #### [1.0.108](https://github.com/eea/volto-clms-theme/compare/1.0.107...1.0.108)
 
-- EmailWidget fix [`cd56839`](https://github.com/eea/volto-clms-theme/commit/cd5683951ae27f7ceb51703593e898e33928bf0e)
+> 18 July 2022
+
+- EmailWidget fix [`#279`](https://github.com/eea/volto-clms-theme/pull/279)
 
 #### [1.0.107](https://github.com/eea/volto-clms-theme/compare/1.0.106...1.0.107)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.108",
+  "version": "1.0.111",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -29,11 +29,12 @@
     "@eeacms/volto-react-table-widget",
     "volto-form-block",
     "@eeacms/volto-taxonomy",
-    "volto-cookie-banner"
+    "volto-cookie-banner",
+    "@eeacms/volto-tableau"
   ],
   "dependencies": {
     "volto-cookie-banner": "2.1.0",
-    "@eeacms/volto-accordion-block": "3.4.13",
+    "@eeacms/volto-accordion-block": "3.5.0",
     "@eeacms/volto-arcgis-block": "*",
     "@eeacms/volto-clms-utils": "0.1.6",
     "@eeacms/volto-columns-block": "4.4.3",
@@ -42,6 +43,7 @@
     "@eeacms/volto-resize-helper": "0.2.1",
     "@eeacms/volto-tabs-block": "1.2.7",
     "@eeacms/volto-taxonomy": "^1.0.0",
+    "@eeacms/volto-tableau": "1.2.4",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-regular-svg-icons": "5.15.3",
     "@fortawesome/free-solid-svg-icons": "5.15.3",

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/CheckboxTreeParentFacet.jsx

@@ -0,0 +1,168 @@
+import 'react-input-range/lib/css/index.css';
+import './range.css';
+
+import React, { useState } from 'react';
+import { Checkbox, List } from 'semantic-ui-react';
+import { structure_taxonomy_terms } from '@eeacms/volto-clms-theme/components';
+
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
+
+const hasAllChildrensSelected = (value, childrens) => {
+  var result = true;
+  if (!childrens || childrens.length === 0) {
+    result = false;
+  }
+  childrens.forEach((ch) => {
+    if (value.filter((v) => v.value === ch.value).length === 0) {
+      result = false;
+    }
+  });
+  return result;
+};
+
+const checkAllChildren = (value, childrens) => {
+  if (!childrens || childrens.length === 0) {
+    return value;
+  }
+  childrens.forEach((ch) => {
+    if (value.filter((v) => v.value === ch.value).length === 0) {
+      value.push(ch);
+    }
+  });
+  return value;
+};
+
+const CheckboxTreeParentFacet = (props) => {
+  const { facet, choices, onChange, value } = props;
+  const facetValue = value;
+  var [open, setOpen] = useState(false);
+  let options = [];
+  if (choices?.length > 0) {
+    options = structure_taxonomy_terms(choices);
+  }
+  return (
+    <fieldset className="ccl-fieldset">
+      <div
+        className="ccl-expandable__button"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+        onKeyDown={() => setOpen(!open)}
+        tabIndex={0}
+        role={'button'}
+      >
+        <legend className="ccl-form-legend">{facet.title}</legend>
+      </div>
+      <div>
+        <List>
+          {options.map((option) => (
+            <CheckboxListParent
+              option={option}
+              key={option.value}
+              onChange={onChange}
+              value={facetValue}
+              id={facet.field.value}
+            />
+          ))}
+        </List>
+      </div>
+    </fieldset>
+  );
+};
+
+const CheckboxListParent = ({ option, key, onChange, value, id }) => {
+  return (
+    <List.Item
+      key={key}
+      style={{ paddingLeft: '15px', paddingBottom: '15px', paddingTop: '10px' }}
+    >
+      <List.Content>
+        <List.Header>
+          <Checkbox
+            key={option.value}
+            name={`field-${option.value}`}
+            onChange={(event, { checked }) => {
+              checked
+                ? onChange(id, [
+                    // if this option has children, check them all
+                    ...checkAllChildren(value, option.childrens).map(
+                      (f) => f.value,
+                    ),
+                  ])
+                : onChange(id, [
+                    ...value
+                      .filter((item) => item.value !== option.value)
+                      .filter(
+                        (item) =>
+                          option.childrens?.length > 0 &&
+                          !option.childrens
+                            .map((ch) => ch.value)
+                            .includes(item.value),
+                      )
+                      .map((f) => f.value),
+                  ]);
+            }}
+            label={
+              <label htmlFor={`field-${option.value}`}>{option.label}</label>
+            }
+            checked={
+              value.some((item) => item.value === option.value) ||
+              hasAllChildrensSelected(value, option.childrens)
+            }
+            value={option.value}
+          />
+        </List.Header>
+        {/* {option.childrens.length > 0 && (
+          <List.Item>
+            <List.List style={{ paddingLeft: '25px' }}>
+              {option.childrens.map((child) => (
+                <List.Item>
+                  <List.Content>
+                    <List.Header>
+                      <Checkbox
+                        key={child.value}
+                        name={`field-${child.value}`}
+                        disabled={false}
+                        onChange={(event, { checked }) => {
+                          checked
+                            ? onChange(id, [
+                                ...value
+                                  .filter((f) => f.value !== child.value)
+                                  .map((f) => f.value),
+                                ...(checked ? [child.value] : []),
+                              ])
+                            : onChange(id, [
+                                ...value
+                                  .filter((item) => item.value !== child.value)
+                                  .map((f) => f.value),
+                              ]);
+                        }}
+                        label={
+                          <label htmlFor={`field-${child.value}`}>
+                            {child.label}
+                          </label>
+                        }
+                        checked={value.some(
+                          (item) => item.value === child.value,
+                        )}
+                        value={child.value}
+                      />
+                    </List.Header>
+                  </List.Content>
+                </List.Item>
+              ))}
+            </List.List>
+          </List.Item>
+        )} */}
+      </List.Content>
+    </List.Item>
+  );
+};
+
+CheckboxTreeParentFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+CheckboxTreeParentFacet.stateToValue = selectFacetStateToValue;
+CheckboxTreeParentFacet.valueToQuery = selectFacetValueToQuery;
+export default CheckboxTreeParentFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/index.js

@@ -2,6 +2,7 @@ import DoubleRangeFacet from './DoubleRangeFacet';
 import AccordionFacet from './AccordionFacet';
 import RightModalFacets from './RightModalFacets';
 import CheckboxTreeFacet from './CheckboxTreeFacet';
+import CheckboxTreeParentFacet from './CheckboxTreeParentFacet';
 import WithType from './WithType';
 import rewriteOptions, { portal_types_labels } from './rewriteOptions';
 
@@ -11,6 +12,7 @@ export {
   WithType,
   DoubleRangeFacet,
   CheckboxTreeFacet,
+  CheckboxTreeParentFacet,
   rewriteOptions,
   portal_types_labels,
 };

package/src/components/Blocks/customBlocks.js

@@ -4,6 +4,7 @@ import {
   WithType,
   DoubleRangeFacet,
   CheckboxTreeFacet,
+  CheckboxTreeParentFacet,
   rewriteOptions,
 } from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoSearchBlock';
 import { SelectFacetFilterListEntry } from '@plone/volto/components/manage/Blocks/Search/components';
@@ -344,6 +345,16 @@ const customBlocks = (config) => ({
             valueToQuery: CheckboxTreeFacet.valueToQuery,
             filterListComponent: SelectFacetFilterListEntry,
           },
+          {
+            id: 'checkboxTreeParentFacet',
+            title: 'Checkbox Tree Parents',
+            view: CheckboxTreeParentFacet,
+            isDefault: false,
+            schemaEnhancer: CheckboxTreeParentFacet.schemaEnhancer,
+            stateToValue: CheckboxTreeParentFacet.stateToValue,
+            valueToQuery: CheckboxTreeParentFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
+          },
 
           ...config.blocks.blocksConfig.search.extensions.facetWidgets.types,
         ],

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -6,6 +6,8 @@
 import {
   DataSetInfoContent,
   DownloadDataSetContent,
+  RelatedNews,
+  RelatedUseCases,
 } from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView';
 import { Modal, Segment } from 'semantic-ui-react';
 import { connect, useDispatch, useSelector } from 'react-redux';
@@ -282,6 +284,8 @@ const CLMSDatasetDetailView = ({ content, token }) => {
 
       <CclTabs routing={true}>
         <div tabTitle="General Info">{DataSetInfoContent(content)}</div>
+        <div tabTitle="Use cases">{RelatedUseCases(content)}</div>
+        <div tabTitle="News">{RelatedNews(content)}</div>
         {content?.downloadable_dataset &&
           content?.downloadable_files?.items?.length > 0 && (
             <div tabTitle="Download">{DownloadDataSetContent(content)}</div>

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 import config from '@plone/volto/registry';
 import { searchContent } from '@plone/volto/actions';
+import { useLocation } from 'react-router-dom';
 
 const DataSetInfoContent = (props) => {
   const dispatch = useDispatch();
@@ -22,12 +23,13 @@ const DataSetInfoContent = (props) => {
     geonetwork_identifiers,
     citation,
   } = props;
+  const location = useLocation();
   const searchSubrequests = useSelector((state) => state.search.subrequests);
   let libraries = searchSubrequests?.[id]?.items || [];
   let librariesPending = searchSubrequests?.[id]?.loading;
   const user = useSelector((state) => state.users.user);
   React.useEffect(() => {
-    UID &&
+    if (location.hash === '#GeneralInfo' && UID) {
       dispatch(
         searchContent(
           '',
@@ -40,7 +42,8 @@ const DataSetInfoContent = (props) => {
           id,
         ),
       );
-  }, [id, UID, dispatch]);
+    }
+  }, [id, UID, dispatch, location]);
 
   const [activeIndex, setActiveIndex] = React.useState([99]);
 

package/src/components/CLMSDatasetDetailView/RelatedNews.jsx

@@ -0,0 +1,51 @@
+import { Loader } from 'semantic-ui-react';
+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 { useLocation } from 'react-router-dom';
+
+const RelatedNews = (props) => {
+  const dispatch = useDispatch();
+  const { UID, id } = props;
+  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  let libraries = searchSubrequests?.[id]?.items || [];
+  let librariesPending = searchSubrequests?.[id]?.loading;
+  const location = useLocation();
+  React.useEffect(() => {
+    if (location.hash === '#News' && UID) {
+      dispatch(
+        searchContent(
+          '',
+          {
+            fullobjects: 1,
+            portal_type: 'News Item',
+            path: '/',
+            associated_datasets: UID,
+          },
+          id,
+        ),
+      );
+    }
+  }, [id, UID, dispatch, location]);
+
+  return (
+    <div>
+      {librariesPending && <Loader active inline="centered" />}
+      {libraries.length > 0 ? (
+        libraries.map((item, index) => (
+          <CclCard
+            key={index}
+            type={null}
+            card={{ Type: item['@type'], ...item }}
+          />
+        ))
+      ) : (
+        <p>There are no related items.</p>
+      )}
+    </div>
+  );
+};
+
+export default RelatedNews;

package/src/components/CLMSDatasetDetailView/RelatedUseCases.jsx

@@ -0,0 +1,51 @@
+import { Loader } from 'semantic-ui-react';
+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 { useLocation } from 'react-router-dom';
+
+const RelatedUseCases = (props) => {
+  const dispatch = useDispatch();
+  const { UID, id } = props;
+  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  let libraries = searchSubrequests?.[id]?.items || [];
+  let librariesPending = searchSubrequests?.[id]?.loading;
+  const location = useLocation();
+  React.useEffect(() => {
+    if (location.hash === '#Usecases' && UID) {
+      dispatch(
+        searchContent(
+          '',
+          {
+            fullobjects: 1,
+            portal_type: 'UseCase',
+            path: '/',
+            associated_datasets: UID,
+          },
+          id,
+        ),
+      );
+    }
+  }, [id, UID, dispatch, location]);
+
+  return (
+    <div>
+      {librariesPending && <Loader active inline="centered" />}
+      {libraries.length > 0 ? (
+        libraries.map((item, index) => (
+          <CclCard
+            key={index}
+            type={null}
+            card={{ Type: item['@type'], ...item }}
+          />
+        ))
+      ) : (
+        <p>There are no related items.</p>
+      )}
+    </div>
+  );
+};
+
+export default RelatedUseCases;

package/src/components/CLMSDatasetDetailView/index.js

@@ -1,2 +1,4 @@
 export DataSetInfoContent from './DataSetInfoContent';
 export DownloadDataSetContent from './DownloadDataSetContent';
+export RelatedNews from './RelatedNews';
+export RelatedUseCases from './RelatedUseCases';

package/src/components/CLMSDownloadableFileView/CLMSDownloadableFileView.jsx

@@ -1,18 +1,10 @@
-import React, { useEffect } from 'react';
-
+import React from 'react';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { getBreadcrumbs } from '@plone/volto/actions';
-import { useDispatch } from 'react-redux';
-import { Label } from 'semantic-ui-react';
+import { Label, Container } from 'semantic-ui-react';
 
 export const CLMSDownloadableFileView = (props) => {
-  const dispatch = useDispatch();
   const { content } = props;
 
-  useEffect(() => {
-    dispatch(getBreadcrumbs([]));
-  }, [dispatch]);
-
   const options = content.taxonomy_technical_library_categorization?.map(
     (cat) => {
       return {
@@ -26,26 +18,28 @@ export const CLMSDownloadableFileView = (props) => {
 
   return (
     <>
-      <div id="page-document" className="ui container">
-        <h1 className="page-title">{content.title}</h1>
-        <div>
-          <p>{content.description}</p>
+      <Container className="view-wrapper">
+        <div id="page-document" className="ui container">
+          <h1 className="page-title">{content.title}</h1>
+          <div>
+            <p>{content.description}</p>
+          </div>
+          {options?.length > 0 && (
+            <Label.Group>
+              {options.map((cat, key) => {
+                return (
+                  <Label key={key} color="olive">
+                    {cat.title}
+                  </Label>
+                );
+              })}
+            </Label.Group>
+          )}{' '}
+          <CclButton download={true} url={content?.file?.download}>
+            Download file
+          </CclButton>
         </div>
-        {options?.length > 0 && (
-          <Label.Group>
-            {options.map((cat, key) => {
-              return (
-                <Label key={key} color="olive">
-                  {cat.title}
-                </Label>
-              );
-            })}
-          </Label.Group>
-        )}{' '}
-        <CclButton download={true} url={content?.file?.download}>
-          Download file
-        </CclButton>
-      </div>
+      </Container>
     </>
   );
 };

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -213,54 +213,59 @@ export const CLMSMeetingView = (props) => {
   return (
     <div className="ccl-container">
       <h1 className="page-title">{content.title}</h1>
-      {user.roles && user.roles.includes('Manager') && (
-        <Segment.Group compact horizontal>
-          {content.allow_anonymous_registration && (
-            <Segment padded={'very'} color={'olive'} circular>
-              <strong>
-                <FormattedMessage
-                  id="Anonymous registration form"
-                  defaultMessage="Anonymous registration form"
-                />
-              </strong>
-              <br />
-              <br />
-              {content.anonymous_registration_form ? (
-                <CclButton
-                  url={content.anonymous_registration_form?.url + '/edit'}
-                >
-                  <FormattedMessage id="Edit form" defaultMessage="Edit form" />
-                </CclButton>
-              ) : (
-                content.allow_anonymous_registration && (
-                  <CclButton onClick={createForm} isButton={true}>
+      {user.roles &&
+        user.roles.includes('Manager') &&
+        (content.allow_anonymous_registration ||
+          (content.allow_register && content.subscribers_link)) && (
+          <Segment.Group compact horizontal>
+            {content.allow_anonymous_registration && (
+              <Segment padded={'very'} color={'olive'} circular>
+                <strong>
+                  <FormattedMessage
+                    id="Anonymous registration form"
+                    defaultMessage="Anonymous registration form"
+                  />
+                </strong>
+                <br />
+                <br />
+                {content.anonymous_registration_form ? (
+                  <CclButton
+                    url={content.anonymous_registration_form?.url + '/edit'}
+                  >
                     <FormattedMessage
-                      id="Create form"
-                      defaultMessage="Create form"
+                      id="Edit form"
+                      defaultMessage="Edit form"
                     />
                   </CclButton>
-                )
-              )}
-              {content.anonymous_registration_form &&
-                (!content.anonymous_registration_form?.email ||
-                  !content.anonymous_registration_form?.fullname ||
-                  !content.anonymous_registration_form?.published) && (
-                  <p>
-                    <br />
-                    <Message
-                      negative
-                      compact
-                      size="large"
-                      header={intl.formatMessage(messages.form_not_ready)}
-                      list={formErrorMessagesList}
-                    ></Message>
-                  </p>
+                ) : (
+                  content.allow_anonymous_registration && (
+                    <CclButton onClick={createForm} isButton={true}>
+                      <FormattedMessage
+                        id="Create form"
+                        defaultMessage="Create form"
+                      />
+                    </CclButton>
+                  )
                 )}
-            </Segment>
-          )}
-          <Segment padded={'very'} color={'olive'} circular>
+                {content.anonymous_registration_form &&
+                  (!content.anonymous_registration_form?.email ||
+                    !content.anonymous_registration_form?.fullname ||
+                    !content.anonymous_registration_form?.published) && (
+                    <p>
+                      <br />
+                      <Message
+                        negative
+                        compact
+                        size="large"
+                        header={intl.formatMessage(messages.form_not_ready)}
+                        list={formErrorMessagesList}
+                      ></Message>
+                    </p>
+                  )}
+              </Segment>
+            )}
             {content.allow_register && content.subscribers_link && (
-              <>
+              <Segment padded={'very'} color={'olive'} circular>
                 <strong>
                   <FormattedMessage
                     id="Meeting register information"
@@ -281,11 +286,10 @@ export const CLMSMeetingView = (props) => {
                     defaultMessage="Mail archive"
                   />
                 </CclButton>
-              </>
+              </Segment>
             )}
-          </Segment>
-        </Segment.Group>
-      )}
+          </Segment.Group>
+        )}
       {content.description}
       <Segment compact padded={'very'} color={'olive'} floated="left">
         <div className="dataset-info-field">

package/src/components/CLMSMeetingView/CclLightGallery.jsx

@@ -28,10 +28,8 @@ export const LightGalleryListing = () => {
         'images',
       ),
     );
-    return () => {
-      dispatch(searchContent([]));
-    };
-  }, [dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return (
     <>
       <div>

package/src/components/CLMSProfileView/CLMSProfileView.jsx

@@ -21,6 +21,8 @@ import { connect } from 'react-redux';
 import { getExtraBreadcrumbItems } from '../../actions';
 import jwtDecode from 'jwt-decode';
 import { Unauthorized } from '@plone/volto/components';
+import { Helmet } from '@plone/volto/helpers';
+
 /**
  * CLMSProfileView class.
  * @class CLMSProfileView
@@ -53,6 +55,7 @@ class CLMSProfileView extends Component {
 
     return (
       <div className="ccl-container ">
+        <Helmet title="User profile"></Helmet>
         {loggedIn ? (
           <CclTabs>
             <div tabTitle="User profile">