@eeacms/volto-n2k 0.1.1

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

@@ -0,0 +1,253 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Container, Pagination, Grid } from 'semantic-ui-react';
+import { getObjectByIndex } from '@eeacms/volto-n2k/helpers';
+import { Filters } from './Filters';
+import { photoPlaceholders } from '@eeacms/volto-n2k/helpers';
+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 {
+    provider_data = {},
+    placeholder = 'This site does not host any protected species',
+  } = props;
+  const dataReady = React.useRef(false);
+  const [activeSpeciesGroup, setActiveSpeciesGroup] = React.useState('All');
+  const [filters, setFilters] = React.useState({});
+  const [species, setSpecies] = React.useState([]);
+  const [filteredSpecies, setFilteredSpecies] = React.useState([]);
+  const [pagination, setPagination] = React.useState({
+    activePage: 1,
+    totalItems: 0,
+    itemsPerPage: 10,
+  });
+  const [sortBy, setSortBy] = React.useState(['scientific_name', 'ASC']);
+
+  const getSortedSpecies = (species = []) => {
+    const property = sortBy[0];
+    const order = sortBy[1];
+
+    return species.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 getFilteredSpecies = (species = []) => {
+    const activeFilters = {
+      ...filters,
+      ...(activeSpeciesGroup !== 'All'
+        ? { species_group_name: [activeSpeciesGroup] }
+        : {}),
+    };
+
+    const filteredSpecies = species.filter((items, index) => {
+      let itemsHaveFilter = true;
+      Object.keys(activeFilters).forEach((filter) => {
+        let specimenHasFilter = false;
+        items.forEach((item) => {
+          if (activeFilters[filter].includes(item[filter])) {
+            specimenHasFilter = true;
+          }
+        });
+        if (!specimenHasFilter) {
+          itemsHaveFilter = false;
+        }
+      });
+      return itemsHaveFilter;
+    });
+
+    setPagination({
+      ...pagination,
+      activePage: 1,
+      totalItems: filteredSpecies.length,
+    });
+
+    return filteredSpecies;
+  };
+
+  React.useEffect(() => {
+    dataReady.current = false;
+    const speciesIndex = {};
+    const newSpecies = [];
+    if (provider_data.scientific_name?.length) {
+      provider_data.scientific_name.forEach((_, index) => {
+        const specimen = getObjectByIndex(provider_data, index);
+        if (!(speciesIndex[specimen.id_eunis] >= 0)) {
+          speciesIndex[specimen.id_eunis] = index;
+        }
+        if (!newSpecies[speciesIndex[specimen.id_eunis]]) {
+          newSpecies[speciesIndex[specimen.id_eunis]] = [];
+        }
+        newSpecies[speciesIndex[specimen.id_eunis]].push(specimen);
+      });
+    }
+    setSpecies(getSortedSpecies(newSpecies.filter((species) => species)));
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(provider_data)]);
+
+  React.useEffect(() => {
+    const filteredSpecies = getSortedSpecies(getFilteredSpecies([...species]));
+    setFilteredSpecies(filteredSpecies);
+    /* eslint-disable-next-line */
+  }, [species, sortBy, activeSpeciesGroup, filters]);
+
+  return (
+    <div className="site-species-list full-width">
+      {props.mode !== 'edit' && species.length ? (
+        <Filters
+          {...props}
+          activeSpeciesGroup={activeSpeciesGroup}
+          activeFilters={filters}
+          filteredSpecies={filteredSpecies}
+          pagination={pagination}
+          sortBy={sortBy}
+          species={species}
+          setActiveSpeciesGroup={setActiveSpeciesGroup}
+          setActiveFilters={setFilters}
+          setPagination={setPagination}
+          setSortBy={setSortBy}
+        />
+      ) : (
+        ''
+      )}
+
+      <div className="species-list">
+        <Container>
+          {filteredSpecies.length ? (
+            Array.from(
+              {
+                length: getCurrentPageLength(pagination, filteredSpecies),
+              },
+              (v, k) =>
+                k + (pagination.activePage - 1) * pagination.itemsPerPage,
+            ).map((index) => {
+              const speciesData = filteredSpecies[index][0];
+
+              return (
+                <Grid
+                  className="species"
+                  key={`${index}-${speciesData.id_eunis}`}
+                  columns="12"
+                >
+                  <Grid.Row>
+                    <Grid.Column
+                      mobile={12}
+                      tablet={3}
+                      computer={2}
+                      className="species-photo"
+                    >
+                      <img
+                        src={
+                          speciesData.picture_url ||
+                          photoPlaceholders[speciesData.species_group_name] ||
+                          photoPlaceholders.Birds
+                        }
+                        alt={speciesData.species_group_name}
+                      />
+                    </Grid.Column>
+                    <Grid.Column
+                      mobile={12}
+                      tablet={9}
+                      computer={10}
+                      className="species-details"
+                    >
+                      <div className="metadata">
+                        <div className="name">
+                          <Link
+                            as="h3"
+                            to={`/natura2000/species/s/${speciesData.id_eunis}`}
+                          >
+                            {speciesData.common_name
+                              ? speciesData.common_name + ' '
+                              : ''}
+                            <em>{speciesData.scientific_name}</em>
+                            <span className="code-2000">
+                              {' '}
+                              - {speciesData.code_2000 || 'NA'}
+                            </span>
+                          </Link>
+                        </div>
+                        {filteredSpecies[index].map((specimen, index) => (
+                          <p
+                            className="specimen-data"
+                            key={`specimen-${index}-${specimen.id_eunis}`}
+                          >
+                            {getLabelString(
+                              'population_type',
+                              specimen.population_type,
+                            )}
+                            {getPopulationString(
+                              specimen.lower_bound,
+                              specimen.upper_bound,
+                              ', ',
+                            )}
+                            {getLabelString(
+                              'counting_unit',
+                              specimen.counting_unit,
+                              ', ',
+                            )}
+                            {getLabelString(
+                              'abundance_category',
+                              specimen.abundance_category,
+                              ', ',
+                            )}
+                          </p>
+                        ))}
+                      </div>
+                      <div className="footer-metadata">
+                        <p className="orange">
+                          {speciesData.EU_threat_name || 'Not reported'} (IUCN
+                          European Red List)
+                        </p>
+                        <p className="green">
+                          Appears in {speciesData.appears_number_sites} sites
+                        </p>
+                      </div>
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              );
+            })
+          ) : species.length ? (
+            <div className="empty">No results</div>
+          ) : (
+            ''
+          )}
+          {!species?.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>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,17 @@
+import SiteSpeciesList from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      site_species_list: {
+        view: SiteSpeciesList,
+        getSchema: getSchema,
+        title: 'Site species list',
+      },
+    },
+  };
+  return config;
+};

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

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

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

