@eeacms/volto-eea-map 0.1.11 → 0.1.14

package/src/components/visualization/VisualizationEditorWidget.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+import PanelsSchema from './panelsSchema';
+import Webmap from '../Webmap';
+
+const VisualizationEditorWidget = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const { onChange = {}, id } = props;
+  const block = React.useMemo(() => props.block, [props.block]);
+  const value = React.useMemo(() => props.value, [props.value]);
+
+  const [intValue, setIntValue] = React.useState(value);
+
+  const dataForm = { map_data: intValue };
+  const handleApplyChanges = () => {
+    onChange(id, intValue);
+    setOpen(false);
+  };
+
+  const handleClose = () => {
+    setIntValue(value);
+    setOpen(false);
+  };
+
+  const handleChangeField = (val) => {
+    setIntValue(val);
+  };
+
+  let schema = PanelsSchema({ data: dataForm });
+
+  React.useEffect(() => {
+    if (!intValue.general) {
+      setIntValue({
+        ...intValue,
+        general: {
+          print_position: 'top-right',
+          zoom_position: 'top-right',
+          centerOnExtent: true,
+        },
+      });
+    }
+    if (!intValue.base) {
+      setIntValue({
+        ...intValue,
+        base: {
+          base_layer: 'gray-vector',
+        },
+      });
+    }
+  }, [intValue]);
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="wrapper">
+        <Button
+          floated="right"
+          size="tiny"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(true);
+          }}
+        >
+          Open Map Editor
+        </Button>
+      </div>
+
+      {open && (
+        <Modal
+          id="map-editor-modal"
+          style={{ width: '95% !important' }}
+          open={true}
+        >
+          <Modal.Content scrolling>
+            <Grid stackable reversed="mobile vertically tablet vertically">
+              <Grid.Column
+                mobile={12}
+                tablet={12}
+                computer={5}
+                className="map-editor-column"
+              >
+                <InlineForm
+                  block={block}
+                  schema={schema}
+                  onChangeField={(id, value) => {
+                    handleChangeField(value);
+                  }}
+                  formData={dataForm}
+                />
+              </Grid.Column>
+              <Grid.Column mobile={12} tablet={12} computer={7}>
+                <div className="webmap-container">
+                  <Webmap data={intValue} editMode={true} />
+                </div>
+              </Grid.Column>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Grid>
+              <Grid.Row>
+                <div className="map-edit-actions-container">
+                  <Button onClick={handleClose}>Close</Button>
+                  <Button color="green" onClick={handleApplyChanges}>
+                    Apply changes
+                  </Button>
+                </div>
+              </Grid.Row>
+            </Grid>
+          </Modal.Actions>
+        </Modal>
+      )}
+      <Webmap data={value} editMode={true} />
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationEditorWidget;

package/src/components/{Blocks/EEAMap/components/widgets → visualization}/panelsSchema.js

@@ -79,7 +79,6 @@ const GeneralSchema = ({ data = {} }) => {
         type: 'boolean',
         description:
           'This will override latitude/longitude/zoom level and will lock zoom/moving the map.',
-        default: true,
       },
       zoom_position: {
         title: 'Zoom position',

package/src/components/widgets/DataQueryWidget.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FormFieldWrapper, Field } from '@plone/volto/components';
+import { Accordion, Segment } from 'semantic-ui-react';
+
+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) => (
+            <Accordion
+              key={i}
+              fluid
+              styled
+              style={{ border: '1px solid lightgray', marginBottom: '15px' }}
+            >
+              <Accordion.Content active={true}>
+                <Segment>
+                  <p className="data-param-title">
+                    <strong>{param.i}:</strong> {param.v.join(', ')}
+                  </p>
+                  <Field
+                    id={i}
+                    title="Map to"
+                    type="string"
+                    onChange={onChangeAlias}
+                    value={param?.alias}
+                  />
+                </Segment>
+              </Accordion.Content>
+            </Accordion>
+          ))
+        ) : (
+          <p style={{ textAlign: 'center' }}>No parameters set</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DataQueryWidget;

package/src/components/{Blocks/EEAMap/components/widgets → widgets}/LayerSelectWidget.jsx

@@ -4,15 +4,22 @@ import { Input, Select, Button, Grid } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
+import RichTextWidget from 'volto-slate/widgets/RichTextWidget';
+
+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';
 import resetSVG from '@plone/volto/icons/reset.svg';
 
-import { fetchArcgisData } from '../../utils';
+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]);
 
