@eeacms/volto-eea-map 0.1.34 → 1.0.0

package/src/components/widgets/SimpleColorPickerWidget.jsx

@@ -3,6 +3,7 @@ import { FormFieldWrapper, Icon } from '@plone/volto/components';
 import { Button } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
 
 const ReactColor = loadable.lib(() => import('react-color'));
 
@@ -10,17 +11,33 @@ export default (props) => {
   const { id, value, onChange, available_colors } = props;
   const [showPicker, setShowPicker] = React.useState(false);
 
+  const [color, setColor] = React.useState(value);
+
+  const handleChangeColor = (valColor) => {
+    setColor(valColor);
+  };
+
+  const handleConfirmColor = () => {
+    onChange(id, color);
+    setShowPicker(false);
+  };
+
+  const handleAbortColor = () => {
+    setColor(value);
+    setShowPicker(false);
+  };
+
   return (
     <FormFieldWrapper
       {...props}
       draggable={false}
       className="simple-color-picker-widget"
     >
-      <div>
+      <div style={{ position: 'relative' }}>
         <Button.Group fluid>
           <Button
-            color={value}
-            style={{ backgroundColor: value }}
+            color={value?.hex ? value?.hex : 'black'}
+            style={{ backgroundColor: value?.hex ? value?.hex : 'black' }}
             onClick={() => setShowPicker(true)}
             size="small"
             fluid
@@ -35,27 +52,67 @@ export default (props) => {
           >
             <Icon name={clearSVG} size="18px" color="red" />
           </Button>
+          {showPicker ? (
+            <div
+              style={{
+                position: 'absolute',
+                top: '0',
+                zIndex: '77',
+                background: 'lightgrey',
+                display: 'flex',
+                flexDirection: 'column',
+                padding: '5px',
+                borderRadius: '2px',
+              }}
+            >
+              <ReactColor>
+                {({ SketchPicker }) => {
+                  return (
+                    <SketchPicker
+                      width="180px"
+                      colors={available_colors}
+                      color={
+                        color?.rgb
+                          ? color.rgb
+                          : {
+                              r: 0,
+                              g: 0,
+                              b: 0,
+                              a: 1,
+                            }
+                      }
+                      onChangeComplete={(value) => {
+                        handleChangeColor(value);
+                      }}
+                    ></SketchPicker>
+                  );
+                }}
+              </ReactColor>
+              <Button.Group>
+                <Button
+                  size="tiny"
+                  compact
+                  title="Reset color"
+                  style={{ paddingLeft: '8px', paddingRight: '0px' }}
+                  onClick={() => handleAbortColor()}
+                >
+                  <Icon name={clearSVG} size="18px" />
+                </Button>
+                <Button
+                  onClick={() => handleConfirmColor()}
+                  color="green"
+                  compact
+                  size="tiny"
+                  title="Confirm color"
+                >
+                  <Icon name={checkSVG} size="18px" />
+                </Button>
+              </Button.Group>
+            </div>
+          ) : (
+            ''
+          )}
         </Button.Group>
-
-        {showPicker ? (
-          <ReactColor>
-            {({ SketchPicker }) => {
-              return (
-                <SketchPicker
-                  width="180px"
-                  colors={available_colors}
-                  color={value || '#000'}
-                  onChangeComplete={(value) => {
-                    setShowPicker(false);
-                    onChange(id, value.hex);
-                  }}
-                ></SketchPicker>
-              );
-            }}
-          </ReactColor>
-        ) : (
-          ''
-        )}
       </div>
     </FormFieldWrapper>
   );

package/src/index.js

@@ -2,16 +2,20 @@ import EmbedMapView from './components/Blocks/EmbedEEAMap/View';
 import EmbedMapEdit from './components/Blocks/EmbedEEAMap/Edit';
 
 import world from '@plone/volto/icons/world.svg';
+
 import DataQueryWidget from './components/widgets/DataQueryWidget';
 import LayerSelectWidget from './components/widgets/LayerSelectWidget';
-import MapEditorWidget from './components/widgets/MapEditorWidget';
+
 import VisualizationEditorWidget from './components/visualization/VisualizationEditorWidget';
 import VisualizationView from './components/visualization/VisualizationView';
+
 import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidget';
 
 import { data_visualizations } from './middlewares';
 import * as addonReducers from './reducers';
 
+import './less/global.less';
+
 export default (config) => {
   config.settings.allowed_cors_destinations = [
     ...(config.settings.allowed_cors_destinations || []),
@@ -51,7 +55,6 @@ export default (config) => {
     ],
   };
 
-  config.widgets.widget.map_edit_widget = MapEditorWidget;
   config.widgets.widget.map_layers_widget = LayerSelectWidget;
   config.widgets.widget.data_query_widget = DataQueryWidget;
   config.widgets.widget.simple_color_picker_widget = SimpleColorPickerWidget;

package/src/{styles/map.css → less/global.less}

@@ -1,3 +1,21 @@
+@import (multiple, reference, optional) '../../theme.config';
+
+/* Enables customization of addons */
+.loadAddonOverrides() {
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.overrides';
+}
+
+/* Helper to load variables */
+.loadAddonVariables() {
+  @import (optional) '@{addonelement}.variables';
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.variables';
+}
+
+@import './variables.less';
+
+// TODO: pull out colors and dimensions into variables
 .map-edit-container {
   display: flex;
 }
@@ -162,6 +180,8 @@
 }
 
 .legend-container {
+  display: flex;
+  flex-direction: column;
   margin: 15px 0;
 }
 
@@ -179,10 +199,20 @@
 }
 
 .legend-action {
-  padding: 10px 0;
+  z-index: 22;
+  display: inline-flex;
+  align-items: center;
+  padding-bottom: 3px;
   border: none;
   background: transparent;
+  background-color: transparent;
+  color: #3d5265;
   cursor: pointer;
+  font-weight: bold;
+
+  &:hover {
+    color: @secondaryColor;
+  }
 }
 
 .map-number-input {
@@ -195,6 +225,46 @@
   color: green;
 }
 
+/* sources */
+
+.eea-map-sources-list {
+  margin: 0;
+  list-style: decimal inside;
+  padding-inline-start: 0;
+}
+
+#eea-map-sources-popup .ui.popup {
+  min-width: 600px;
+  background-color: #f9f9f9;
+  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+}
+
+.eea-map-sources-button {
+  display: inline-flex;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 3px;
+  border: none;
+  background-color: transparent;
+  color: @textColor;
+  cursor: pointer;
+  font-weight: bold;
+
+  .icon {
+    margin-left: 0.5rem;
+  }
+
+  &:hover {
+    color: @secondaryColor;
+  }
+
+  &.expanded {
+    padding-bottom: 0;
+    border-bottom: 3px solid @secondaryColor;
+    color: @secondaryColor;
+  }
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;
@@ -212,4 +282,9 @@
     max-width: 0.2cm;
     height: 0.2cm;
   }
