@eeacms/volto-eea-map 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -4,12 +4,28 @@ 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).
 
+### [3.2.0](https://github.com/eea/volto-eea-map/compare/3.1.0...3.2.0) - 13 December 2023
+
+#### :rocket: New Features
+
+- feat: use data_query from connected_data_parameters defined in volto-datablocks [Miu Razvan - [`e755c7d`](https://github.com/eea/volto-eea-map/commit/e755c7d3f3076d751cbace7ac69c19d7fcf37ba9)]
+
+#### :bug: Bug Fixes
+
+- fix: Invalid DOM property class. Did you mean className [Alin Voinea - [`2c02e99`](https://github.com/eea/volto-eea-map/commit/2c02e99a2d9bb4bf456710d7045af0a8842de952)]
+
+#### :hammer_and_wrench: Others
+
+- merge develop [andreiggr - [`eba7e68`](https://github.com/eea/volto-eea-map/commit/eba7e6883481bd863d659f7904fb1bc8023689f8)]
+- updates on data_query_parameters [andreiggr - [`06744e4`](https://github.com/eea/volto-eea-map/commit/06744e460398b72a9a6abd065d5ba76bf729588d)]
+- Release 3.2.0 [Alin Voinea - [`deae811`](https://github.com/eea/volto-eea-map/commit/deae811cf402d59ec8d7408c6b9278bc480b07df)]
+- clean up [Miu Razvan - [`21edc9e`](https://github.com/eea/volto-eea-map/commit/21edc9eb5c38d063420743be1e50e376f81cb620)]
+- get unsaved queries from connected data params [andreiggr - [`6833dcd`](https://github.com/eea/volto-eea-map/commit/6833dcdb78404704776aff17439d9058e6d4fd39)]
 ### [3.1.0](https://github.com/eea/volto-eea-map/compare/3.0.3...3.1.0) - 8 December 2023
 
 #### :hammer_and_wrench: Others
 
 - Release 3.1.0 [Alin Voinea - [`2fad87e`](https://github.com/eea/volto-eea-map/commit/2fad87e5a8013b80183797df45ba6494e7ca396d)]
-- use internal url [Miu Razvan - [`c2b56f5`](https://github.com/eea/volto-eea-map/commit/c2b56f5395a79225d09c64c92720f23e74b17c88)]
 ### [3.0.3](https://github.com/eea/volto-eea-map/compare/3.0.2...3.0.3) - 29 November 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

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

@@ -12,13 +12,24 @@ import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
 
 import { Schema } from './Schema';
 import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
-
-import { getMapVisualizationData } from './helpers';
+import { deepUpdateDataQueryParams, getMapVisualizationData } from './helpers';
+import { isEqual } from 'lodash';
 
 const Edit = (props) => {
-  const { id, block, onChangeBlock, selected, data, getContent } = props;
   const {
-    data_query_params,
+    id,
+    block,
+    onChangeBlock,
+    selected,
+    data,
+    getContent,
+    connected_data_parameters, // page level queries live from widget
+    data_query, // page level queries
+    mapContent,
+  } = props;
+
+  const {
+    data_query_params, //block level queries
     enable_queries,
     show_legend = true,
     show_note = true,
@@ -28,14 +39,30 @@ const Edit = (props) => {
     dataprotection = { enabled: true },
     height = '',
   } = data;
+
   const schema = Schema(props);
   const [mapData, setMapData] = React.useState('');
 
   const vis_url = useMemo(() => flattenToAppURL(data.vis_url), [data.vis_url]);
 
-  const map_visualization_data = useMemo(() => getMapVisualizationData(props), [
-    props,
-  ]);
+  const map_visualization_data = useMemo(
+    () => getMapVisualizationData({ mapContent, data }),
+    [mapContent, data],
+  );
+
+  const effectiveQueryParams =
+    connected_data_parameters && connected_data_parameters.length > 0
+      ? connected_data_parameters
+      : data_query;
+
+  React.useEffect(() => {
+    deepUpdateDataQueryParams(
+      block,
+      props.data,
+      effectiveQueryParams,
+      onChangeBlock,
+    );
+  }, [block, props.data, effectiveQueryParams, onChangeBlock]);
 
   useEffect(() => {
     const mapVisId = flattenToAppURL(map_visualization_data['@id'] || '');
@@ -47,21 +74,42 @@ const Edit = (props) => {
     }
   }, [id, getContent, vis_url, map_visualization_data]);
 
-  React.useEffect(() => {
+  useEffect(() => {
+    const mergedQueries =
+      connected_data_parameters &&
+      connected_data_parameters.length > 0 &&
+      connected_data_parameters.map((unsavedQuery, index) => {
+        const correspondingQuery =
+          data_query_params && data_query_params[index];
+        return { ...unsavedQuery, alias: correspondingQuery?.alias };
+      });
+    const queriesToUse =
+      mergedQueries && mergedQueries.length > 0
+        ? mergedQueries
+        : data_query_params;
+
     const updatedMapData = applyQueriesToMapLayers(
       map_visualization_data,
-      data_query_params,
+      queriesToUse,
       enable_queries,
     );
-    setMapData(updatedMapData);
-  }, [map_visualization_data, data_query_params, enable_queries]);
+
+    if (!isEqual(mapData, updatedMapData)) {
+      setMapData(updatedMapData);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    map_visualization_data,
+    data_query_params,
+    enable_queries,
+    connected_data_parameters,
+  ]);
 
   return (
     <>
       {!vis_url && (
         <Message>Please select a visualization from block editor.</Message>
       )}
-
       {!!vis_url && mapData && (
         <div>
           <Webmap data={mapData} height={height} isEdit={true} />
@@ -99,12 +147,16 @@ const Edit = (props) => {
 
 export default compose(
   connect(
-    (state, props) => ({
-      mapContent: state.content.subrequests?.[props.id]?.data,
-      data_query: state.content.data.data_query,
-    }),
-    {
-      getContent,
+    (state, props) => {
+      const pathname = flattenToAppURL(state.content.data['@id']);
+      return {
+        mapContent: state.content.subrequests?.[props.id]?.data,
+        data_query: state.content.data.data_query,
+        connected_data_parameters:
+          state?.connected_data_parameters?.byContextPath &&
+          state.connected_data_parameters?.byContextPath[pathname],
+      };
     },
+    { getContent },
   ),
 )(Edit);

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

@@ -1,6 +1,3 @@
-import React from 'react';
-import { deepUpdateDataQueryParams } from './helpers';
-
 const ProtectionSchema = () => ({
   title: 'Data Protection',
 
@@ -68,12 +65,6 @@ const ProtectionSchema = () => ({
 });
 
 export const Schema = (props) => {
-  const { block, onChangeBlock } = props;
-
-  const dataQuery = React.useMemo(() => props.data_query, [props.data_query]);
-  const data = React.useMemo(() => props.data, [props.data]);
-
-  deepUpdateDataQueryParams(block, data, dataQuery, onChangeBlock);
   return {
     title: 'Embed Map layers (ArcGis)',
     fieldsets: [

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

@@ -1,37 +1,41 @@
 import { pickMetadata } from '@eeacms/volto-embed/helpers';
-import { updateBlockQueryFromPageQuery } from '@eeacms/volto-eea-map/utils';
+// import { updateBlockQueryFromPageQuery } from '@eeacms/volto-eea-map/utils';
 
-const deepUpdateDataQueryParams = (block, data, data_query, onChangeBlock) => {
-  // If block data_query_params do not exist, init them
-  if (!data?.data_query_params && data_query) {
+const deepUpdateDataQueryParams = (
+  block,
+  data,
+  effectiveQueryParams,
+  onChangeBlock,
+) => {
+  const updatedQueryParams =
+    effectiveQueryParams &&
+    effectiveQueryParams.length > 0 &&
+    effectiveQueryParams.map((param) => {
+      // Find the matching query in the block's current data_query_params
+      const existingParam =
+        data?.data_query_params &&
+        data.data_query_params.find((p) => p.i === param.i);
+
+      // If found, merge it with the effective query parameter, preserving the alias
+      return existingParam ? { ...param, alias: existingParam.alias } : param;
+    });
+
+  // Update the block data if there are changes
+  if (
+    JSON.stringify(data.data_query_params) !==
+    JSON.stringify(updatedQueryParams)
+  ) {
     onChangeBlock(block, {
       ...data,
-      data_query_params: [...data_query],
+      data_query_params: updatedQueryParams,
     });
   }
-
-  // If block data_query_params exist, deep check them then change them in block data
-  if (data_query && data?.data_query_params) {
-    const newDataQuery = updateBlockQueryFromPageQuery(
-      data_query,
-      data?.data_query_params,
-    );
-
-    if (
-      JSON.stringify(newDataQuery) !== JSON.stringify(data.data_query_params)
-    ) {
-      onChangeBlock(block, {
-        ...data,
-        data_query_params: [...newDataQuery],
-      });
-    }
-  }
 };
 
-function getMapVisualizationData(props) {
-  const content = props.mapContent || {};
+function getMapVisualizationData({ mapContent, data }) {
+  const content = mapContent || {};
   const map_visualization_data =
-    content.map_visualization_data || props.data?.map_visualization_data || {};
+    content.map_visualization_data || data?.map_visualization_data || {};
   return {
     ...pickMetadata(content),
     ...map_visualization_data,

package/src/components/MoreInfoLink.jsx

@@ -13,7 +13,7 @@ const MoreInfoLink = ({ contentTypeLink }) => {
   return (
     <Link href={contentTypeLink}>
       <button className={cx('eea-map-more-info-button')}>
-        More info <i class="ri-external-link-line"></i>
+        More info <i className="ri-external-link-line"></i>
       </button>
     </Link>
   );

package/src/components/Share.jsx

@@ -34,7 +34,7 @@ const Share = ({ contentTypeLink = '' }) => {
         <div className="eea-map-share-container">
           <button className={cx('eea-map-share-button', { expanded })}>
             <span>Share</span>
-            <i class="ri-share-fill"></i>
+            <i className="ri-share-fill"></i>
           </button>
         </div>
       }

package/src/components/widgets/DataQueryWidget.jsx

@@ -26,7 +26,8 @@ const DataQueryWidget = (props) => {
               <Accordion.Content active={true}>
                 <Segment>
                   <p className="data-param-title">
-                    <strong>{param.i}:</strong> {param.v.join(', ')}
+                    <strong>{param?.i}:</strong>{' '}
+                    {param?.v && param.v.join(', ')}
                   </p>
                   <Field
                     id={i}

package/src/components/widgets/LayerSelectWidget.jsx

@@ -4,6 +4,7 @@ import { Input, Select, Button, Grid, Checkbox } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
+import { flattenToAppURL } from '@plone/volto/helpers';
 import RichTextWidget from '@plone/volto-slate/widgets/RichTextWidget';
 
 import { connect } from 'react-redux';
@@ -442,10 +443,13 @@ const LayerSelectWidget = (props) => {
 
 export default compose(
   connect(
-    (state, props) => ({
-      content: state.content.data,
-      data_query: state.content.data.data_query,
-    }),
+    (state) => {
+      const pathname = flattenToAppURL(state.content.data['@id']);
+      return {
+        content: state.content.data,
+        data_query: state.connected_data_parameters.byContextPath[pathname],
+      };
+    },
     {
       getContent,
     },