@eeacms/volto-eea-map 4.0.0 → 5.0.0

package/src/Blocks/EmbedEEAMap/Edit.jsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { Message } from 'semantic-ui-react';
+
+import { SidebarPortal } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import { schema } from './schema';
+import View from './View';
+
+const Edit = (props) => {
+  const { block, onChangeBlock, selected, data } = props;
+
+  const url = useMemo(() => flattenToAppURL(data.vis_url), [data.vis_url]);
+
+  return (
+    <>
+      {!url && (
+        <Message>Please select a "Map (simple)" from block editor.</Message>
+      )}
+      <View {...props} mode="edit" />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/Blocks/EmbedEEAMap/View.jsx

@@ -0,0 +1,122 @@
+import React, { useMemo, useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { getContent } from '@plone/volto/actions';
+import { PrivacyProtection } from '@eeacms/volto-embed';
+import { getLayers } from '@eeacms/volto-eea-map/Arcgis/helpers';
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import Toolbar from '@eeacms/volto-eea-map/Toolbar/Toolbar';
+
+import { getMapData } from './helpers';
+
+const View = (props) => {
+  const { id, mode, data, getContent, content } = props;
+  const {
+    vis_url,
+    data_query_params,
+    enable_queries,
+    show_note = true,
+    show_more_info = true,
+    show_share = true,
+    dataprotection = { enabled: true },
+    height = '',
+  } = data;
+
+  const url = useMemo(() => flattenToAppURL(vis_url), [vis_url]);
+
+  const mapData = useMemo(() => getMapData({ content, data }), [content, data]);
+
+  const mapServiceURL = useMemo(() => {
+    const url = getLayers(mapData)?.[0]?.url;
+
+    if (url) {
+      return `${url}?f=jsapi`;
+    }
+    return '';
+  }, [mapData]);
+
+  const definitionExpression = useMemo(
+    () =>
+      enable_queries
+        ? {
+            id: uuid(),
+            combinator: 'and',
+            not: false,
+            rules: data_query_params
+              .map((query) => {
+                if (!query.alias || !query.i) {
+                  return null;
+                }
+                return {
+                  id: uuid(),
+                  dataQuery: [query.i],
+                  field: query.alias,
+                  operator: '=',
+                  value: '',
+                  valueSource: 'value',
+                };
+              })
+              .filter((query) => {
+                return query?.field;
+              }),
+          }
+        : null,
+    [data_query_params, enable_queries],
+  );
+
+  useEffect(() => {
+    if (mode !== 'edit') return;
+    const mapPath = flattenToAppURL(mapData['@id'] || '');
+    if (!mapData?.error && url && url !== mapPath) {
+      getContent(url, null, id);
+    }
+  }, [id, mode, url, mapData, getContent]);
+
+  if (!mapData || !url) {
+    return null;
+  }
+
+  if (mapData?.error) {
+    return <p dangerouslySetInnerHTML={{ __html: mapData.error }} />;
+  }
+
+  return (
+    <PrivacyProtection
+      {...props}
+      data={mapServiceURL ? { ...data, url: mapServiceURL } : data}
+    >
+      <div className="embed-map-visualization">
+        <MapBuilder
+          data={mapData}
+          properties={{ ...(props.properties || {}), definitionExpression }}
+          height={height}
+        />
+        <Toolbar
+          style={{ marginTop: '1rem' }}
+          data={{
+            ...data,
+            show_note,
+            show_sources: true,
+            show_more_info,
+            show_share,
+            dataprotection,
+            mapData,
+          }}
+        />
+      </div>
+    </PrivacyProtection>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => {
+      return {
+        content: state.content.subrequests?.[props.id]?.data,
+      };
+    },
+    { getContent },
+  ),
+)(View);

package/src/Blocks/EmbedEEAMap/helpers.js

@@ -0,0 +1,12 @@
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
+
+function getMapData({ content = {}, data }) {
+  const map_visualization_data =
+    content?.map_visualization_data || data?.map_visualization_data || {};
+  return {
+    ...pickMetadata(content),
+    ...map_visualization_data,
+  };
+}
+
+export { getMapData };

package/src/Blocks/EmbedEEAMap/schema.js

@@ -0,0 +1,126 @@
+const protectionSchema = {
+  title: 'Data Protection',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'privacy_statement',
+        'privacy_cookie_key',
+        'enabled',
+        'background_image',
+      ],
+    },
+  ],
+
+  properties: {
+    privacy_statement: {
+      title: 'Privacy statement',
+      description: 'Defined in template. Change only if necessary',
+      widget: 'slate_richtext',
+      className: 'slate-Widget',
+      defaultValue: [
+        {
+          children: [
+            {
+              text: 'This map is hosted by a third party, Environmental Systems Research Institute. By showing the external content you accept the terms and conditions of ',
+            },
+            {
+              type: 'a',
+              url: 'https://www.esri.com',
+              children: [
+                {
+                  text: 'esri.com',
+                },
+              ],
+            },
+            {
+              text: '. This includes their cookie policies, which we have no control over.',
+            },
+          ],
+        },
+      ],
+    },
+    privacy_cookie_key: {
+      title: 'Privacy cookie key',
+      description: 'Use default for Esri maps, otherwise change',
+      defaultValue: 'esri-maps',
+    },
+    enabled: {
+      title: 'Data protection disclaimer enabled',
+      description: 'Enable/disable the privacy protection',
+      type: 'boolean',
+    },
+    background_image: {
+      title: 'Static map preview image',
+      widget: 'file',
+      required: true,
+    },
+  },
+
+  required: ['background_image'],
+};
+
+export const schema = {
+  title: 'Embed Map layers (ArcGis)',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['vis_url', 'description', 'height'],
+    },
+    {
+      id: 'toolbar',
+      title: 'Toolbar',
+      fields: ['show_note', 'show_more_info', 'show_share'],
+    },
+    {
+      fields: ['dataprotection'],
+      title: 'Data Protection',
+    },
+  ],
+  properties: {
+    vis_url: {
+      widget: 'internal_url',
+      title: 'Visualization',
+    },
+    height: {
+      title: 'Height',
+      description:
+        'Map block height in px. Default is 500px. Change only if necessary',
+      type: 'number',
+    },
+    description: {
+      title: 'Description',
+      widget: 'slate',
+    },
+    show_note: {
+      title: 'Show note',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    show_sources: {
+      title: 'Show sources',
+      description: 'Will show sources set in this page Data provenance',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    show_more_info: {
+      title: 'Show more info',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    show_share: {
+      title: 'Show share button',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    dataprotection: {
+      widget: 'object',
+      schema: protectionSchema,
+      default: { enabled: true },
+    },
+  },
+  required: [],
+};

package/src/{components → Toolbar}/Share.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Popup, Input, Button } from 'semantic-ui-react';
-import { useCopyToClipboard } from '../utils.js';
+import useCopyToClipboard from '@eeacms/volto-eea-map/hooks/useCopyToClipboard';
 import cx from 'classnames';
 
 const Share = ({ contentTypeLink = '' }) => {

package/src/{components/ExtraViews.jsx → Toolbar/Toolbar.jsx}

@@ -8,29 +8,26 @@ import {
   MoreInfo,
   Share,
 } from '@eeacms/volto-embed/Toolbar';
-import LegendView from '@eeacms/volto-eea-map/components/LegendView';
 
 import '@eeacms/volto-embed/Toolbar/styles.less';
 
-const ExtraViews = ({ data, screen }) => {
-  const toolbar = useRef();
+const Toolbar = ({ data, screen, style }) => {
+  const el = useRef();
   const [mobile, setMobile] = useState(false);
   const {
-    map_visualization_data = {},
+    mapData = {},
     description,
-    show_legend,
-    show_viewer,
     show_note = true,
     show_sources = true,
     show_more_info = true,
     show_share = true,
   } = data;
 
-  const { data_provenance = {}, figure_note = [] } = map_visualization_data;
+  const { data_provenance = {}, figure_note = [] } = mapData;
 
   useEffect(() => {
-    if (toolbar.current) {
-      const toolbarParentWidth = toolbar.current.parentElement.offsetWidth;
+    if (el.current) {
+      const toolbarParentWidth = el.current.parentElement.offsetWidth;
 
       if (toolbarParentWidth < 600 && !mobile) {
         setMobile(true);
@@ -42,17 +39,18 @@ const ExtraViews = ({ data, screen }) => {
 
   return (
     <>
-      {show_legend && map_visualization_data && (
-        <LegendView data={map_visualization_data} show_viewer={show_viewer} />
-      )}
-      <div className={cx('visualization-toolbar', { mobile })} ref={toolbar}>
+      <div
+        className={cx('visualization-toolbar', { mobile })}
+        style={style}
+        ref={el}
+      >
         <div className="left-col">
           {show_note && <FigureNote notes={figure_note || []} />}
           {show_sources && <Sources sources={data_provenance?.data} />}
-          {show_more_info && <MoreInfo href={map_visualization_data['@id']} />}
+          {show_more_info && <MoreInfo href={mapData['@id']} />}
         </div>
         <div className="right-col">
-          {show_share && <Share href={map_visualization_data['@id']} />}
+          {show_share && <Share href={mapData['@id']} />}
         </div>
       </div>
       {description && serializeNodes(description)}
@@ -62,4 +60,4 @@ const ExtraViews = ({ data, screen }) => {
 
 export default connect((state) => ({
   screen: state.screen,
-}))(ExtraViews);
+}))(Toolbar);

package/src/{components/visualization → Views}/VisualizationView.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { hasBlocksData } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { pickMetadata } from '@eeacms/volto-embed/helpers';
-import Webmap from '../Webmap';
-import ExtraViews from '../ExtraViews';
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import Toolbar from '../Toolbar/Toolbar';
 
 const VisualizationView = (props) => {
   const content = props && props.content ? props.content : {};
 
-  const map_visualization_data =
+  const mapData =
     content && content.map_visualization_data
       ? content.map_visualization_data
       : {};
@@ -19,17 +19,16 @@ const VisualizationView = (props) => {
         <RenderBlocks {...props} />
       ) : (
         <>
-          <Webmap data={map_visualization_data} />
-          <ExtraViews
+          <MapBuilder data={mapData} />
+          <Toolbar
+            style={{ marginTop: '1rem' }}
             data={{
-              show_viewer: true,
-              show_legend: true,
               show_note: false,
               show_sources: false,
               show_more_info: false,
               show_share: true,
-              map_visualization_data: {
-                ...map_visualization_data,
+              mapData: {
+                ...mapData,
                 ...pickMetadata(content),
               },
             }}

package/src/Widgets/ArcgisColorPickerWidget.jsx

@@ -0,0 +1,95 @@
+import { useEffect, useState, useRef } from 'react';
+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';
+
+const ReactColor = loadable.lib(() => import('react-color'));
+
+function colorToRGBA(color) {
+  const r = color.r;
+  const g = color.g;
+  const b = color.b;
+  const a = color.a;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+export default function ArcgisColorPickerWidget(props) {
+  const el = useRef(null);
+  const colorPickerEl = useRef(null);
+  const { $map, id, value, onChange, available_colors } = props;
+  const [showColorPicker, setShowColorPicker] = useState(false);
+
+  const color = new $map.current.modules.AgColor(value);
+
+  function onClickOutside(e) {
+    if (el.current && !el.current.contains(e.target)) {
+      setShowColorPicker(false);
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('click', onClickOutside);
+
+    return () => {
+      window.removeEventListener('click', onClickOutside);
+    };
+  }, []);
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div ref={el} style={{ display: 'flex', alignItems: 'center' }}>
+        <Button
+          style={{
+            margin: 0,
+            backgroundColor: colorToRGBA(color),
+          }}
+          onClick={() =>
+            setShowColorPicker((showColorPicker) => !showColorPicker)
+          }
+          size="small"
+          fluid
+          title="Show color picker"
+        />
+        <Button
+          compact
+          style={{ margin: 0, padding: '8px' }}
+          onClick={() => onChange(id, null)}
+        >
+          <Icon name={clearSVG} size="18px" color="red" style={{ margin: 0 }} />
+        </Button>
+        {showColorPicker && (
+          <div
+            ref={colorPickerEl}
+            style={{
+              position: 'absolute',
+              bottom: '100%',
+              left: '50%',
+              transform: 'translateX(-50%)',
+            }}
+          >
+            <ReactColor>
+              {({ SketchPicker }) => {
+                return (
+                  <SketchPicker
+                    width="180px"
+                    style={{
+                      borderBottomLeftRadius: 0,
+                      borderBottomRightRadius: 0,
+                    }}
+                    colors={available_colors}
+                    color={color}
+                    onChangeComplete={(color) => {
+                      const { r, g, b, a } = color.rgb;
+                      onChange(id, [r, g, b, a]);
+                    }}
+                  />
+                );
+              }}
+            </ReactColor>
+          </div>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+}

package/src/Widgets/ArcgisRendererWidget/ArcgisRendererWidget.jsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { compose } from 'redux';
+import { injectIntl } from 'react-intl';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import {
+  customSelectStyles,
+  DropdownIndicator,
+  ClearIndicator,
+  Option,
+  selectTheme,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+import {
+  rendererTypes,
+  renderersMapping,
+} from '@eeacms/volto-eea-map/constants';
+import RendererEditor from './RendererEditor/_Editor';
+import RendererEditorModal from './RendererEditor/_EditorModal';
+import { simpleFillSymbol } from './RendererEditor/_defaults';
+
+import editSVG from '@plone/volto/icons/editing.svg';
+
+function ArcgisRendererWidget(props) {
+  const [open, setOpen] = useState(false);
+  const { value, id, intl, onChange } = props;
+  const $type = renderersMapping[value?.type] || value?.type;
+  const type = normalizeValue(rendererTypes, $type, intl);
+
+  const Select = props.reactSelect.default;
+
+  return (
+    <>
+      <FormFieldWrapper
+        {...props}
+        title={
+          <button
+            className="btn-primary"
+            style={{ fontSize: 'var(--font-size-small)' }}
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            <Icon name={editSVG} size="20px" />
+            Renderer
+          </button>
+        }
+      >
+        <Select
+          id={`field-${id}`}
+          name={id}
+          menuShouldScrollIntoView={false}
+          isDisabled={false}
+          isSearchable={true}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          isMulti={false}
+          options={rendererTypes}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            MultiValueContainer,
+            DropdownIndicator,
+            ClearIndicator,
+            Option: props.customOptionStyling || Option,
+          }}
+          value={type}
+          placeholder="Select a renderer type..."
+          onChange={(selectedOption) => {
+            return onChange(id, {
+              autocast: true,
+              type:
+                selectedOption && selectedOption.value !== 'no-value'
+                  ? selectedOption.value
+                  : undefined,
+              ...(selectedOption.value === 'simple'
+                ? { symbol: simpleFillSymbol }
+                : {}),
+            });
+          }}
+        />
+      </FormFieldWrapper>
+      <div className="arcgis-renderer-editor">
+        <RendererEditor {...props} type={$type} />
+        {open && (
+          <RendererEditorModal
+            value={value}
+            onChange={(newValue) => {
+              onChange(id, newValue);
+            }}
+            onClose={() => {
+              setOpen(false);
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+export const ArcgisRendererWidgetComponent = injectIntl(ArcgisRendererWidget);
+
+export default compose(injectLazyLibs(['reactSelect']))(
+  ArcgisRendererWidgetComponent,
+);

package/src/Widgets/ArcgisRendererWidget/RendererEditor/ClassBreaks.jsx

@@ -0,0 +1,8 @@
+export default function ClassBreaks() {
+  return (
+    <p>
+      Renderer visual editor under work. Please edit it through json editor by
+      pressing the "Renderer" button
+    </p>
+  );
+}

package/src/Widgets/ArcgisRendererWidget/RendererEditor/Dictionary.jsx

@@ -0,0 +1,8 @@
+export default function Dictionary() {
+  return (
+    <p>
+      Renderer visual editor under work. Please edit it through json editor by
+      pressing the "Renderer" button
+    </p>
+  );
+}

package/src/Widgets/ArcgisRendererWidget/RendererEditor/DotDensity.jsx

@@ -0,0 +1,8 @@
+export default function DotDensity() {
+  return (
+    <p>
+      Renderer visual editor under work. Please edit it through json editor by
+      pressing the "Renderer" button
+    </p>
+  );
+}

package/src/Widgets/ArcgisRendererWidget/RendererEditor/Heatmap.jsx

@@ -0,0 +1,8 @@
+export default function Heatmap() {
+  return (
+    <p>
+      Renderer visual editor under work. Please edit it through json editor by
+      pressing the "Renderer" button
+    </p>
+  );
+}

package/src/Widgets/ArcgisRendererWidget/RendererEditor/PieChart.jsx

@@ -0,0 +1,8 @@
+export default function PieChart() {
+  return (
+    <p>
+      Renderer visual editor under work. Please edit it through json editor by
+      pressing the "Renderer" button
+    </p>
+  );
+}