Expandable template for SimpleDataTable

CHANGELOG.md

@@ -4,9 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.6](https://github.com/eea/volto-forests-theme/compare/0.2.5...0.2.6)
+
+- Expandable table template [`#61`](https://github.com/eea/volto-forests-theme/pull/61)
+- BodyClass classes inline [`c79695a`](https://github.com/eea/volto-forests-theme/commit/c79695ad82ba37883eb301a2e13bb61c957782ea)
+- localconfig tests [`b639387`](https://github.com/eea/volto-forests-theme/commit/b6393878d738719cb924ad0b4344f16664d8e66c)
+- Lintfix [`f9c7233`](https://github.com/eea/volto-forests-theme/commit/f9c72330369566d77def3a67322ffda55457d2f0)
+- Pagination fix [`6ab5b0e`](https://github.com/eea/volto-forests-theme/commit/6ab5b0e7a7a290f8cb11d192ff76d9db37e615f7)
+- Cleanup [`2417883`](https://github.com/eea/volto-forests-theme/commit/241788361a63e83de016e8f5c2d6299946547721)
+- Expandable template on simpledatatable [`f7a18cf`](https://github.com/eea/volto-forests-theme/commit/f7a18cfce6c3c986de2ebfdbca14b0cf6e432038)
+- cleaned viewClass [`56d110f`](https://github.com/eea/volto-forests-theme/commit/56d110f8c9ad9140fdeba63546af841b9808cb26)
+
 #### [0.2.5](https://github.com/eea/volto-forests-theme/compare/0.2.4...0.2.5)
 
-- fix(discodata connector): send data_query to DataConnectedValue [`007e038`](https://github.com/eea/volto-forests-theme/commit/007e038ddf35aa5bfc3c2a8e5368c70187b5062d)
+> 2 March 2022
+
+- fix(discodata connector): send data_query to DataConnectedValue [`#59`](https://github.com/eea/volto-forests-theme/pull/59)
 
 #### [0.2.4](https://github.com/eea/volto-forests-theme/compare/0.2.3...0.2.4)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -30,7 +30,8 @@
     "react-highlight-words": "^0.16.0",
     "react-image-gallery": "1.2.7",
     "react-lazy-load-image-component": "^1.5.0",
-    "react-stickynode": "^2.1.1"
+    "react-stickynode": "^2.1.1",
+    "pigeon-maps": "0.21.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

src/components/manage/Blocks/SimpleDataTable/index.js

@@ -0,0 +1,21 @@
+import {
+  ExpandableEdit,
+  expandableSchema,
+  ExpandableView,
+} from './templates/expandable';
+
+export default (config) => {
+  config.blocks.blocksConfig.simpleDataConnectedTable = {
+    ...config.blocks.blocksConfig.simpleDataConnectedTable,
+    templates: {
+      ...config.blocks.blocksConfig.simpleDataConnectedTable.templates,
+      expandable: {
+        title: 'Expandable',
+        view: ExpandableView,
+        edit: ExpandableEdit,
+        schema: expandableSchema,
+      },
+    },
+  };
+  return config;
+};

src/components/manage/Blocks/SimpleDataTable/templates/expandable/Edit.jsx

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import { compose } from 'redux';
+import { SidebarPortal } from '@plone/volto/components'; // EditBlock
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+
+import config from '@plone/volto/registry';
+
+import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
+
+import { SimpleDataTableSchema } from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/schema';
+import { SimpleDataTableView } from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/View';
+
+class Edit extends Component {
+  getSchema = () => {
+    const template = this.props.data.template || 'default';
+    const templateSchema =
+      config.blocks.blocksConfig.simpleDataConnectedTable?.templates?.[template]
+        ?.schema || {};
+
+    const schema = SimpleDataTableSchema(config, templateSchema(config));
+
+    // TODO: create picker for columns to include
+
+    const provider_url = this.props.data?.provider_url;
+    const provider_data = provider_url
+      ? this.props.providers_data[provider_url]
+      : '';
+
+    // const { provider_data } = this.props;
+
+    if (!provider_data) return schema;
+
+    const choices = Array.from(Object.keys(provider_data).sort()).map((n) => [
+      n,
+      n,
+    ]);
+
+    schema.properties.columns.schema.properties.column.choices = choices;
+    schema.properties.columns.schema.properties.column_link.choices = choices;
+
+    const map_provider_url = this.props.data.popup_map_provider_url
+      ? this.props.data.popup_map_provider_url
+      : '';
+    const table_provider_url = this.props.data.popup_table_provider_url
+      ? this.props.data.popup_table_provider_url
+      : '';
+
+    const map_provider_data =
+      this.props.providers_data && this.props.providers_data[map_provider_url]
+        ? this.props.providers_data[map_provider_url]
+        : '';
+
+    const table_provider_data =
+      this.props.providers_data && this.props.providers_data[table_provider_url]
+        ? this.props.providers_data[table_provider_url]
+        : '';
+
+    const mapChoices = map_provider_data
+      ? Array.from(Object.keys(map_provider_data).sort()).map((n) => [n, n])
+      : [];
+
+    const tableChoices = table_provider_data
+      ? Array.from(Object.keys(table_provider_data).sort()).map((n) => [n, n])
+      : [];
+    schema.properties.popup_data_query.choices = choices;
+
+    schema.properties.image_url.choices = choices;
+    schema.properties.popupTitle.choices = choices;
+    schema.properties.popupDescription.choices = choices;
+    schema.properties.popupUrl.choices = choices;
+
+    //set choices for the popup table columns
+    schema.properties.popupTableColumns.schema.properties.column.choices = tableChoices;
+    schema.properties.popupTableColumns.schema.properties.column_link.choices = tableChoices;
+
+    //set choices for the popup map
+    schema.properties.popupLong.choices = mapChoices;
+    schema.properties.popupLat.choices = mapChoices;
+    // schema.properties.popupCountryCode.choices = mapChoices;
+    // schema.properties.popupMapLabel.choices = mapChoices;
+
+    return schema;
+  };
+
+  render() {
+    const schema = this.getSchema();
+    return (
+      <>
+        <SimpleDataTableView {...this.props} />
+
+        <SidebarPortal selected={this.props.selected}>
+          <InlineForm
+            schema={this.getSchema()}
+            title={schema.title}
+            onChangeField={(id, value) => {
+              this.props.onChangeBlock(this.props.block, {
+                ...this.props.data,
+                [id]: value,
+              });
+            }}
+            formData={this.props.data}
+          />
+        </SidebarPortal>
+      </>
+    );
+  }
+}
+
+export default compose(
+  connectToMultipleProviders((props) => {
+    const {
+      provider_url,
+      popup_map_provider_url,
+      popup_table_provider_url,
+    } = props.data;
+    const providers = [
+      {
+        provider_url: provider_url,
+      },
+      { provider_url: popup_map_provider_url },
+      { provider_url: popup_table_provider_url },
+    ];
+    return { providers };
+  }),
+)(Edit);

src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { compose } from 'redux';
+import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
+
+import { Map, Marker } from 'pigeon-maps';
+
+const getProviderDataLength = (provider_data) => {
+  return provider_data
+    ? provider_data[Object.keys(provider_data)[0]]?.length || 0
+    : 0;
+};
+
+const PopupMap = ({ rowData, provider_data, mapData }) => {
+  const [mapCenter, setMapCenter] = React.useState([45, 9]);
+
+  const [selectedData, setSelectedData] = React.useState([]);
+
+  React.useEffect(() => {
+    const { long, lat } = mapData;
+    const allLong =
+      selectedData.length > 0 ? selectedData.map((i) => i[long]) : '';
+    const allLat =
+      selectedData.length > 0 ? selectedData.map((i) => i[lat]) : '';
+    const minLong = allLong && allLong.length > 0 ? Math.min(...allLong) : '';
+    const maxLong = allLong && allLong.length > 0 ? Math.max(...allLong) : '';
+    const minLat = allLong && allLong.length > 0 ? Math.min(...allLat) : '';
+    const maxLat = allLong && allLong.length > 0 ? Math.max(...allLat) : '';
+
+    const centerLat = minLat && maxLat ? (minLat + maxLat) / 2 : '';
+    const centerLong = minLong && maxLong ? (minLong + maxLong) / 2 : '';
+
+    if (centerLat && centerLong) {
+      setMapCenter([centerLat, centerLong]);
+    }
+  }, [selectedData, mapData]);
+
+  React.useEffect(() => {
+    const provider_data_length = getProviderDataLength(provider_data);
+    const newMapData = [];
+    if (provider_data_length) {
+      const keys = Object.keys(provider_data);
+      Array(provider_data_length)
+        .fill()
+        .forEach((_, i) => {
+          const obj = {};
+          keys.forEach((key) => {
+            obj[key] = provider_data[key][i];
+          });
+          newMapData.push(obj);
+        });
+    }
+    setSelectedData(newMapData);
+    /* eslint-disable-next-line */
+  }, [provider_data]);
+
+  // const countries =
+  //   provider_data && provider_data[mapData.country]
+  //     ? provider_data[mapData.country]
+  //     : '';
+
+  //const uniqueCountries = [...new Set(countries)];
+
+  if (!provider_data) {
+    return 'Loading..';
+  }
+  return (
+    <div>
+      {selectedData.length > 0 ? (
+        <Map height={400} center={mapCenter} defaultZoom={5}>
+          {selectedData.map((item, i) => {
+            const long = item[mapData.long] ? item[mapData.long] : '';
+            const lat = item[mapData.lat] ? item[mapData.lat] : '';
+            /* const label = item[mapData.label] ? item[mapData.label] : ''; */
+            return <Marker width={30} color={'#00519d'} anchor={[lat, long]} />;
+          })}
+        </Map>
+      ) : (
+        <p>No data available for map.</p>
+      )}
+    </div>
+  );
+};
+
+export default compose(
+  connectToProviderData((props) => {
+    return {
+      provider_url: props.providerUrl,
+    };
+  }),
+)(PopupMap);