@eeacms/volto-n2k 1.0.29 → 1.0.31

package/CHANGELOG.md

@@ -4,11 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.0.29](https://github.com/eea/volto-n2k/compare/1.0.28...1.0.29) - 8 June 2023
+### [1.0.31](https://github.com/eea/volto-n2k/compare/1.0.30...1.0.31) - 16 June 2023
 
 #### :hammer_and_wrench: Others
 
-- update [Miu Razvan - [`6f45f05`](https://github.com/eea/volto-n2k/commit/6f45f051ad9b8b19ddbe67d6c730bd5850974bd1)]
+- update [Miu Razvan - [`f4ea5ea`](https://github.com/eea/volto-n2k/commit/f4ea5ea381a015c32cff24957bd677e47fc0df05)]
+- don't swipe carousel with touch moves [Miu Razvan - [`057088d`](https://github.com/eea/volto-n2k/commit/057088d411874c9b8c2fe7731107b8da97be0515)]
+### [1.0.30](https://github.com/eea/volto-n2k/compare/1.0.29...1.0.30) - 12 June 2023
+
+#### :bug: Bug Fixes
+
+- fix: Solve issues identified by Sonarqube [dana-cfc4 - [`be9e367`](https://github.com/eea/volto-n2k/commit/be9e367923fe953aed879e51b078026224a2c817)]
+
+#### :hammer_and_wrench: Others
+
+- fix maps [Miu Razvan - [`cfd8805`](https://github.com/eea/volto-n2k/commit/cfd8805df86da18c2ecf5140223830f128157f74)]
+- test: jest should look for addons in node_modules Refs #253277 [valentinab25 - [`1e24dce`](https://github.com/eea/volto-n2k/commit/1e24dce7789c9a1436fd6a52e79c69119a9ef45a)]
+- test: Fix test config, coverage Refs #253277 [valentinab25 - [`2a0ad87`](https://github.com/eea/volto-n2k/commit/2a0ad8776363f7dce37422660235dceeae151667)]
+### [1.0.29](https://github.com/eea/volto-n2k/compare/1.0.28...1.0.29) - 8 June 2023
+
 ### [1.0.28](https://github.com/eea/volto-n2k/compare/1.0.27...1.0.28) - 7 June 2023
 
 #### :hammer_and_wrench: Others

package/jest-addon.config.js

@@ -5,19 +5,19 @@ module.exports = {
     '!src/**/*.d.ts',
   ],
   moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
     '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
-    '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
+    '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
     '@plone/volto-slate':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/BubbleChart/Chart.jsx

@@ -17,11 +17,6 @@ function Chart(props) {
   const popupRef = useRef();
   const { margin = { top: 20, right: 30, bottom: 70, left: 40 } } = props;
 
-  // const dispose = () => {
-  //   const svg = select(svgRef.current);
-  //   svg.selectAll('*').remove();
-  // };
-
   return (
     <ChartContext.Provider
       value={{

package/src/components/manage/Blocks/CDDACountryProfileMap/Edit.jsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import getSchema from './schema';
+import View from './View';
+import './style.less';
+
+const Edit = (props) => {
+  const schema = useMemo(() => getSchema(props), [props]);
+
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={props.onChangeBlock}
+          formData={props.data}
+          block={props.block}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/components/manage/Blocks/CDDACountryProfileMap/View.jsx

@@ -0,0 +1,208 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import isArray from 'lodash/isArray';
+import isString from 'lodash/isString';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+
+// layer definitions
+const smallScaleLayerId = 1;
+const smallScaleMinScale = 0;
+const smallScaleMaxScale = 3000000;
+
+const mediumScaleLayerId = 3;
+const mediumScaleMinScale = 2999999;
+const mediumScaleMaxScale = 1000000;
+
+const largeScaleLayerId = 4;
+const largeScaleMinScale = 999999;
+const largeScaleMaxScale = 0;
+
+const dynamicLayerDefinition = `
+[
+  {
+    "id":"{layerId}",
+    "source":{
+      "type":"mapLayer",
+      "mapLayerId":"{layerId}"
+    },
+    "definitionExpression":"cddaCountryCode = '{country}'",
+    "drawingInfo":{
+      "renderer":{
+        "type":"uniqueValue",
+        "field1":"cddaCountryCode",
+        "uniqueValueInfos":[
+          {
+            "value":"{country}",
+            "label":"{country}",
+            "symbol":{
+              "color":[40,149,136,100],
+              "outline":{
+                "color":[40,149,136,100],
+                "width": 0.75,
+                "type":"esriSLS",
+                "style":"esriSLSSolid"
+              },
+              "type":"esriSFS",
+              "style":"esriSFSSolid"
+            }
+          }
+        ]
+      },
+      "showLabels":false
+    },
+    "minScale":{minScale},
+    "maxScale":{maxScale}
+  }
+]`;
+
+const View = (props) => {
+  const [sources, setSources] = useState([]);
+  const [tiles, setTiles] = useState([]);
+  const [extent, setExtent] = useState(null);
+  const { proj, source } = openlayers;
+
+  const country = useMemo(() => {
+    const query = (props.properties.data_query || []).filter(
+      (query) => query.i === 'iso2',
+    )[0];
+    if (!query) return null;
+    const value = query.v;
+    if (isArray(value)) {
+      return value[0];
+    }
+    if (isString(value)) {
+      return value;
+    }
+    return null;
+  }, [props.properties]);
+
+  useEffect(() => {
+    setTiles([
+      new source.XYZ({
+        url:
+          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+          'Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
+      }),
+      new source.XYZ({
+        url:
+          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+          'Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}',
+      }),
+    ]);
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    setSources([
+      new source.ImageArcGISRest({
+        ratio: 1,
+        params: {
+          LAYERS: `${largeScaleLayerId}`,
+          dynamicLayers: dynamicLayerDefinition
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replaceAll(' ', '')
+            .replaceAll('{country}', country)
+            .replaceAll('{layerId}', largeScaleLayerId)
+            .replace('{minScale}', largeScaleMinScale)
+            .replace('{maxScale}', largeScaleMaxScale),
+        },
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/CDDA_Dyna_WM/MapServer',
+      }),
+      new source.ImageArcGISRest({
+        ratio: 1,
+        params: {
+          LAYERS: `${mediumScaleLayerId}`,
+          dynamicLayers: dynamicLayerDefinition
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replaceAll(' ', '')
+            .replaceAll('{country}', country)
+            .replaceAll('{layerId}', mediumScaleLayerId)
+            .replace('{minScale}', mediumScaleMinScale)
+            .replace('{maxScale}', mediumScaleMaxScale),
+        },
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/CDDA_Dyna_WM/MapServer',
+      }),
+      new source.ImageArcGISRest({
+        ratio: 1,
+        params: {
+          LAYERS: `${smallScaleLayerId}`,
+          dynamicLayers: dynamicLayerDefinition
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replaceAll(' ', '')
+            .replaceAll('{country}', country)
+            .replaceAll('{layerId}', smallScaleLayerId)
+            .replace('{minScale}', smallScaleMinScale)
+            .replace('{maxScale}', smallScaleMaxScale),
+        },
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/CDDA_Dyna_WM/MapServer',
+      }),
+    ]);
+    fetch(
+      `https://geoenrich.arcgis.com/arcgis/rest/services/World/geoenrichmentserver/Geoenrichment/countries/${country}?f=pjson`,
+    )
+      .then(function (response) {
+        return response.json();
+      })
+      .then(async (data) => {
+        const { fromExtent } = await import('ol/geom/Polygon');
+        if (data && data.countries.length > 0) {
+          const countryInfo = data.countries[0];
+          const countryExtent = [
+            countryInfo.defaultExtent.xmin,
+            countryInfo.defaultExtent.ymin,
+            countryInfo.defaultExtent.xmax,
+            countryInfo.defaultExtent.ymax,
+          ];
+
+          const reprojectedExtent = proj.transformExtent(
+            countryExtent,
+            'EPSG:4326',
+            'EPSG:3857',
+          );
+
+          const polygon = fromExtent(reprojectedExtent);
+          polygon.scale(1.2);
+
+          setExtent(polygon.getExtent());
+        }
+      })
+      .catch(function () {
+        // handle the error
+        setExtent(null);
+      });
+    /* eslint-disable-next-line */
+  }, [country]);
+
+  return (
+    <div className="n2k-country-profile-map">
+      <Map
+        view={{
+          center: [0, 0],
+          extent: extent || [
+            -6319125.804807394,
+            3070702.923644739,
+            9584655.106275197,
+            12091128.659149397,
+          ],
+          zoom: 2,
+          showFullExtent: true,
+        }}
+        pixelRatio={1}
+      >
+        <Layers>
+          <Layer.Tile source={tiles[1]} zIndex={0} opacity={1} />
+          <Layer.Tile source={tiles[0]} zIndex={1} opacity={0.7} />
+          <Layer.Image source={sources[0]} zIndex={2} />
+          <Layer.Image source={sources[1]} zIndex={2} />
+          <Layer.Image source={sources[2]} zIndex={2} />
+        </Layers>
+      </Map>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,24 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import Edit from './Edit';
+import View from './View';
+
+export default (config) => {
+  config.blocks.blocksConfig.cdda_country_profile_map = {
+    id: 'cdda_country_profile_map',
+    title: 'CDDA country profile map',
+    icon: worldSVG,
+    group: 'custom_blocks',
+    edit: Edit,
+    view: View,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    blockHasOwnFocusManagement: false,
+  };
+  return config;
+};

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

@@ -0,0 +1,19 @@
+const getSchema = () => {
+  return {
+    title: 'CDDA country profile map',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

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

@@ -0,0 +1,240 @@
+@type: extra;
+@element: custom;
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@import 'swiper/swiper.less';
+
+@{view} {
+  .species-banner-details {
+    &::before {
+      .full-width();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidth - 2rem) !important;
+      }
+    }
+  }
+}
+
+@{edit} {
+  .species-banner-details {
+    &::before {
+      .full-width-edit();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width-edit(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidthEdit - 2rem) !important;
+      }
+    }
+  }
+}
+
+div#view .species-banner-details .ui.container > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.species-banner-details {
+  position: relative;
+  padding: 0;
+  margin-bottom: 1rem;
+  color: #fff !important;
+  font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+  &::before {
+    display: block;
+    height: 100%;
+    background-color: #00a390;
+    content: '';
+  }
+
+  .species-details {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .species-metadata {
+      display: flex;
+      width: 50%;
+      height: 320px !important;
+      flex: 0 0 50%;
+      flex-direction: column;
+      justify-content: center;
+      word-wrap: break-word;
+
+      .name {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+
+        font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 54px;
+        line-height: 54px;
+        text-transform: uppercase;
+
+        > * {
+          font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
+      }
+
+      h3 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      h4 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      .info,
+      .info > * {
+        font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 18px;
+
+        a {
+          color: #fff;
+
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .carousel {
+      display: flex;
+      height: 320px;
+
+      p {
+        font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      &.one-slide .swiper {
+        width: 100%;
+      }
+
+      &.two-slides .swiper {
+        width: 50%;
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      &.three-slides .swiper {
+        width: 33.33%;
+
+        @media @tablet {
+          width: 50%;
+
+          &.preview.preview-two {
+            display: none;
+          }
+        }
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-two,
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      .swiper {
+        &.preview .swiper-slide {
+          filter: grayscale(100%);
+        }
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .arrows {
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        button {
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+        }
+
+        .icon {
+          display: block;
+          width: 32px;
+          background-color: #fff;
+          cursor: pointer;
+        }
+
+        p {
+          overflow: hidden;
+          width: calc(100% - 64px);
+          padding: 0.25rem 0.25rem 0.25rem 1rem;
+          margin: 0;
+          backdrop-filter: brightness(0.5);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    @media @mobile {
+      flex-flow: column;
+
+      .species-metadata {
+        width: 100%;
+        margin-top: 2rem;
+      }
+
+      .carousel {
+        margin: 0 1rem 1rem 1rem;
+      }
+    }
+  }
+}

package/src/components/manage/Blocks/CddaShape/View.jsx

@@ -60,7 +60,6 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [vectorSource, site_code?.[0]]);
 
-  if (__SERVER__ || !vectorSource) return '';
   return (
     <div className="site-shape-wrapper full-width">
       <div className="site-shape">
@@ -71,9 +70,9 @@ const View = (props) => {
             maxZoom: 10,
             minZoom: 10,
             zoom: 10,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/ExploreHabitats/View.jsx

@@ -109,7 +109,6 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [JSON.stringify(activePageResults)]);
 
-  if (__SERVER__ || !vectorSource) return '';
   return (
     <div className="explore-habitats-wrapper full-width">
       <div className="explore-habitats">
@@ -118,9 +117,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/ExploreSites/View.jsx

@@ -113,9 +113,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/ExploreSpecies/View.jsx

@@ -116,9 +116,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/HabitatDistribution/View.jsx

@@ -69,9 +69,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/HabitatProtectedSites/View.jsx

@@ -69,9 +69,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />