@eeacms/volto-eea-map 4.1.0 → 5.0.0

package/src/Arcgis/Editor/Panels/StructureBaseLayerPanel.jsx

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { InlineForm } from '@plone/volto/components';
+import { basemaps } from '@eeacms/volto-eea-map/constants';
+import { getBasemap } from '@eeacms/volto-eea-map/Arcgis/helpers';
+import Fold from '../Fold/Fold';
+
+import Panel from './Panel';
+
+const schema = {
+  title: 'Base layer',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['name', 'url_template'],
+    },
+  ],
+  properties: {
+    name: {
+      title: 'Name',
+      choices: basemaps,
+    },
+    url_template: {
+      title: 'Custom basemap',
+      widget: 'textarea',
+    },
+  },
+  required: [],
+};
+
+export default function StructureBaseLayerPanel({ value, onChangeValue }) {
+  const basemap = useMemo(
+    () => getBasemap({ basemap: value.basemap, base: value.base }) || {},
+    [value.basemap, value.base],
+  );
+
+  return (
+    <Panel
+      content={
+        <Fold title="Base layer" foldable>
+          <InlineForm
+            schema={schema}
+            formData={basemap}
+            onChangeField={(id, fieldValue) => {
+              const $value = { ...value };
+              delete $value.base; // not needed (backward compatibility)
+              onChangeValue({
+                ...$value,
+                basemap: {
+                  ...basemap,
+                  [id]: fieldValue,
+                },
+              });
+            }}
+          />
+        </Fold>
+      }
+    />
+  );
+}

package/src/Arcgis/Editor/Panels/StructureLayersPanel.jsx

