@eeacms/volto-cca-policy 0.2.26 → 0.2.28

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.jsx

@@ -69,7 +69,15 @@ const makeSearchBlockQuery = ({ base, query, field, value }) => {
 const makeEEASearchQuery = ({ base, field, value }) => {
   // TODO: don't hardcode the language
   const rest =
-    'filters[1][field]=issued.date&filters[1][values][0]=Last 5 years&filters[1][type]=any&filters[2][field]=language&filters[2][values][0]=en&filters[2][type]=any&sort-field=issued.date&sort-direction=desc';
+    'filters[1][field]=issued.date' +
+    '&filters[1][values][0]=Last 5 years' +
+    '&filters[1][type]=any' +
+    '&filters[2][field]=language' +
+    '&filters[2][values][0]=en' +
+    '&filters[2][type]=any' +
+    '&sort-field=issued.date' +
+    '&sort-direction=desc';
+
   const filter = `filters[0][field]=${field}&filters[0][type]=any&filters[0][values][0]=${value}`;
 
   return `${base}?size=n_10_n&${filter}&${rest}`;

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

@@ -20,19 +20,19 @@ const healthImpactIcons = {
 };
 
 const portalTypeIcons = {
+  'Adaptation option': 'cogs',
   'Case study': 'file text',
   Guidance: 'compass',
   Indicator: 'area chart',
   'Information portal': 'info circle',
-  'Publications and reports': 'newspaper',
+  Organisation: 'sitemap',
+  'Publication and report': 'newspaper',
   'Research and knowledge project': 'university',
   Tool: 'wrench',
-  'Videos and podcasts': 'video play',
+  'Video and podcast': 'video play',
   // 'eea.climateadapt.aceproject': '',
-  // 'eea.climateadapt.adaptationoption': '',
   // 'eea.climateadapt.c3sindicator': '',
   // 'eea.climateadapt.mapgraphdataset': '',
-  // 'eea.climateadapt.organisation': '',
 };
 
 const portalTypesToSearchTypes = {
@@ -42,15 +42,15 @@ const portalTypesToSearchTypes = {
   'eea.climateadapt.indicator': 'Indicator',
   'eea.climateadapt.c3sindicator': 'Indicator',
   'eea.climateadapt.informationportal': 'Information portal',
-  'eea.climateadapt.publicationreport': 'Publications and reports',
+  'eea.climateadapt.organisation': 'Organisation',
+  'eea.climateadapt.publicationreport': 'Publication and report',
   'eea.climateadapt.aceproject': 'Research and knowledge project',
   'eea.climateadapt.researchproject': 'Research and knowledge project',
   'eea.climateadapt.tool': 'Tool',
-  'eea.climateadapt.video': 'Videos and podcasts',
+  'eea.climateadapt.video': 'Video and podcast',
   // TODO: what about these?
   // 'eea.climateadapt.aceproject': '',
   // 'eea.climateadapt.mapgraphdataset': '',
-  // 'eea.climateadapt.organisation': '',
 };
 
 export default function installCollectionStatsBlock(config) {

package/src/components/manage/Blocks/ContentLinks/DropdownListView.test.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import DropdownListView from './DropdownListView';
+import config from '@plone/volto/registry';
+
+config.blocks = {
+  blocksConfig: {
+    contentLinks: {
+      variations: [
+        {
+          id: 'default',
+          title: 'Simple list (default)',
+          isDefault: true,
+        },
+        {
+          id: 'navigationList',
+          title: 'Navigation list',
+          isDefault: false,
+        },
+      ],
+    },
+  },
+};
+
+const mockStore = configureStore();
+
+describe('DropdownListView', () => {
+  it('should render the component', () => {
+    const data = {
+      '@type': 'contentLinks',
+      items: [
+        {
+          item_title: 'Item 1',
+          source: [
+            {
+              '@id': '/item-1',
+              title: 'Item 1',
+            },
+          ],
+        },
+        {
+          item_title: 'Item 2',
+          source: [
+            {
+              '@id': '/item-2',
+              title: 'Item 2',
+            },
+          ],
+        },
+      ],
+      show_share_btn: false,
+      title: 'Navigation',
+      variation: 'default',
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <DropdownListView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/manage/Blocks/CountryMapProfile/Interactions.jsx

@@ -5,6 +5,7 @@ import {
   setTooltipVisibility,
   getClosestFeatureToCoordinate,
 } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
 export const Interactions = ({
@@ -30,7 +31,12 @@ export const Interactions = ({
       const feature = getClosestFeatureToCoordinate(
         evt.coordinate,
         euCountryFeatures.current,
+        ol,
       );
+      if (!feature) {
+        const node = tooltipRef.current;
+        node.style.visibility = 'hidden';
+      }
       const domEvt = evt.originalEvent;
 
       if (
@@ -105,6 +111,7 @@ Information is available
       const feature = getClosestFeatureToCoordinate(
         evt.coordinate,
         euCountryFeatures.current,
+        ol,
       );
 
       highlight.current = feature && feature.get('na');

package/src/components/manage/Blocks/CountryMapProfile/OLView.jsx

@@ -113,7 +113,12 @@ const View = (props) => {
       new ol.source.TileWMS({
         url: 'https://gisco-services.ec.europa.eu/maps/service',
         params: {
-          // LAYERS: 'OSMBlossomComposite', OSMCartoComposite, OSMPositronComposite
+          // LAYERS: 'OSMBlossomComposite',
+          // LAYERS: 'OSMCartoComposite',
+          // LAYERS: 'OSMPositronComposite',
+          // LAYERS: 'GreyEarth',
+          // LAYERS: 'OSMCarto',
+          // LAYERS: 'NaturalEarth',
           LAYERS: 'OSMBrightBackground',
           TILED: true,
         },
@@ -137,7 +142,7 @@ const View = (props) => {
   // console.log('filtered', euCountriesSource?.getFeatures() || 'NOT SET YET');
 
   return (
-    <div>
+    <div className="ol-country-map">
       <Grid columns="12">
         <Grid.Column mobile={12} tablet={12} computer={10} className="col-left">
           {tileWMSSources ? (

package/src/components/manage/Blocks/CountryMapProfile/mapstyle.js

@@ -33,7 +33,7 @@ export const makeStyles = (highlight) => {
   const fill = new ol.style.Fill({ color: 'rgb(251,250,230, 0.8)' });
   const stroke = new ol.style.Stroke({
     // color: 'rgba(255,255,255,0.8)',
-    color: '#d1d1d1',
+    color: '#333333',
     width: 1,
   });
 
@@ -43,13 +43,13 @@ export const makeStyles = (highlight) => {
 
   const getFillColor = (feature) => {
     if (feature.get('fillBlue') === 'blue1') {
-      return new ol.style.Fill({ color: 'rgb(0, 75, 127, 0.8)' });
+      return new ol.style.Fill({ color: 'rgb(0, 75, 127, 1)' });
     }
     if (feature.get('fillBlue') === 'blue2') {
-      return new ol.style.Fill({ color: 'rgb(10, 153, 255, 0.8)' });
+      return new ol.style.Fill({ color: 'rgb(10, 153, 255, 1)' });
     }
     if (feature.get('fillBlue') === 'blue3') {
-      return new ol.style.Fill({ color: 'rgb(120, 217, 252, 0.8)' });
+      return new ol.style.Fill({ color: 'rgb(120, 217, 252, 1)' });
     }
     // console.log(feature.get('fillBlue'));
     return fill;

package/src/components/manage/Blocks/CountryMapProfile/styles.less

@@ -1,4 +1,14 @@
+@height: 600px;
+
 .countryMapProfile {
+  height: @height;
+  min-height: @height;
+
+  .ol-map-wrapper,
+  .ol-map {
+    height: @height;
+  }
+
   &.sized-wrapper {
     width: 100%;
     height: 100%;

package/src/components/manage/Blocks/FilterAceContent/FilterAceContentView.jsx

@@ -4,6 +4,7 @@ import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBo
 import { useSelector, useDispatch } from 'react-redux';
 import { getVocabulary } from '@plone/volto/actions';
 import { OTHER_REGIONS } from '@eeacms/volto-cca-policy/helpers';
+import { Link } from 'react-router-dom';
 import {
   Option,
   DropdownIndicator,
@@ -19,6 +20,7 @@ const Select = loadable(() => import('react-select'));
 
 const IMPACTS = 'eea.climateadapt.aceitems_climateimpacts';
 const SECTORS = 'eea.climateadapt.aceitems_sectors';
+const KEY_TYPE = 'eea.climateadapt.aceitems_key_type_measures_short';
 
 const FIELDS = [
   'bio_regions',
@@ -68,7 +70,28 @@ const sectors_no_value = [
   },
 ];
 
-const applyQuery = (id, data, currentLang, impacts, sectors) => {
+const measures_no_value = [
+  {
+    label: 'All key type measures',
+    value: '',
+  },
+];
+
+const _datatypes = {
+  DOCUMENT: 'Publications and reports',
+  INFORMATIONSOURCE: 'Information portal',
+  MAPGRAPHDATASET: 'Maps, graphs and datasets',
+  INDICATOR: 'Indicator',
+  GUIDANCE: 'Guidance',
+  TOOL: 'Tool',
+  RESEARCHPROJECT: 'Research and knowledge project',
+  MEASURE: 'Adaptation option',
+  ACTION: 'Case study',
+  ORGANISATION: 'Organisation',
+  VIDEOS: 'Videos',
+};
+
+const applyQuery = (id, data, currentLang, impacts, sectors, measures) => {
   const defaultQuery = Object.entries(data)
     .filter(
       ([field, value]) => FIELDS.includes(field) && value && value.length > 0,
@@ -95,20 +118,91 @@ const applyQuery = (id, data, currentLang, impacts, sectors) => {
     v: currentLang,
   });
 
+  defaultQuery.push({
+    i: 'review_state',
+    o: 'plone.app.querystring.operation.selection.any',
+    v: 'published',
+  });
+
   if (impacts) defaultQuery.push(impacts);
   if (sectors) defaultQuery.push(sectors);
+  if (measures) defaultQuery.push(measures);
 
+  const sort_on = data.sortBy || 'effective';
   return {
     block: id,
     limit: data.nr_items,
     query: defaultQuery,
-    sort_on: data.sortBy || 'effective',
-    sort_order: 'descending',
+    sort_on,
+    sort_order: sort_on === 'getId' ? 'ascending' : 'descending',
     template: 'summary',
     itemModel: { '@type': 'simpleItem' },
   };
 };
 
+// mapping of "internal data stored fieldname" to name of EEA Search facet field
+// TODO: this needs to be completed. As of today (21-05-2024), all the fields that are used in production blocks are present, but not all possible of them are properly declared here
+const eeaSearchFieldMap = {
+  impacts: 'cca_climate_impacts.keyword',
+  sectors: 'cca_adaptation_sectors.keyword',
+  measures: 'cca_key_type_measure.keyword',
+  funding_programme: 'cca_funding_programme.keyword',
+  search_type: 'objectProvides',
+  language: 'language',
+};
+
+function toLabel(value, key, vocab) {
+  if (key === 'search_type') return _datatypes[value];
+  if (key === 'measures') return value;
+  if (!vocab) return value;
+
+  return vocab.find(({ value: v }) => value === v)?.label || value;
+}
+
+function buildQueryUrl({ vocabs, ...data }) {
+  let filters = Object.keys(data).reduce((acc, key) => {
+    const name = eeaSearchFieldMap[key];
+    const ploneFilter = data[key];
+    if (ploneFilter) {
+      const realValue = ploneFilter?.v || ploneFilter;
+      let filter = [
+        `filters[$index][field]=${name}`,
+        `filters[$index][type]=any`,
+      ];
+      if (Array.isArray(realValue)) {
+        const mv = realValue.map((rv) => toLabel(rv, key, vocabs[key]));
+        mv.forEach((v, i) => {
+          filter.push(`filters[$index][values][${i}]=${encodeURIComponent(v)}`);
+        });
+      } else {
+        const rv = toLabel(realValue, key, vocabs[key]);
+        filter.push(`filters[$index][values][0]=${encodeURIComponent(rv)}`);
+      }
+
+      filter = filter.join('&');
+      acc.push(filter);
+    }
+    return acc;
+  }, []);
+
+  filters = filters
+    .map((line, index) => line.replaceAll('$index', index))
+    .join('&');
+  const url = `/en/data-and-downloads?size=n_10&${filters}`;
+
+  return url;
+}
+
+const vocabImpactsAction = getVocabulary({
+  vocabNameOrURL: IMPACTS,
+});
+const vocabSectorsAction = getVocabulary({
+  vocabNameOrURL: SECTORS,
+});
+const vocabMeasuresAction = getVocabulary({
+  vocabNameOrURL: KEY_TYPE,
+});
+
 const FilterAceContentView = (props) => {
   const { data, id, mode = 'view' } = props;
   const dispatch = useDispatch();
@@ -123,22 +217,20 @@ const FilterAceContentView = (props) => {
       ? state.vocabularies[SECTORS].items
       : [],
   );
+  const measuresVocabItems = useSelector((state) =>
+    state.vocabularies[KEY_TYPE]?.loaded
+      ? state.vocabularies[KEY_TYPE].items
+      : [],
+  );
 
   const [impactsQuery, setImpactsQueryQuery] = React.useState();
   const [sectorsQuery, setSectorsQuery] = React.useState();
+  const [measuresQuery, setMeasuresQuery] = React.useState();
 
   React.useEffect(() => {
-    const action = getVocabulary({
-      vocabNameOrURL: IMPACTS,
-    });
-    dispatch(action);
-  }, [dispatch]);
-
-  React.useEffect(() => {
-    const action = getVocabulary({
-      vocabNameOrURL: SECTORS,
-    });
-    dispatch(action);
+    dispatch(vocabImpactsAction);
+    dispatch(vocabSectorsAction);
+    dispatch(vocabMeasuresAction);
   }, [dispatch]);
 
   const listingBodyData = applyQuery(
@@ -147,41 +239,60 @@ const FilterAceContentView = (props) => {
     currentLang,
     impactsQuery,
     sectorsQuery,
+    measuresQuery,
   );
+  const viewAllUrl = buildQueryUrl({
+    // ...data,
+    impacts: impactsQuery,
+    sectors: sectorsQuery,
+    measures: measuresQuery,
+    search_type: data.search_type,
+    funding_programme: data.funding_programme,
+    language: currentLang,
+    vocabs: {
+      sectors: sectorsVocabItems,
+      measures: measuresVocabItems,
+      impacts: impactsVocabItems,
+    },
+  });
+
+  // console.log({ allData: data, viewAllUrl });
 
   return (
     <div className="block filter-acecontent-block">
       {data.title && <h4>{data.title}</h4>}
-      <h5>
+      <span className="filter-title">
         <FormattedMessage id="Climate impact" defaultMessage="Climate impact" />
-      </h5>
-      <Select
-        id="field-impacts"
-        name="impacts"
-        disabled={false}
-        className="react-select-container"
-        classNamePrefix="react-select"
-        options={[impacts_no_value[0], ...(impactsVocabItems || [])]}
-        styles={customSelectStyles}
-        theme={selectTheme}
-        components={{ DropdownIndicator, Option }}
-        defaultValue={impacts_no_value}
-        onChange={({ value }) => {
-          if (value) {
-            setImpactsQueryQuery({
-              i: 'climate_impacts',
-              o: 'plone.app.querystring.operation.selection.any',
-              v: value,
-            });
-          } else {
-            setImpactsQueryQuery(null);
-          }
-        }}
-      />
+      </span>
+      <div>
+        <Select
+          id="field-impacts"
+          name="impacts"
+          disabled={false}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={[impacts_no_value[0], ...(impactsVocabItems || [])]}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{ DropdownIndicator, Option }}
+          defaultValue={impacts_no_value}
+          onChange={({ value }) => {
+            if (value) {
+              setImpactsQueryQuery({
+                i: 'climate_impacts',
+                o: 'plone.app.querystring.operation.selection.any',
+                v: value,
+              });
+            } else {
+              setImpactsQueryQuery(null);
+            }
+          }}
+        />
+      </div>
 
-      <h5>
+      <span className="filter-title">
         <FormattedMessage id="Sector" defaultMessage="Sector" />
-      </h5>
+      </span>
       <Select
         id="field-sectors"
         name="sectors"
@@ -198,13 +309,45 @@ const FilterAceContentView = (props) => {
             setSectorsQuery({
               i: 'sectors',
               o: 'plone.app.querystring.operation.selection.any',
-              v: value,
+              v: value.toUpperCase(),
             });
           } else {
             setSectorsQuery(null);
           }
         }}
       />
+
+      <div id="key-type-measure">
+        <span className="filter-title">
+          <FormattedMessage
+            id="Key Type Measure"
+            defaultMessage="Key Type Measure"
+          />
+        </span>
+        <Select
+          id="field-measure"
+          name="measure"
+          disabled={false}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={[measures_no_value[0], ...(measuresVocabItems || [])]}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{ DropdownIndicator, Option }}
+          defaultValue={measures_no_value}
+          onChange={({ value }) => {
+            if (value) {
+              setMeasuresQuery({
+                i: 'key_type_measures',
+                o: 'plone.app.querystring.operation.selection.any',
+                v: value,
+              });
+            } else {
+              setMeasuresQuery(null);
+            }
+          }}
+        />
+      </div>
       <div className="listing-wrapper">
         <ListingBody
           id={id}
@@ -213,6 +356,9 @@ const FilterAceContentView = (props) => {
           isEditMode={mode === 'edit'}
         />
       </div>
+      <Link className="ui button secondary inverted" to={viewAllUrl}>
+        View all
+      </Link>
     </div>
   );
 };

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

@@ -18,6 +18,7 @@ const FilterSchema = (data, macro_regions) => {
           'bio_regions',
           'funding_programme',
           'nr_items',
+          'sortBy',
         ],
       },
     ],

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

@@ -1,3 +1,19 @@
 .listing-wrapper {
   margin-top: 1.5em;
 }
+
+.filter-title {
+  display: block;
+  margin: 0.7em 0 0.3em 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+#key-type-measure {
+  display: none;
+}
+
+body.section-adaptation-options #key-type-measure,
+body.section-adaptation-support-tool.section-step-3-1 #key-type-measure {
+  display: block !important;
+}

package/src/components/manage/Blocks/Listing/DropdownListingView.test.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import DropdownListingView from './DropdownListingView';
+import config from '@plone/volto/registry';
+
+config.blocks = {
+  blocksConfig: {
+    contentLinks: {
+      variations: [
+        {
+          id: 'default',
+          title: 'Simple list (default)',
+          isDefault: true,
+        },
+        {
+          id: 'navigationList',
+          title: 'Navigation list',
+          isDefault: false,
+        },
+      ],
+    },
+  },
+};
+
+const mockStore = configureStore();
+
+describe('DropdownListingView', () => {
+  it('should render the component', () => {
+    const data = {
+      '@type': 'listing',
+      items: [
+        {
+          '@id': '/item-1',
+          title: 'Item 1',
+          id: 'item-1',
+        },
+        {
+          '@id': '/item-2',
+          title: 'Item 2',
+          id: 'item-2',
+        },
+      ],
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <DropdownListingView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});