@eeacms/volto-cca-policy 0.1.102 → 0.2.0

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyFilters.jsx

@@ -1,66 +1,145 @@
+import React, { FormEvent } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
+import { Accordion, Icon, Checkbox } from 'semantic-ui-react';
 
 export default function CaseStudyFilters(props) {
   const { filters, activeFilters, setActiveFilters } = props;
+
+  const resetFilters = () => {
+    let clone = { ...activeFilters };
+    Object.keys(activeFilters).forEach((element) => {
+      clone[element] = [];
+    });
+    setActiveFilters(clone);
+  };
+
+  let nrActiveFilters = 0;
+  Object.values(activeFilters).forEach((element) => {
+    nrActiveFilters += element.length;
+  });
+
+  const [activeIndex, setActiveIndex] = React.useState([]);
+
+  function handleClick(e, titleProps) {
+    let index = Object.create(activeIndex);
+    if (index.includes(titleProps.index)) {
+      index = index.filter(function (item) {
+        return item !== titleProps.index;
+      });
+    } else {
+      index.push(titleProps.index);
+    }
+    setActiveIndex(index);
+  }
+
+  const checkboxChangeHandler = (_event: FormEvent<HTMLInputElement>, data) => {
+    const temp = JSON.parse(JSON.stringify(activeFilters));
+
+    if (data.checked) {
+      temp[data.name].push(data.value);
+    } else {
+      temp[data.name] = temp[data.name].filter((value) => {
+        if (value !== data.value) return value;
+        return null;
+      });
+    }
+    setActiveFilters(temp);
+  };
+
   const intl = useIntl();
   return (
     <>
-      <h4>
-        <FormattedMessage
-          id="Adaptation sectors"
-          defaultMessage="Adaptation sectors"
-        />
-      </h4>
-      {Object.entries(filters?.sectors || {}).map(([value, label], index) => (
-        <p key={index}>
-          <span>{intl.formatMessage({ id: label })}</span>
-          <input
-            value={value}
-            type="checkbox"
-            onChange={(e) => {
-              // const value =
-              const temp = JSON.parse(JSON.stringify(activeFilters));
-              if (e.target.checked) {
-                temp.sectors.push(e.target.value);
-              } else {
-                temp.sectors = temp.sectors.filter((value) => {
-                  if (value !== e.target.value) return value;
-                  return null;
-                });
-              }
-              setActiveFilters(temp);
-            }}
+      <Accordion exclusive={false} className="secondary">
+        <Accordion.Title
+          active={activeIndex.includes(0)}
+          index={0}
+          onClick={handleClick}
+        >
+          <Icon name="dropdown" />
+          <FormattedMessage
+            id="Adaptation sectors"
+            defaultMessage="Adaptation sectors"
+          />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex.includes(0)}>
+          {Object.entries(filters?.sectors || {}).map(
+            ([value, label], index) => (
+              <Checkbox
+                label={intl.formatMessage({ id: label })}
+                value={value}
+                checked={activeFilters.sectors.includes(value)}
+                name="sectors"
+                onChange={checkboxChangeHandler}
+              />
+            ),
+          )}
+        </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex.includes(1)}
+          index={1}
+          onClick={handleClick}
+        >
+          <Icon name="dropdown" />
+          <FormattedMessage
+            id="Climate impacts"
+            defaultMessage="Climate impacts"
           />
-        </p>
-      ))}
-      <h4>
-        <FormattedMessage
-          id="Climate impacts"
-          defaultMessage="Climate impacts"
-        />
-      </h4>
-      {Object.entries(filters?.impacts || {}).map(([value, label], index) => (
-        <p key={index}>
-          <span>{intl.formatMessage({ id: label })}</span>
-          <input
-            value={value}
-            type="checkbox"
-            onChange={(e) => {
-              // const value =
-              const temp = JSON.parse(JSON.stringify(activeFilters));
-              if (e.target.checked) {
-                temp.impacts.push(e.target.value);
-              } else {
-                temp.impacts = temp.impacts.filter((value) => {
-                  if (value !== e.target.value) return value;
-                  return null;
-                });
-              }
-              setActiveFilters(temp);
-            }}
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex.includes(1)}>
+          {Object.entries(filters?.impacts || {}).map(
+            ([value, label], index) => (
+              // <p key={index}>
+              <Checkbox
+                label={intl.formatMessage({ id: label })}
+                checked={activeFilters.impacts.includes(value)}
+                value={value}
+                name="impacts"
+                onChange={checkboxChangeHandler}
+              />
+              // </p>
+            ),
+          )}
+        </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex.includes(2)}
+          index={2}
+          onClick={handleClick}
+        >
+          <Icon name="dropdown" />
+          <FormattedMessage
+            id="Key type measures"
+            defaultMessage="Key type measures"
           />
-        </p>
-      ))}
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex.includes(2)}>
+          {Object.entries(filters?.measures || {}).map(
+            ([key, values], index) => (
+              <div className="subcategory">
+                <p>
+                  <strong>{intl.formatMessage({ id: key })}</strong>
+                </p>
+                {Object.entries(values).map(([valKey, valData]) => (
+                  <Checkbox
+                    label={intl.formatMessage({ id: valData.value })}
+                    value={valData.key}
+                    checked={activeFilters.measures.includes(valData.key)}
+                    name="measures"
+                    onChange={checkboxChangeHandler}
+                  />
+                ))}
+              </div>
+            ),
+          )}
+        </Accordion.Content>
+      </Accordion>
+      {nrActiveFilters ? (
+        <button
+          className="ui primary button reset"
+          onClick={(_e) => resetFilters()}
+        >
+          Reset
+        </button>
+      ) : null}
     </>
   );
 }

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyFilters.test.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import CaseStudyFilters from './CaseStudyFilters';
+
+const mockStore = configureStore();
+
+describe('CaseStudyFilters', () => {
+  it('should render the component', () => {
+    const data = {
+      filters: {
+        // sectors: [{ HEALTH: 'Health' }],
+        // impacts: [{ DROUGHT: 'Drought' }],
+        sectors: [],
+        impacts: [],
+        measures: {
+          //   Measure1: [
+          //     { key: 'M11', value: 'm11' },
+          //     { key: 'M12', value: 'm12' },
+          //   ],
+        },
+      },
+      activeFilters: {
+        sectors: [],
+        impacts: [],
+        measures: [],
+      },
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CaseStudyFilters {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.jsx

@@ -12,7 +12,7 @@ export default function CaseStudyMap(props) {
   const { items, activeItems } = props;
   const [selectedCase, onSelectedCase] = React.useState();
 
-  const features = getFeatures(items); //console.log('Features list', features);
+  const features = getFeatures(items);
 
   const [tileWMSSources] = React.useState([
     // , setTileWMSSources

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureDisplay.jsx

@@ -4,33 +4,35 @@ import { FormattedMessage } from 'react-intl';
 export default function FeatureDisplay({ feature }) {
   return feature ? (
     <div id="csepopup">
-      <strong>{feature.title}</strong>
+      <p>
+        <strong>{feature.title}</strong> <a href={feature.url}>open DB</a>
+      </p>
       <span className="img">
         <center>
           <img src={feature.image} alt={feature.title} />
         </center>
       </span>
+      <p style={{ marginBottom: '10px' }}>
+        <span className="blue">
+          <FormattedMessage
+            id="Adaptation sectors"
+            defaultMessage="Adaptation sectors"
+          />
+          {': '}
+        </span>
+        <span>{feature.adaptations}</span>
+      </p>
+      <p style={{ marginBottom: '10px' }}>
+        <span className="blue">
+          <FormattedMessage
+            id="Climate impacts"
+            defaultMessage="Climate impacts"
+          />
+          {': '}
+        </span>
+        <span>{feature.impacts}</span>
+      </p>
       <p>
-        <p style={{ marginBottom: '10px' }}>
-          <span className="blue">
-            <FormattedMessage
-              id="Adaptation sectors"
-              defaultMessage="Adaptation sectors"
-            />
-            {': '}
-          </span>
-          <span>{feature.adaptations}</span>
-        </p>
-        <p style={{ marginBottom: '10px' }}>
-          <span className="blue">
-            <FormattedMessage
-              id="Climate impacts"
-              defaultMessage="Climate impacts"
-            />
-            {': '}
-          </span>
-          <span>{feature.impacts}</span>
-        </p>
         <span className="blue">
           <FormattedMessage
             id="Adaptation options"
@@ -40,7 +42,8 @@ export default function FeatureDisplay({ feature }) {
         </span>
         <span
           dangerouslySetInnerHTML={{
-            __html: feature.adaptation_options_links.replace('<>', '; '),
+            __html: feature.adaptation_options_links.replaceAll('<>', '; '),
+            // __html: feature.adaptation_options_links,
           }}
         ></span>
       </p>

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureInteraction.jsx

@@ -60,7 +60,6 @@ export default function FeatureInteraction({ onFeatureSelect }) {
         if (subfeatures.length === 1) {
           const selectedFeature = subfeatures[0].values_;
           onFeatureSelect(selectedFeature);
-          // console.log('onfeatureselect');
         } else {
           // zoom to extent of cluster points
           const extent = getExtentOfFeatures(subfeatures);
@@ -68,12 +67,10 @@ export default function FeatureInteraction({ onFeatureSelect }) {
           let extentBuffer =
             (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
           extentBuffer = extentBuffer < 500 ? 500 : extentBuffer;
-          // console.log('extentBuffer', { extent, extentBuffer });
           const paddedExtent = ol.extent.buffer(extent, extentBuffer);
 
           // const paddedExtent = ol.extent.buffer(extent, 50000);
           map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
-          // console.log('onclusterzoom');
         }
       });
 

package/src/components/manage/Blocks/CaseStudyExplorer/hooks.js

@@ -4,7 +4,7 @@ import superagent from 'superagent';
 const cases_url = '@@case-studies-map.arcgis.json';
 
 export function useCases(url) {
-  const [cases, setCases] = React.useState([]);
+  const [cases, setCases] = React.useState([[], []]);
 
   React.useEffect(() => {
     superagent
@@ -12,7 +12,7 @@ export function useCases(url) {
       .set('accept', 'json')
       .then((resp) => {
         const res = JSON.parse(resp.text);
-        setCases(res.features);
+        setCases({ features: res.features, filters: res.filters });
       });
   }, []);
 

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

@@ -5,12 +5,19 @@
 }
 
 #csepopup {
+  border-bottom: 6px solid #005c96;
+
   p {
+    padding: 0 10px 0 10px;
     font-size: 13px;
 
     p {
       margin-bottom: 10px;
     }
+
+    a {
+      text-decoration: underline;
+    }
   }
 
   span.blue {
@@ -33,16 +40,18 @@
     position: relative;
     padding: 10px;
     border-bottom: 1px solid #d8d8d8;
+    margin-top: 0 !important;
     margin-bottom: 0 !important;
-    background-color: #005c96;
-    color: #fff;
+    background-color: #fff;
+    clear: both;
+    color: #005c96;
     cursor: pointer;
     font-size: 14px;
   }
 
   p {
-    padding: 2px;
-    padding-left: 10px;
+    // padding: 2px;
+    padding-bottom: 10px;
     clear: both;
     line-height: 20px;
 
@@ -56,4 +65,32 @@
       float: right;
     }
   }
+
+  div.title {
+    width: 100%;
+  }
+
+  .ui.accordion > .title > .icon {
+    line-height: 1rem;
+  }
+
+  .ui.accordion p {
+    margin: 0;
+  }
+
+  .ui.accordion .subcategory {
+    margin-bottom: 30px;
+  }
+
+  button.reset {
+    margin-top: 20px;
+  }
+
+  .ui.checkbox {
+    width: 100%;
+  }
+}
+
+.section-case-study-explorer #popup-overlay {
+  padding: 0;
 }

package/src/components/manage/Blocks/CaseStudyExplorer/utils.js

@@ -19,6 +19,7 @@ export function getFeatures(cases) {
         impacts: c.properties.impacts_str,
         adaptation_options_links: c.properties.adaptation_options_links,
         index: index,
+        url: c.properties.url,
       },
       false,
     );
@@ -29,7 +30,12 @@ export function getFeatures(cases) {
 
 export function filterCases(cases, activeFilters) {
   const data = cases.filter((_case) => {
-    if (activeFilters.sectors.length === 0) return _case;
+    if (
+      activeFilters.sectors.length === 0 &&
+      activeFilters.measures.length === 0 &&
+      activeFilters.impacts.length === 0
+    )
+      return _case;
 
     let flag = false;
 
@@ -41,6 +47,10 @@ export function filterCases(cases, activeFilters) {
       if (_case.properties.impacts.includes(',' + filter + ',')) flag = true;
     });
 
+    activeFilters.measures.forEach((filter) => {
+      if (_case.properties.ktms.includes(',' + filter + ',')) flag = true;
+    });
+
     return flag ? _case : false;
   });
 
@@ -48,10 +58,11 @@ export function filterCases(cases, activeFilters) {
 }
 
 export function getFilters(cases) {
-  let _filters = { sectors: {}, impacts: {} };
+  let _filters = { sectors: {}, impacts: {}, measures: {} };
 
   for (let key of Object.keys(cases)) {
     const _case = cases[key];
+
     let sectorKeys = _case.properties.sectors.split(',');
     let sectorNames = _case.properties.sectors_str.split(',');
     for (let i = 0; i < sectorNames.length; i++) {
@@ -59,15 +70,24 @@ export function getFilters(cases) {
         _filters.sectors[sectorKeys[i + 1]] = sectorNames[i];
       }
     }
+
     let impactKeys = _case.properties.impacts.split(',');
     let impactNames = _case.properties.impacts_str.split(',');
-
     for (let i = 0; i < impactNames.length; i++) {
       if (!_filters.impacts.hasOwnProperty(impactKeys[i + 1])) {
         _filters.impacts[impactKeys[i + 1]] = impactNames[i];
       }
     }
+
+    // let ktmKeys = _case.properties.ktms.split(',');
+    // let ktmNames = _case.properties.impacts_str.split(',');
+    // for (let i = 0; i < ktmKeys.length; i++) {
+    //   if (!_filters.ktms.hasOwnProperty(ktmKeys[i])) {
+    //     _filters.ktms[ktmKeys[i]] = 1;
+    //   }
+    // }
   }
+  // console.log('getFilters:', _filters);
 
   return _filters;
 }

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

@@ -90,7 +90,7 @@ export default function CollectionStatsView(props) {
   let stats = useStats(getBaseUrl(pathname), id, data);
 
   const groupDefinition =
-    config.blocks.blocksConfig.collectionStats.groups[field] || {};
+    config.blocks.blocksConfig.collectionStats?.groups?.[field] || {};
   const { cleanup, icons = {}, iconComponent: IconComponent } = groupDefinition;
 
   if (cleanup) stats = cleanup(stats);

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import CollectionStatsView from './CollectionStatsView';
+import config from '@plone/volto/registry';
+import applyConfig from './index';
+
+const mockStore = configureStore();
+
+applyConfig(config);
+
+describe('CollectionStatsView', () => {
+  it('should render the component', () => {
+    const data = {
+      id: 'id-1',
+      data: {
+        aggregateField: {
+          label: 'Portal type',
+          value: 'portal_type',
+        },
+        href: [
+          {
+            '@id': '/en/observatory/advanced-search',
+            title: 'Resource catalogue',
+          },
+        ],
+        query: {
+          query: [
+            {
+              i: 'include_in_observatory',
+              o: 'plone.app.querystring.operation.boolean.isTrue',
+              v: '',
+            },
+            {
+              i: 'path',
+              o: 'plone.app.querystring.operation.string.absolutePath',
+              v: '/en',
+            },
+            {
+              i: 'review_state',
+              o: 'plone.app.querystring.operation.selection.any',
+              v: ['published'],
+            },
+          ],
+          sort_order: 'ascending',
+          queryParameterStyle: 'EEASemanticSearch',
+          showLabel: true,
+        },
+      },
+      path: '/some-location',
+      pathname: '/some-location',
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      querystats: {
+        'id-1': {
+          items: {
+            Event: 82,
+            'News Item': 116,
+            'eea.climateadapt.aceproject': 60,
+            'eea.climateadapt.adaptationoption': 1,
+            'eea.climateadapt.c3sindicator': 9,
+            'eea.climateadapt.casestudy': 32,
+            'eea.climateadapt.guidancedocument': 21,
+            'eea.climateadapt.indicator': 14,
+            'eea.climateadapt.informationportal': 27,
+            'eea.climateadapt.organisation': 22,
+            'eea.climateadapt.publicationreport': 187,
+            'eea.climateadapt.tool': 14,
+            'eea.climateadapt.video': 17,
+          },
+        },
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CollectionStatsView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container.querySelector('.collection-stats')).toBeInTheDocument();
+  });
+});

package/src/components/manage/Blocks/CountryProfileDetail/Edit.js

@@ -0,0 +1,5 @@
+import View from './View';
+
+export default function Edit(props) {
+  return <View {...props} mode="edit" />;
+}