@@ -0,0 +1,394 @@
+import { memo, useState, useEffect, useContext, useMemo } from 'react';
+import { compose } from 'redux';
+import { isNil, toNumber } from 'lodash';
+import { v4 as uuid } from 'uuid';
+import { QueryBuilder, Rule as QBRule, useRule } from 'react-querybuilder';
+import { Dimmer, Loader } from 'semantic-ui-react';
+import { Icon, InlineForm } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import addSVG from '@plone/volto/icons/add.svg';
+import {
+  debounce,
+  getLayers,
+  getLayerDefaults,
+} from '@eeacms/volto-eea-map/Arcgis/helpers';
+import EditorContext from '@eeacms/volto-eea-map/Arcgis/Editor/EditorContext';
+import Panel from './Panel';
+import Fold from '../Fold/Fold';
+
+function getLayersChoices(layers = []) {
+  return layers.map((layer) => [
+    layer.id.toString(),
+    `${
+      (layer.parentLayerId > -1 ? `${layer.parentLayerId}.` : '') + layer.id
+    } - ${layer.name} (${layer.type})`,
+  ]);
+}
+
+function getSublayers(subLayerIds, data) {
+  return subLayerIds?.reduce((acc, subLayerId) => {
+    const subLayer = data?.layers.find((layer) => layer.id === subLayerId);
+    if (!subLayer) return acc;
+    acc.push({
+      ...(subLayer || {}),
+      id: subLayerId,
+      subLayers: getSublayers(subLayer?.subLayerIds, data),
+    });
+    return acc;
+  }, []);
+}
+
+const RuleComponent = memo((props) => {
+  const [inputValue, setInputValue] = useState('');
+  const r = useRule(props);
+
+  const dataQuery = props.rule.dataQuery;
+
+  function handleKeyDown(event) {
+    if (!inputValue) return;
+    switch (event.key) {
+      case 'Enter':
+      case 'Tab':
+        if (dataQuery?.includes(inputValue)) {
+          setInputValue('');
+          event.preventDefault();
+          break;
+        }
+        r.generateOnChangeHandler('dataQuery')([
+          ...(dataQuery || []),
+          event.target.value,
+        ]);
+        setInputValue('');
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  }
+
+  const Select = props.reactSelectCreateable.default;
+
+  return (
+    <div className="custom-rule">
+      <div>
+        <label htmlFor="dataQuery" style={{ fontWeight: '500' }}>
+          Query parameters
+        </label>
+        <p
+          style={{
+            fontSize: '90%',
+            marginBottom: '0.25rem',
+            fontStyle: 'italic',
+          }}
+        >
+          When using page level parameters to filter the map, please specify the
+          corresponding name
+        </p>
+        <Select
+          id="dataQuery"
+          title="Data Query"
+          className="react-select"
+          classNamePrefix="react-select"
+          placeholder=""
+          isClearable
+          isMulti
+          menuIsOpen={false}
+          options={[]}
+          inputValue={inputValue}
+          value={dataQuery?.map((value) => ({ label: value, value })) || null}
+          onChange={(newValue) => {
+            r.generateOnChangeHandler('dataQuery')(
+              newValue?.map((value) => value.value) || [],
+            );
+          }}
+          onInputChange={(newValue) => setInputValue(newValue)}
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+      <QBRule {...props} />
+    </div>
+  );
+});
+
+const Rule = compose(injectLazyLibs(['reactSelectCreateable']))(RuleComponent);
+
+function Layer({ layer, layers, index, value, onChangeValue }) {
+  const uid = useState(uuid());
+  const { servicesApi, layersApi } = useContext(EditorContext);
+
+  const layerPath = useMemo(
+    () =>
+      !isNil(layer.url) && !isNil(layer.id) ? `${layer.url}/${layer.id}` : null,
+    [layer.url, layer.id],
+  );
+
+  const $service = useMemo(
+    () => ({
+      data: servicesApi.data[layer.url],
+      error: servicesApi.error[layer.url],
+      loading: servicesApi.loading[layer.url],
+      loaded: servicesApi.loaded[layer.url],
+      load: servicesApi.load,
+    }),
+    [servicesApi, layer.url],
+  );
+
+  const $layer = useMemo(
+    () => ({
+      data: layersApi.data[layerPath],
+      error: layersApi.error[layerPath],
+      loading: layersApi.loading[layerPath],
+      loaded: layersApi.loaded[layerPath],
+      load: layersApi.load,
+    }),
+    [layersApi, layerPath],
+  );
+
+  useEffect(() => {
+    if (!$service.loaded && !$service.loading && layer.url) {
+      debounce(
+        () => {
+          $service.load(layer.url);
+        },
+        300,
+        `fetch:${uid}:${layer.url}`,
+      );
+    }
+  }, [uid, $service, layer]);
+
+  useEffect(() => {
+    if (!$layer.loaded && !$layer.loading && !$layer.error && layerPath) {
+      debounce(
+        () => {
+          $layer.load(layerPath);
+        },
+        300,
+        `fetch:${uid}:${layerPath}`,
+      );
+    }
+  }, [uid, $layer, layerPath]);
+
+  useEffect(() => {
+    if (!$layer.loaded || $layer.data.id !== layer.id) return;
+    const defaults = getLayerDefaults($layer.data);
+    if (JSON.stringify(defaults) !== JSON.stringify(layer.defaults)) {
+      onChangeValue({
+        ...value,
+        layers: layers.map((layer, i) => {
+          if (i !== index) return layer;
+          return {
+            ...layer,
+            defaults,
+          };
+        }),
+      });
+    }
+  }, [index, layer, $layer, layers, value, onChangeValue]);
+
+  return (
+    <>
+      <Dimmer active={$service.loading || $layer.loading}>
+        <Loader />
+      </Dimmer>
+
+      <InlineForm
+        schema={{
+          title: `Layer ${index + 1}`,
+          fieldsets: [
+            {
+              id: 'default',
+              title: 'Default',
+              fields: [
+                'url',
+                ...($service.loaded ? ['layerId'] : []),
+                ...($service.loaded && $layer.loaded ? ['zoomToExtent'] : []),
+              ],
+            },
+          ],
+          properties: {
+            url: {
+              title: 'Service URL',
+              widget: 'textarea',
+              description: $service.error ? (
+                <p
+                  className="error"
+                  style={{
+                    fontSize: '10px',
+                    overflowWrap: 'break-word',
+                  }}
+                >
+                  {$service.error.message}
+                </p>
+              ) : null,
+            },
+            layerId: {
+              title: 'Layer',
+              choices: getLayersChoices($service.data?.layers),
+              widget: 'select',
+              description: $layer.error ? (
+                <p
+                  className="error"
+                  style={{
+                    fontSize: '10px',
+                    overflowWrap: 'break-word',
+                  }}
+                >
+                  {$layer.error.message}
+                </p>
+              ) : null,
+            },
+            zoomToExtent: {
+              title: 'Zoom to extent',
+              type: 'boolean',
+            },
+          },
+          required: [],
+        }}
+        formData={{
+          ...layer,
+          layerId: !isNil(layer.id)
+            ? {
+                label: `${layer.id}${layer.name ? ` - ${layer.name}` : ''}`,
+                value: layer.id,
+              }
+            : null,
+        }}
+        onChangeField={(id, fieldValue) => {
+          let $fieldValue = fieldValue;
+          let newLayer = {};
+
+          if (id === 'layerId') {
+            $fieldValue = toNumber(fieldValue) || 0;
+            newLayer =
+              $service.data?.layers.find((layer) => layer.id === $fieldValue) ||
+              {};
+          }
+
+          onChangeValue({
+            ...value,
+            layers: layers.map((layer, i) => {
+              if (i !== index)
+                return {
+                  ...layer,
+                  ...(id === 'zoomToExtent' ? { zoomToExtent: false } : {}),
+                };
+              if (id === 'url') {
+                return { url: $fieldValue };
+              }
+              return {
+                ...layer,
+                ...newLayer,
+                [id === 'layerId' ? 'id' : id]: $fieldValue,
+                subLayers: getSublayers(newLayer?.subLayerIds, $service.data),
+              };
+            }),
+          });
+        }}
+      />
+
+      {$service.loaded && $layer.loaded && $layer.data?.fields?.length && (
+        <>
+          <QueryBuilder
+            fields={
+              $layer.data.fields.map((field) => {
+                return { name: field.name, label: field.name };
+              }) || []
+            }
+            query={layer.definitionExpression}
+            onQueryChange={(query) => {
+              const newLayers = layers.map((layer, i) => {
+                if (i !== index) return layer;
+                return {
+                  ...layer,
+                  definitionExpression: query,
+                };
+              });
+              if (JSON.stringify(newLayers) !== JSON.stringify(layers)) {
+                onChangeValue({
+                  ...value,
+                  layers: newLayers,
+                });
+              }
+            }}
+            valueSource={'x'}
+            controlElements={{
+              rule: Rule,
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export default function StructureLayersPanel({
+  value,
+  properties,
+  onChangeValue,
+}) {
+  const data_query = properties?.data_query;
+
+  const layers = useMemo(
+    () =>
+      getLayers(
+        { layers: value.layers, styles: value.styles, data_query },
+        false,
+      ),
+    [value.layers, value.styles, data_query],
+  );
+
+  return (
+    <Panel
+      header={
+        <div style={{ width: '100%', textAlign: 'right' }}>
+          <button
+            className="btn-primary"
+            onClick={() => {
+              onChangeValue({
+                ...value,
+                layers: [
+                  ...layers,
+                  {
+                    id: null,
+                    url: null,
+                    type: null,
+                  },
+                ],
+              });
+            }}
+          >
+            <Icon name={addSVG} size="16px" /> Layer
+          </button>
+        </div>
+      }
+      content={
+        <>
+          {layers.map((layer, index) => (
+            <Fold
+              key={index}
+              title={`Layer ${index + 1}${
+                layer.name ? ` - ${layer.name}` : ''
+              }`}
+              onDelete={() => {
+                onChangeValue({
+                  ...value,
+                  layers: layers.filter((_, i) => i !== index),
+                });
+              }}
+              foldable
+              deletable
+            >
+              <Layer
+                layer={layer}
+                layers={layers}
+                index={index}
+                value={value}
+                onChangeValue={onChangeValue}
+              />
+            </Fold>
+          ))}
+        </>
+      }
+    />
+  );
+}

package/src/Arcgis/Editor/Panels/StructureWidgetsPanel.jsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { Icon, InlineForm } from '@plone/volto/components';
+import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
+import addSVG from '@plone/volto/icons/add.svg';
+import Panel from './Panel';
+import Fold from '../Fold/Fold';
+import { debounce, getWidgets } from '../../helpers';
+import {
+  expandKeys,
+  positions,
+  widgets as widgetsOptions,
+  getDefaultWidgets,
+  widgetsSchema,
+} from '@eeacms/volto-eea-map/constants';
+
+const Form = withVariationSchemaEnhancer(InlineForm);
+
+export default function StructureWidgetsPanel({ value, onChangeValue }) {
+  const [widgets, setWidgets] = useState(getWidgets(value));
+
+  return (
+    <Panel
+      header={
+        <div style={{ width: '100%', textAlign: 'right' }}>
+          <button
+            className="btn-primary"
+            onClick={() => {
+              const newWidgets = [
+                ...widgets,
+                { name: null, position: positions[0] },
+              ];
+              setWidgets(newWidgets);
+              debounce(
+                () => {
+                  onChangeValue({
+                    ...value,
+                    widgets: newWidgets,
+                  });
+                },
+                600,
+                'widgets:update',
+              );
+            }}
+          >
+            <Icon name={addSVG} size="16px" /> Widget
+          </button>
+        </div>
+      }
+      content={
+        <>
+          {widgets.map((widget, index) => {
+            const title = `Widget ${index + 1}${
+              widget.name ? ` (${widget.name})` : ''
+            }`;
+            const ExpandProperties = widget.ExpandProperties || {};
+            return (
+              <Fold
+                key={index}
+                title={title}
+                onDelete={() => {
+                  const newWidgets = widgets.filter((_, i) => i !== index);
+                  setWidgets(newWidgets);
+                  debounce(
+                    () => {
+                      onChangeValue({
+                        ...value,
+                        widgets: newWidgets,
+                      });
+                    },
+                    600,
+                    'widgets:update',
+                  );
+                }}
+                foldable
+                deletable
+              >
+                <Form
+                  schema={{
+                    title,
+                    fieldsets: [
+                      {
+                        id: 'default',
+                        title: 'Default',
+                        fields: ['name', 'position', 'expand'],
+                      },
+                    ],
+                    properties: {
+                      name: {
+                        title: 'Name',
+                        choices: widgetsOptions,
+                      },
+                      position: {
+                        title: 'Position',
+                        choices: positions,
+                      },
+                      expand: {
+                        title: 'Expand',
+                        type: 'boolean',
+                      },
+                      expandTooltip: {
+                        title: 'Expand tooltip',
+                      },
+                    },
+                    required: [],
+                  }}
+                  blocksConfig={{
+                    widget: {
+                      schemaEnhancer: ({ schema, formData }) => {
+                        return {
+                          ...schema,
+                          fieldsets: [
+                            {
+                              id: 'default',
+                              title: 'Default',
+                              fields: [
+                                'name',
+                                'position',
+                                ...Object.keys(
+                                  widgetsSchema[formData.name] || {},
+                                ),
+                                'expand',
+                                ...(formData.expand ? ['expandTooltip'] : []),
+                              ],
+                            },
+                          ],
+                          properties: {
+                            ...schema.properties,
+                            ...(widgetsSchema[formData.name] || {}),
+                          },
+                        };
+                      },
+                    },
+                  }}
+                  formData={{
+                    '@type': 'widget',
+                    ...widget,
+                    ...ExpandProperties,
+                  }}
+                  onChangeField={(id, fieldValue) => {
+                    const newWidget =
+                      id === 'name'
+                        ? getDefaultWidgets(
+                            value.settings?.map?.dimension,
+                          ).find(($widget) => $widget.name === fieldValue) || {}
+                        : {};
+                    const newWidgets = widgets.map(($widget, i) => {
+                      if (i !== index) return $widget;
+                      return {
+                        ...$widget,
+                        ...newWidget,
+                        ...(expandKeys.includes(id)
+                          ? {
+                              ExpandProperties: {
+                                ...ExpandProperties,
+                                [id]: fieldValue,
+                              },
+                            }
+                          : { [id]: fieldValue }),
+                      };
+                    });
+                    setWidgets(newWidgets);
+                    debounce(
+                      () => {
+                        onChangeValue({
+                          ...value,
+                          widgets: newWidgets,
+                        });
+                      },
+                      600,
+                      'widgets:update',
+                    );
+                  }}
+                />
+              </Fold>
+            );
+          })}
+        </>
+      }
+    />
+  );
+}

package/src/Arcgis/Editor/Panels/index.js

@@ -0,0 +1,6 @@
+export { default as Panel } from './Panel';
+export { default as StructureBaseLayerPanel } from './StructureBaseLayerPanel';
+export { default as StructureLayersPanel } from './StructureLayersPanel';
+export { default as StructureWidgetsPanel } from './StructureWidgetsPanel';
+export { default as SettingsGeneralPanel } from './SettingsGeneralPanel';
+export { default as SettingsLayersPanel } from './SettingsLayersPanel';

package/src/Arcgis/Editor/SidebarGroup.jsx

@@ -0,0 +1,62 @@
+import { useEffect, useState, useMemo } from 'react';
+import cx from 'classnames';
+
+import { Icon } from '@plone/volto/components';
+
+import upKeySVG from '@plone/volto/icons/up-key.svg';
+
+export default function SidebarGroup({ title, items, active, setActive }) {
+  const [expanded, setExpanded] = useState(false);
+  const isActive = useMemo(
+    () =>
+      active.sidebar === title &&
+      items.filter((item) => active.panel.title === item.title).length === 1,
+    [active, title, items],
+  );
+
+  useEffect(() => {
+    if (isActive) {
+      setExpanded(true);
+    }
+  }, [isActive]);
+
+  return (
+    <div
+      className={cx('sidebar-group', {
+        'sidebar-group--expanded': expanded,
+        'sidebar-group--is-active': isActive,
+      })}
+    >
+      <div
+        role="button"
+        tabIndex={0}
+        className="sidebar-group--title"
+        onClick={() => setExpanded(!expanded)}
+        onKeyDown={() => {}}
+      >
+        <div className="sidebar-group--title__icon">
+          <Icon name={upKeySVG} size="20px" />
+        </div>
+        <div className="sidebar-group--title__label">{title}</div>
+      </div>
+      {expanded &&
+        items.map((item) => (
+          <div
+            role="button"
+            tabIndex={0}
+            key={item.title}
+            className={cx('sidebar-group--item', {
+              'sidebar-group--item__is-active':
+                isActive && active.panel.title === item.title,
+            })}
+            onClick={() => {
+              setActive({ sidebar: title, panel: item });
+            }}
+            onKeyDown={() => {}}
+          >
+            {item.title}
+          </div>
+        ))}
+    </div>
+  );
+}