@@ -23,6 +30,7 @@ const LayerSelectWidget = (props) => {
     layer,
     fields = [],
     query = '',
+    description = '',
   } = value;
 
   const [mapData, setMapData] = React.useState(map_data);
@@ -30,6 +38,7 @@ const LayerSelectWidget = (props) => {
   const [serviceUrlError, setServiceUrlError] = React.useState('');
   const [serviceUrl, setServiceUrl] = React.useState(map_service_url);
   const [selectedLayer, setSelectedLayer] = React.useState(layer);
+
   const [availableLayers, setAvailableLayers] = React.useState(
     available_layers,
   );
@@ -39,7 +48,7 @@ const LayerSelectWidget = (props) => {
   const handleServiceUrlCheck = async () => {
     // fetch url, save it, populate layers options
     try {
-      let mapData = await fetchArcgisData(serviceUrl);
+      let mapData = await fetchArcGISData(serviceUrl);
       setCheckColor('green');
       setMapData(mapData);
       setServiceUrlError('');
@@ -56,6 +65,7 @@ const LayerSelectWidget = (props) => {
         map_service_url: serviceUrl,
         available_layers: availableLayers,
         map_data: mapData,
+        description,
       });
     } catch (e) {
       setCheckColor('youtube');
@@ -63,9 +73,58 @@ 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}`);
+      let fullLayer = await fetchArcGISData(`${service_url}/${id}`);
       return fullLayer;
     } catch (e) {}
   };
@@ -94,13 +153,24 @@ const LayerSelectWidget = (props) => {
     }
   };
 
+  const handleChangeDescription = (val) => {
+    if (val) {
+      onChange(id, {
+        ...value,
+        description: val,
+      });
+    }
+  };
+
   const handleChangeServiceUrl = (value) => {
     setServiceUrlError('');
     setCheckColor('');
-    setServiceUrl(value);
     setAvailableLayers('');
     setBuiltQuery('');
     setSelectedLayer('');
+    setMapData('');
+
+    setServiceUrl(value);
   };
 
   const handleReset = () => {
@@ -110,8 +180,8 @@ const LayerSelectWidget = (props) => {
     setAvailableLayers(available_layers);
     setBuiltQuery('');
     setSelectedLayer(layer);
+    setMapData(map_data);
   };
-
   return (
     <div
       style={{
@@ -119,54 +189,71 @@ const LayerSelectWidget = (props) => {
       }}
     >
       <Grid>
-        <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
-          Service URL
-        </h5>
-        <Grid.Row>
-          <Input
-            type="text"
-            onChange={(e, { value }) => handleChangeServiceUrl(value)}
-            style={{ width: '100%' }}
-            error={serviceUrlError}
-            value={serviceUrl}
-            // action
-            // actionPosition="right"
-          ></Input>
-
-          <span style={{ fontSize: '12px', color: 'darkred' }}>
-            {serviceUrlError.error}
-          </span>
-        </Grid.Row>
-        {serviceUrl && (
+        <div className="spaced-row">
+          <Grid.Row stretched>
+            <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
+              Service URL
+            </h5>
+          </Grid.Row>
+
           <Grid.Row>
-            {serviceUrl !== map_service_url && (
+            <Input
+              type="text"
+              onChange={(e, { value }) => handleChangeServiceUrl(value)}
+              style={{ width: '100%' }}
+              error={serviceUrlError}
+              value={serviceUrl}
+            ></Input>
+
+            <span style={{ fontSize: '12px', color: 'darkred' }}>
+              {serviceUrlError.error}
+            </span>
+          </Grid.Row>
+          {serviceUrl && (
+            <Grid.Row style={{ display: 'flex' }}>
+              {serviceUrl !== map_service_url && (
+                <Button
+                  size="small"
+                  compact
+                  className="layer-reset-button"
+                  onClick={handleReset}
+                >
+                  <Icon name={resetSVG} title="Reset" size="20px" />
+                </Button>
+              )}
               <Button
                 size="small"
+                color={checkColor}
                 compact
-                className="layer-reset-button"
-                onClick={handleReset}
+                className="layer-check-button"
+                onClick={handleServiceUrlCheck}
               >
-                <Icon name={resetSVG} title="Reset" size="20px" />
+                <Icon
+                  name={serviceUrlError ? closeSVG : checkSVG}
+                  title="Submit"
+                  size="20px"
+                />
               </Button>
-            )}
-            <Button
-              size="small"
-              color={checkColor}
-              compact
-              className="layer-check-button"
-              onClick={handleServiceUrlCheck}
-            >
-              <Icon
-                name={serviceUrlError ? closeSVG : checkSVG}
-                title="Submit"
-                size="20px"
-              />
-            </Button>
-          </Grid.Row>
+            </Grid.Row>
+          )}
+        </div>
+        {mapData && mapData.mapName && (
+          <div className="spaced-row">
+            <Grid.Row>
+              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
+                Map name:
+              </h5>
+              <p>{mapData.mapName}</p>
+            </Grid.Row>
+          </div>
         )}
         {availableLayers && availableLayers.length > 0 && (
-          <>
-            <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>Layer</h5>
+          <div className="spaced-row">
+            <Grid.Row>
+              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
+                Layer
+              </h5>
+            </Grid.Row>
             <Grid.Row>
               <Select
                 onChange={(e, { value }) => handleSelectLayer(value)}
@@ -176,10 +263,31 @@ const LayerSelectWidget = (props) => {
                 value={selectedLayer}
               />
             </Grid.Row>
-          </>
+          </div>
+        )}
+        {availableLayers && availableLayers.length > 0 && (
+          <div className="spaced-row">
+            <Grid.Row stretched>
+              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
+                Description
+              </h5>
+            </Grid.Row>
+            <Grid.Row stretched>
+              <div className="map-layer-description-field">
+                <RichTextWidget
+                  title="description"
+                  onChange={(name, value) => {
+                    handleChangeDescription(value);
+                  }}
+                  value={value.description}
+                  placeholder="Set Description"
+                />
+              </div>
+            </Grid.Row>
+          </div>
         )}
         {availableLayers && fields && fields.length > 0 && (
-          <>
+          <div className="spaced-row">
             <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
               Query Layer
             </h5>
@@ -194,7 +302,7 @@ const LayerSelectWidget = (props) => {
               />
             </Grid.Row>
             {builtQuery && (
-              <Grid.Row>
+              <Grid.Row style={{ display: 'flex' }}>
                 <Button
                   type="submit"
                   size="tiny"
@@ -223,11 +331,21 @@ const LayerSelectWidget = (props) => {
                 <strong>{field.alias}</strong> ({field.type})
               </p>
             ))}
-          </>
+          </div>
         )}
       </Grid>
     </div>
   );
 };
 
-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/LayersPanel.jsx → widgets/LayersPanelWidget.jsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from 'semantic-ui-react';
 import LayerSelectWidget from './LayerSelectWidget';
 
-const LayersPanel = ({ data, onChange, block }) => {
+const LayersPanelWidget = ({ data, onChange, block }) => {
   const map_layers = React.useMemo(() => data.map_layers || [], [
     data.map_layers,
   ]);
@@ -55,4 +55,4 @@ const LayersPanel = ({ data, onChange, block }) => {
   );
 };
 
-export default LayersPanel;
+export default LayersPanelWidget;

package/src/components/{Blocks/EEAMap/components/widgets → widgets}/LegendWidget.jsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
-import { fetchArcgisData } from '../../utils';
+import { fetchArcGISData, setLegendColumns } from '../../utils';
 import { Icon } from '@plone/volto/components';
+import { serializeNodes } from 'volto-slate/editor/render';
 
 import rightKeySVG from '@plone/volto/icons/right-key.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';
+import { withDeviceSize } from '../../hocs';
 
 const LayerLegend = ({ data }) => {
-  const [expand, setExpand] = React.useState(true);
   const [legendRows, setLegendRows] = React.useState([]);
 
   const { id, name } = data.layer || {};
 
   const fetchLegend = async (url, activeLayerID) => {
-    let legendData = await fetchArcgisData(url);
+    let legendData = await fetchArcGISData(url);
 
     const { layers = [] } = legendData;
     const selectedLayer = layers.filter((l, i) => l.layerId === activeLayerID);
@@ -27,27 +28,18 @@ const LayerLegend = ({ data }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, data.map_service_url]);
   return (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
+    <Grid.Column>
       <h5
-        role="presentation"
-        onClick={() => setExpand(!expand)}
         style={{
           marginTop: '15px',
           marginBottom: '5px',
-          cursor: 'pointer',
-          display: 'flex',
         }}
       >
-        <Icon
-          name={expand ? downKeySVG : rightKeySVG}
-          title={expand ? 'Collapse' : 'Expand'}
-          size="17px"
-        />
         {name}
       </h5>
+      {data.description && serializeNodes(data.description)}
       <div style={{ display: 'flex', flexDirection: 'column' }}>
-        {expand &&
-          legendRows.length > 0 &&
+        {legendRows.length > 0 &&
           legendRows.map((item, i) => {
             return (
               <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
@@ -62,39 +54,61 @@ const LayerLegend = ({ data }) => {
             );
           })}
       </div>
-    </div>
+    </Grid.Column>
   );
 };
 
 const LegendWidget = (props) => {
   const data = React.useMemo(() => props.data, [props.data]);
+  const { device = '' } = props;
+
+  const [expand, setExpand] = React.useState(true);
+
   const { layers = {} } = data;
-  const { map_layers = [] } = layers;
+  const map_layers =
+    layers &&
+    layers.map_layers &&
+    layers.map_layers.length > 0 &&
+    layers.map_layers.length > 3
+      ? layers?.map_layers.slice(0, 3)
+      : layers?.map_layers;
 
+  const legendColumns =
+    map_layers && setLegendColumns(map_layers.length, device);
   return (
     <>
-      <div style={{ margin: '10px 0' }}>
-        <Grid>
-          <Grid.Row>
-            <Grid.Column>
-              <h4>Legend:</h4>
-              {map_layers.length === 0 && (
-                <p>
-                  No layer found for legend. Please add a map layer from editor.
-                </p>
-              )}
-
+      <div className="legend-container">
+        <h4
+          role="presentation"
+          className="legend-title"
+          onClick={() => setExpand(!expand)}
+        >
+          <Icon
+            name={expand ? downKeySVG : rightKeySVG}
+            title={expand ? 'Collapse' : 'Expand'}
+            size="17px"
+          />
+          Legend:
+        </h4>
+        <Grid columns={legendColumns}>
+          {(!map_layers || map_layers.length === 0) && (
+            <p>
+              No layer found for legend. Please add a map layer from editor.
+            </p>
+          )}
+          {expand && (
+            <Grid.Row divided>
               {map_layers &&
                 map_layers.length > 0 &&
                 map_layers.map((l, i) => (
                   <LayerLegend key={i} data={l.map_layer} />
                 ))}
-            </Grid.Column>
-          </Grid.Row>
+            </Grid.Row>
+          )}
         </Grid>
       </div>
     </>
   );
 };
 
-export default React.memo(LegendWidget);
+export default withDeviceSize(React.memo(LegendWidget));

package/src/components/{Blocks/EEAMap/components/widgets → widgets}/MapEditorWidget.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Modal, Button, Grid } from 'semantic-ui-react';
 import Webmap from '../Webmap';
+
 import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
 
 import PanelsSchema from './panelsSchema';
@@ -37,7 +38,6 @@ const MapEditorWidget = (props) => {
   };
 
   let schema = PanelsSchema({ data: dataForm });
-
   return (
     <FormFieldWrapper {...props}>
       <Modal