+
+  .eea-map-sources-container,
+  #eea-map-sources-popup {
+    display: none;
+  }
 }

package/src/less/variables.less

@@ -0,0 +1,5 @@
+@type: extra;
+
+@element: custom;
+
+@grey-1: #f9f9f9;

package/src/utils.js

@@ -30,4 +30,97 @@ const fetchArcGISData = async (url) => {
   return data;
 };
 
-export { setLegendColumns, fetchArcGISData };
+const applyQueriesToMapLayers = (
+  map_visualization,
+  block_data_query_params,
+  enable_queries,
+) => {
+  //break reference to the original map_visualization object
+  //so i safely manipulate data
+  var altMapData = map_visualization
+    ? JSON.parse(JSON.stringify(map_visualization))
+    : '';
+
+  var rules = [];
+  if (
+    enable_queries &&
+    block_data_query_params &&
+    block_data_query_params.length > 0 &&
+    altMapData.layers &&
+    altMapData.layers.map_layers &&
+    altMapData.layers.map_layers.length > 0
+  ) {
+    altMapData.layers.map_layers.forEach((l, j) => {
+      block_data_query_params.forEach((param, i) => {
+        const matchingFields =
+          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,
+              )
+            : [];
+        matchingFields.forEach((m, i) => {
+          const newRules = param.v
+            ? param.v.map((paramVal, i) => {
+                return {
+                  field: m.name,
+                  operator: '=',
+                  value: paramVal,
+                };
+              })
+            : [];
+          const concatRules = rules.concat(newRules);
+          const filteredRules = concatRules.filter(
+            (v, i, a) =>
+              a.findLastIndex(
+                (v2) => v2.field === v.field && v2.value === v.value,
+              ) === i,
+          );
+          rules = filteredRules;
+        });
+      });
+      let autoQuery = {
+        combinator: 'or',
+        rules,
+      };
+      altMapData.layers.map_layers[j].map_layer.query = autoQuery;
+    });
+  }
+  return altMapData;
+};
+
+const updateBlockQueryFromPageQuery = (data_query, data_query_params) => {
+  var pageDataQuery = JSON.parse(JSON.stringify(data_query));
+  var blockDataQuery = data_query_params
+    ? JSON.parse(JSON.stringify(data_query_params))
+    : '';
+  var newDataQuery = pageDataQuery.map((parameter, index) => {
+    //check if the parameter exists in data and has value
+    // then get its alias value and update it
+    //check if data_query param value is changed
+    //and change it in block data
+    if (
+      blockDataQuery &&
+      blockDataQuery[index] &&
+      parameter.i &&
+      blockDataQuery[index].i &&
+      parameter.i === blockDataQuery[index].i
+    ) {
+      return {
+        ...parameter,
+        alias: blockDataQuery[index]?.alias ? blockDataQuery[index]?.alias : '',
+        v: parameter?.v ? parameter?.v : '',
+      };
+    }
+
+    return parameter;
+  });
+  return newDataQuery;
+};
+
+export {
+  setLegendColumns,
+  fetchArcGISData,
+  applyQueriesToMapLayers,
+  updateBlockQueryFromPageQuery,
+};

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