@@ -0,0 +1,264 @@
+div#view .site-species-list .species-group-filter .ui.container > *,
+div#view .site-species-list .species-filters .ui.container > *,
+div#view .site-species-list .species-list .ui.container > * {
+  margin-bottom: 0;
+}
+
+.site-species-list {
+  margin-top: -1.5rem;
+
+  .species-filters {
+    .ui.container {
+      display: flex;
+      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;
+          background-color: #fff;
+          color: #000;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .species-groups {
+      margin-bottom: 1rem;
+      background-color: #04a87d;
+
+      .ui.container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow-x: auto;
+
+        @media only screen and (max-width: 765px) {
+          justify-content: flex-start;
+        }
+
+        button.species-group {
+          padding: 1rem;
+          border: none;
+          background-color: transparent;
+          color: #fff;
+          cursor: pointer;
+          font-size: 14px;
+          text-transform: uppercase;
+
+          &.active,
+          &:hover {
+            padding-bottom: calc(1rem - 3px);
+            border-bottom: 3px solid #fff;
+          }
+        }
+      }
+    }
+
+    .ui.sidebar {
+      background-color: #fff;
+
+      &.right.visible {
+        box-shadow: 0px 0px 13px -5px #000000;
+      }
+
+      .sidebar-header {
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 2rem 1rem;
+        background-color: #04a87d;
+
+        .title {
+          margin-bottom: 0;
+          color: #fff;
+          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: #04a87d;
+                cursor: pointer;
+
+                &:hover {
+                  opacity: 0.8;
+                }
+              }
+            }
+          }
+
+          .checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+
+            .count {
+              color: #636363;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .species-list {
+    .ui.grid.species {
+      margin-top: 0;
+      margin-right: 0;
+      margin-bottom: 0;
+
+      .row {
+        padding: 1rem 0;
+      }
+
+      .species-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;
+          }
+        }
+      }
+
+      .species-details {
+        display: flex;
+        flex-flow: column;
+        justify-content: space-between;
+        padding: 0;
+        background-color: #fff;
+        border-bottom-right-radius: 10px;
+        border-top-right-radius: 10px;
+
+        @media only screen and (max-width: 767px) {
+          margin-left: 1rem;
+          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;
+            }
+          }
+
+          .specimen-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;
+          }
+
+          .orange {
+            color: #ff9300;
+          }
+
+          .green {
+            color: #0f8f22;
+          }
+        }
+      }
+    }
+
+    .ui.pagination.menu {
+      width: 100%;
+      justify-content: center;
+      background-color: transparent;
+
+      .item {
+        &.active {
+          color: #013c60;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .empty {
+      margin-top: 3rem;
+      margin-bottom: 3rem !important;
+      text-align: left;
+    }
+  }
+}

