@eeacms/volto-cca-policy 1.0.6 → 1.0.7

package/src/{helpers → components/theme/Content/Sections}/ContentMetadata.jsx

@@ -1,43 +1,19 @@
-import { Fragment } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Popup, Segment } from 'semantic-ui-react';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import {
-  MetadataItemList,
-  LinkedMetadataItemList,
-} from '@eeacms/volto-cca-policy/helpers';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import {
-  VIDEO,
+  ADAPTATION_OPTION,
   GUIDANCE,
   INDICATOR,
   PUBLICATION_REPORT,
-  ADAPTATION_OPTION,
-  ACE_COUNTRIES,
-  BIOREGIONS,
-  SUBNATIONAL_REGIONS,
-  // CONTENT_TYPE_LABELS,
+  VIDEO,
 } from '@eeacms/volto-cca-policy/constants';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import GeographicMetadata from './GeographicMetadata';
+import LinkedMetadataItemList from './LinkedMetadataItemList';
+import MetadataItemList from './MetadataItemList';
+import PublicationDateInfo from './PublicationDateInfo';
 
 const messages = defineMessages({
-  default_info_tooltip: {
-    id:
-      'The date refers to the moment in which the item has been prepared ' +
-      'or updated by contributing experts to be submitted for the publication ' +
-      'in Climate ADAPT',
-    defaultMessage:
-      'The date refers to the moment in which the item has been prepared ' +
-      'or updated by contributing experts to be submitted for the publication ' +
-      'in Climate ADAPT',
-  },
-  release_info_tooltip: {
-    id: 'The date refers to the date of release of the video',
-    defaultMessage: 'The date refers to the date of release of the video',
-  },
-  publication_info_tooltip: {
-    id: 'The date refers to the latest date of publication of the item',
-    defaultMessage:
-      'The date refers to the latest date of publication of the item',
-  },
   release_date: {
     id: 'Date of release:',
     defaultMessage: 'Date of release:',
@@ -50,286 +26,9 @@ const messages = defineMessages({
     id: 'Date of creation:',
     defaultMessage: 'Date of creation:',
   },
-  'Macro-Transnational region:': {
-    id: 'Macro-Transnational region:',
-    defaultMessage: 'Macro-Transnational region:',
-  },
-  'Biogeographical regions:': {
-    id: 'Biogeographical regions:',
-    defaultMessage: 'Biogeographical regions:',
-  },
-  'Countries:': { id: 'Countries:', defaultMessage: 'Countries:' },
-  'Sub Nationals:': { id: 'Sub Nationals:', defaultMessage: 'Sub Nationals:' },
-  'City:': { id: 'City:', defaultMessage: 'City:' },
 });
 
-function renderElement(value) {
-  return [BIOREGIONS[value]];
-}
-
-function renderBiotrans(value) {
-  if (value === null) {
-    return null;
-  }
-  let out = [];
-  let temp = null;
-  if (Array.isArray(value)) {
-    if (value.length === 0) {
-      return null;
-    }
-  } else {
-    temp = BIOREGIONS[value];
-    if (temp !== undefined) {
-      return [temp];
-    } else {
-      return [value];
-    }
-  }
-  for (let region of value) {
-    temp = BIOREGIONS[region];
-    if (temp !== undefined) {
-      out.push(temp);
-    } else {
-      out.push(region);
-    }
-  }
-  return out;
-}
-
-function renderCountries(value) {
-  let out = [];
-  let temp = null;
-  if (Array.isArray(value)) {
-    if (value.length === 0) {
-      return null;
-    }
-  } else {
-    temp = ACE_COUNTRIES[value];
-    if (temp !== undefined) {
-      return [temp];
-    } else {
-      return [value];
-    }
-  }
-  for (let region of value) {
-    temp = ACE_COUNTRIES[region];
-    if (temp !== undefined) {
-      out.push(temp);
-    } else {
-      out.push(region);
-    }
-  }
-  return out;
-}
-
-function renderSubnational(value) {
-  let out = [];
-  let temp = null;
-  if (Array.isArray(value)) {
-    if (value.length === 0) {
-      return null;
-    }
-  } else {
-    temp = SUBNATIONAL_REGIONS[value];
-    if (temp !== undefined) {
-      return [temp];
-    } else {
-      return [value];
-    }
-  }
-  for (let region of value) {
-    temp = SUBNATIONAL_REGIONS[region];
-    if (temp !== undefined) {
-      out.push(temp);
-    } else {
-      // Show only defined terms, or show all (including missing IDs):
-      // out.push(region);
-    }
-  }
-  return out;
-}
-
-function renderCity(value) {
-  if (Array.isArray(value)) {
-    if (value.length === 0) {
-      return null;
-    }
-    return value;
-  } else {
-    if (value.length === 0) {
-      return null;
-    }
-    let out = [];
-    out.push(value);
-    return out;
-  }
-}
-
-function renderSection(value, valueType) {
-  if (valueType === 'element') {
-    return renderElement(value);
-  }
-
-  if (valueType === 'macrotrans') {
-    return renderBiotrans(value);
-  }
-
-  if (valueType === 'biotrans') {
-    return renderBiotrans(value);
-  }
-
-  if (valueType === 'countries') {
-    return renderCountries(value);
-  }
-
-  if (valueType === 'subnational') {
-    return renderSubnational(value);
-  }
-
-  if (valueType === 'city') {
-    return renderCity(value);
-  }
-  return null;
-}
-
-function renderGeochar(geoElements, isObservatoryPage = false) {
-  if (!geoElements) {
-    return null;
-  }
-
-  let out = [];
-  let orderedSections = [
-    'element',
-    'macrotrans',
-    'biotrans',
-    'countries',
-    'subnational',
-    'city',
-  ];
-
-  const sectionTitles = {
-    element: null,
-    macrotrans: 'Macro-Transnational region:',
-    biotrans: 'Biogeographical regions:',
-    countries: 'Countries:',
-    subnational: 'Sub Nationals:',
-    city: 'City:',
-  };
-
-  if (isObservatoryPage) {
-    orderedSections = ['element', 'macrotrans'];
-  }
-
-  for (let key of orderedSections) {
-    let section = geoElements[key];
-
-    if (section !== undefined) {
-      let rendered = renderSection(section, key);
-      out[key] = out.push({
-        title: sectionTitles[key],
-        value: rendered,
-      });
-    }
-  }
-
-  return out;
-}
-
-function GeoChar(props) {
-  const { content } = props;
-  const { spatial_values, spatial_layer, geochars } = content;
-  const j = JSON.parse(geochars);
-  const intl = useIntl();
-
-  if (j === null) {
-    if (spatial_layer) {
-      return (
-        <div className="geochar">
-          <p>{spatial_layer}</p>
-          <h5>
-            <FormattedMessage id="Countries:" defaultMessage="Countries:" />
-          </h5>
-          {spatial_values && spatial_values.length > 0 && (
-            <p>
-              {spatial_values
-                .map((item) => item.token)
-                .map((token) =>
-                  intl.formatMessage({
-                    id: token,
-                    defaultMessage: token,
-                  }),
-                )
-                .join(', ')}
-            </p>
-          )}
-        </div>
-      );
-    }
-
-    return '';
-  }
-
-  const { geoElements } = j;
-
-  let rendered = renderGeochar(geoElements);
-
-  return (
-    <div className="geochar">
-      {rendered.map(
-        (section, index) =>
-          section.value && (
-            <Fragment key={index}>
-              {section.title && (
-                <h5>{intl.formatMessage(messages[section.title])}</h5>
-              )}
-              <p>
-                {section.value
-                  .map((countryName) =>
-                    intl.formatMessage({
-                      id: countryName,
-                      defaultMessage: countryName,
-                    }),
-                  )
-                  .join(', ')}
-              </p>
-            </Fragment>
-          ),
-      )}
-    </div>
-  );
-}
-
-function PublicationDateInfo({ value, portaltype, title }) {
-  const intl = useIntl();
-  const publicationYear = new Date(value).getFullYear();
-
-  const tooltipMessages = {
-    [VIDEO]: intl.formatMessage(messages.release_info_tooltip),
-    [GUIDANCE]: intl.formatMessage(messages.publication_info_tooltip),
-    [INDICATOR]: intl.formatMessage(messages.publication_info_tooltip),
-    [PUBLICATION_REPORT]: intl.formatMessage(messages.publication_info_tooltip),
-    default: intl.formatMessage(messages.default_info_tooltip),
-  };
-
-  const tooltipText = tooltipMessages[portaltype] || tooltipMessages.default;
-
-  if (publicationYear <= 1970) return null;
-
-  return (
-    <>
-      <h5>{title}</h5>
-      <p>
-        {publicationYear}
-        <Popup
-          content={tooltipText}
-          trigger={<i className="ri-question-fill"></i>}
-        />
-      </p>
-    </>
-  );
-}
-
-function ContentMetadata(props) {
+const ContentMetadata = (props) => {
   const intl = useIntl();
   const { content, related_case_studies } = props;
   const {
@@ -577,7 +276,7 @@ function ContentMetadata(props) {
                 defaultMessage="Geographic characterisation:"
               />
             </h5>
-            <GeoChar {...props} />
+            <GeographicMetadata {...props} />
           </>
         )}
       </Segment>
@@ -597,6 +296,6 @@ function ContentMetadata(props) {
         )}
     </>
   );
-}
+};
 
 export default ContentMetadata;