@@ -1,65 +0,0 @@
-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>
-      <View data={data} id={id} />
-      <SidebarPortal selected={selected}>
-        <BlockDataForm
-          block={block}
-          title={schema.title}
-          schema={addPrivacyProtectionToSchema(schema)}
-          onChangeField={(id, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          formData={data}
-        />
-      </SidebarPortal>
-    </div>
-  );
-};
-
-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

@@ -1,55 +0,0 @@
-export const Schema = (props) => {
-  return {
-    title: 'EEA Map Block',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Default',
-        fields: [
-          'map_data',
-          'description',
-          'height',
-          'show_legend',
-          'show_download',
-          'show_viewer',
-          'show_sources',
-          'data_query_params',
-        ],
-      },
-    ],
-    properties: {
-      show_sources: {
-        title: 'Show sources',
-        type: 'boolean',
-      },
-      height: {
-        title: 'Height',
-        type: 'number',
-      },
-      description: {
-        title: 'Description',
-        widget: 'slate',
-      },
-      map_data: {
-        title: 'Edit map',
-        description: 'Open the map customization interface',
-        widget: 'map_edit_widget',
-      },
-      show_legend: {
-        title: 'Show legend',
-        type: 'boolean',
-      },
-
-      show_viewer: {
-        title: 'Show web viewer',
-        type: 'boolean',
-      },
-      data_query_params: {
-        title: 'Query parameters',
-        description: 'ddafdfas',
-        widget: 'data_query_widget',
-      },
-    },
-    required: [],
-  };
-};

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

@@ -1,44 +0,0 @@
-import React from 'react';
-
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import Webmap from '../../Webmap';
-import ExtraViews from '../../ExtraViews';
-
-import { PrivacyProtection } from '@eeacms/volto-embed';
-import { getContent } from '@plone/volto/actions';
-
-const View = (props) => {
-  const { data, id, path } = props || {};
-  const { map_data = {}, height = '' } = data;
-
-  React.useEffect(() => {
-    if (path) {
-      props.getContent(path, null, id);
-    }
-    //    eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [path]);
-
-  return (
-    <div>
-      <PrivacyProtection data={data} {...props}>
-        <Webmap data={map_data} height={height} id={id} />
-        <ExtraViews data={data} />
-      </PrivacyProtection>
-    </div>
-  );
-};
-
-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,
-    }),
-    {
-      getContent,
-    },
-  ),
-)(View);

package/src/components/widgets/MapEditorWidget.jsx

@@ -1,96 +0,0 @@
-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';
-
-const MapEditorWidget = (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);
-
-    //set map data for screenshot
-    // if (intValue.layers?.map_layers[0].map_layer?.map_service_url) {
-    //   onChange(
-    //     'url',
-    //     `${intValue.layers?.map_layers[0].map_layer?.map_service_url}?f=jsapi`,
-    //   );
-    // }
-    setOpen(false);
-  };
-
-  const handleClose = () => {
-    setIntValue(value);
-    setOpen(false);
-  };
-
-  const handleChangeField = (id, fieldVal) => {
-    setIntValue(fieldVal);
-  };
-
-  let schema = PanelsSchema({ data: dataForm });
-  return (
-    <FormFieldWrapper {...props}>
-      <Modal
-        id="map-editor-modal"
-        className="map-editor-modal"
-        onClose={handleClose}
-        onOpen={() => setOpen(true)}
-        open={open}
-        trigger={
-          <Button size="tiny" className="map-modal-trigger-button">
-            Open Map Editor
-          </Button>
-        }
-      >
-        <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(id, 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>
-    </FormFieldWrapper>
-  );
-};
-
-export default MapEditorWidget;