Expandable template on simpledatatable

package.json

@@ -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/DiscodataConnectorBlock/v1/View.jsx

@@ -47,6 +47,19 @@ const bulletListView = (items) => (
 );
 
 const View = (props) => {
+  console.log('props', props);
+  console.log(
+    'themprov',
+    props.data?.data_providers
+      ?.map((provider) => ({
+        provider_url: provider.path,
+        has_data_query_by_context: provider.has_data_query_by_context,
+        has_data_query_by_provider: provider.has_data_query_by_provider,
+        data_query: provider.data_query,
+      }))
+      ?.filter((provider) => provider.provider_url) || [],
+  );
+
   const [dataProviders, setDataProviders] = useState({});
   const [parentsDataProviders, setParentsDataProviders] = useState({});
   const { providers_data, providers_metadata } = props;

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,134 @@
+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 {
+  connectToProviderData,
+  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
+    // console.log('bigtableprovurl', this.props.data.provider_url);
+    // console.log(
+    //   'bigprovdata',
+    //   this.props.providers_data[this.props.data.provider_url],
+    // );
+
+    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 { max_count = 5 } = 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);