@eeacms/volto-n2k 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -4,11 +4,28 @@ 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.1.1](https://github.com/eea/volto-n2k/compare/1.1.0...1.1.1) - 12 November 2024
+### [1.1.3](https://github.com/eea/volto-n2k/compare/1.1.2...1.1.3) - 9 January 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`5364109`](https://github.com/eea/volto-n2k/commit/536410947c52c860c6c51ddd73f3d829880cadbe)]
+- style: Automated code fix [eea-jenkins - [`6c96546`](https://github.com/eea/volto-n2k/commit/6c965460c1d7cfd124981b68e8db64e204846a3d)]
 
 #### :hammer_and_wrench: Others
 
-- use the correct object_list widget [Miu Razvan - [`94de8ee`](https://github.com/eea/volto-n2k/commit/94de8ee0980388e395cf679fcdae2f4b0da3fbba)]
+- fix sonarqube errors [Claudia Ifrim - [`bbd9b7a`](https://github.com/eea/volto-n2k/commit/bbd9b7a0fb6acf40c3edbf5e2a034b7df0e2048b)]
+- comment filters for habitats, fix z-index for filters on species list [Claudia Ifrim - [`44533aa`](https://github.com/eea/volto-n2k/commit/44533aa781b3b374320071b7cab0adbad322ad5b)]
+- fix ImageText editor [Miu Razvan - [`67e6611`](https://github.com/eea/volto-n2k/commit/67e66113d289d5b3984909aee94e6b343fcd69a9)]
+- Make site habitats list work la species list [Miu Razvan - [`498e995`](https://github.com/eea/volto-n2k/commit/498e9955882bba9c2c549ab29dce5b988f36f489)]
+### [1.1.2](https://github.com/eea/volto-n2k/compare/1.1.1...1.1.2) - 11 December 2024
+
+#### :hammer_and_wrench: Others
+
+- don't run cypress [Miu Razvan - [`3ff98b8`](https://github.com/eea/volto-n2k/commit/3ff98b8b0da5b594e701c517c562df31f8bdaf82)]
+- fix tests [Miu Razvan - [`0b2d0e0`](https://github.com/eea/volto-n2k/commit/0b2d0e0c5317bc6ac81da56d2bb225ae8d782085)]
+- Fix habitats/species banner, ref #278618 [Miu Razvan - [`b73d5c7`](https://github.com/eea/volto-n2k/commit/b73d5c73ca3f6d77c0bf0058bed453d404015e03)]
+### [1.1.1](https://github.com/eea/volto-n2k/compare/1.1.0...1.1.1) - 13 November 2024
+
 ### [1.1.0](https://github.com/eea/volto-n2k/compare/1.0.35...1.1.0) - 7 November 2024
 
 #### :bug: Bug Fixes

package/package.json

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

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

@@ -104,77 +104,82 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [JSON.stringify(activePageResults)]);
 
+  if (__SERVER__) return null;
+
   return (
-    <div className="explore-habitats-wrapper full-width">
-      <div className="explore-habitats">
-        <Map
-          view={{
-            center: proj.fromLonLat([20, 50]),
-            showFullExtent: true,
-            zoom: 5,
-            ...(options.extent ? { extent: options.extent } : {}),
-          }}
-          pixelRatio={1}
-        >
-          <Layers>
-            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
-            <Layer.Tile source={tileWMSSources[1]} zIndex={1} />
-            <Layer.Vector
-              source={vectorSource}
-              title="highlightLayer"
-              style={
-                new style.Style({
-                  fill: new style.Fill({
-                    color: 'rgba(255,255,255,0.4)',
-                  }),
-                  stroke: new style.Stroke({
-                    color: '#00A390',
-                    // color: '#F8E473',
-                    width: 3,
-                  }),
-                  image: new style.Circle({
-                    radius: 5,
-                    fill: new style.Fill({ color: 'rgba(4, 167, 125,0.6)' }),
-                    // fill: new style.Fill({ color: 'rgba(248,228,115,0.6)' }),
+    __CLIENT__ && (
+      <div className="explore-habitats-wrapper full-width">
+        <div className="explore-habitats">
+          <Map
+            view={{
+              center: proj.fromLonLat([20, 50]),
+              showFullExtent: true,
+              zoom: 5,
+              ...(options.extent ? { extent: options.extent } : {}),
+            }}
+            pixelRatio={1}
+          >
+            <Layers>
+              <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+              <Layer.Tile source={tileWMSSources[1]} zIndex={1} />
+              <Layer.Vector
+                source={vectorSource}
+                title="highlightLayer"
+                style={
+                  new style.Style({
+                    fill: new style.Fill({
+                      color: 'rgba(255,255,255,0.4)',
+                    }),
                     stroke: new style.Stroke({
-                      color: 'rgba(242, 180, 87, 1)',
-                      width: 2,
+                      color: '#00A390',
+                      // color: '#F8E473',
+                      width: 3,
+                    }),
+                    image: new style.Circle({
+                      radius: 5,
+                      fill: new style.Fill({ color: 'rgba(4, 167, 125,0.6)' }),
+                      // fill: new style.Fill({ color: 'rgba(248,228,115,0.6)' }),
+                      stroke: new style.Stroke({
+                        color: 'rgba(242, 180, 87, 1)',
+                        width: 2,
+                      }),
                     }),
-                  }),
-                })
-              }
-              zIndex={2}
+                  })
+                }
+                zIndex={2}
+              />
+            </Layers>
+            <Controls attribution={true} zoom={false} />
+            <Interactions
+              doubleClickZoom={true}
+              dragAndDrop={false}
+              dragPan={true}
+              keyboardPan={true}
+              keyboardZoom={true}
+              mouseWheelZoom={true}
+              pointer={false}
+              select={false}
             />
-          </Layers>
-          <Controls attribution={true} zoom={false} />
-          <Interactions
-            doubleClickZoom={true}
-            dragAndDrop={false}
-            dragPan={true}
-            keyboardPan={true}
-            keyboardZoom={true}
-            mouseWheelZoom={true}
-            pointer={false}
-            select={false}
-          />
-        </Map>
+          </Map>
+        </div>
+        <Container>
+          <Message className="map-info-notice" style={{ color: '#005248' }}>
+            <p>
+              The designations employed and the presentation of material on this
+              map do not imply the expression of any opinion whatsoever on the
+              part of the European Union concerning the legal status of any
+              country, territory, city or area or of its authorities, or
+              concerning the delimitation of its frontiers or boundaries.
+            </p>
+            <p>
+              <strong>Note:</strong> When you perform a search we will highlight
+              only the results available on the active page of the results
+              table.
+            </p>
+          </Message>
+        </Container>
       </div>
-      <Container>
-        <Message className="map-info-notice" style={{ color: '#005248' }}>
-          <p>
-            The designations employed and the presentation of material on this
-            map do not imply the expression of any opinion whatsoever on the
-            part of the European Union concerning the legal status of any
-            country, territory, city or area or of its authorities, or
-            concerning the delimitation of its frontiers or boundaries.
-          </p>
-          <p>
-            <strong>Note:</strong> When you perform a search we will highlight
-            only the results available on the active page of the results table.
-          </p>
-        </Message>
-      </Container>
-    </div>
+    )
   );
 };
 

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

@@ -11,6 +11,7 @@ import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
 import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
 
 import './style.less';
+import 'swiper/css';
 
 const SwiperLoader = loadable.lib(() => import('swiper'));
 const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
@@ -114,7 +115,9 @@ const _View = (props) => {
                 </>
               )}
               {!!attribution_copyright[activeSlide] && (
-                <p>{attribution_copyright[activeSlide]}</p>
+                <p title={attribution_copyright[activeSlide]}>
+                  {attribution_copyright[activeSlide]}
+                </p>
               )}
             </div>
             {__CLIENT__ && (

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

@@ -18,8 +18,7 @@ const Edit = (props) => {
   const { data = {}, selected = false } = props;
   const schema = getSchema();
   const value = { children: data.value || [], isVoid: Editor.isVoid };
-  const valueUndefined =
-    !value.children.length || Editor.string(value, []) === '';
+  const valueUndefined = !value.children.length;
 
   const handleKeyDown = (e, index, { disableEnter = false } = {}) => {
     if (e.key === 'Enter' && !e.shiftKey && !disableEnter) {

package/src/components/manage/Blocks/SiteHabitatsList/Filters/HabitatsGroups.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import cx from 'classnames';
+
+const HabitatsGroups = (props) => {
+  const [habitatsGroups, setHabitatsGroups] = React.useState([]);
+  const {
+    provider_data = {},
+    activeHabitatsGroup = 'All',
+    setActiveHabitatsGroup = () => {},
+  } = props;
+
+  React.useEffect(() => {
+    setHabitatsGroups(
+      [
+        ...(provider_data.habitat_group?.length ? ['All'] : []),
+        ...new Set(provider_data.habitat_group || []),
+      ].sort((a, b) => {
+        if (a === 'All') return -1;
+        if (b === 'All') return 1;
+        return a.localeCompare(b);
+      }),
+    );
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(provider_data)]);
+
+  return (
+    <div className="habitats-groups">
+      <Container>
+        {habitatsGroups.map((species) => (
+          <button
+            key={`group-filter-${species}`}
+            className={cx({
+              'habitats-group': true,
+              active: activeHabitatsGroup === species,
+            })}
+            onClick={() => {
+              setActiveHabitatsGroup(species);
+            }}
+          >
+            {species}
+          </button>
+        ))}
+      </Container>
+    </div>
+  );
+};
+
+export default HabitatsGroups;

package/src/components/manage/Blocks/SiteHabitatsList/Filters/SortBy.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Dropdown } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import upSVG from '@plone/volto/icons/up.svg';
+import downSVG from '@plone/volto/icons/down.svg';
+
+const antonyms = {
+  ASC: 'DESC',
+  DESC: 'ASC',
+};
+
+const View = (props) => {
+  const { sortBy, setSortBy } = props;
+
+  const sortByOptions = [
+    { text: 'Name', value: 'scientific_name', key: 'scientific_name' },
+  ];
+
+  return (
+    <Dropdown aria-label="Sort habitats by" text="SORT BY" floating button>
+      <Dropdown.Menu>
+        {sortByOptions.map((option) => (
+          <Dropdown.Item
+            key={option.text}
+            active={sortBy === option.value}
+            onClick={(e, data) => {
+              const activePoperty = sortBy[0];
+              const activeOrder = sortBy[1];
+              const newOrder =
+                activePoperty === option.value ? antonyms[activeOrder] : 'ASC';
+              setSortBy([option.value, newOrder]);
+            }}
+          >
+            <p>
+              {option.text}
+              {sortBy[0] === option.value ? (
+                <Icon
+                  name={sortBy[1] === 'ASC' ? upSVG : downSVG}
+                  size="14px"
+                />
+              ) : (
+                ''
+              )}
+            </p>
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/SiteHabitatsList/Filters/View.jsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import {
+  Container,
+  Dropdown,
+  Sidebar,
+  Checkbox,
+  Label,
+} from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+// import filterSVG from '@plone/volto/icons/filter.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+import HabitatsGroups from './HabitatsGroups';
+import SortBy from './SortBy';
+
+import { filtersLabels } from '../utils';
+
+const SidebarFilter = (props) => {
+  const { activeFilters, filters, filter, index, setActiveFilters } = props;
+  return (
+    <div className="filter">
+      <div className="header">
+        <p className="title">
+          {filtersLabels[filter].getTitle().toUpperCase()}
+          {!index ? (
+            <button
+              className="reset-button"
+              onClick={() => {
+                setActiveFilters({});
+              }}
+            >
+              Reset
+            </button>
+          ) : (
+            ''
+          )}
+        </p>
+      </div>
+      {Object.keys(filters[filter]).map((field) => (
+        <div key={filtersLabels[filter][field]} className="checkbox-wrapper">
+          <Checkbox
+            name={filter}
+            label={filtersLabels[filter][field]}
+            checked={activeFilters[filter]?.includes(field) || false}
+            onClick={() => {
+              const newActiveFilters = { ...activeFilters };
+              if (newActiveFilters[filter]?.includes(field)) {
+                newActiveFilters[filter].splice(
+                  newActiveFilters[filter].indexOf(field),
+                  1,
+                );
+              } else {
+                newActiveFilters[filter] = [
+                  ...(activeFilters[filter] || []),
+                  field,
+                ];
+              }
+              if (!newActiveFilters[filter].length) {
+                delete newActiveFilters[filter];
+              }
+              setActiveFilters(newActiveFilters);
+            }}
+          />
+          <p className="count">{filters[filter][field]}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const View = (props) => {
+  const [visible, setVisible] = React.useState(false);
+  const [filters, setFilters] = React.useState({});
+  const {
+    provider_data,
+    activeFilters,
+    filteredHabitats,
+    pagination,
+    sortBy,
+    habitats,
+    setActiveFilters,
+    setPagination,
+    setSortBy,
+  } = props;
+  const itemsPerPageOptions = [
+    { key: '10', text: '10', value: 10 },
+    { key: '25', text: '25', value: 25 },
+    { key: '50', text: '50', value: 50 },
+    { key: '100', text: '100', value: 100 },
+  ];
+
+  const updateFilters = () => {
+    const newFilters = {};
+    Object.keys(filtersLabels).forEach((filter) => {
+      newFilters[filter] = {};
+      for (let key in filtersLabels[filter]) {
+        if (key !== 'getTitle') {
+          newFilters[filter][key] =
+            filteredHabitats.filter((habitats) => {
+              return !!habitats.filter((habitat) => habitat[filter] === key)
+                .length;
+            }).length || 'none';
+        }
+      }
+    });
+    setFilters(newFilters);
+  };
+
+  React.useEffect(() => {
+    if (provider_data && habitats.length) {
+      updateFilters();
+    }
+    /* eslint-disable-next-line */
+  }, [filteredHabitats]);
+
+  return (
+    <div className="habitats-filters">
+      <HabitatsGroups {...props} />
+      <Container>
+        <div className="active-filters">
+          {Object.keys(activeFilters).map((filter) =>
+            activeFilters[filter].map((field) => (
+              <Label
+                className="active-filter"
+                key={`active-filter-${field}`}
+                as="span"
+              >
+                {filtersLabels[filter][field]}
+                <Icon
+                  name={clearSVG}
+                  size="18px"
+                  onClick={() => {
+                    const newActiveFilters = { ...activeFilters };
+                    if (newActiveFilters[filter]?.includes(field)) {
+                      newActiveFilters[filter].splice(
+                        newActiveFilters[filter].indexOf(field),
+                        1,
+                      );
+                    }
+                    if (!newActiveFilters[filter].length) {
+                      delete newActiveFilters[filter];
+                    }
+                    setActiveFilters(newActiveFilters);
+                  }}
+                />
+              </Label>
+            )),
+          )}
+        </div>
+        <div className="toolbar">
+          <SortBy sortBy={sortBy} setSortBy={setSortBy} />
+          <Dropdown
+            aria-label="Set number of habitats per page"
+            placeholder="Items per page"
+            value={pagination.itemsPerPage}
+            floating
+            button
+            options={itemsPerPageOptions}
+            onChange={(e, data) => {
+              setPagination({ ...pagination, itemsPerPage: data.value });
+            }}
+          />
+          {/* <button aria-label="Set filters" onClick={() => setVisible(!visible)}>
+            <Icon name={filterSVG} size="24px" />
+          </button> */}
+        </div>
+      </Container>
+      <Sidebar
+        as="div"
+        className="z-full"
+        animation="overlay"
+        direction="right"
+        onHide={() => setVisible(false)}
+        vertical
+        visible={visible}
+        width="wide"
+      >
+        <div className="sidebar-header">
+          <p className="title">Filters</p>
+          <button className="clear-button" onClick={() => setVisible(false)}>
+            <Icon name={clearSVG} size="20px" color="#fff" />
+          </button>
+        </div>
+        <div className="filters">
+          {Object.keys(filters).map((filter, index) => (
+            <SidebarFilter
+              key={filter}
+              index={index}
+              activeFilters={activeFilters}
+              filters={filters}
+              filter={filter}
+              setActiveFilters={setActiveFilters}
+            />
+          ))}
+        </div>
+      </Sidebar>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/SiteHabitatsList/Filters/index.js

@@ -0,0 +1,4 @@
+import HabitatsGroupsFilters from './HabitatsGroups';
+import Filters from './View';
+
+export { HabitatsGroupsFilters, Filters };