package/src/components/theme/Content/Sections/ContentRelatedItems.jsx

@@ -0,0 +1,35 @@
+import { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+const ContentRelatedItems = (props) => {
+  const { content } = props;
+  const { relatedItems } = content;
+
+  let contentRelatedItems = [];
+  if (relatedItems && relatedItems?.length > 0) {
+    contentRelatedItems = relatedItems.filter((item) =>
+      item['@type'].includes('eea.climateadapt'),
+    );
+  }
+
+  return contentRelatedItems.length > 0 ? (
+    <>
+      <h5>
+        <FormattedMessage
+          id="Related content:"
+          defaultMessage="Related content:"
+        />
+      </h5>
+
+      {contentRelatedItems.map((item) => (
+        <Fragment key={item['@id']}>
+          <UniversalLink item={item}>{item.title}</UniversalLink>
+          <br />
+        </Fragment>
+      ))}
+    </>
+  ) : null;
+};
+
+export default ContentRelatedItems;

package/src/components/theme/Content/Sections/DocumentsList.jsx

@@ -0,0 +1,80 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { List, ListItem, Segment } from 'semantic-ui-react';
+import {
+  CASE_STUDY,
+  ORGANISATION,
+  PUBLICATION_REPORT,
+} from '@eeacms/volto-cca-policy/constants';
+
+const messages = defineMessages({
+  documents: {
+    id: 'Documents',
+    defaultMessage: 'Documents',
+  },
+  caseStudiesDocuments: {
+    id: 'Case Studies Documents',
+    defaultMessage: 'Case Studies Documents',
+  },
+  publicationsAndReportsDocuments: {
+    id: 'Publications and Reports Documents',
+    defaultMessage: 'Publications and Reports Documents',
+  },
+  organisationDocuments: {
+    id: 'Organisation Documents',
+    defaultMessage: 'Organisation Documents',
+  },
+});
+
+const DocumentsList = (props) => {
+  const { content } = props;
+  const type = content['@type'];
+  const files = content?.cca_files;
+  const intl = useIntl();
+
+  if (!files || files.length === 0) {
+    return null;
+  }
+  if (!content.hasOwnProperty('show_counter')) {
+    content.show_counter = true;
+  }
+
+  let section_title = intl.formatMessage(messages.documents);
+
+  if (content['section_title']) {
+    section_title = content['section_title'];
+  }
+
+  if (type === CASE_STUDY) {
+    section_title = intl.formatMessage(messages.caseStudiesDocuments);
+  }
+
+  if (type === PUBLICATION_REPORT) {
+    section_title = intl.formatMessage(
+      messages.publicationsAndReportsDocuments,
+    );
+  }
+
+  if (type === ORGANISATION) {
+    section_title = intl.formatMessage(messages.organisationDocuments);
+  }
+
+  return (
+    <Segment>
+      <h5>
+        {section_title} {content.show_counter && <>({files.length})</>}
+      </h5>
+      <List className="documents-list">
+        {files.map((file) => (
+          <ListItem key={file.url}>
+            <a href={file.url} className="document-list-item">
+              <i className="file alternate icon"></i>
+              <span>{file.title}</span>
+            </a>
+          </ListItem>
+        ))}
+      </List>
+    </Segment>
+  );
+};
+
+export default DocumentsList;

package/src/components/theme/Content/Sections/EventDetails.jsx

@@ -0,0 +1,90 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button, Icon } from 'semantic-ui-react';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
+import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
+
+const messages = defineMessages({
+  downloadEvent: {
+    id: 'Download this event in iCal format',
+    defaultMessage: 'Download this event in iCal format',
+  },
+});
+
+export const WebDetails = (props) => {
+  const { content } = props;
+  const eventUrl = content?.event_url;
+  return eventUrl ? (
+    <>
+      <h4>
+        <FormattedMessage id="Web" defaultMessage="Web" />
+      </h4>
+      <p>
+        <a href={eventUrl} target="_blank" rel="noopener">
+          <FormattedMessage
+            id="Visit external website"
+            defaultMessage="Visit external website"
+          />
+        </a>
+      </p>
+    </>
+  ) : null;
+};
+
+const EventDetails = (props) => {
+  const { content } = props;
+  const intl = useIntl();
+
+  return (
+    <>
+      <h4>
+        <FormattedMessage id="When" defaultMessage="When" />
+      </h4>
+      <When
+        start={content.start}
+        end={content.end}
+        whole_day={content.whole_day}
+        open_end={content.open_end}
+      />
+      {content?.location !== null && (
+        <>
+          <h4>
+            <FormattedMessage id="Where" defaultMessage="Where" />
+          </h4>
+          <p>{content.location}</p>
+        </>
+      )}
+      {!!content.contact_email && (
+        <>
+          <h4>
+            <FormattedMessage id="Info" defaultMessage="Info" />
+          </h4>
+          <p>{content.contact_email}</p>
+        </>
+      )}
+
+      <WebDetails {...props} />
+
+      <div className="download-event">
+        <a
+          className="ics-download"
+          target="_blank"
+          rel="noreferrer"
+          href={`${expandToBackendURL(content['@id'])}/ics_view`}
+        >
+          <Button
+            className="icon inverted primary labeled"
+            title={intl.formatMessage(messages.downloadEvent)}
+          >
+            <Icon name="calendar alternate outline" />
+            <FormattedMessage
+              id="Download Event"
+              defaultMessage="Download Event"
+            />
+          </Button>
+        </a>
+      </div>
+    </>
+  );
+};
+
+export default EventDetails;

