@eeacms/volto-n2k 1.1.1 → 1.1.3

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

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

@@ -1,70 +1,281 @@
-.site-habitats-list {
-  .icon {
-    cursor: pointer;
-  }
+div#view .site-habitats-list .habitats-group-filter .ui.container > *,
+div#view .site-habitats-list .habitats-filters .ui.container > *,
+div#view .site-habitats-list .habitats-list .ui.container > * {
+  margin-bottom: 0;
+}
 
-  .habitat {
-    padding: 1rem 2rem;
-    border: 1px solid #e8e8e8;
-    border-radius: 10px;
-    margin-bottom: 1rem;
-    background-color: #fff !important;
+.site-habitats-list {
+  margin-top: -1em;
 
-    .habitat-toolbar {
+  .habitats-filters {
+    .ui.container {
       display: flex;
-      align-items: center;
       justify-content: space-between;
+
+      .active-filters {
+        .ui.label.active-filter {
+          display: inline-flex;
+          flex-flow: row;
+          align-items: center;
+          border: 1px solid #c5c5c5;
+          border-radius: 18px;
+          color: #000;
+          font-weight: 400;
+
+          svg.icon {
+            margin-right: 0;
+            margin-left: 0.5rem;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .toolbar {
+        display: flex;
+        flex-flow: row;
+        justify-content: center;
+
+        .ui.button.dropdown,
+        button {
+          border: 1px solid #0000001f;
+          margin-bottom: 0;
+          background-color: #fff !important;
+          color: #000;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .habitats-groups {
       margin-bottom: 1rem;
+      background-color: #00a390;
+      text-align: center;
+      white-space: nowrap;
+
+      button.habitats-group {
+        padding: 1rem;
+        border: none;
+        background-color: transparent;
+        color: #fff !important;
+        cursor: pointer;
+        font-size: 16px;
+        text-transform: uppercase;
+
+        &::after {
+          display: block;
+          width: calc(100% + 8px);
+          height: 3px;
+          margin-top: 2px;
+          background: transparent;
+          content: '';
+          transform: translateX(-4px);
+        }
 
-      &.marginless {
-        margin-bottom: 0;
+        &.active,
+        &:hover {
+          &::after {
+            background: #ffffff;
+          }
+        }
+      }
+
+      .ui.container {
+        display: block;
+        overflow-x: auto;
+        text-align: center;
       }
     }
 
-    .habitat-name {
-      display: flex;
-      align-items: center;
-
-      h3 {
-        margin-right: 1rem;
-        margin-bottom: 0;
-        color: #013c60;
-        font-weight: 400;
-        line-height: 25px;
+    .ui.sidebar {
+      background-color: #fff !important;
+
+      &.right.visible {
+        z-index: 800;
+        box-shadow: 0px 0px 13px -5px #000000;
       }
 
-      .count {
-        width: 24px;
-        height: 24px;
-        border-radius: 6px;
-        margin-bottom: 0;
+      .sidebar-header {
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 2rem 1rem;
         background-color: #00a390;
-        color: #fff !important;
-        font-weight: bold;
-        line-height: 24px;
-        text-align: center;
+
+        .title {
+          margin-bottom: 0;
+          color: #fff !important;
+          font-size: 20px;
+          font-weight: bold;
+        }
+
+        .clear-button {
+          border: none;
+          background-color: transparent;
+          cursor: pointer;
+        }
+      }
+
+      .filters {
+        padding: 2rem 0;
+
+        .filter {
+          padding: 0 1rem 1rem 1rem;
+          border-bottom: 2px solid #e0e0e0;
+          margin-bottom: 2rem;
+
+          .header {
+            padding: 0;
+            margin-bottom: 2rem;
+            background-color: transparent;
+
+            .title {
+              color: #000;
+              font-weight: 600;
+
+              .reset-button {
+                border: none;
+                margin-left: 1rem;
+                background-color: transparent;
+                color: #00a390;
+                cursor: pointer;
+
+                &:hover {
+                  opacity: 0.8;
+                }
+              }
+            }
+          }
+
+          .checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+
+            .count {
+              color: #636363;
+            }
+          }
+        }
       }
     }
+  }
 
-    .habitat-item {
-      .description {
-        color: #013c60;
-        font-size: 1.2rem;
-        font-weight: 400;
+  .habitats-list {
+    .ui.grid.habitats {
+      margin-top: 0;
+      margin-right: 0;
+      margin-bottom: 0;
 
-        &:hover {
-          opacity: 0.9;
+      .row {
+        padding: 1rem 0;
+      }
+
+      .habitats-photo {
+        overflow: hidden;
+        padding-right: 0;
+
+        img {
+          width: 100%;
+          height: 100%;
+          border-bottom-left-radius: 10px;
+          border-top-left-radius: 10px;
+          object-fit: cover;
+
+          @media only screen and (max-width: 767px) {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+          }
         }
       }
 
-      .coverage {
-        color: #8c8c8c;
+      .habitats-details {
+        display: flex;
+        flex-flow: column;
+        justify-content: space-between;
+        padding: 0;
+        background-color: #fff !important;
+        border-bottom-right-radius: 10px;
+        border-top-right-radius: 10px;
+
+        @media only screen and (max-width: 767px) {
+          margin-left: 0.625rem;
+          border-bottom-left-radius: 10px;
+          border-bottom-right-radius: 10;
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        .metadata {
+          padding: 0 2rem;
+          padding-top: 1rem;
+          margin-bottom: 1rem;
+
+          .name {
+            margin-bottom: 1rem;
+
+            a {
+              color: #013c60;
+              font-size: 25px;
+              font-weight: 400;
+            }
+
+            .code-2000 {
+              color: #0f8f22;
+            }
+          }
+
+          .habitat-data:not(:last-child) {
+            margin-bottom: 0.5rem;
+          }
+        }
+
+        .footer-metadata {
+          display: flex;
+          padding: 1rem 2rem;
+          border-top: 1px solid #e8e8e8;
+
+          p:not(.last-child) {
+            margin-right: 1rem;
+          }
+        }
+
+        .metadata,
+        .footer-metadata {
+          .blue {
+            color: #013c60;
+          }
+
+          .orange {
+            color: #ff9300;
+          }
+
+          .green {
+            color: #0f8f22;
+          }
+        }
       }
+    }
+
+    .ui.pagination.menu {
+      width: 100%;
+      justify-content: center;
+      background-color: transparent;
 
-      p {
-        margin-bottom: 0;
+      .item {
+        &.active {
+          color: #013c60;
+          font-weight: bold;
+        }
       }
-      margin-bottom: 1rem;
+    }
+
+    .empty {
+      margin-top: 3rem;
+      margin-bottom: 3rem !important;
+      text-align: left;
     }
   }
 }

package/src/components/manage/Blocks/SiteHabitatsList/utils.js

@@ -0,0 +1,33 @@
+export const filtersLabels = {
+  population_type: {
+    p: 'Permanent',
+    r: 'Reproducing',
+    c: 'Concentration',
+    w: 'Wintering',
+    getTitle: () => 'Population type',
+  },
+  counting_unit: {
+    i: 'Individuals',
+    p: 'Pairs',
+    getTitle: () => 'Unit',
+  },
+  abundance_category: {
+    C: 'Common',
+    R: 'Rare',
+    V: 'Very rare',
+    P: 'Present',
+    getTitle: () => 'Abundance',
+  },
+};
+
+export const getPopulationString = (min, max, prefix = '') => {
+  return `${prefix}Population: min: ${min || 'not reported'}, max: ${
+    max || 'not reported'
+  }`;
+};
+
+export const getLabelString = (label, key, prefix = '') => {
+  return `${prefix}${filtersLabels[label].getTitle()}: ${
+    filtersLabels[label]?.[key]?.toLowerCase() || key || 'not reported'
+  }`;
+};