package/src/components/manage/Blocks/SiteSpeciesList/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/SlateLink/render.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+import { withRouter } from 'react-router';
+import { useSelector } from 'react-redux';
+import { withHashLink } from 'volto-slate/hooks';
+import qs from 'querystring';
+import './styles.less';
+
+const formatLink = (str, obj) => {
+  let newStr = str;
+  if (!str || typeof str !== 'string') return str;
+  Object.keys(obj || {}).forEach((key) => {
+    newStr = newStr.replace(new RegExp(`\\$${key}`, 'g'), obj[key]);
+  });
+  return newStr;
+};
+
+export const LinkElement = withHashLink(
+  withRouter(
+    ({ attributes, children, element, location, match, mode, setHashLink }) => {
+      // TODO: handle title on internal links
+      let url = element.url;
+      const { link } = element.data || {};
+      const route_parameters = useSelector((state) => state.route_parameters);
+      const params = {
+        ...match.params,
+        ...(route_parameters || {}),
+        ...qs.parse(location.search.replace('?', '')),
+      };
+      const internal_link = formatLink(
+        link?.internal?.internal_link?.[0]?.['@id'],
+        params,
+      );
+      const external_link = formatLink(link?.external?.external_link, params);
+      const email = link?.email;
+      const internal_hash = link?.hash?.internal_hash?.[0]?.['id'];
+      const href = internal_hash
+        ? `#${internal_hash}`
+        : email
+        ? `mailto:${email.email_address}${
+            email.email_subject ? `?subject=${email.email_subject}` : ''
+          }`
+        : external_link || internal_link || url;
+
+      const { title } = element?.data || {};
+
+      return mode === 'view' ? (
+        <>
+          {internal_hash ? (
+            <a
+              href={`#${internal_hash}`}
+              title={title}
+              onClick={(event) => {
+                event.preventDefault();
+                setHashLink(internal_hash, link.hash.internal_hash[0]);
+              }}
+            >
+              {children}
+            </a>
+          ) : (
+            <UniversalLink
+              href={href || '#'}
+              openLinkInNewTab={link?.external?.target === '_blank'}
+              title={title}
+            >
+              {children}
+            </UniversalLink>
+          )}
+        </>
+      ) : (
+        <span {...attributes} className="slate-editor-link">
+          {children}
+        </span>
+      );
+    },
+  ),
+);

package/src/components/manage/Blocks/SlateLink/styles.less

@@ -0,0 +1,22 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.slate-editor-link {
+  color: @linkColor;
+}
+
+button.hash-link {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: @linkColor;
+  cursor: pointer;
+  text-decoration: @linkUnderline;
+}
+
+button.hash-link:hover {
+  color: @linkHoverColor;
+  text-decoration: @linkHoverUnderline;
+}

package/src/components/manage/Blocks/SlateSVG/constants.js

@@ -0,0 +1 @@
+export const SLATESVG = 'slatesvg';

package/src/components/manage/Blocks/SlateSVG/extensions.js

@@ -0,0 +1,11 @@
+import { SLATESVG } from './constants';
+
+export const withSlateSvg = (editor) => {
+  const { isInline } = editor;
+
+  editor.isInline = (element) => {
+    return element.type === SLATESVG ? true : isInline(element);
+  };
+
+  return editor;
+};