package/src/components/theme/Content/Sections/GeographicMetadata.jsx

@@ -0,0 +1,83 @@
+import { Fragment } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { renderGeochar } from './geographicMetadataUtils';
+
+const messages = defineMessages({
+  'Macro-Transnational region:': {
+    id: 'Macro-Transnational region:',
+    defaultMessage: 'Macro-Transnational region:',
+  },
+  'Biogeographical regions:': {
+    id: 'Biogeographical regions:',
+    defaultMessage: 'Biogeographical regions:',
+  },
+  'Countries:': { id: 'Countries:', defaultMessage: 'Countries:' },
+  'Sub Nationals:': { id: 'Sub Nationals:', defaultMessage: 'Sub Nationals:' },
+  'City:': { id: 'City:', defaultMessage: 'City:' },
+});
+
+const GeographicMetadata = (props) => {
+  const { content } = props;
+  const { spatial_values, spatial_layer, geochars } = content;
+  const j = geochars ? JSON.parse(geochars) : null;
+  const intl = useIntl();
+
+  if (j === null) {
+    if (spatial_layer) {
+      return (
+        <div className="geochar">
+          <p>{spatial_layer}</p>
+          <h5>
+            <FormattedMessage id="Countries:" defaultMessage="Countries:" />
+          </h5>
+          {spatial_values && spatial_values.length > 0 && (
+            <p>
+              {spatial_values
+                .map((item) => item.token)
+                .map((token) =>
+                  intl.formatMessage({
+                    id: token,
+                    defaultMessage: token,
+                  }),
+                )
+                .join(', ')}
+            </p>
+          )}
+        </div>
+      );
+    }
+
+    return '';
+  }
+
+  const { geoElements } = j;
+
+  let rendered = renderGeochar(geoElements);
+
+  return (
+    <div className="geochar">
+      {rendered.map(
+        (section, index) =>
+          section.value && (
+            <Fragment key={index}>
+              {section.title && (
+                <h5>{intl.formatMessage(messages[section.title])}</h5>
+              )}
+              <p>
+                {section.value
+                  .map((countryName) =>
+                    intl.formatMessage({
+                      id: countryName,
+                      defaultMessage: countryName,
+                    }),
+                  )
+                  .join(', ')}
+              </p>
+            </Fragment>
+          ),
+      )}
+    </div>
+  );
+};
+
+export default GeographicMetadata;

package/src/components/theme/Content/Sections/ImageGallery/index.js

@@ -0,0 +1 @@
+export { default } from './ImageGallery';

package/src/components/theme/Content/Sections/ItemLogo.jsx

@@ -0,0 +1,29 @@
+import { FormattedMessage } from 'react-intl';
+import { Image } from 'semantic-ui-react';
+import { VIDEO } from '@eeacms/volto-cca-policy/constants';
+
+export const LogoWrapper = ({ logo, children }) =>
+  logo ? <div className="has-logo">{children}</div> : children;
+
+const ItemLogo = (props) => {
+  const { content } = props;
+  const type = content['@type'];
+  const { logo, title } = content;
+
+  return type !== VIDEO ? (
+    <LogoWrapper logo={logo}>
+      <h2>
+        <FormattedMessage id="Description" defaultMessage="Description" />
+      </h2>
+      {logo && (
+        <Image
+          src={logo?.scales?.mini?.download}
+          alt={title}
+          className="db-logo"
+        />
+      )}
+    </LogoWrapper>
+  ) : null;
+};
+
+export default ItemLogo;