@eeacms/volto-n2k 0.1.1

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+
+import './style.less';
+
+const View = (props) => {
+  const provider_data = props.provider_data || {};
+  const data = (provider_data?.number || []).reduce(function (data, key, i) {
+    data[provider_data.species_group_name[i]] = key;
+    return data;
+  }, {});
+
+  return (
+    <div className="species-banner full-width">
+      <div className="species-container">
+        <Container className="species-wrapper">
+          {/* <Grid size="12">
+            <Grid.Row>
+              {Object.entries(data).map(([item, value], index) => (
+                <Grid.Column
+                  key={index}
+                  mobile="6"
+                  tablet="6"
+                  computer="3"
+                  className="species-box"
+                >
+                  <div className="upper">
+                    <span>{value}</span>
+                  </div>
+                  <div className="lower">
+                    <span>{item}</span>
+                  </div>
+                </Grid.Column>
+              ))}
+            </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>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </div>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,17 @@
+import SiteProtectedSpeciesView 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_protected_species: {
+        view: SiteProtectedSpeciesView,
+        getSchema: getSchema,
+        title: 'Site protected species',
+      },
+    },
+  };
+  return config;
+};

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

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

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

@@ -0,0 +1,90 @@
+@import (multiple, reference, optional) '../../theme.config';
+@type: extra;
+@element: custom;
+
+div#view .ui.container.species-wrapper > * {
+  margin-bottom: 0;
+}
+
+.species-banner {
+  position: relative;
+  height: 320px;
+  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.7)),
+    url('./images/background.webp');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-family: 'RajdhaniB';
+
+  .species-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  .species-wrapper {
+    display: flex;
+    flex-flow: row;
+    margin: 0 auto !important;
+    overflow-x: auto;
+  }
+
+  .species-wrapper:before,
+  .species-wrapper:after {
+    flex: 1;
+    content: '';
+  }
+
+  .species-box {
+    margin: 0.5em 1.5em;
+
+    .upper {
+      position: relative;
+      width: 110px;
+      height: 110px;
+      margin: auto;
+      background-color: #eaeaea;
+      border-radius: 50%;
+
+      > span {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        color: #013c60;
+        font-family: inherit;
+        font-size: 55px;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .lower {
+      margin-top: 1em;
+      text-align: center;
+
+      span {
+        color: #fff;
+        font-family: inherit;
+        font-size: 19px;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: @largeMonitorBreakpoint) {
+  .species-banner {
+    .species-box {
+      width: 100px;
+
+      .upper {
+        width: 80px;
+        height: 80px;
+
+        span {
+          font-size: 40px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import { Message, Container } from 'semantic-ui-react';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
+import { Controls } from '@eeacms/volto-openlayers-map/Controls';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+import { getSiteShapeURL } from './index';
+import './style.less';
+
+const View = (props) => {
+  const [options, setOptions] = React.useState({});
+  const [vectorSource, setVectorSource] = useState(null);
+  const { extent, format, proj, style, source } = openlayers;
+  const provider_data = props.provider_data || {};
+  const { site_code = [] } = provider_data;
+
+  useEffect(() => {
+    if (__SERVER__) return;
+    setVectorSource(new source.Vector());
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    if (__SERVER__ || !vectorSource || !site_code[0]) return;
+    const esrijsonFormat = new format.EsriJSON();
+    // Get site shape
+    fetch(getSiteShapeURL(site_code[0])).then(function (response) {
+      if (response.status !== 200) return;
+      response.json().then(function (data) {
+        if (data.features && data.features.length > 0) {
+          const features = esrijsonFormat.readFeatures(data);
+          if (features.length > 0) {
+            vectorSource.addFeatures(features);
+            const vectorExtent = vectorSource.getExtent();
+            let size = extent.getSize(vectorExtent);
+            setOptions({
+              ...options,
+              extent: new extent.buffer(vectorExtent, size[0] * 0.1),
+            });
+          }
+        }
+      });
+    });
+    /* eslint-disable-next-line */
+  }, [site_code?.[0]]);
+
+  if (__SERVER__ || !vectorSource) return '';
+  return (
+    <div className="site-shape-wrapper full-width">
+      <div className="site-shape">
+        <Map
+          view={{
+            center: proj.fromLonLat([20, 50]),
+            showFullExtent: true,
+            zoom: 5,
+          }}
+          {...options}
+        >
+          <Layers>
+            <Layer.Tile zIndex={0} />
+            <Layer.Vector
+              source={vectorSource}
+              style={
+                new style.Style({
+                  fill: new style.Fill({
+                    color: 'rgba(255,255,255,0.4)',
+                  }),
+                  stroke: new style.Stroke({
+                    color: '#04A77D',
+                    width: 3,
+                    lineDash: [5, 7],
+                  }),
+                })
+              }
+              zIndex={1}
+            />
+          </Layers>
+          <Controls attribution={true} zoom={false} />
+          <Interactions
+            doubleClickZoom={false}
+            dragAndDrop={false}
+            dragPan={false}
+            keyboardPan={false}
+            keyboardZoom={false}
+            mouseWheelZoom={false}
+            pointer={false}
+            select={false}
+          />
+        </Map>
+      </div>
+      <Container className="map-info-notice">
+        <Message>
+          <p>
+            The designations employed and the presentation of material on this
+            map do not imply the expression of any opinion whatsoever on the
+            part of the European Union concerning the legal status of any
+            country, territory, city or area or of its authorities, or
+            concerning the delimitation of its frontiers or boundaries.
+          </p>
+        </Message>
+      </Container>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,23 @@
+import SiteShapeView from './View';
+import getSchema from './schema';
+
+export function getSiteShapeURL(site_code) {
+  return encodeURI(
+    `https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/Natura2000Sites/MapServer/2/query?f=json&where=SITECODE LIKE '%${site_code.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=SITECODE,SITENAME,OBJECTID&outSR=102100`,
+  );
+}
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      site_shape: {
+        view: SiteShapeView,
+        getSchema: getSchema,
+        title: 'Site shape',
+      },
+    },
+  };
+  return config;
+};

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

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

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

