@eeacms/volto-n2k 1.1.2 → 1.1.3

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.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
+
+- 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,8 +27,8 @@
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-resize-helper": "*",
-    "@eeacms/volto-tabs-block": "*",
     "@eeacms/volto-spotlight": "*",
+    "@eeacms/volto-tabs-block": "*",
     "d3": "^7.6.1",
     "d3-shape": "^3.1.0",
     "react-lazy-load-image-component": "1.5.1",

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 };

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

@@ -1,104 +1,234 @@
 import React from 'react';
-import findIndex from 'lodash/findIndex';
-import { Icon } from '@plone/volto/components';
 import { Link } from 'react-router-dom';
-import cx from 'classnames';
-import { getObjectByIndex } from '@eeacms/volto-n2k/helpers';
-import downKeySVG from '@plone/volto/icons/down-key.svg';
-import upKeySVG from '@plone/volto/icons/up-key.svg';
+import { Container, Pagination, Grid } from 'semantic-ui-react';
+import { getObjectByIndex, photoPlaceholders } from '@eeacms/volto-n2k/helpers';
+import { Filters } from './Filters';
+// import { getPopulationString, getLabelString } from './utils';
+
 import './style.less';
 
+const getCurrentPageLength = (pagination, arr) => {
+  const totalPages = Math.ceil(pagination.totalItems / pagination.itemsPerPage);
+  if (arr.length < pagination.itemsPerPage) return arr.length;
+  if (totalPages === pagination.activePage) {
+    return arr.length - (pagination.activePage - 1) * pagination.itemsPerPage;
+  }
+  return pagination.itemsPerPage;
+};
+
 const View = (props) => {
-  const [habitats, setHabitats] = React.useState({});
-  const [expandedHabitats, setExpandedHabitats] = React.useState([]);
-  const { provider_data = {}, placeholder = 'No results' } = props;
+  const {
+    provider_data = {},
+    placeholder = 'This site does not host any protected habitats',
+  } = props;
+  const dataReady = React.useRef(false);
+  const [activeHabitatsGroup, setActiveHabitatsGroup] = React.useState('All');
+  const [filters, setFilters] = React.useState({});
+  const [habitats, spetHabitats] = React.useState([]);
+  const [filteredHabitats, setFilteredHabitats] = React.useState([]);
+  const [pagination, setPagination] = React.useState({
+    activePage: 1,
+    totalItems: 0,
+    itemsPerPage: 10,
+  });
+  const [sortBy, setSortBy] = React.useState(['scientific_name', 'ASC']);
+
+  const getSortedHabitats = (habitats = []) => {
+    const property = sortBy[0];
+    const order = sortBy[1];
+
+    return habitats.sort((a, b) => {
+      const a_value = a[0][property];
+      const b_value = b[0][property];
+      if (a_value < b_value) return order === 'ASC' ? -1 : 1;
+      if (a_value > b_value) return order === 'ASC' ? 1 : -1;
+      return 0;
+    });
+  };
+
+  const getfilteredHabitats = (habitats = []) => {
+    const activeFilters = {
+      ...filters,
+      ...(activeHabitatsGroup !== 'All'
+        ? { habitat_group: [activeHabitatsGroup] }
+        : {}),
+    };
+
+    const filteredHabitats = habitats.filter((items, index) => {
+      let itemsHaveFilter = true;
+      Object.keys(activeFilters).forEach((filter) => {
+        let habitatHasFilter = false;
+        items.forEach((item) => {
+          if (activeFilters[filter].includes(item[filter])) {
+            habitatHasFilter = true;
+          }
+        });
+        if (!habitatHasFilter) {
+          itemsHaveFilter = false;
+        }
+      });
+      return itemsHaveFilter;
+    });
+
+    setPagination({
+      ...pagination,
+      activePage: 1,
+      totalItems: filteredHabitats.length,
+    });
+
+    return filteredHabitats;
+  };
 
   React.useEffect(() => {
-    const newHabitats = {};
-    if (provider_data?.habitat_group?.length) {
-      provider_data.habitat_group.forEach((habitat, index) => {
-        if (!newHabitats[habitat]) {
-          newHabitats[habitat] = [];
+    dataReady.current = false;
+    const habitatsIndex = {};
+    const newHabitats = [];
+    if (provider_data.scientific_name?.length) {
+      provider_data.scientific_name.forEach((_, index) => {
+        const habitat = getObjectByIndex(provider_data, index);
+        if (!(habitatsIndex[habitat.code_2000] >= 0)) {
+          habitatsIndex[habitat.code_2000] = index;
+        }
+        if (!newHabitats[habitatsIndex[habitat.code_2000]]) {
+          newHabitats[habitatsIndex[habitat.code_2000]] = [];
         }
-        newHabitats[habitat].push(getObjectByIndex(provider_data, index));
+        newHabitats[habitatsIndex[habitat.code_2000]].push(habitat);
       });
     }
-    setHabitats(newHabitats);
+    spetHabitats(getSortedHabitats(newHabitats.filter((habitats) => habitats)));
     /* eslint-disable-next-line */
   }, [JSON.stringify(provider_data)]);
 
+  React.useEffect(() => {
+    const filteredHabitats = getSortedHabitats(
+      getfilteredHabitats([...habitats]),
+    );
+    setFilteredHabitats(filteredHabitats);
+    /* eslint-disable-next-line */
+  }, [habitats, sortBy, activeHabitatsGroup, filters]);
+
   return (
-    <div className="site-habitats-list">
-      {Object.keys(habitats)?.length ? (
-        Object.keys(habitats)
-          .sort((a, b) => a.localeCompare(b))
-          .map((habitat) => {
-            const expanded = expandedHabitats.includes(habitat);
-            return (
-              <div className="habitat" key={habitat}>
-                <div
-                  className={cx({
-                    'habitat-toolbar': true,
-                    marginless: !expanded,
-                  })}
-                >
-                  <div className="habitat-name">
-                    <h3>{habitat}</h3>
-                    <p className="count">{habitats[habitat].length}</p>
-                  </div>
-                  <Icon
-                    name={expanded ? upKeySVG : downKeySVG}
-                    onClick={(e) => {
-                      const index = findIndex(
-                        expandedHabitats,
-                        (name) => name === habitat,
-                      );
-                      if (index === -1) {
-                        setExpandedHabitats((prevExpandedHabitats) => [
-                          ...prevExpandedHabitats,
-                          habitat,
-                        ]);
-                      } else {
-                        setExpandedHabitats((prevExpandedHabitats) => {
-                          const newExpandedHabitats = [...prevExpandedHabitats];
-                          newExpandedHabitats.splice(index, 1);
-                          return newExpandedHabitats;
-                        });
-                      }
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }}
-                    color="#8C8C8C"
-                    size="32px"
-                  />
-                </div>
+    <div className="site-habitats-list full-width">
+      {props.mode !== 'edit' && habitats.length ? (
+        <Filters
+          {...props}
+          activeHabitatsGroup={activeHabitatsGroup}
+          activeFilters={filters}
+          filteredHabitats={filteredHabitats}
+          pagination={pagination}
+          sortBy={sortBy}
+          habitats={habitats}
+          setActiveHabitatsGroup={setActiveHabitatsGroup}
+          setActiveFilters={setFilters}
+          setPagination={setPagination}
+          setSortBy={setSortBy}
+        />
+      ) : (
+        ''
+      )}
 
-                {expanded
-                  ? habitats[habitat].map((item, index) => (
-                      <div
-                        className="habitat-item"
-                        key={`${habitat}-${index}-item`}
-                      >
-                        <Link
-                          className="description"
-                          to={`/habitats/${item.code_2000}`}
-                        >
-                          {item.habitat_description} ({item.code_2000})
-                        </Link>
-                        <p className="coverage">
-                          {item.coverage_ha.toFixed(2)} ha (
-                          {(item.coverage_ha / 100).toFixed(4)} km
-                          <sup>2</sup>)
+      <div className="habitats-list">
+        <Container>
+          {filteredHabitats.length ? (
+            Array.from(
+              {
+                length: getCurrentPageLength(pagination, filteredHabitats),
+              },
+              (v, k) =>
+                k + (pagination.activePage - 1) * pagination.itemsPerPage,
+            ).map((index) => {
+              const habitatsData = filteredHabitats[index][0];
+
+              return (
+                <Grid
+                  className="habitats"
+                  key={`${index}-${habitatsData.code_2000}`}
+                  columns="12"
+                >
+                  <Grid.Row>
+                    <Grid.Column
+                      mobile={12}
+                      tablet={3}
+                      computer={2}
+                      className="habitats-photo"
+                    >
+                      <img
+                        src={
+                          habitatsData.picture_url ||
+                          photoPlaceholders[habitatsData.habitat_group] ||
+                          photoPlaceholders.Birds
+                        }
+                        alt={habitatsData.habitat_group}
+                      />
+                    </Grid.Column>
+                    <Grid.Column
+                      mobile={12}
+                      tablet={9}
+                      computer={10}
+                      className="habitats-details"
+                    >
+                      <div className="metadata">
+                        <div className="name">
+                          <Link
+                            as="h3"
+                            to={`/habitats/${habitatsData.code_2000}`}
+                          >
+                            {habitatsData.scientific_name
+                              ? habitatsData.scientific_name + ' '
+                              : ''}
+                            <span className="code-2000">
+                              {' '}
+                              - {habitatsData.code_2000 || 'NA'}
+                            </span>
+                          </Link>
+                        </div>
+                        {filteredHabitats[index].map((habitat, index) => (
+                          <p
+                            className="habitat-data blue"
+                            style={{ fontSize: '1.2rem' }}
+                            key={`habitat-${index}-${habitat.code_2000}`}
+                          >
+                            Cover: {habitat.coverage_ha.toFixed(2)} ha (
+                            {(habitat.coverage_ha / 100).toFixed(4)} km²)
+                            {habitat.habitat_prioriy
+                              ? `; Priority habitat type: ${habitat.habitat_prioriy}`
+                              : ''}
+                          </p>
+                        ))}
+                      </div>
+                      <div className="footer-metadata">
+                        <p className="green">
+                          Appears in {habitatsData.number_sites} sites
                         </p>
                       </div>
-                    ))
-                  : ''}
-              </div>
-            );
-          })
-      ) : (
-        <p>{placeholder}</p>
-      )}
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              );
+            })
+          ) : habitats.length ? (
+            <div className="empty">No results</div>
+          ) : (
+            ''
+          )}
+          {!habitats?.length ? <div className="empty">{placeholder}</div> : ''}
+          {pagination.totalItems > 0 ? (
+            <Pagination
+              activePage={pagination.activePage}
+              totalPages={Math.ceil(
+                pagination.totalItems / pagination.itemsPerPage,
+              )}
+              onPageChange={(e, data) => {
+                setPagination({ ...pagination, activePage: data.activePage });
+              }}
+              prevItem={null}
+              nextItem={null}
+            />
+          ) : (
+            ''
+          )}
+        </Container>
+      </div>
     </div>
   );
 };