@eeacms/volto-marine-policy 2.0.2 → 2.0.4

package/src/components/Blocks/DemoSitesExplorer/DemoSitesFilters.test.jsxZ

@@ -0,0 +1,91 @@
+import './mockJsdom';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+
+import {
+  DemoSitesFilters,
+  ActiveFilters,
+  SearchBox,
+  DemoSitesFilter,
+} from './DemoSitesFilters';
+
+describe('DemoSitesFilters', () => {
+  const mockSetActiveFilters = jest.fn();
+  window.URL.createObjectURL = function () {};
+  global.URL.createObjectURL = jest.fn();
+
+  const mockFilters = {
+    sectors: { sector1: 'Sector 1', sector2: 'Sector 2' },
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(
+      <DemoSitesFilters
+        filters={mockFilters}
+        activeFilters={{ sectors: [] }}
+        setActiveFilters={mockSetActiveFilters}
+      />,
+    );
+
+    expect(container.querySelector('.filter-wrapper')).toBeInTheDocument();
+  });
+});
+
+describe('ActiveFilters', () => {
+  const mockSetActiveFilters = jest.fn();
+  const mockFilters = {
+    sectors: { sector1: 'Sector 1', sector2: 'Sector 2' },
+  };
+
+  it('renders without crashing', () => {
+    render(
+      <ActiveFilters
+        filters={mockFilters}
+        activeFilters={{ sectors: [] }}
+        setActiveFilters={mockSetActiveFilters}
+      />,
+    );
+  });
+});
+
+describe('SearchBox', () => {
+  const mockSetActiveFilters = jest.fn();
+  const mockFilters = {
+    sectors: { sector1: 'Sector 1', sector2: 'Sector 2' },
+  };
+
+  const mockSetSearchInput = jest.fn();
+  const mockSearchInput = 'freshwater';
+
+  it('renders without crashing', () => {
+    render(
+      <SearchBox
+        filters={mockFilters}
+        activeFilters={{ sectors: [] }}
+        setActiveFilters={mockSetActiveFilters}
+        searchInput={mockSearchInput}
+        setSearchInput={mockSetSearchInput}
+      />,
+    );
+  });
+});
+
+describe('DemoSitesFilter', () => {
+  const mockSetActiveFilters = jest.fn();
+  const mockFilters = {
+    sectors: { sector1: 'Sector 1', sector2: 'Sector 2' },
+  };
+
+  it('renders without crashing', () => {
+    render(
+      <DemoSitesFilter
+        filterTitle={'Case study filter'}
+        filters={mockFilters}
+        activeFilters={{ sectors: [] }}
+        setActiveFilters={mockSetActiveFilters}
+        filterName={'Filter name'}
+      />,
+    );
+  });
+});

package/src/components/Blocks/DemoSitesExplorer/DemoSitesListing.jsx

