@eeacms/volto-cca-policy 0.2.25 → 0.2.27

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',
-  'Publication reference': 'newspaper',
+  Organisation: 'sitemap',
+  'Publication and report': 'newspaper',
   'Research and knowledge project': 'university',
   Tool: 'wrench',
-  Video: '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': 'Publication reference',
+  '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': 'Video',
+  '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/CollectionStatistics/styles.less

@@ -8,7 +8,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   margin: 1em 0;
-  gap: 1em;
+  gap: 0.7em;
 
   .semantic-icon {
     i.icon {

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,14 @@ const sectors_no_value = [
   },
 ];
 
-const applyQuery = (id, data, currentLang, impacts, sectors) => {
+const measures_no_value = [
+  {
+    label: 'All key type measures',
+    value: '',
+  },
+];
+
+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 +104,73 @@ 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,
-    sort_order: 'descending',
+    sort_on,
+    sort_order: sort_on === 'getId' ? 'ascending' : 'descending',
     template: 'summary',
     itemModel: { '@type': 'simpleItem' },
   };
 };
 
+const eeaSearchFieldMap = {
+  impacts: 'cca_climate_impacts.keyword',
+  sectors: 'cca_adaptation_sectors.keyword',
+  measures: 'cca_key_type_measure.keyword',
+};
+
+function toLabel(value, key, vocab) {
+  if (key === 'measures') {
+    return value;
+  }
+  return vocab.find(({ value: v }) => value === v).label;
+}
+
+function buildQueryUrl({ vocabs, ...data }) {
+  let filters = Object.keys(data).reduce((acc, key) => {
+    const name = eeaSearchFieldMap[key];
+    const ploneFilter = data[key];
+    if (ploneFilter) {
+      const value = toLabel(ploneFilter.v, key, vocabs[key]);
+      const filter = [
+        `filters[$index][field]=${name}`,
+        `filters[$index][type]=any`,
+        `filters[$index][values][]=${encodeURIComponent(value)}`,
+      ].join('&');
+      acc.push(filter);
+    }
+    return acc;
+  }, []);
+  filters = filters
+    .map((line, index) => line.replaceAll('$index', index))
+    .join('&');
+
+  return `/en/data-and-downloads?size=n_10&${filters}`;
+}
+
+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 +185,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 +207,54 @@ const FilterAceContentView = (props) => {
     currentLang,
     impactsQuery,
     sectorsQuery,
+    measuresQuery,
   );
+  const viewAllUrl = buildQueryUrl({
+    impacts: impactsQuery,
+    sectors: sectorsQuery,
+    measures: measuresQuery,
+    vocabs: {
+      sectors: sectorsVocabItems,
+      measures: measuresVocabItems,
+      impacts: impactsVocabItems,
+    },
+  });
 
   return (
     <div className="block filter-acecontent-block">
-      {data.title && <h3>{data.title}</h3>}
-      <h5>
+      {data.title && <h4>{data.title}</h4>}
+      <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 +271,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 +318,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();
+  });
+});

package/src/components/manage/Blocks/RelevantAceContent/RelevantAceContentView.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List } from 'semantic-ui-react';
+import { List, ListItem, ListContent, ListIcon } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
@@ -24,14 +24,20 @@ const RelevantAceContentView = (props) => {
   const showBlock = (items && items.length > 0) || results.length > 0;
 
   const itemList = (items || []).map((item, index) => (
-    <List.Item key={index}>
-      <Link to={flattenToAppURL(item.link)}>{item.item_title}</Link>
-    </List.Item>
+    <ListItem key={index}>
+      <ListIcon name="angle right" />
+      <ListContent>
+        <Link to={flattenToAppURL(item.link)}>{item.item_title}</Link>
+      </ListContent>
+    </ListItem>
   ));
   const resultsList = results.map((result, index) => (
-    <List.Item key={index} title={result[1]}>
-      <Link to={flattenToAppURL(result[4])}>{result[0]}</Link>
-    </List.Item>
+    <ListItem key={index} title={result[1]}>
+      <ListIcon name="angle right" />
+      <ListContent>
+        <Link to={flattenToAppURL(result[4])}>{result[0]}</Link>
+      </ListContent>
+    </ListItem>
   ));
   const showResults = hasAnyFilter || search_text != null;
 
@@ -40,14 +46,14 @@ const RelevantAceContentView = (props) => {
       {title && <h4>{title}</h4>}
 
       {combine_results ? (
-        <>
+        <List>
           {itemList}
           {!isEdit && showResults && resultsList}
-        </>
+        </List>
       ) : items && items.length > 0 ? (
-        itemList
+        <List>{itemList}</List>
       ) : (
-        !isEdit && showResults && resultsList
+        <List>{!isEdit && showResults && resultsList}</List>
       )}
     </div>
   ) : (