@eeacms/volto-marine-policy 2.0.3 → 2.0.4

package/src/components/Blocks/DemoSitesExplorer/styles.less

@@ -0,0 +1,376 @@
+.section-nwrm-case-studies .listing .slot-top {
+  padding-top: 2em;
+}
+
+#csepopup > span {
+  display: 'block';
+  margin-bottom: '10px';
+  background-color: '#ddd';
+}
+
+.ol-map-wrapper,
+.ol-map {
+  height: 600px;
+  min-height: 600px;
+}
+
+#csepopup {
+  // width: 300px;
+  width: 100%;
+  // height: 100%;
+  padding: 1em;
+  // border: 1px solid black;
+  // font-size: 14px;
+  // line-height: initial;
+  font-size: 1rem;
+
+  a:hover {
+    color: #0083e0;
+  }
+
+  h3 {
+    font-size: 1.4rem;
+  }
+
+  h4 {
+    margin: 0px;
+  }
+
+  div {
+    margin-bottom: 16px;
+  }
+
+  ul {
+    margin: 0px;
+
+    li {
+      line-height: 22px;
+    }
+  }
+
+  p {
+    font-size: 13px;
+
+    p {
+      margin-bottom: 10px;
+    }
+  }
+
+  span.blue {
+    color: #069;
+  }
+
+  span.popup-title {
+    font-weight: bold;
+  }
+
+  span.img {
+    display: block;
+    margin-bottom: 10px;
+    background-color: #ddd;
+
+    img {
+      max-height: 133px;
+    }
+  }
+}
+
+.ol-overlaycontainer {
+  // width: 370px;
+  // height: 100%;
+
+  .ol-overlay-container {
+    // position: relative !important;
+    position: absolute !important;
+    right: 30px;
+    bottom: 30px;
+    display: block !important;
+    // width: 100%;
+    // height: 100%;
+    background-color: #dae8f4;
+
+    #popup-overlay {
+      position: relative !important;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+    }
+  }
+}
+
+#cse-filter {
+  display: flex;
+  flex-direction: row;
+  margin-top: 1em;
+  font-family: sans-serif;
+  // gap: 3em;
+
+  .filter-wrapper {
+    // flex-grow: 1;
+
+    &.active {
+      button span {
+        //   box-shadow: 0 5px 0 #ffffff, 0 0 4px rgba(0, 0, 0, 0.25);
+        color: #0083e0;
+      }
+
+      button {
+        box-shadow:
+          0 5px 0 #ffffff,
+          0 0 4px rgba(0, 0, 0, 0.25) !important;
+      }
+
+      .filter-inputs-wrapper {
+        display: block;
+      }
+    }
+
+    .ri-arrow-down-s-line:before {
+      content: '\ea4e';
+    }
+
+    .ui.basic.button.facet-btn {
+      position: relative !important;
+      z-index: 99999;
+      display: inline-block;
+      overflow: hidden;
+      padding: 0.5em 0em;
+      margin: 0 0.25em 0.25em 0;
+      background-color: white !important;
+      color: #3d5265 !important;
+
+      &:active {
+        background: white !important;
+      }
+
+      // &:hover,
+      // &:focus {
+      //   color: rgba(0, 0, 0, 0.6) !important;
+      // }
+      &:hover {
+        box-shadow: none;
+      }
+
+      span {
+        position: relative !important;
+        z-index: 99999;
+        display: inline-block;
+        overflow: hidden;
+        padding: 0.5em 1em;
+        background-color: white;
+      }
+    }
+
+    .filter-inputs-wrapper {
+      position: absolute;
+      z-index: 1;
+      display: none;
+      padding: 1em;
+      margin-top: -3px;
+      background-color: #fff;
+      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+      color: #4f4f4f;
+
+      .filterInputText {
+        padding: 6px;
+        border: 0.5px solid #c4c4c4;
+        border-radius: 0;
+        margin-bottom: 0.7em;
+        font-size: 14px;
+      }
+
+      .filter-inputs {
+        overflow: auto;
+        min-width: 200px;
+        max-width: 400px;
+        max-height: 200px;
+
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 0.3rem !important;
+        }
+
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background-color: #d9d9d9;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          background: #004b7f;
+        }
+
+        .filter-input {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          cursor: pointer;
+          font-size: 14px;
+
+          span {
+            padding-right: 5px;
+          }
+
+          input {
+            margin-right: 8px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+  h4 {
+    position: relative;
+    padding: 10px;
+    border-bottom: 1px solid #d8d8d8;
+    margin-bottom: 0 !important;
+    background-color: #005c96;
+    color: #fff;
+    cursor: pointer;
+    font-size: 14px;
+  }
+}
+
+.active-filter-list {
+  border: 1px solid #e6e7e8;
+  background-color: #f9f9f9 !important;
+
+  .filter-list-header {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    h4 {
+      margin: 0;
+      color: #3d5265;
+    }
+  }
+
+  .filter-list-content {
+    padding: 1em 0 0;
+    background-color: transparent;
+
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 15px;
+
+      .filter-wrapper {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: baseline;
+        padding: 8px 15px;
+        margin-top: 10px;
+        margin-right: 11px;
+        background-color: #ebebeb;
+        gap: 1em;
+
+        .filter-label {
+          font-weight: 500;
+        }
+
+        .filter-value {
+          position: relative;
+          display: flex;
+          align-items: center;
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+          font-size: 15px;
+
+          .close.icon {
+            position: relative;
+            width: 16px;
+            height: 16px;
+            padding: 3px;
+            border: 1px solid #004b7f !important;
+            border-radius: 2px;
+            color: #2e3e4c;
+            opacity: 1;
+
+            &:before,
+            &:after {
+              position: absolute;
+              top: 2px;
+              left: 7px;
+              width: 1px;
+              height: 9px;
+              background-color: #004b7f !important;
+              content: ' ';
+            }
+
+            &:before {
+              transform: rotate(45deg);
+            }
+
+            &:after {
+              transform: rotate(-45deg);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.sui-search-box .search-input .terms-box .terms-box-left .search-icon img {
+  fill: #004b7f !important;
+}
+
+.searchlib-block .ui.basic.button.clear-btn {
+  color: #0083e0 !important;
+}
+
+.searchlib-block .result-item .result-info {
+  align-items: center;
+
+  &.show-on-map {
+    color: #0083e0 !important;
+    cursor: pointer;
+
+    .result-info-title {
+      color: #0083e0 !important;
+    }
+  }
+}
+
+.u-item.listing-item .result-info a {
+  color: #0077bc;
+}
+
+.searchlib-block .search-body-footer {
+  margin-top: 2em;
+}
+
+.reset-map-button.ui.button.secondary {
+  position: absolute;
+  z-index: 2;
+  top: 1.3em;
+  right: 0.7em;
+  display: flex;
+  padding: 8px 6px 8px 12px;
+  border: 4px solid #efefef;
+  border-radius: 2px;
+  background-color: #0083e0;
+  gap: 0.5em;
+  opacity: 0.6;
+
+  &.active {
+    display: flex;
+  }
+
+  &.inactive {
+    display: none;
+  }
+}
+
+.ol-zoom.ol-control {
+  .ol-zoom-in,
+  .ol-zoom-out {
+    background-color: rgba(0, 131, 224, 0.5);
+  }
+}

package/src/components/Blocks/DemoSitesExplorer/utils.js

@@ -0,0 +1,193 @@
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+
+export function isValidURL(string) {
+  try {
+    new URL(string);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export function centerAndResetMapZoom(map) {
+  map.getView().animate({
+    zoom: 2.5,
+    duration: 1000,
+    center: ol.proj.transform([10, 54], 'EPSG:4326', 'EPSG:3857'),
+  });
+}
+
+export function scrollToElement(elementId) {
+  const element = document.getElementById(elementId);
+  element.scrollIntoView({
+    behavior: 'smooth',
+  });
+}
+
+export function getExtentOfFeatures(features) {
+  const points = features.map((f) => f.getGeometry().flatCoordinates);
+  const point = new ol.geom.MultiPoint(points);
+  return point.getExtent();
+}
+
+export function zoomMapToFeatures(map, features, threshold = 500) {
+  const extent = getExtentOfFeatures(features);
+  let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
+  extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
+  const paddedExtent = ol.extent.buffer(extent, extentBuffer);
+  map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+}
+
+export function getFeatures(cases) {
+  const Feature = ol.ol.Feature;
+
+  return cases.map((c, index) => {
+    const {
+      geometry: { coordinates },
+    } = c;
+    const point = new Feature(
+      new ol.geom.Point(ol.proj.fromLonLat(coordinates)),
+    );
+    point.setId(index);
+    point.setProperties(
+      {
+        title: c.properties.title,
+        image: c.properties.image,
+        project: c.properties.project,
+        project_link: c.properties.project_link,
+        country: c.properties.country,
+        type_is_region: c.properties.type_is_region,
+        type: c.properties.type,
+        indicators: c.properties.indicators,
+        info: c.properties.info,
+        website: c.properties.website,
+        objective: c.properties.objective,
+        description: c.properties.description,
+        index: index,
+        path: c.properties.path,
+        color: c.properties.nwrm_type === 'Light' ? '#50B0A4' : '#0083E0',
+      },
+      false,
+    );
+    return point;
+  });
+}
+
+export function filterCases(cases, activeFilters, demoSitesIds, searchInput) {
+  const data = cases.filter((_case) => {
+    let flag_searchInput = false;
+    let flag_objective = false;
+    // let flag_indicator = false;
+    let flag_project = false;
+    let flag_country = false;
+    let flag_case = demoSitesIds
+      ? demoSitesIds.includes(_case.properties.url.split('/').pop())
+      : true;
+
+    if (!searchInput) {
+      flag_searchInput = true;
+    } else {
+      if (_case.properties.title.toLowerCase().match(searchInput)) {
+        flag_searchInput = true;
+        // } else if (
+        //   _case.properties.description.toLowerCase().match(searchInput)
+        // ) {
+        //   flag_searchInput = true;
+      }
+    }
+
+    // debugger;
+    if (!activeFilters.objective_filter.length) {
+      flag_objective = true;
+    } else {
+      let objective = _case.properties.objective?.map((item) => {
+        return item['id'].toString();
+      });
+
+      activeFilters.objective_filter.forEach((filter) => {
+        if (objective?.includes(filter)) flag_objective = true;
+      });
+    }
+
+    // if (!activeFilters.sectors.length) {
+    //   flag_sectors = true;
+    // } else {
+    //   let sectors = _case.properties.sectors?.map((item) => {
+    //     return item.toString();
+    //   });
+
+    //   activeFilters.sectors.forEach((filter) => {
+    //     if (sectors?.includes(filter)) flag_sectors = true;
+    //   });
+    // }
+
+    if (!activeFilters.project_filter.length) {
+      flag_project = true;
+    } else {
+      let project = _case.properties.project;
+
+      activeFilters.project_filter.forEach((filter) => {
+        if (project === filter) flag_project = true;
+      });
+    }
+
+    if (!activeFilters.country_filter.length) {
+      flag_country = true;
+    } else {
+      let countries = _case.properties.country?.map((item) => {
+        return item.toString();
+      });
+
+      activeFilters.country_filter.forEach((filter) => {
+        if (countries?.includes(filter)) flag_country = true;
+      });
+    }
+
+    return flag_case &&
+      flag_objective &&
+      flag_country &&
+      flag_project &&
+      flag_searchInput
+      ? _case
+      : false;
+  });
+
+  return data;
+}
+
+export function getFilters(cases) {
+  let _filters = {
+    objective_filter: {},
+    indicator_filter: {},
+    project_filter: {},
+    country_filter: {},
+  };
+
+  for (let key of Object.keys(cases)) {
+    const _case = cases[key];
+    // debugger;
+    //   let nwrms_implemented = _case.properties.measures;
+    //   nwrms_implemented.map((item) => {
+    //     if (!_filters.nwrms_implemented.hasOwnProperty(item['id'])) {
+    //       _filters.nwrms_implemented[item['id']] = item['title'];
+    //     }
+    //     return [];
+    //   });
+
+    let project = _case.properties.project;
+
+    if (!_filters.project_filter.hasOwnProperty(project)) {
+      _filters.project_filter[project] = project;
+    }
+
+    let countries = _case.properties.country;
+    countries.map((item) => {
+      if (!_filters.country_filter.hasOwnProperty(item)) {
+        _filters.country_filter[item] = item;
+      }
+      return [];
+    });
+  }
+
+  return _filters;
+}

package/src/components/Blocks/DemoSitesExplorer/utils.test.jsZ

@@ -0,0 +1,63 @@
+import './mockJsdom';
+import '@testing-library/jest-dom/extend-expect';
+import { getFeatures, filterCases, getFilters } from './utils';
+
+describe('utils.js', () => {
+  const mockCases = [
+    {
+      geometry: { coordinates: [0, 0] },
+      properties: {
+        title: 'test case study',
+        image: '',
+        nwrm_type: 'light',
+        measures: [{ id: 'test-measure1', title: 'test measure 1' }],
+        description: 'test',
+        sectors: ['testsector'],
+        path: '/test-case-study',
+        url: 'localhost.com/test-case-study',
+      },
+    },
+    {
+      geometry: { coordinates: [0, 0] },
+      properties: {
+        title: 'case study 2',
+        image: '',
+        nwrm_type: 'light',
+        measures: [{ id: 'test-measure1', title: 'test measure 1' }],
+        description: 'test',
+        sectors: ['testsector'],
+        path: '/test-case-study',
+        url: 'localhost.com/test-case-study',
+      },
+    },
+  ];
+
+  test('getFeatures', () => {
+    expect(() => {
+      getFeatures(mockCases);
+    }).not.toThrowError();
+  });
+
+  test('filterCases', () => {
+    const mockActiveFilters = {
+      nwrms_implemented: ['test measure 1'],
+      sectors: ['testsector'],
+    };
+    const mockDemoSitesIds = ['test-case-study'];
+    const mockCasesFiltered = filterCases(
+      mockCases,
+      mockActiveFilters,
+      mockDemoSitesIds,
+      'test',
+    );
+    expect(mockCasesFiltered).toStrictEqual([]);
+  });
+
+  test('getFilters', () => {
+    const mockFilters = getFilters(mockCases);
+    expect(mockFilters).toStrictEqual({
+      nwrms_implemented: { 'test-measure1': 'test measure 1' },
+      sectors: { testsector: 'testsector' },
+    });
+  });
+});

package/src/components/index.js

@@ -13,3 +13,4 @@ export TableauShare from './theme/Tableau/TableauShare';
 export TableauFullscreen from './theme/Tableau/TableauFullscreen';
 export ItemMetadataSnippet from './theme/ItemMetadata/ItemMetadataSnippet';
 export MapPreview from './theme/MetadataListingView/MapPreview';
+export DemoSitesExplorer from './Blocks/DemoSitesExplorer/DemoSitesExplorerView';

package/src/express-middleware.js

@@ -0,0 +1,37 @@
+import express from 'express';
+import { getAPIResourceWithAuth } from '@plone/volto/helpers';
+
+const HEADERS = [
+  'Accept-Ranges',
+  'Cache-Control',
+  'Content-Disposition',
+  'Content-Range',
+  'Content-Type',
+];
+
+function viewMiddleware(req, res, next) {
+  getAPIResourceWithAuth(req)
+    .then((resource) => {
+      // Just forward the headers that we need
+      HEADERS.forEach((header) => {
+        if (resource.get(header)) {
+          res.set(header, resource.get(header));
+        }
+      });
+      res.status(resource.statusCode);
+      res.send(resource.body);
+    })
+    .catch(next);
+}
+
+export default function middleware(config) {
+  const middleware = express.Router();
+
+  // TODO: do we want catch all?
+  // middleware.all(['**/@@*'], viewMiddleware);
+
+  middleware.all(['**/@@demo-sites-map.arcgis.json'], viewMiddleware);
+  middleware.id = 'viewsMiddleware';
+  config.settings.expressMiddleware.push(middleware);
+  return config;
+}

package/src/index.js

@@ -28,7 +28,7 @@ import { linkDeserializer } from '@plone/volto-slate/editor/plugins/AdvancedLink
 import LinkEditSchema from '@plone/volto-slate/editor/plugins/AdvancedLink/schema';
 import { getBlocks } from '@plone/volto/helpers';
 import { defineMessages } from 'react-intl'; // , defineMessages
-
+import installDemoSitesExplorer from './components/Blocks/DemoSitesExplorer';
 import marineLogo from '@eeacms/volto-marine-policy/../theme/assets/images/Header/wise-marine-logo.svg';
 import marineLogoWhite from '@eeacms/volto-marine-policy/../theme/assets/images/Header/wise-marine-logo-white.svg';
 import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo-white.svg';
@@ -109,6 +109,11 @@ const applyConfig = (config) => {
     localnavigation,
   };
 
+  if (__SERVER__) {
+    const installExpressMiddleware = require('./express-middleware').default;
+    config = installExpressMiddleware(config);
+  }
+
   config.widgets.widget.text_align = TextAlignWidget;
   // check if it breaks the 'theme' field in volto-tabs-block in the 'horizontal carousel' layout
   // We have a 'theme' field in the wise catalogue metadata (CatalogueMetadata)
@@ -512,10 +517,11 @@ const applyConfig = (config) => {
   const [installLinkEditor] = makeInlineElementPlugin(opts);
   config = installLinkEditor(config);
 
-  const final = [installMsfdDataExplorerBlock, installSearchEngine].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  const final = [
+    installMsfdDataExplorerBlock,
+    installSearchEngine,
+    installDemoSitesExplorer,
+  ].reduce((acc, apply) => apply(acc), config);
 
   return final;
 };