@@ -0,0 +1,15 @@
+div#view .ui.container > .site-shape-wrapper,
+div#view .ui.container > .site-shape {
+  margin-bottom: 0;
+}
+
+.site-shape {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+  background-color: #f8f8f8;
+
+  &.visible.transition {
+    display: flex !important;
+  }
+}

package/src/components/manage/Blocks/SiteSpeciesList/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: 'Alphabetical', value: 'scientific_name', key: 'scientific_name' },
+  ];
+
+  return (
+    <Dropdown aria-label="Sort species 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/SiteSpeciesList/Filters/SpeciesGroups.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import cx from 'classnames';
+
+const SpeciesGroups = (props) => {
+  const [speciesGroups, setSpeciesGroups] = React.useState([]);
+  const {
+    provider_data = {},
+    activeSpeciesGroup = 'All',
+    setActiveSpeciesGroup = () => {},
+  } = props;
+
+  React.useEffect(() => {
+    setSpeciesGroups([
+      ...(provider_data.species_group_name?.length ? ['All'] : []),
+      ...new Set(provider_data.species_group_name || []),
+    ]);
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(provider_data)]);
+
+  return (
+    <div className="species-groups">
+      <Container>
+        {speciesGroups.map((species) => (
+          <button
+            key={`group-filter-${species}`}
+            className={cx({
+              'species-group': true,
+              active: activeSpeciesGroup === species,
+            })}
+            onClick={() => {
+              setActiveSpeciesGroup(species);
+            }}
+          >
+            {species}
+          </button>
+        ))}
+      </Container>
+    </div>
+  );
+};
+
+export default SpeciesGroups;

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

@@ -0,0 +1,200 @@
+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 SpeciesGroups from './SpeciesGroups';
+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,
+    filteredSpecies,
+    pagination,
+    sortBy,
+    species,
+    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] =
+            filteredSpecies.filter((species) => {
+              return !!species.filter((specimen) => specimen[filter] === key)
+                .length;
+            }).length || 'none';
+        }
+      }
+    });
+    setFilters(newFilters);
+  };
+
+  React.useEffect(() => {
+    if (provider_data && species.length) {
+      updateFilters();
+    }
+    /* eslint-disable-next-line */
+  }, [filteredSpecies]);
+
+  return (
+    <div className="species-filters">
+      <SpeciesGroups {...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 species 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"
+        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/SiteSpeciesList/Filters/index.js

@@ -0,0 +1,4 @@
+import SpeciesGroupsFilter from './SpeciesGroups';
+import Filters from './View';
+
+export { SpeciesGroupsFilter, Filters };