@eeacms/volto-n2k 1.1.2 → 1.1.3

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'
+  }`;
+};

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

@@ -0,0 +1,106 @@
+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 './style.less';
+
+const View = (props) => {
+  const [habitats, setHabitats] = React.useState({});
+  const [expandedHabitats, setExpandedHabitats] = React.useState([]);
+  const { provider_data = {}, placeholder = 'No results' } = props;
+
+  React.useEffect(() => {
+    const newHabitats = {};
+    if (provider_data?.habitat_group?.length) {
+      provider_data.habitat_group.forEach((habitat, index) => {
+        if (!newHabitats[habitat]) {
+          newHabitats[habitat] = [];
+        }
+        newHabitats[habitat].push(getObjectByIndex(provider_data, index));
+      });
+    }
+    setHabitats(newHabitats);
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(provider_data)]);
+
+  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>
+
+                {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>)
+                        </p>
+                      </div>
+                    ))
+                  : ''}
+              </div>
+            );
+          })
+      ) : (
+        <p>{placeholder}</p>
+      )}
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/SiteHabitatsListOld/index.js

@@ -0,0 +1,17 @@
+// import SiteHabitatsList from './View';
+// import getSchema from './schema';
+
+export default function applyConfig(config) {
+  // config.blocks.blocksConfig.custom_connected_block = {
+  //   ...config.blocks.blocksConfig.custom_connected_block,
+  //   blocks: {
+  //     ...config.blocks.blocksConfig.custom_connected_block.blocks,
+  //     site_habitats_list: {
+  //       view: SiteHabitatsList,
+  //       getSchema: getSchema,
+  //       title: 'Site habitats list',
+  //     },
+  //   },
+  // };
+  return config;
+}

package/src/components/manage/Blocks/SiteHabitatsListOld/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'Site habitats list',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

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

@@ -0,0 +1,70 @@
+.site-habitats-list {
+  .icon {
+    cursor: pointer;
+  }
+
+  .habitat {
+    padding: 1rem 2rem;
+    border: 1px solid #e8e8e8;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    background-color: #fff !important;
+
+    .habitat-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+
+      &.marginless {
+        margin-bottom: 0;
+      }
+    }
+
+    .habitat-name {
+      display: flex;
+      align-items: center;
+
+      h3 {
+        margin-right: 1rem;
+        margin-bottom: 0;
+        color: #013c60;
+        font-weight: 400;
+        line-height: 25px;
+      }
+
+      .count {
+        width: 24px;
+        height: 24px;
+        border-radius: 6px;
+        margin-bottom: 0;
+        background-color: #00a390;
+        color: #fff !important;
+        font-weight: bold;
+        line-height: 24px;
+        text-align: center;
+      }
+    }
+
+    .habitat-item {
+      .description {
+        color: #013c60;
+        font-size: 1.2rem;
+        font-weight: 400;
+
+        &:hover {
+          opacity: 0.9;
+        }
+      }
+
+      .coverage {
+        color: #8c8c8c;
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+      margin-bottom: 1rem;
+    }
+  }
+}

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

@@ -27,16 +27,18 @@ const View = (props) => {
       <div className="habitats-container">
         <Container className="habitats-wrapper">
           <div className="habitats-wrapper">
-            {Object.entries(habitats).map(([habitat, items], index) => (
-              <div key={index} className="habitat-box">
-                <div className="upper">
-                  <span>{items.length}</span>
+            {Object.keys(habitats)
+              .sort((a, b) => a.localeCompare(b))
+              .map((habitat, index) => (
+                <div key={index} className="habitat-box">
+                  <div className="upper">
+                    <span>{habitats[habitat].length}</span>
+                  </div>
+                  <div className="lower">
+                    <span>{habitat}</span>
+                  </div>
                 </div>
-                <div className="lower">
-                  <span>{habitat}</span>
-                </div>
-              </div>
-            ))}
+              ))}
           </div>
         </Container>
       </div>

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

@@ -35,16 +35,18 @@ const View = (props) => {
             </Grid.Row>
           </Grid> */}
           <div className="species-wrapper">
-            {Object.entries(data).map(([item, value], index) => (
-              <div key={index} className="species-box">
-                <div className="upper">
-                  <span>{value}</span>
-                </div>
-                <div className="lower">
-                  <span>{item}</span>
+            {Object.keys(data)
+              .sort((a, b) => a.localeCompare(b))
+              .map((species, index) => (
+                <div key={index} className="species-box">
+                  <div className="upper">
+                    <span>{data[species]}</span>
+                  </div>
+                  <div className="lower">
+                    <span>{species}</span>
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
           </div>
         </Container>
       </div>

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

@@ -13,7 +13,7 @@ const View = (props) => {
   const { sortBy, setSortBy } = props;
 
   const sortByOptions = [
-    { text: 'Alphabetical', value: 'scientific_name', key: 'scientific_name' },
+    { text: 'Name', value: 'scientific_name', key: 'scientific_name' },
   ];
 
   return (

package/src/components/manage/Blocks/SiteSpeciesList/Filters/SpeciesGroups.jsx

@@ -11,10 +11,16 @@ const SpeciesGroups = (props) => {
   } = props;
 
   React.useEffect(() => {
-    setSpeciesGroups([
-      ...(provider_data.species_group_name?.length ? ['All'] : []),
-      ...new Set(provider_data.species_group_name || []),
-    ]);
+    setSpeciesGroups(
+      [
+        ...(provider_data.species_group_name?.length ? ['All'] : []),
+        ...new Set(provider_data.species_group_name || []),
+      ].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)]);
 

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

@@ -167,6 +167,7 @@ const View = (props) => {
       </Container>
       <Sidebar
         as="div"
+        className="z-full"
         animation="overlay"
         direction="right"
         onHide={() => setVisible(false)}