@@ -0,0 +1,383 @@
+import React from 'react';
+import {
+  centerAndResetMapZoom,
+  scrollToElement,
+  zoomMapToFeatures,
+  isValidURL,
+} from './utils';
+
+const showPageNr = (pageNr, currentPage, numberOfPages) => {
+  // show first 5 pages
+  if (currentPage < 4 && pageNr <= 5) {
+    return true;
+  }
+
+  // show last 5 pages
+  if (numberOfPages - currentPage < 4 && numberOfPages - pageNr < 5) {
+    return true;
+  }
+
+  if (
+    currentPage >= 4 &&
+    numberOfPages - currentPage >= 4 &&
+    pageNr >= currentPage - 2 &&
+    pageNr <= currentPage + 2
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export default function DemoSitesList(props) {
+  const { selectedCase, onSelectedCase, pointsSource, map } = props;
+  // const reSearch = new RegExp(`\\b(${searchInput})\\b`, 'gi');
+  const [currentPage, setCurrentPage] = React.useState(1);
+
+  const features = pointsSource
+    .getFeatures(selectedCase)
+    .sort((item1, item2) =>
+      item1.values_.title.localeCompare(item2.values_.title),
+    );
+  const numberOfPages = Math.ceil(features.length / 10);
+
+  const displayFatures = features.slice(
+    10 * (currentPage - 1),
+    10 * currentPage,
+  );
+
+  return displayFatures.length === 0 ? (
+    <>
+      <h3 style={{ margin: 'calc(2rem - 0.1em) 0 1rem' }}>
+        We could not find any results for your search criteria
+      </h3>
+      <ul>
+        <li>check the selected filters</li>
+      </ul>
+    </>
+  ) : (
+    <>
+      <div className="listing">
+        {selectedCase ? (
+          <div
+            className="content-box u-item listing-item result-item"
+            style={{
+              marginTop: '2em',
+              padding: 'em',
+              // border: '3px solid #f2f2f2',
+              // borderTop: '1em solid #f2f2f2',
+              paddingTop: 0,
+              backgroundColor: '#f2f2f2',
+              border: 'none',
+            }}
+          >
+            <div className="slot-top">
+              <div className="listing-body">
+                <h3 className="listing-header">
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={selectedCase.path}
+                    title={selectedCase.title}
+                  >
+                    {selectedCase.title}
+                  </a>
+                </h3>
+                <p className="listing-description">
+                  {selectedCase.description}
+                </p>
+                <div className="slot-bottom">
+                  <div className="result-bottom">
+                    {selectedCase.info ? (
+                      <div className="result-info">
+                        <span className="result-info-title">Info: </span>
+                        <span>
+                          {isValidURL(selectedCase.info) ? (
+                            <a
+                              href={selectedCase.info}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              {selectedCase.info}
+                            </a>
+                          ) : (
+                            <span>{selectedCase.info}</span>
+                          )}
+                        </span>
+                      </div>
+                    ) : (
+                      ''
+                    )}
+
+                    {selectedCase.project ? (
+                      <div className="result-info">
+                        <span className="result-info-title">Project: </span>
+                        <span>{selectedCase.project}</span>
+                      </div>
+                    ) : (
+                      ''
+                    )}
+
+                    {selectedCase.country ? (
+                      <div className="result-info">
+                        <span className="result-info-title">Country: </span>
+                        <span>{selectedCase.country}</span>
+                      </div>
+                    ) : (
+                      ''
+                    )}
+
+                    {selectedCase.project_link ? (
+                      <div className="result-info">
+                        <span className="result-info-title">
+                          Project link:{' '}
+                        </span>
+                        <span>
+                          {isValidURL(selectedCase.project_link) ? (
+                            <a
+                              href={selectedCase.project_link}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              {selectedCase.project_link}
+                            </a>
+                          ) : (
+                            <span>{selectedCase.project_link}</span>
+                          )}
+                        </span>
+                      </div>
+                    ) : (
+                      ''
+                    )}
+
+                    <div
+                      className="result-info show-on-map"
+                      tabIndex="0"
+                      role="button"
+                      onKeyDown={() => {}}
+                      onClick={() => {
+                        // scroll to the map
+                        scrollToElement('search-input');
+                        // reset map zoom
+                        onSelectedCase(null);
+                        centerAndResetMapZoom(map);
+                        map.getInteractions().array_[9].getFeatures().clear();
+                      }}
+                    >
+                      <span className="result-info-title">Reset map</span>
+                      <i className="icon ri-map-2-line"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          displayFatures.map((item, index) => {
+            return (
+              <div className="u-item listing-item result-item" key={index}>
+                <div className="slot-top">
+                  <div className="listing-body">
+                    <h3 className="listing-header">
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={item.values_.path}
+                        title={item.values_.title}
+                      >
+                        {item.values_.title}
+                      </a>
+                    </h3>
+                    {/* <p
+                      className="listing-description"
+                      dangerouslySetInnerHTML={{
+                        __html: searchInput
+                          ? item.values_.description.replaceAll(
+                              reSearch,
+                              '<b>$1</b>',
+                            )
+                          : item.values_.description,
+                      }}
+                    ></p> */}
+                    <div className="slot-bottom">
+                      <div className="result-bottom">
+                        {item.values_.info ? (
+                          <div className="result-info">
+                            <span className="result-info-title">Info: </span>
+                            <span>
+                              {isValidURL(item.values_.info) ? (
+                                <a
+                                  href={item.values_.info}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                >
+                                  {item.values_.info}
+                                </a>
+                              ) : (
+                                <span>{item.values_.info}</span>
+                              )}
+                            </span>
+                          </div>
+                        ) : (
+                          ''
+                        )}
+
+                        {item.values_.project ? (
+                          <div className="result-info">
+                            <span className="result-info-title">Project: </span>
+                            <span>{item.values_.project}</span>
+                          </div>
+                        ) : (
+                          ''
+                        )}
+
+                        {item.values_.country ? (
+                          <div className="result-info">
+                            <span className="result-info-title">Country: </span>
+                            <span>{item.values_.country}</span>
+                          </div>
+                        ) : (
+                          ''
+                        )}
+
+                        {item.values_.project_link ? (
+                          <div className="result-info">
+                            <span className="result-info-title">
+                              Project link:{' '}
+                            </span>
+                            <span>
+                              {isValidURL(item.values_.project_link) ? (
+                                <a
+                                  href={item.values_.project_link}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                >
+                                  {item.values_.project_link}
+                                </a>
+                              ) : (
+                                <span>{item.values_.project_link}</span>
+                              )}
+                            </span>
+                          </div>
+                        ) : (
+                          ''
+                        )}
+
+                        <div
+                          className="result-info show-on-map"
+                          tabIndex="0"
+                          role="button"
+                          onKeyDown={() => {}}
+                          onClick={() => {
+                            map
+                              .getInteractions()
+                              .array_[9].getFeatures()
+                              .clear();
+                            // scroll to the map
+                            scrollToElement('ol-map-container');
+
+                            zoomMapToFeatures(map, [item], 5000);
+                            onSelectedCase(item.values_);
+
+                            const popupOverlay =
+                              document.getElementById('popup-overlay');
+                            popupOverlay.style.visibility = 'visible';
+
+                            setTimeout(() => {
+                              const coords =
+                                item.values_.geometry.flatCoordinates;
+                              const pixel = map.getPixelFromCoordinate(coords);
+                              map
+                                .getInteractions()
+                                .array_[9].getFeatures()
+                                .push(map.getFeaturesAtPixel(pixel)[0]);
+                            }, 1100);
+                          }}
+                        >
+                          <span className="result-info-title">Show on map</span>
+                          <i className="icon ri-road-map-line"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+      {!selectedCase ? (
+        <div className="search-body-footer">
+          <div className="ui centered grid">
+            <div className="center aligned column">
+              <div className="prev-next-paging">
+                <div className="paging-wrapper">
+                  {currentPage !== 1 ? (
+                    <button
+                      className="ui button prev double-angle"
+                      onClick={() => {
+                        setCurrentPage(1);
+                      }}
+                    ></button>
+                  ) : (
+                    ''
+                  )}
+                  {currentPage !== 1 ? (
+                    <button
+                      className="ui button prev single-angle"
+                      onClick={() => {
+                        setCurrentPage(currentPage - 1);
+                      }}
+                    ></button>
+                  ) : (
+                    ''
+                  )}
+                  {Array.from(Array(numberOfPages).keys()).map((index) => {
+                    const pageNr = index + 1;
+                    return showPageNr(pageNr, currentPage, numberOfPages) ? (
+                      <button
+                        className={
+                          'ui button pagination-item' +
+                          (currentPage === pageNr ? ' active' : '')
+                        }
+                        onClick={() => {
+                          setCurrentPage(pageNr);
+                        }}
+                      >
+                        {pageNr}
+                      </button>
+                    ) : (
+                      ''
+                    );
+                  })}
+                  {currentPage !== numberOfPages ? (
+                    <button
+                      className="ui button next single-angle"
+                      onClick={() => {
+                        setCurrentPage(currentPage + 1);
+                      }}
+                    ></button>
+                  ) : (
+                    ''
+                  )}
+                  {currentPage !== numberOfPages ? (
+                    <button
+                      className="ui button next double-angle"
+                      onClick={() => {
+                        setCurrentPage(numberOfPages);
+                      }}
+                    ></button>
+                  ) : (
+                    ''
+                  )}{' '}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        ''
+      )}
+    </>
+  );
+}

package/src/components/Blocks/DemoSitesExplorer/DemoSitesMap.jsx

@@ -0,0 +1,230 @@
+import React from 'react';
+
+import cx from 'classnames';
+
+import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+
+import InfoOverlay from './InfoOverlay';
+import FeatureInteraction from './FeatureInteraction';
+import DemoSitesList from './DemoSitesListing';
+import { useMapContext } from '@eeacms/volto-openlayers-map/api';
+
+import { centerAndResetMapZoom, getFeatures, scrollToElement } from './utils';
+
+const styleCache = {};
+const MapContextGateway = ({ setMap }) => {
+  const { map } = useMapContext();
+  React.useEffect(() => {
+    setMap(map);
+  }, [map, setMap]);
+  return null;
+};
+
+export default function DemoSitesMap(props) {
+  const {
+    items,
+    activeItems,
+    hideFilters,
+    selectedCase,
+    onSelectedCase,
+    searchInput,
+    map,
+    setMap,
+  } = props;
+  const features = getFeatures(items);
+  const [resetMapButtonClass, setResetMapButtonClass] =
+    React.useState('inactive');
+
+  const [tileWMSSources] = React.useState([
+    new ol.source.TileWMS({
+      url: 'https://gisco-services.ec.europa.eu/maps/service',
+      params: {
+        // LAYERS: 'OSMBlossomComposite', OSMCartoComposite, OSMPositronComposite
+        LAYERS: 'OSMPositronComposite',
+        TILED: true,
+      },
+      serverType: 'geoserver',
+      transition: 0,
+    }),
+  ]);
+  const [pointsSource] = React.useState(
+    new ol.source.Vector({
+      features,
+    }),
+  );
+
+  const [clusterSource] = React.useState(
+    new ol.source.Cluster({
+      distance: 19,
+      source: pointsSource,
+    }),
+  );
+
+  React.useEffect(() => {
+    if (activeItems) {
+      pointsSource.clear();
+      pointsSource.addFeatures(getFeatures(activeItems));
+    }
+  }, [activeItems, pointsSource]);
+
+  React.useEffect(() => {
+    if (!map) return null;
+
+    const moveendListener = (e) => {
+      // console.log('map.getView()', map.getView());
+      // console.log('selectedCase', selectedCase);
+      const mapZoom = Math.round(map.getView().getZoom() * 10) / 10;
+      const mapCenter = map.getView().getCenter();
+
+      if (selectedCase) {
+        const coords = selectedCase.geometry.flatCoordinates;
+        const pixel = map.getPixelFromCoordinate(coords);
+        map.getInteractions().array_[9].getFeatures().clear();
+        map
+          .getInteractions()
+          .array_[9].getFeatures()
+          .push(map.getFeaturesAtPixel(pixel)[0]);
+      } else {
+        map.getInteractions().array_[9].getFeatures().clear();
+      }
+
+      if (
+        mapZoom === 4 &&
+        JSON.stringify(mapCenter) ===
+          JSON.stringify(ol.proj.transform([10, 49], 'EPSG:4326', 'EPSG:3857'))
+      ) {
+        setResetMapButtonClass('inactive');
+      } else {
+        setResetMapButtonClass('active');
+      }
+    };
+
+    map.on('moveend', moveendListener);
+
+    return () => {
+      map.un('moveend', moveendListener);
+    };
+  }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass]);
+
+  const clusterStyle = React.useMemo(
+    () => selectedClusterStyle(selectedCase),
+    [selectedCase],
+  );
+
+  const MapWithSelection = React.useMemo(() => Map, []);
+  // console.log('render');
+
+  return features.length > 0 ? (
+    <div id="ol-map-container">
+      <MapWithSelection
+        view={{
+          center: ol.proj.fromLonLat([10, 54]),
+          showFullExtent: true,
+          zoom: 2.5,
+        }}
+        pixelRatio={1}
+        // controls={ol.control.defaults({ attribution: false })}
+      >
+        <Controls attribution={false} />
+        <Layers>
+          {hideFilters ? null : (
+            <button
+              className={cx(
+                'reset-map-button ui button secondary',
+                String(resetMapButtonClass),
+              )}
+              onClick={() => {
+                scrollToElement('search-input');
+                onSelectedCase(null);
+                centerAndResetMapZoom(map);
+                map.getInteractions().array_[9].getFeatures().clear();
+              }}
+            >
+              <span className="result-info-title">Reset map</span>
+              <i className="icon ri-map-2-line"></i>
+            </button>
+          )}
+          <InfoOverlay
+            selectedFeature={selectedCase}
+            onFeatureSelect={onSelectedCase}
+            layerId={tileWMSSources[0]}
+            hideFilters={hideFilters}
+          />
+          <FeatureInteraction
+            onFeatureSelect={onSelectedCase}
+            hideFilters={hideFilters}
+            selectedCase={selectedCase}
+          />
+          <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+          <Layer.Vector
+            style={clusterStyle}
+            source={clusterSource}
+            zIndex={1}
+          />
+          <MapContextGateway setMap={setMap} />
+        </Layers>
+      </MapWithSelection>
+      {hideFilters ? null : (
+        <DemoSitesList
+          map={map}
+          activeItems={activeItems}
+          selectedCase={selectedCase}
+          onSelectedCase={onSelectedCase}
+          pointsSource={pointsSource}
+          searchInput={searchInput}
+        />
+      )}
+    </div>
+  ) : null;
+}
+
+const selectedClusterStyle = (selectedFeature) => {
+  function _clusterStyle(feature) {
+    const size = feature.get('features').length;
+    let style = styleCache[size];
+
+    if (!style) {
+      style = new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 12 + Math.min(Math.floor(size / 3), 10),
+          stroke: new ol.style.Stroke({
+            color: '#fff',
+          }),
+          fill: new ol.style.Fill({
+            // 309ebc blue 3 + green 3 mix
+            color: '#309ebc', // #006BB8 #309ebc
+          }),
+        }),
+        text: new ol.style.Text({
+          text: size.toString(),
+          fill: new ol.style.Fill({
+            color: '#fff',
+          }),
+        }),
+      });
+      styleCache[size] = style;
+    }
+
+    if (size === 1) {
+      // let color = feature.values_.features[0].values_['color'];
+      let color = '#50B0A4'; // #0083E0 #50B0A4
+
+      return new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 6,
+          fill: new ol.style.Fill({
+            color: '#fff',
+          }),
+          stroke: new ol.style.Stroke({
+            color: color,
+            width: 6,
+          }),
+        }),
+      });
+    } else {
+      return style;
+    }
+  }
+  return _clusterStyle;
+};