@eeacms/volto-eea-map 0.1.12 → 0.1.13

package/CHANGELOG.md

@@ -4,8 +4,15 @@ 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.1.13](https://github.com/eea/volto-eea-map/compare/0.1.12...0.1.13)
+
+- update embed map with data_query [`719c007`](https://github.com/eea/volto-eea-map/commit/719c00776dff7ba63bbd57761a2c86ec5345a911)
+
 #### [0.1.12](https://github.com/eea/volto-eea-map/compare/0.1.11...0.1.12)
 
+> 22 August 2022
+
+- Develop [`#12`](https://github.com/eea/volto-eea-map/pull/12)
 - cleanup [`53a2d89`](https://github.com/eea/volto-eea-map/commit/53a2d897675af2f75d8bd787ed07cdcfac69bdd0)
 - get criteria and map it as query on fresh layers [`51f8087`](https://github.com/eea/volto-eea-map/commit/51f80870764d65140ac0a6408c01c0b63476bbd2)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/EEAMap/Edit.jsx

@@ -16,6 +16,7 @@ import './styles/map.css';
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
+
   React.useEffect(() => {
     if (
       !data.data_query_params ||

package/src/components/Blocks/EmbedEEAMap/Edit.jsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import { SidebarPortal } from '@plone/volto/components';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { getContent } from '@plone/volto/actions';
+
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-import { Schema } from './Schema';
 import View from './View';
+import { Schema } from './Schema';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import './styles/map.css';
 
@@ -10,6 +16,24 @@ const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
+  React.useEffect(() => {
+    props.getContent(data.vis_url, null, id);
+    //    eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.vis_url]);
+
+  React.useEffect(() => {
+    if (
+      !data.data_query_params ||
+      props.data_query !== data.data_query_params
+    ) {
+      onChangeBlock(block, {
+        ...data,
+        data_query_params: props.data_query,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.data_query, block, data]);
+
   return (
     <div>
       <View data={data} id={id} />
@@ -31,4 +55,15 @@ const Edit = (props) => {
   );
 };
 
-export default Edit;
+export default compose(
+  connect(
+    (state, props) => ({
+      data_query: state.content.data.data_query,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(Edit);

package/src/components/Blocks/EmbedEEAMap/Schema.js

@@ -13,6 +13,7 @@ export const Schema = (props) => {
           'show_download',
           'show_viewer',
           'show_sources',
+          'data_query_params',
         ],
       },
     ],
@@ -45,6 +46,10 @@ export const Schema = (props) => {
         title: 'Show web viewer',
         type: 'boolean',
       },
+      data_query_params: {
+        title: 'Data query parameters',
+        widget: 'data_query_widget',
+      },
     },
     required: [],
   };

package/src/components/Blocks/EmbedEEAMap/View.jsx

@@ -15,19 +15,64 @@ const View = (props) => {
   const { map_visualization_data = '', data_provenance = {} } =
     viz_content || {};
 
+  const [mapData, setMapData] = React.useState(map_visualization_data);
+
   React.useEffect(() => {
-    if (vis_url) {
+    if (vis_url && !map_visualization_data) {
       props.getContent(vis_url, null, id);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vis_url]);
 
+  React.useEffect(() => {
+    if (
+      props.data_query &&
+      props.data_query.length > 0 &&
+      map_visualization_data
+    ) {
+      let altMapData = { ...map_visualization_data };
+
+      props.data_query.forEach((param, i) => {
+        if (
+          map_visualization_data.layers &&
+          map_visualization_data.layers.map_layers &&
+          map_visualization_data.layers.map_layers.length > 0
+        ) {
+          map_visualization_data.layers.map_layers.forEach((l, j) => {
+            if (
+              l.map_layer &&
+              l.map_layer.fields &&
+              l.map_layer.fields.length > 0 &&
+              l.map_layer.fields.filter(
+                (field, k) =>
+                  field.name === param.alias || field.name === param.i,
+              ).length > 0
+            ) {
+              let autoQuery = {
+                combinator: 'or',
+                rules: props.data_query.map((q, i) => {
+                  return {
+                    field: param.alias ? param.alias : param.i,
+                    operator: '=',
+                    value: param.v[0],
+                  };
+                }),
+              };
+              altMapData.layers.map_layers[j].map_layer.query = autoQuery;
+            }
+          });
+        }
+      });
+      setMapData(altMapData);
+    }
+  }, [props.data_query, map_visualization_data]);
+
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
         {map_visualization_data && (
           <div>
-            <Webmap data={map_visualization_data} height={height} />
+            <Webmap data={mapData} height={height} />
             <ExtraViews
               data={{
                 ...data,
@@ -48,6 +93,7 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      data_query: state.content.data.data_query,
       viz_content: state.content.subrequests?.[props.id]?.data,
     }),
     {