@eeacms/volto-eea-map 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -4,8 +4,16 @@ 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.12](https://github.com/eea/volto-eea-map/compare/0.1.11...0.1.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)
+
 #### [0.1.11](https://github.com/eea/volto-eea-map/compare/0.1.10...0.1.11)
 
+> 18 August 2022
+
+- Legend for each layer in object list [`#11`](https://github.com/eea/volto-eea-map/pull/11)
 - Legend for all layers [`2d9285e`](https://github.com/eea/volto-eea-map/commit/2d9285e12ea512b7a1f24300ad2f7b3072e334d5)
 
 #### [0.1.10](https://github.com/eea/volto-eea-map/compare/0.1.9...0.1.10)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "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

@@ -1,14 +1,33 @@
 import React from 'react';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
 import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
 import { Schema } from './Schema';
 import View from './View';
+import { getContent } from '@plone/volto/actions';
+
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 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 ||
+      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>
@@ -31,4 +50,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/EEAMap/Schema.js

@@ -13,6 +13,7 @@ export const Schema = (props) => {
           'show_download',
           'show_viewer',
           'show_sources',
+          'data_query_params',
         ],
       },
     ],
@@ -46,6 +47,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/EEAMap/View.jsx

@@ -9,11 +9,10 @@ import { PrivacyProtection } from '@eeacms/volto-embed';
 import { getContent } from '@plone/volto/actions';
 
 const View = (props) => {
-  const { data, id, path, data_provenance } = props || {};
+  const { data, id, path } = props || {};
   const { map_data = {}, height = '' } = data;
 
   React.useEffect(() => {
-    //   get content from document
     if (path) {
       props.getContent(path, null, id);
     }
@@ -24,7 +23,7 @@ const View = (props) => {
     <div>
       <PrivacyProtection data={data} {...props}>
         <Webmap data={map_data} height={height} id={id} />
-        <ExtraViews data={{ ...data, data_provenance }} />
+        <ExtraViews data={data} />
       </PrivacyProtection>
     </div>
   );
@@ -33,6 +32,7 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      data_query: state.content.subrequests?.[props.id]?.data?.data_query,
       data_provenance:
         state.content.subrequests?.[props.id]?.data?.data_provenance,
     }),

package/src/components/Blocks/EEAMap/components/widgets/DataQueryWidget.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormFieldWrapper, Field } from '@plone/volto/components';
+
+const DataQueryWidget = (props) => {
+  const { value, onChange, id } = props;
+
+  const onChangeAlias = (fieldId, fieldValue) => {
+    let altValue = value;
+    value[fieldId] = { ...value[fieldId], alias: fieldValue };
+    onChange(id, altValue);
+  };
+
+  return (
+    <div>
+      <FormFieldWrapper {...props} noForInFieldLabel></FormFieldWrapper>
+      <div className="data-query-widget-field">
+        {value && value.length > 0 ? (
+          value.map((param, i) => (
+            <div key={i}>
+              <h5 style={{ fontWeight: 'bold' }}>{param.i}</h5>
+              <Field
+                id={i}
+                title="Alias"
+                type="string"
+                description="Data connector parameter alias for matchings. Default is {Key}"
+                onChange={onChangeAlias}
+                value={param?.alias}
+              />
+              <Field
+                id={param.i}
+                title="Values"
+                type="string"
+                description="Parameter value/s"
+                value={param.v.join(',')}
+              />
+            </div>
+          ))
+        ) : (
+          <p style={{ textAlign: 'center' }}>No parameters set</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DataQueryWidget;

package/src/components/Blocks/EEAMap/components/widgets/LayerSelectWidget.jsx

@@ -4,6 +4,11 @@ import { Input, Select, Button, Grid } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { getContent } from '@plone/volto/actions';
+
 import checkSVG from '@plone/volto/icons/check.svg';
 import closeSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -12,7 +17,7 @@ import resetSVG from '@plone/volto/icons/reset.svg';
 import { fetchArcgisData } from '../../utils';
 
 const LayerSelectWidget = (props) => {
-  const { onChange, id } = props;
+  const { onChange, id, data_query } = props;
 
   const value = React.useMemo(() => props.value || {}, [props.value]);
 
@@ -63,6 +68,55 @@ const LayerSelectWidget = (props) => {
     }
   };
 
+  React.useEffect(() => {
+    props.getContent('', null, id);
+    //    eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (query && !builtQuery) {
+      setBuiltQuery(query);
+    }
+  }, [query, builtQuery]);
+
+  React.useEffect(() => {
+    //detect existing queries in block content. If it exists. Apply matching queries to layer on fresh layer load
+    if (
+      map_service_url &&
+      layer &&
+      !query &&
+      data_query &&
+      data_query.length > 0
+    ) {
+      let autoQuery = {
+        combinator: 'or',
+        rules: [],
+      };
+      data_query.forEach((param, i) => {
+        if (
+          fields &&
+          fields.length > 0 &&
+          fields.filter(
+            (field, j) => field.name === param.alias || field.name === param.i,
+          ).length > 0
+        ) {
+          autoQuery.rules = [
+            ...autoQuery.rules,
+            { field: param.alias || param.i, operator: '=', value: param.v[0] },
+          ];
+        }
+      });
+      if (autoQuery.rules.length > 0) {
+        onChange(id, {
+          ...value,
+          query: autoQuery,
+        });
+        setBuiltQuery(autoQuery);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map_service_url, layer, query, data_query, fields]);
+
   const handleLayerFetch = async (service_url, id) => {
     try {
       let fullLayer = await fetchArcgisData(`${service_url}/${id}`);
@@ -129,8 +183,6 @@ const LayerSelectWidget = (props) => {
             style={{ width: '100%' }}
             error={serviceUrlError}
             value={serviceUrl}
-            // action
-            // actionPosition="right"
           ></Input>
 
           <span style={{ fontSize: '12px', color: 'darkred' }}>
@@ -230,4 +282,14 @@ const LayerSelectWidget = (props) => {
   );
 };
 
-export default LayerSelectWidget;
+export default compose(
+  connect(
+    (state, props) => ({
+      content: state.content.data,
+      data_query: state.content.data.data_query,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(LayerSelectWidget);

package/src/components/Blocks/EEAMap/components/widgets/MapEditorWidget.jsx

@@ -37,7 +37,6 @@ const MapEditorWidget = (props) => {
   };
 
   let schema = PanelsSchema({ data: dataForm });
-
   return (
     <FormFieldWrapper {...props}>
       <Modal

package/src/components/Blocks/EEAMap/components/widgets/ObjectTypesWidget.jsx

@@ -4,7 +4,15 @@ import { ObjectWidget } from '@plone/volto/components';
 import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 
 export const ObjectTypesWidget = (props) => {
-  const { schemas, value = {}, onChange, errors = {}, id, device } = props;
+  const {
+    schemas,
+    value = {},
+    onChange,
+    errors = {},
+    id,
+    device,
+    block,
+  } = props;
   const objectId = id;
 
   const defaultActiveTab = 0;
@@ -30,6 +38,7 @@ export const ObjectTypesWidget = (props) => {
             <ObjectWidget
               schema={schema}
               id={id}
+              block={block}
               errors={errors}
               value={value[id] || {}}
               onChange={(schemaId, v) => {

package/src/components/Blocks/EEAMap/styles/map.css

@@ -115,6 +115,10 @@
   font-size: 14px;
 }
 
+.data-query-widget-field {
+  margin: 10px 0;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;

package/src/index.js

@@ -5,6 +5,7 @@ import {
   EmbedMapEdit,
 } from '@eeacms/volto-eea-map/components';
 import world from '@plone/volto/icons/world.svg';
+import DataQueryWidget from './components/Blocks/EEAMap/components/widgets/DataQueryWidget';
 import LayerSelectWidget from './components/Blocks/EEAMap/components/widgets/LayerSelectWidget';
 import MapEditorWidget from './components/Blocks/EEAMap/components/widgets/MapEditorWidget';
 import ObjectTypesWidget from './components/Blocks/EEAMap/components/widgets/ObjectTypesWidget';
@@ -89,6 +90,7 @@ export default (config) => {
   config.widgets.widget.map_edit_widget = MapEditorWidget;
   config.widgets.widget.map_layers_widget = LayerSelectWidget;
   config.widgets.widget.object_types_widget = ObjectTypesWidget;
+  config.widgets.widget.data_query_widget = DataQueryWidget;
 
   //map editor for the visualization(content-type)
   config.widgets.id.map_visualization_data = VisualizationEditorWidget;