@eeacms/volto-n2k 1.1.1 → 1.1.3

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

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

@@ -49,39 +49,47 @@ div#view .site-species-list .species-list .ui.container > * {
     .species-groups {
       margin-bottom: 1rem;
       background-color: #00a390;
-
-      .ui.container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow-x: auto;
-
-        @media only screen and (max-width: 765px) {
-          justify-content: flex-start;
+      white-space: nowrap;
+
+      button.species-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);
         }
 
-        button.species-group {
-          padding: 1rem;
-          border: none;
-          background-color: transparent;
-          color: #fff !important;
-          cursor: pointer;
-          font-size: 16px;
-          text-transform: uppercase;
-
-          &.active,
-          &:hover {
-            padding-bottom: calc(1rem - 3px);
-            border-bottom: 3px solid #fff;
+        &.active,
+        &:hover {
+          &::after {
+            background: #ffffff;
           }
         }
       }
+
+      .ui.container {
+        display: block;
+        overflow-x: auto;
+        text-align: center;
+      }
     }
 
     .ui.sidebar {
       background-color: #fff !important;
 
       &.right.visible {
+        z-index: 800;
         box-shadow: 0px 0px 13px -5px #000000;
       }
 

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

@@ -12,6 +12,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'));