@eeacms/volto-bise-policy 1.2.32 → 1.2.34

package/CHANGELOG.md

@@ -4,6 +4,40 @@ 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.2.34](https://github.com/eea/volto-bise-policy/compare/1.2.33...1.2.34) - 23 January 2026
+
+#### :rocket: New Features
+
+- feat: added NRR measure view widgets [laszlocseh - [`9468505`](https://github.com/eea/volto-bise-policy/commit/9468505f30d0755de0e2c3386e63229244137777)]
+- feat: small color changes to case study map [laszlocseh - [`4cba979`](https://github.com/eea/volto-bise-policy/commit/4cba979d7292210659ca60f96e438a646aa94fab)]
+- feat: small color changes to case study map [laszlocseh - [`ca6f43c`](https://github.com/eea/volto-bise-policy/commit/ca6f43c5cc81f16568650f2dfdca2591348bc75a)]
+- feat: added GeolocationWidget for case studies [laszlocseh - [`17b6c1c`](https://github.com/eea/volto-bise-policy/commit/17b6c1c72c336c8c87291dc4303f02bcd82e7956)]
+- feat: NRR case study map [laszlocseh - [`daafb50`](https://github.com/eea/volto-bise-policy/commit/daafb50825d893da08d64fdd48a9b287ec9ff916)]
+
+#### :nail_care: Enhancements
+
+- change: added typology_of_measures filter to case study map [laszlocseh - [`cd9d50e`](https://github.com/eea/volto-bise-policy/commit/cd9d50e9fefab49ddbf80c4b61113ec0beaf9b73)]
+- change: added measures filter to case study map [laszlocseh - [`0a6bcdd`](https://github.com/eea/volto-bise-policy/commit/0a6bcdde399d2354e112a25ef3abe5cbd8f099cb)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`e10917b`](https://github.com/eea/volto-bise-policy/commit/e10917b4a14a0897707fd50d33913e969d46ee89)]
+- style: Automated code fix [eea-jenkins - [`702f53d`](https://github.com/eea/volto-bise-policy/commit/702f53d74ff560b58a48bf519fc9a40cb9bddb56)]
+- style: Automated code fix [eea-jenkins - [`1b2648b`](https://github.com/eea/volto-bise-policy/commit/1b2648bedc44c4ca955499cb3267104e40e0a9e9)]
+- style: Automated code fix [eea-jenkins - [`87e5dff`](https://github.com/eea/volto-bise-policy/commit/87e5dffcf2e7f362e095fc20b54e932f186bbcf8)]
+
+#### :hammer_and_wrench: Others
+
+- test: fix estlint and tests [laszlocseh - [`8867193`](https://github.com/eea/volto-bise-policy/commit/88671932c76859406c397eb9cb108ce4073f7952)]
+- test: fix case study map tests [laszlocseh - [`8459b83`](https://github.com/eea/volto-bise-policy/commit/8459b839766a8fda4c729c558cb6ce940f1c8536)]
+- fix eslint [laszlocseh - [`8cd8dfa`](https://github.com/eea/volto-bise-policy/commit/8cd8dfabd3ffaf49eb0b8fe5dec076f61e48a6ac)]
+- added volto-openlayers-map to package.json [laszlocseh - [`2d9eb10`](https://github.com/eea/volto-bise-policy/commit/2d9eb101c4ce5fd490560e2a91c025a85a8474cb)]
+### [1.2.33](https://github.com/eea/volto-bise-policy/compare/1.2.32...1.2.33) - 9 December 2025
+
+#### :bug: Bug Fixes
+
+- fix: wrong z-index for the menu in some edge cases [laszlocseh - [`dc23db7`](https://github.com/eea/volto-bise-policy/commit/dc23db7a2f10ae3c64cb25835dbdda30b6f1e3e4)]
+
 ### [1.2.32](https://github.com/eea/volto-bise-policy/compare/1.2.31...1.2.32) - 3 December 2025
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.2.32",
+  "version": "1.2.34",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -13,6 +13,7 @@
     "react"
   ],
   "addons": [
+    "@eeacms/volto-openlayers-map",
     "@eeacms/volto-datablocks",
     "@eeacms/volto-block-toc",
     "@eeacms/volto-eea-design-system",
@@ -29,6 +30,7 @@
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "*",
+    "@eeacms/volto-openlayers-map": "1.0.1",
     "@eeacms/volto-resize-helper": "*",
     "@plone-collective/volto-authomatic": "2.0.1",
     "esri-loader": "3.7.0",

package/src/components/Widgets/GeolocationWidget.jsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Label, Button } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+
+import { injectIntl } from 'react-intl';
+import { FormFieldWrapper } from '@plone/volto/components';
+import MapContainer from './GeolocationWidgetMapContainer';
+
+const defaultValue = {
+  latitude: 55.6761,
+  longitude: 12.5683,
+};
+
+const GeolocationWidget = (props) => {
+  const { id, value, onChange } = props;
+
+  const [address, setAddress] = useState('');
+  const [isFetching, setIsFetching] = useState();
+
+  const handleAddressChange = (event) => {
+    setAddress(event.target.value);
+  };
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+
+    const url = `https://nominatim.openstreetmap.org/search?q=${address}&format=json`;
+
+    const { corsProxyPath = '/cors-proxy', host, port } = config.settings;
+    const base = __SERVER__
+      ? `http://${host}:${port}`
+      : `${window.location.protocol}//${window.location.host}`;
+
+    const path = `${base}${corsProxyPath}/${url}`;
+
+    let locations;
+    setIsFetching(true);
+    try {
+      const response = await fetch(path);
+      locations = await response.json();
+      setIsFetching(false);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log('error in fetching location', e);
+    }
+
+    if (locations?.length) {
+      const { lat, lon } = locations[0];
+      onChange(id, { latitude: lat, longitude: lon });
+    }
+  };
+
+  if (__SERVER__) return '';
+
+  const lat = value?.latitude ?? defaultValue.latitude;
+  const long = value?.longitude ?? defaultValue.longitude;
+  const mapKey = `${lat}_${long}`;
+
+  return (
+    <FormFieldWrapper {...props} className="geolocation-field">
+      <div className="ui form">
+        <div className="inline fields">
+          <div className="field">
+            <Input
+              type="text"
+              value={address}
+              onChange={handleAddressChange}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSearch(e);
+              }}
+            />
+          </div>
+          <div className="field">
+            <Button onClick={handleSearch}>
+              {isFetching ? 'Loading' : 'Search'}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <MapContainer
+        key={mapKey}
+        longitude={value?.longitude || defaultValue.longitude}
+        latitude={value?.latitude || defaultValue.latitude}
+        onChange={({ latitude, longitude }) =>
+          onChange(id, { ...value, longitude, latitude })
+        }
+      />
+      <div className="ui form">
+        <div className="inline fields">
+          <div className="field">
+            <Label>Latitude</Label>
+            <Input
+              type="number"
+              placeholder="latitude"
+              value={value?.latitude || defaultValue.latitude}
+              onChange={(e) =>
+                onChange(id, { ...value, latitude: e.target.value })
+              }
+            />
+          </div>
+          <div className="field">
+            <Label>Longitude</Label>
+            <Input
+              type="number"
+              placeholder="longitude"
+              value={value?.longitude || defaultValue.longitude}
+              onChange={(e) =>
+                onChange(id, { ...value, longitude: e.target.value })
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+GeolocationWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.object,
+  onChange: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+
+GeolocationWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: null,
+  onEdit: null,
+  onDelete: null,
+};
+
+export default injectIntl(GeolocationWidget);

package/src/components/Widgets/GeolocationWidgetMapContainer.jsx

@@ -0,0 +1,131 @@
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
+// import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import {
+  Controls,
+  Interactions,
+  Layer,
+  Layers,
+  Map,
+} from '@eeacms/volto-openlayers-map/api';
+import React, { useState } from 'react';
+import { useMapContext } from '@eeacms/volto-openlayers-map/hocs';
+
+function PinInteraction({ longitude, latitude, onChange, ol }) {
+  const mapContext = useMapContext();
+  const { addLayer, addInteraction, map } = mapContext;
+
+  React.useEffect(() => {
+    if (
+      !map ||
+      typeof latitude === 'undefined' ||
+      typeof longitude === 'undefined'
+    )
+      return;
+
+    // Create a feature (the pin) and set it to be draggable
+    const pin = new ol.ol.Feature({
+      geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude])), // Initial location
+    });
+
+    // Style for the pin
+    pin.setStyle(
+      new ol.style.Style({
+        image: new ol.style.Icon({
+          anchor: [0.5, 1],
+          src: 'https://openlayers.org/en/latest/examples/data/icon.png',
+        }),
+      }),
+    );
+
+    // Create a vector layer to hold the pin
+    const vectorSource = new ol.source.Vector({
+      features: [pin],
+    });
+
+    const vectorLayer = new ol.layer.Vector({
+      source: vectorSource,
+    });
+
+    map.addLayer(vectorLayer);
+
+    // Add drag interaction
+    const dragInteraction = new ol.interaction.Modify({
+      source: vectorSource,
+      pixelTolerance: 20,
+    });
+
+    map.addInteraction(dragInteraction);
+
+    // Log the new position when the pin is dragged
+    dragInteraction.on('modifyend', function (event) {
+      const feature = event.features.getArray()[0];
+      const coordinates = feature.getGeometry().getCoordinates();
+      const lonLat = ol.proj.toLonLat(coordinates);
+      const [longitude, latitude] = lonLat;
+      onChange({ latitude, longitude });
+    });
+  }, [addInteraction, addLayer, map, onChange, latitude, longitude, ol]);
+
+  return null;
+}
+
+const TileSetLoader = (props) => {
+  const [tileWMSSources, setTileWMSSources] = useState([]);
+  const { ol } = props;
+
+  React.useEffect(() => {
+    setTileWMSSources([
+      new ol.source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMBlossomComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
+  }, [ol]);
+
+  return tileWMSSources ? (
+    <MapContainer {...props} source={tileWMSSources[0]} />
+  ) : null;
+};
+
+const MapContainer = (props) => {
+  const { longitude, latitude, source, onChange, ol } = props;
+  return (
+    <Map
+      view={{
+        center: ol.proj.fromLonLat([longitude, latitude]),
+        showFullExtent: true,
+        zoom: 15,
+      }}
+      pixelRatio={1}
+      controls={ol.control.defaults({ attribution: false })}
+    >
+      <Layers>
+        <Controls attribution={false} zoom={false} />
+        <PinInteraction
+          ol={ol}
+          latitude={latitude}
+          longitude={longitude}
+          onChange={onChange}
+        />
+        <Interactions
+          doubleClickZoom={true}
+          dragAndDrop={true}
+          dragPan={true}
+          keyboardPan={true}
+          keyboardZoom={true}
+          mouseWheelZoom={true}
+          pointer={true}
+          select={true}
+        />
+        <Layer.Tile source={source} zIndex={0} />
+      </Layers>
+    </Map>
+  );
+};
+
+export default withOpenLayers(TileSetLoader);

package/src/components/Widgets/NRRWidgets.jsx

@@ -0,0 +1,95 @@
+export const NRRTypologyOfMeasuresView = ({ value }) => {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    try {
+      parsedValue = JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const items = Array.isArray(parsedValue)
+    ? parsedValue
+    : parsedValue?.value || [];
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="eunis-widget-view">
+      <span>
+        <b>Related typology of measures: </b>
+      </span>
+      {items.map((item) => (
+        <span key={item['@id']}>
+          <b>{item.title.split(' - ')[0]}</b> {item.title.split(' - ')[1]}
+          {items.indexOf(item) < items.length - 1 ? ' | ' : ''}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export const NRRArticleView = ({ value }) => {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    try {
+      parsedValue = JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const items = Array.isArray(parsedValue)
+    ? parsedValue
+    : parsedValue?.value || [];
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="eunis-widget-viewZ">
+      <span>
+        <b>NRR Article: </b>
+      </span>
+      {items.map((item) => (
+        <span key={item['@id']}>
+          {item.title.split(' - ')[0].split(' ')[1]}
+          {items.indexOf(item) < items.length - 1 ? ', ' : ''}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export const NRREcosystemTypologyView = ({ value }) => {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    try {
+      parsedValue = JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const items = Array.isArray(parsedValue)
+    ? parsedValue
+    : parsedValue?.value || [];
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="eunis-widget-view">
+      <span>
+        <b>Ecosystem type: </b>
+      </span>
+      {items.map((item) => (
+        <span key={item['@id']}>
+          {item.title}
+          {items.indexOf(item) < items.length - 1 ? ', ' : ''}
+        </span>
+      ))}
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Grid } from 'semantic-ui-react'; // Dropdown,
+import { addAppURL } from '@plone/volto/helpers';
+// import config from '@plone/volto/registry';
+import CaseStudyMap from './CaseStudyMap';
+import { ActiveFilters, CaseStudyFilters, SearchBox } from './CaseStudyFilters';
+// import CaseStudyList from './CaseStudyListing';
+
+import { filterCases, getFilters } from './utils';
+import { useCases } from './hooks';
+
+import './styles.less';
+
+export default function CaseStudyExplorerView(props) {
+  const cases_url = '/@@case-studies-map.arcgis.json';
+  let cases = useCases(addAppURL(cases_url));
+  const { caseStudiesIds } = props; // case studies from measure view
+  const [selectedCase, onSelectedCase] = React.useState(null);
+  const [searchInput, setSearchInput] = React.useState('');
+  const hideFilters = caseStudiesIds ? true : false;
+
+  const [activeFilters, setActiveFilters] = React.useState({
+    measures_implemented: [],
+    typology_of_measures: [],
+  });
+
+  const [activeItems, setActiveItems] = React.useState(cases);
+  const [filters, setFilters] = React.useState([]);
+  const [map, setMap] = React.useState();
+
+  React.useEffect(() => {
+    const _filters = getFilters(cases);
+    setFilters(_filters);
+  }, [
+    cases,
+    activeFilters.measures_implemented,
+    activeFilters.typology_of_measures,
+    activeItems.length,
+  ]);
+
+  React.useEffect(() => {
+    let activeItems = filterCases(
+      cases,
+      activeFilters,
+      caseStudiesIds,
+      searchInput,
+    );
+
+    setActiveItems(activeItems);
+  }, [caseStudiesIds, activeFilters, cases, searchInput]);
+
+  if (__SERVER__) return '';
+
+  return (
+    <div className="searchlib-block">
+      <Grid.Row>
+        {hideFilters ? null : (
+          <SearchBox
+            filters={filters}
+            activeFilters={activeFilters}
+            setActiveFilters={setActiveFilters}
+            searchInput={searchInput}
+            setSearchInput={setSearchInput}
+            map={map}
+          />
+        )}
+      </Grid.Row>
+      <Grid.Row>
+        {hideFilters ? null : (
+          <ActiveFilters
+            filters={filters}
+            activeFilters={activeFilters}
+            setActiveFilters={setActiveFilters}
+          />
+        )}
+      </Grid.Row>
+      <Grid.Row stretched={true} id="cse-filter">
+        {hideFilters ? null : (
+          <CaseStudyFilters
+            filters={filters}
+            activeFilters={activeFilters}
+            setActiveFilters={setActiveFilters}
+            map={map}
+          />
+        )}
+      </Grid.Row>
+      <Grid.Row>
+        {cases.length ? (
+          <Grid columns={12}>
+            <Grid.Column mobile={12} tablet={12} computer={12}>
+              <CaseStudyMap
+                items={cases}
+                activeItems={activeItems}
+                hideFilters={hideFilters}
+                selectedCase={selectedCase}
+                onSelectedCase={onSelectedCase}
+                searchInput={searchInput}
+                map={map}
+                setMap={setMap}
+              />
+            </Grid.Column>
+          </Grid>
+        ) : null}
+      </Grid.Row>
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { useCases } from './hooks';
+import CaseStudyExplorerView from './CaseStudyExplorerView';
+
+jest.mock('@plone/volto/helpers', () => ({
+  addAppURL: jest.fn((url) => url),
+}));
+
+jest.mock('@plone/volto/registry', () => ({
+  __esModule: true,
+  default: {
+    settings: { prefixPath: '' },
+  },
+}));
+
+jest.mock('./CaseStudyMap', () =>
+  jest.fn(() => <div id="case-study-map-mock">CaseStudyMapMock</div>),
+);
+
+jest.mock('./CaseStudyFilters', () => ({
+  ActiveFilters: jest.fn(() => (
+    <div id="active-filters-mock">ActiveFiltersMock</div>
+  )),
+  CaseStudyFilters: jest.fn(() => (
+    <div id="case-study-fiters-mock">CaseStudyFiltersMock</div>
+  )),
+  SearchBox: jest.fn(() => <div id="search-box-mock">SearchBoxMock</div>),
+}));
+
+jest.mock('./utils', () => ({
+  filterCases: jest.fn(() => [{ id: 1, title: 'Filtered Case' }]),
+  getFilters: jest.fn(() => ['filter1', 'filter2']),
+}));
+
+jest.mock('./hooks', () => ({
+  useCases: jest.fn(),
+}));
+
+beforeAll(() => {
+  global.__SERVER__ = false;
+});
+
+describe('CaseStudyExplorerView', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders filters and map when there are cases', () => {
+    useCases.mockReturnValue([{ id: 1, title: 'Test Case' }]);
+
+    const { container } = render(<CaseStudyExplorerView />);
+
+    expect(container.querySelector('#search-box-mock')).toBeInTheDocument();
+    expect(container.querySelector('#active-filters-mock')).toBeInTheDocument();
+    expect(
+      container.querySelector('#case-study-fiters-mock'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('#case-study-map-mock')).toBeInTheDocument();
+  });
+
+  it('hides filters when caseStudiesIds is provided', () => {
+    useCases.mockReturnValue([{ id: 1, title: 'Test Case' }]);
+
+    const { container } = render(
+      <CaseStudyExplorerView caseStudiesIds={[1, 2]} />,
+    );
+
+    expect(container.querySelector('#search-box-mock')).not.toBeInTheDocument();
+    expect(
+      container.querySelector('#active-filters-mock'),
+    ).not.toBeInTheDocument();
+    expect(
+      container.querySelector('#case-study-fiters-mock'),
+    ).not.toBeInTheDocument();
+    expect(container.querySelector('#case-study-map-mock')).toBeInTheDocument();
+  });
+
+  it('does not render map when there are no cases', () => {
+    useCases.mockReturnValue([]);
+
+    const { container } = render(<CaseStudyExplorerView />);
+
+    expect(
+      container.querySelector('#case-study-map-mock'),
+    ).not.toBeInTheDocument();
+  });
+});