@eeacms/volto-cca-policy 0.3.22 → 0.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -32,10 +32,10 @@
     "@eeacms/volto-eea-design-system": "<=1.36.3",
     "@eeacms/volto-eea-website-theme": "^1.35.0",
     "@eeacms/volto-embed": "^9.1.1",
-    "@eeacms/volto-globalsearch": "2.0.10",
+    "@eeacms/volto-globalsearch": "2.0.11",
     "@eeacms/volto-hero-block": "^7.1.0",
     "@eeacms/volto-openlayers-map": "*",
-    "@eeacms/volto-searchlib": "2.0.14",
+    "@eeacms/volto-searchlib": "2.0.15",
     "@eeacms/volto-slate-label": "^0.6.0",
     "@eeacms/volto-tabs-block": "^7.5.1",
     "@elastic/search-ui": "1.21.2",

package/src/components/manage/Blocks/MissionSignatoriesProfile/AccordionList.jsx

@@ -6,14 +6,14 @@ import {
   AccordionContent,
 } from 'semantic-ui-react';
 
-const AccordionList = ({ accordions }) => {
+const AccordionList = ({ accordions, variation }) => {
   const [activeIndex, setActiveIndex] = useState(-1);
   const handleAccordionClick = (index) => {
     setActiveIndex(activeIndex === index ? -1 : index);
   };
 
   return (
-    <Accordion>
+    <Accordion className={variation}>
       {accordions.map((accordion, index) => (
         <React.Fragment key={index}>
           <AccordionTitle
@@ -21,7 +21,7 @@ const AccordionList = ({ accordions }) => {
             onClick={() => handleAccordionClick(index)}
           >
             <Icon
-              name={
+              className={
                 activeIndex === index
                   ? 'ri-arrow-up-s-line'
                   : 'ri-arrow-down-s-line'
@@ -30,7 +30,7 @@ const AccordionList = ({ accordions }) => {
             {accordion.title}
           </AccordionTitle>
           <AccordionContent active={activeIndex === index}>
-            <p>{accordion.content}</p>
+            {accordion.content}
           </AccordionContent>
         </React.Fragment>
       ))}

package/src/components/manage/Blocks/MissionSignatoriesProfile/ItemsSection.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Item, ItemGroup, ItemContent, Image } from 'semantic-ui-react';
+
+import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
+
+const ItemsSection = ({ items }) => {
+  return (
+    <ItemGroup className="items-group">
+      <Item>
+        <Image size="small" src={image} />
+        <ItemContent verticalAlign="middle">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </ItemContent>
+      </Item>
+
+      <Item>
+        <Image size="small" src={image} />
+        <ItemContent verticalAlign="middle">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </ItemContent>
+      </Item>
+
+      <Item>
+        <Image size="small" src={image} />
+        <ItemContent verticalAlign="middle">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </ItemContent>
+      </Item>
+
+      <Item>
+        <Image size="small" src={image} />
+        <ItemContent verticalAlign="middle">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </ItemContent>
+      </Item>
+
+      <Item>
+        <Image size="small" src={image} />
+        <ItemContent verticalAlign="middle">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </ItemContent>
+      </Item>
+
+      <Item>
+        <Image size="small" src={image} />
+        <ItemContent verticalAlign="middle">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  );
+};
+
+export default ItemsSection;

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/AssessmentTab.jsx

@@ -4,14 +4,13 @@ import {
   Image,
   Button,
   Segment,
-  Grid,
-  GridColumn,
   Item,
   ItemGroup,
   ItemContent,
 } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
 import AccordionList from './../AccordionList';
+import ItemsSection from './../ItemsSection';
 
 import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
 
@@ -27,9 +26,9 @@ const AssessmentTab = () => {
         </p>
       </Callout>
 
-      <div className="profile-content-box">
+      <div className="section-wrapper">
         <h3>Climate Risk Assessment</h3>
-        <div className="profile-content-box-info">
+        <div className="section-wrapper-info">
           <ItemGroup unstackable className="row">
             <Item>
               <Image size="miny" src={image} />
@@ -50,57 +49,7 @@ const AssessmentTab = () => {
         <h4>The CRA conducted considers the following factors</h4>
 
         <div className="items-wrapper">
-          <Grid className="column-grid">
-            <GridColumn width={6} className="column-blocks-wrapper">
-              <ItemGroup unstackable className="row">
-                <Item>
-                  <Image size="small" src={image} />
-                  <ItemContent verticalAlign="middle">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                  </ItemContent>
-                </Item>
-
-                <Item>
-                  <Image size="small" src={image} />
-                  <ItemContent verticalAlign="middle">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                  </ItemContent>
-                </Item>
-
-                <Item>
-                  <Image size="small" src={image} />
-                  <ItemContent verticalAlign="middle">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                  </ItemContent>
-                </Item>
-              </ItemGroup>
-            </GridColumn>
-
-            <GridColumn width={6}>
-              <ItemGroup unstackable className="row">
-                <Item>
-                  <Image size="small" src={image} />
-                  <ItemContent verticalAlign="middle">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                  </ItemContent>
-                </Item>
-
-                <Item>
-                  <Image size="small" src={image} />
-                  <ItemContent verticalAlign="middle">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                  </ItemContent>
-                </Item>
-
-                <Item>
-                  <Image size="small" src={image} />
-                  <ItemContent verticalAlign="middle">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                  </ItemContent>
-                </Item>
-              </ItemGroup>
-            </GridColumn>
-          </Grid>
+          <ItemsSection />
         </div>
 
         <h4>Further details</h4>

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/GovernanceTab.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Tab } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
-import AccordionList from './../AccordionList';
-import StatisticsSection from './../StatisticsSection';
 import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
+import AccordionList from './../AccordionList';
+import StatisticsSection from './../StatisticsSection';
 
 const GovernanceTab = ({ result }) => {
   const statisticsData = [
@@ -73,6 +73,7 @@ const GovernanceTab = ({ result }) => {
         {result?.Signatory} engages with other levels of government regarding
         their:
       </h3>
+
       <AccordionList
         accordions={[
           {

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/PlanningTab.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Tab } from 'semantic-ui-react';
+import { Tab, Message } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
+import AccordionList from './../AccordionList';
+import ItemsSection from './../ItemsSection';
 
 const PlanningTab = () => {
   return (
@@ -14,6 +16,76 @@ const PlanningTab = () => {
           in magna.
         </p>
       </Callout>
+      <div className="section-wrapper">
+        <h5>
+          <span className="section-number">1. </span>
+          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
+          eleifend ipsum cursus.
+        </h5>
+        <AccordionList
+          variation="secondary"
+          accordions={[
+            {
+              title: 'Vestibulum ante ipsum primis',
+              content: 'No additional details provided.',
+            },
+          ]}
+        />
+      </div>
+      <div className="section-wrapper">
+        <h5>
+          <span className="section-number">2. </span>
+          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
+          eleifend ipsum cursus.
+        </h5>
+        <AccordionList
+          variation="secondary"
+          accordions={[
+            {
+              title: 'Vestibulum ante ipsum primis',
+              content: 'No additional details provided.',
+            },
+          ]}
+        />
+      </div>
+      <div className="section-wrapper">
+        <h5>
+          <span className="section-number">3. </span>
+          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
+          eleifend ipsum cursus.
+        </h5>
+        <AccordionList
+          variation="secondary"
+          accordions={[
+            {
+              title: 'Vestibulum ante ipsum primis',
+              content: 'No additional details provided.',
+            },
+          ]}
+        />
+      </div>
+      <h2>
+        Quisque suscipit ligula eu turpis dignissim, a eleifend ipsum cursus.
+      </h2>
+
+      <Callout>
+        <p>
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+          posuere cubilia curae; Pellentesque sodales, velit nec euismod
+          scelerisque, lectus est interdum eros, sit amet bibendum eros sapien
+          in magna.
+        </p>
+      </Callout>
+      <br />
+      <Message>
+        <p>
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+          posuere cubilia curae. Nunc euismod bibendum augue. Cras nec ligula
+          velit. Donec in laoreet leo. Quisque suscipit ligula eu turpis
+          dignissim, a eleifend ipsum cursus.
+        </p>
+      </Message>
+      <ItemsSection />
       <p>
         Curabitur at felis non libero suscipit fermentum. Duis volutpat, ante et
         scelerisque luctus, sem nulla placerat leo, at aliquet libero justo id
@@ -21,6 +93,25 @@ const PlanningTab = () => {
         augue. Cras nec ligula velit. Donec in laoreet leo. Quisque suscipit
         ligula eu turpis dignissim, a eleifend ipsum cursus.
       </p>
+      <p>
+        Year of formal approval of plan: <strong className="date">2023</strong>{' '}
+        End year of plan: {''}
+        <strong className="date">2030</strong>
+      </p>
+
+      <p>
+        <a href="/">
+          <strong>Nunc euismod bibendum augue</strong>
+        </a>
+      </p>
+
+      <p>
+        <a href="/">
+          <strong>
+            Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim
+          </strong>
+        </a>
+      </p>
     </Tab.Pane>
   );
 };

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

@@ -1,21 +1,48 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
 .signatories-profile {
-  .profile-content-box {
+  .items-wrapper {
+    margin: 2em 0;
+  }
+
+  .section-wrapper-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+
+    .date {
+      position: relative;
+      top: 5px;
+    }
+  }
+
+  .section-wrapper {
     padding: 1.5em;
     margin: 2em 0;
     background-color: #f9f9f9;
 
-    .items-wrapper {
-      margin: 2em 0;
+    .section-number {
+      color: @pineGreen;
     }
+  }
+
+  strong.date {
+    margin-right: 0.5em;
+  }
+
+  .items-group {
+    display: block !important;
+    column-count: 2;
 
-    .profile-content-box-info {
-      display: flex;
-      justify-content: space-between;
-      font-size: 14px;
+    .item {
+      padding: 0.5em 0 !important;
+      break-inside: avoid-column;
 
-      .date {
-        position: relative;
-        top: 5px;
+      .content {
+        padding-left: 0.5rem !important;
       }
     }
   }

package/src/customizations/volto/error.jsx

@@ -0,0 +1,109 @@
+/**
+ * Error Page.
+ * @module Error
+ */
+
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+
+const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+    textAlign: 'center',
+    // backgroundColor: '#f8f9fa',
+    color: '#343a40',
+    fontFamily: 'Arial, sans-serif',
+  },
+  title: {
+    fontSize: '2rem',
+    marginBottom: '1rem',
+  },
+  message: {
+    fontSize: '1.2rem',
+    marginBottom: '2rem',
+  },
+  button: {
+    padding: '10px 20px',
+    fontSize: '1rem',
+    color: '#fff',
+    backgroundColor: '#004B7F',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    marginBottom: '1rem',
+  },
+  link: {
+    color: '#004B7F',
+    textDecoration: 'none',
+    fontSize: '1rem',
+  },
+};
+
+/**
+ * Error page.
+ * @function Error
+ * @returns {string} Markup of the error page.
+ */
+const Error = ({ message, stackTrace }) => {
+  let history = useHistory();
+
+  return (
+    <div
+      style={{
+        fontFamily: 'Helvetica, sans-serif',
+        fontSize: '20px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <div style={styles.container}>
+        <h1 style={styles.title}>
+          <FormattedMessage
+            id="Sorry, something went wrong with your request"
+            defaultMessage="Sorry, something went wrong with your request"
+          />
+        </h1>
+        <p style={styles.message}>We're sorry, but an error has occurred.</p>
+
+        <button style={styles.button} onClick={() => history.goBack()}>
+          <FormattedMessage id="Navigate back" defaultMessage="Navigate back" />
+        </button>
+        <a style={styles.link} href="/">
+          <FormattedMessage
+            id="return to the site root"
+            defaultMessage="return to the site root"
+          />
+        </a>
+        <p>
+          <FormattedMessage
+            id="or try a different page."
+            defaultMessage="or try a different page."
+          />
+        </p>
+        <div style={{ display: 'none' }}>
+          <strong style={{ color: 'red' }}>{message}</strong>
+          <pre>{stackTrace}</pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Error.propTypes = {
+  message: PropTypes.string.isRequired,
+  stackTrace: PropTypes.string,
+};
+
+Error.defaultProps = {
+  stackTrace: null,
+};
+
+export default injectIntl(Error);

package/src/index.js

@@ -3,6 +3,7 @@ import loadable from '@loadable/component';
 import { compose } from 'redux';
 import { Sitemap } from '@plone/volto/components';
 import DefaultView from '@plone/volto/components/theme/View/DefaultView';
+import SelectAutoCompleteWidget from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
 import {
   RASTWidgetView,
   TranslationDisclaimer,
@@ -104,18 +105,69 @@ const applyConfig = (config) => {
   config.settings.isMultilingual = true;
   config.settings.hasLanguageDropdown = true;
   config.settings.defaultLanguage = 'en';
-  config.settings.supportedLanguages = ['en', 'de', 'fr', 'es', 'it', 'pl'];
+  config.settings.supportedLanguages = [
+    'en',
+
+    'bg', // bulgarian
+    'es', // spanish
+    'cs', // czech
+    'da', // danish
+    'de', // german
+    'et', // estonian
+    'el', // greek
+    'fr', // french
+    'ga', // irish
+    'hr', // croatian
+    'it', // italian
+    'lv', // latvia
+    'lt', // lituania
+    'hu', // hungarian
+    'mt', // malta
+    'nl', // dutch
+    'pl', // polish
+    'pt', // portuguese
+    'ro', // romanian
+    'sk', // slovakian
+    'sl', // slovenian
+    'fi', // suomi (finish)
+    'sv', // swedish
+
+    'is', // islenska, for iceland
+    'nn', // norwegean (one of 2)
+    'tr', // turkish
+  ];
 
   // EEA customizations
   config.settings.eea = {
     ...(config.settings.eea || {}),
     languages: [
       { name: 'English', code: 'en' },
+      // { name: 'български', code: 'bg' },
+      { name: 'Español', code: 'es' },
+      // { name: 'Čeština', code: 'cs' },
+      { name: 'Dansk', code: 'da' },
       { name: 'Deutsch', code: 'de' },
+      // { name: 'Eesti keel', code: 'et' },
+      { name: 'Ελληνικά', code: 'el' },
       { name: 'Français', code: 'fr' },
-      { name: 'Español', code: 'es' },
+      // { name: 'Gaeilge', code: 'ga' },
+      { name: 'Hrvatski', code: 'hr' },
       { name: 'Italiano', code: 'it' },
+      // { name: 'Latviešu valoda', code: 'lv' },
+      // { name: 'Lietuvių kalba', code: 'lt' },
+      // { name: 'Magyar', code: 'hu' },
+      // { name: 'Malti', code: 'mt' },
+      // { name: 'Nederlands', code: 'nl' },
       { name: 'Polski', code: 'pl' },
+      { name: 'Português', code: 'pt' },
+      // { name: 'Română', code: 'ro' },
+      // { name: 'Slovenčina', code: 'sk' },
+      // { name: 'Slovenščina', code: 'sl' },
+      { name: 'Suomi', code: 'fi' },
+      { name: 'Svenska', code: 'sv' },
+      { name: 'Íslenska', code: 'is' },
+      { name: 'Nynorsk', code: 'nn' },
+      // { name: 'Türkçe', code: 'tr' },
     ],
     headerOpts: {
       ...(config.settings.eea?.headerOpts || {}),
@@ -522,6 +574,10 @@ const applyConfig = (config) => {
     ...config.settings.storeExtenders,
   ];
 
+  config.widgets.vocabulary[
+    'plone.app.vocabularies.Users'
+  ] = SelectAutoCompleteWidget;
+
   return compose(installBlocks, installSearchEngine, installStore)(config);
 };
 

package/src/search/cca/config.js

@@ -70,11 +70,24 @@ export default function installMainSearch(config) {
 
   // console.log('config.searchui.ccaSearch clusers', clusters);
   // debugger;
-  config.searchui.globalsearch.download_fields = [
+  config.searchui.ccaSearch = {
+    ...mergeConfig(envConfig, config.searchui.globalsearchbase),
+    elastic_index: '_es/globalsearch',
+    index_name: 'data_searchui',
+    host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
+    runtime_mappings: cca_build_runtime_mappings,
+    ...vocabs,
+  };
+
+  config.searchui.ccaSearch.download_fields = [
+    // { field: 'cca_uid', name: 'UID' },
     { field: 'about', name: 'About' },
-    { field: 'title', name: 'title' },
-    { field: 'issued', name: 'Issued' },
+    { field: 'title', name: 'Title' },
+    { field: 'created', name: 'Creation Date' },
+    { field: 'issued', name: 'Publication Date' },
+    { field: 'creators', name: 'Creator' },
     { field: 'objectProvides', name: 'Content type' },
+    { field: 'cca_keywords', name: 'Keywords' },
     { field: 'cca_adaptation_sectors', name: 'Sectors' },
     { field: 'cca_climate_impacts', name: 'Climate impact' },
     { field: 'transnational_regions', name: 'Transnational regions' },
@@ -85,15 +98,8 @@ export default function installMainSearch(config) {
     { field: 'cca_origin_websites', name: 'Origin website' },
     { field: 'cca_health_impacts', name: 'Health impacts' },
     { field: 'cca_partner_contributors', name: 'Observatory impacts' },
+    // { field: 'fulltext', name: 'Description' },
   ];
-  config.searchui.ccaSearch = {
-    ...mergeConfig(envConfig, config.searchui.globalsearchbase),
-    elastic_index: '_es/globalsearch',
-    index_name: 'data_searchui',
-    host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
-    runtime_mappings: cca_build_runtime_mappings,
-    ...vocabs,
-  };
 
   const { ccaSearch } = config.searchui;
 

package/src/utils.js

@@ -87,7 +87,5 @@ export const formatTextToHTML = (text) => {
   // Replace \\n with <br /> (line breaks within paragraphs)
   formattedText = formattedText.replace(/\\n/g, '<br />');
 
-  formattedText = `<p>${formattedText}</p>`;
-
-  return formattedText;
+  return `<p>${formattedText}</p>`;
 };

package/theme/globals/mission.less

@@ -35,8 +35,8 @@ body.view-viewview.contenttype-subsite.section-mission
 }
 
 body.subsite-mkh {
-  --text-color-secondary: @green-5;
-  --border-color-secondary: @green-5;
+  --text-color-secondary: @pineGreen;
+  --border-color-secondary: @pineGreen;
 
   .column > .ui.segment {
     background-color: transparent;
@@ -94,12 +94,12 @@ body.subsite-mkh {
   }
 
   .ui.statistics:not(.inverted) .ui.statistic .slate.secondary {
-    color: @green-5;
+    color: @pineGreen;
   }
 
   .ui.secondary.pointing.menu .active.item {
-    color: @green-5;
-    border-color: @green-5;
+    color: @pineGreen;
+    border-color: @pineGreen;
   }
 
   #mega-menu {