@opengeoweb/layer-select 14.2.2 → 14.4.0

package/index.esm.js

@@ -2,13 +2,13 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, AlertBanner, ToggleMenu, CustomDialog, sessionStorageProvider } from '@opengeoweb/shared';
-import { Filter, LayersAdd, Add, Cached, Edit, Visibility, Delete, MeteoGate, Copy } from '@opengeoweb/theme';
+import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomTooltip, SearchHighlight, SearchField, CustomToggleButton, AlertBanner, ToggleMenu, CustomDialog, sessionStorageProvider } from '@opengeoweb/shared';
+import { Filter, ArrowDropDownDown, LayersAdd, Add, Cached, Edit, Visibility, Delete, MeteoGate, Copy } from '@opengeoweb/theme';
 import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, mapListener, serviceListener, layersListener, openlayersListener, uiReducer, layerReducer, serviceReducer, mapReducer, useSetupDialog, mapSelectors, layerTypes, mapEnums } from '@opengeoweb/store';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { compact, countBy, partition } from 'lodash';
 import { snackbarListener, snackbarReducer, snackbarTypes, snackbarActions } from '@opengeoweb/snackbar';
-import { Switch, Grid, List, Box, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, LinearProgress, InputAdornment } from '@mui/material';
+import { Switch, Grid, List, ToggleButtonGroup, ToggleButton, Box, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, LinearProgress, InputAdornment } from '@mui/material';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { FixedSizeList } from 'react-window';
@@ -52,7 +52,9 @@ var en = {
 	"service-abstracts-label": "Abstracts",
 	"service-successfully-updated": "Service \"{{serviceName}}\" has been succesfully updated",
 	"unable-to-update-service": "Unable to update service, reason: \"{{message}}\"",
-	"service-has-been-deleted": "Service \"{{serviceName}}\" has been deleted"
+	"service-has-been-deleted": "Service \"{{serviceName}}\" has been deleted",
+	"add-to-all-maps": "Add to all maps",
+	"remove-from-all-maps": "Remove from all maps"
 };
 var fi = {
 	"layer-select": "Layer Select",
@@ -89,7 +91,9 @@ var fi = {
 	"service-abstracts-label": "Tiivistelmä",
 	"service-successfully-updated": "Palvelu \"{{serviceName}}\"  päivitetty onnistuneesti",
 	"unable-to-update-service": "Palvelun päivitys epäonnistui. Syy: \"{{message}}\"",
-	"service-has-been-deleted": "Palvelu \"{{serviceName}}\" poistettu"
+	"service-has-been-deleted": "Palvelu \"{{serviceName}}\" poistettu",
+	"add-to-all-maps": "Lisää kaikkiin karttoihin",
+	"remove-from-all-maps": "Poista kaikista kartoista"
 };
 var no = {
 	"layer-select": "Datavelger",
@@ -126,7 +130,9 @@ var no = {
 	"service-abstracts-label": "Sammendrag",
 	"service-successfully-updated": "Tjeneste \"{{serviceName}}\" har blitt oppdatert",
 	"unable-to-update-service": "Kan ikke oppdatere tjeneste, grunn: \"{{message}}\"",
-	"service-has-been-deleted": "Tjeneste \"{{serviceName}}\" har blitt slettet"
+	"service-has-been-deleted": "Tjeneste \"{{serviceName}}\" har blitt slettet",
+	"add-to-all-maps": "Legg til i alle kart",
+	"remove-from-all-maps": "Fjern fra alle kart"
 };
 var nl = {
 	"layer-select": "Layer Select",
@@ -163,7 +169,9 @@ var nl = {
 	"service-abstracts-label": "Beschrijving",
 	"service-successfully-updated": "Service \"{{serviceName}}\" is succesvol bijgewerkt",
 	"unable-to-update-service": "Bijwerken service niet mogelijk, reden: \"{{message}}\"",
-	"service-has-been-deleted": "Service \"{{serviceName}}\" is verwijderd"
+	"service-has-been-deleted": "Service \"{{serviceName}}\" is verwijderd",
+	"add-to-all-maps": "Toevoegen aan alle kaarten",
+	"remove-from-all-maps": "Verwijderen van alle kaarten"
 };
 var layerSelectTranslations = {
 	en: en,
@@ -1379,34 +1387,155 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
 var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
   var layer = _ref.layer,
     serviceUrl = _ref.serviceUrl,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
     addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
     deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
     mapLayers = _ref.mapLayers;
   var _useLayerSelectTransl = useLayerSelectTranslation(),
     t = _useLayerSelectTransl.t;
-  var foundLayerIndex = mapLayers.findIndex(function (lr) {
-    return lr.name === layer.name && lr.service === serviceUrl;
-  });
+  var _React$useState = React.useState(false),
+    open = _React$useState[0],
+    setOpen = _React$useState[1];
+  var anchorRef = React.useRef(null);
+  var foundLayerIndex = React.useMemo(function () {
+    return mapLayers.findIndex(function (lr) {
+      return lr.name === layer.name && lr.service === serviceUrl;
+    });
+  }, [mapLayers, layer.name, serviceUrl]);
   var foundLayer = foundLayerIndex !== -1 && mapLayers[foundLayerIndex];
-  return jsx(CustomToggleButton, {
-    "data-testid": "layerAddRemoveButton-" + layer.name,
-    onClick: function onClick() {
-      !foundLayer ? addLayer({
-        serviceUrl: serviceUrl,
-        layerName: layer.name
-      }) : deleteLayer({
-        layerId: foundLayer.id,
-        layerIndex: foundLayerIndex
+  var layerExistsInWorkspace = React.useMemo(function () {
+    return allLayers.find(function (current) {
+      return current.name === layer.name && current.service === serviceUrl;
+    });
+  }, [allLayers, layer.name, serviceUrl]);
+  var existsInAllMaps = React.useMemo(function () {
+    return allMapIds.every(function (mapId) {
+      return allLayers.some(function (current) {
+        return current.mapId === mapId && current.name === layer.name && current.service === serviceUrl;
       });
-    },
-    selected: !!foundLayer,
-    variant: "tool",
-    fullWidth: true,
-    sx: {
-      fontSize: '12px'
-    },
-    className: "layerAddRemoveButton",
-    children: !foundLayer ? t('add') : t('remove')
+    });
+  }, [allMapIds, allLayers, layer.name, serviceUrl]);
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
+  };
+  var handleClose = function handleClose(event) {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  var handleAddAll = function handleAddAll() {
+    addLayerToAllMaps({
+      serviceUrl: serviceUrl,
+      layerName: layer.name
+    });
+    setOpen(false);
+  };
+  var handleRemoveAll = function handleRemoveAll(id) {
+    removeLayerFromAllMaps(id);
+    setOpen(false);
+  };
+  return jsxs(Fragment, {
+    children: [jsxs(ToggleButtonGroup, {
+      ref: anchorRef,
+      fullWidth: true,
+      style: {
+        height: '32px'
+      },
+      children: [jsx(ToggleButton, {
+        "data-testid": "layerAddRemoveButton-" + layer.name,
+        value: "selected",
+        selected: !!foundLayer,
+        className: "tool",
+        style: {
+          borderRadius: '3px 0 0 3px',
+          height: 'inherit',
+          minWidth: '62px',
+          fontSize: '12px'
+        },
+        onMouseDown: function onMouseDown(e) {
+          e.stopPropagation();
+        },
+        onClick: function onClick() {
+          !foundLayer ? addLayer({
+            serviceUrl: serviceUrl,
+            layerName: layer.name
+          }) : deleteLayer({
+            layerId: foundLayer.id,
+            layerIndex: foundLayerIndex
+          });
+        },
+        fullWidth: true,
+        children: !foundLayer ? t('add') : t('remove')
+      }), jsx(Box, {
+        sx: {
+          minWidth: '1px',
+          backgroundColor: foundLayer || layerExistsInWorkspace ? 'geowebColors.buttons.primary.default.borderColor' : 'geowebColors.buttons.secondary.default.fill'
+        }
+      }), jsx(ToggleButton, {
+        "data-testid": "layerAddRemoveButton-dropdown-" + layer.name,
+        value: "dropdown",
+        selected: !!layerExistsInWorkspace,
+        onClick: handleToggle,
+        className: "tool",
+        onMouseDown: function onMouseDown(e) {
+          e.stopPropagation();
+        },
+        style: {
+          marginLeft: '0',
+          minWidth: '32px',
+          borderRadius: '0 3px 3px 0',
+          height: 'inherit'
+        },
+        children: jsx(ArrowDropDownDown, {
+          style: {
+            marginRight: '1px'
+          }
+        })
+      })]
+    }), jsx(Popper, {
+      open: open,
+      anchorEl: anchorRef.current,
+      role: undefined,
+      transition: true,
+      placement: "bottom-end",
+      style: {
+        zIndex: 1300
+      },
+      children: function children(_ref2) {
+        var TransitionProps = _ref2.TransitionProps,
+          placement = _ref2.placement;
+        return jsx(Grow, Object.assign({}, TransitionProps, {
+          style: {
+            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+          },
+          children: jsx(Paper, {
+            children: jsx(ClickAwayListener, {
+              onClickAway: handleClose,
+              children: jsxs(MenuList, {
+                autoFocusItem: true,
+                children: [jsx(MenuItem, {
+                  onClick: handleAddAll,
+                  disabled: existsInAllMaps,
+                  children: t('add-to-all-maps')
+                }), jsx(MenuItem, {
+                  disabled: !layerExistsInWorkspace,
+                  onClick: function onClick() {
+                    layerExistsInWorkspace && handleRemoveAll(layerExistsInWorkspace.id);
+                  },
+                  children: t('remove-from-all-maps')
+                })]
+              })
+            })
+          })
+        }));
+      }
+    })]
   });
 };
 
@@ -1480,10 +1609,10 @@ var layerSelectColumnsLarge = {
     marginLeft: 2
   },
   column8: {
-    width: "calc(100% - " + buttonLarge + "px - 24px)"
+    width: "calc(100% - " + buttonLarge + "px - 32px)"
   },
   column9: {
-    width: "calc(" + buttonLarge + "px + 24px)"
+    width: "calc(" + buttonLarge + "px + 32px)"
   }
 };
 var layerSelectColumnsSmall = {
@@ -1515,10 +1644,10 @@ var layerSelectColumnsSmall = {
     marginLeft: 1
   },
   column8: {
-    width: "calc(100% - " + buttonSmall + "px - 8px)"
+    width: "calc(100% - " + buttonSmall + "px - 50px)"
   },
   column9: {
-    width: "calc(" + buttonSmall + "px + 8px)"
+    width: "calc(" + buttonSmall + "px + 50px)"
   }
 };
 var breakpoint = 500;
@@ -1560,8 +1689,12 @@ var LayerListRow = function LayerListRow(_ref) {
   var _layer$keywords;
   var layer = _ref.layer,
     service = _ref.service,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
     addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
     deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
     mapLayers = _ref.mapLayers,
     layerSelectWidth = _ref.layerSelectWidth,
     searchFilter = _ref.searchFilter,
@@ -1673,12 +1806,20 @@ var LayerListRow = function LayerListRow(_ref) {
       justifyContent: "flex-end",
       alignItems: "center",
       children: jsx(Box, {
-        sx: columns.column7,
+        sx: (columns.column7, {
+          width: '100%',
+          paddingLeft: '16px'
+        }),
+        alignItems: "flex-start",
         children: jsx(LayerAddRemoveButton, {
           layer: layer,
           serviceUrl: service.serviceUrl,
+          allMapIds: allMapIds,
+          allLayers: allLayers,
           addLayer: addLayer,
+          addLayerToAllMaps: addLayerToAllMaps,
           deleteLayer: deleteLayer,
+          removeLayerFromAllMaps: removeLayerFromAllMaps,
           mapLayers: mapLayers
         })
       })
@@ -1692,8 +1833,12 @@ var LayerList = function LayerList(_ref) {
     layerSelectHeight = _ref.layerSelectHeight,
     serviceListHeight = _ref.serviceListHeight,
     layerSelectWidth = _ref.layerSelectWidth,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
     addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
     deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
     mapLayers = _ref.mapLayers,
     searchFilter = _ref.searchFilter,
     isLayerInfoVisibleInStore = _ref.isLayerInfoVisibleInStore,
@@ -1729,8 +1874,12 @@ var LayerList = function LayerList(_ref) {
           children: service && jsx(LayerListRow, {
             layer: filter,
             service: service,
+            allLayers: allLayers,
+            allMapIds: allMapIds,
             addLayer: addLayer,
+            addLayerToAllMaps: addLayerToAllMaps,
             deleteLayer: deleteLayer,
+            removeLayerFromAllMaps: removeLayerFromAllMaps,
             mapLayers: mapLayers,
             layerSelectWidth: layerSelectWidth,
             searchFilter: searchFilter,
@@ -1761,7 +1910,13 @@ var LayerListConnect = function LayerListConnect(_ref) {
   var mapLayers = useAppSelector(function (store) {
     return mapSelectors.getMapLayersWithoutDimensionCurrentValue(store, mapId);
   });
-  var addLayer = function addLayer(_ref2) {
+  var allLayers = useAppSelector(function (store) {
+    return layerSelectors.getAllLayers(store);
+  });
+  var allMapIds = useAppSelector(function (store) {
+    return mapSelectors.getAllMapIds(store);
+  });
+  var _addLayer = function addLayer(_ref2, mapId) {
     var serviceUrl = _ref2.serviceUrl,
       layerName = _ref2.layerName;
     var layer = {
@@ -1771,13 +1926,15 @@ var LayerListConnect = function LayerListConnect(_ref) {
       layerType: LayerType.mapLayer
     };
     addMapLayer({
+      mapId: mapId,
       layerId: layer.id,
       layer: layer,
       origin: layerTypes.LayerActionOrigin.layerManager
     });
   };
   var addMapLayer = React.useCallback(function (_ref3) {
-    var layerId = _ref3.layerId,
+    var mapId = _ref3.mapId,
+      layerId = _ref3.layerId,
       layer = _ref3.layer,
       origin = _ref3.origin;
     return dispatch(layerActions.addLayer({
@@ -1786,10 +1943,25 @@ var LayerListConnect = function LayerListConnect(_ref) {
       layer: layer,
       origin: origin
     }));
-  }, [dispatch, mapId]);
-  var deleteLayer = React.useCallback(function (_ref4) {
-    var layerId = _ref4.layerId,
-      layerIndex = _ref4.layerIndex;
+  }, [dispatch]);
+  var addLayerToAllMaps = function addLayerToAllMaps(_ref4) {
+    var serviceUrl = _ref4.serviceUrl,
+      layerName = _ref4.layerName;
+    allMapIds.forEach(function (mapId) {
+      if (allLayers.find(function (layer) {
+        return layer.name === layerName && layer.service === serviceUrl && layer.mapId === mapId;
+      })) {
+        return;
+      }
+      _addLayer({
+        serviceUrl: serviceUrl,
+        layerName: layerName
+      }, mapId);
+    });
+  };
+  var deleteLayer = React.useCallback(function (_ref5) {
+    var layerId = _ref5.layerId,
+      layerIndex = _ref5.layerIndex;
     return dispatch(layerActions.layerDelete({
       mapId: mapId,
       layerId: layerId,
@@ -1797,6 +1969,23 @@ var LayerListConnect = function LayerListConnect(_ref) {
       origin: layerTypes.LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
+  var removeLayerFromAllMaps = React.useCallback(function (layerId) {
+    var _allLayers$find;
+    if (!layerId) {
+      return;
+    }
+    var layerName = (_allLayers$find = allLayers.find(function (layer) {
+      return layer.id === layerId;
+    })) == null ? void 0 : _allLayers$find.name;
+    layerName && allLayers.filter(function (layer) {
+      return layer.name === layerName;
+    }).forEach(function (layer) {
+      layer.mapId && layer.id && dispatch(layerActions.layerDelete({
+        mapId: layer.mapId,
+        layerId: layer.id
+      }));
+    });
+  }, [dispatch, allLayers]);
   var filteredLayers = useAppSelector(function (store) {
     return getFilteredLayers(store);
   });
@@ -1809,10 +1998,10 @@ var LayerListConnect = function LayerListConnect(_ref) {
   var currentLayerInfo = useAppSelector(function (store) {
     return layerSelectors.getActiveLayerInfo(store);
   });
-  var onToggleActiveLayer = React.useCallback(function (_ref5) {
-    var serviceUrl = _ref5.serviceUrl,
-      layerName = _ref5.layerName,
-      isActiveLayer = _ref5.isActiveLayer;
+  var onToggleActiveLayer = React.useCallback(function (_ref6) {
+    var serviceUrl = _ref6.serviceUrl,
+      layerName = _ref6.layerName,
+      isActiveLayer = _ref6.isActiveLayer;
     if (!isActiveLayer) {
       dispatch(layerActions.showLayerInfo({
         layerName: layerName,
@@ -1826,11 +2015,17 @@ var LayerListConnect = function LayerListConnect(_ref) {
   return jsx(LayerList, {
     filteredLayers: filteredLayers,
     services: services,
+    allLayers: allLayers,
+    allMapIds: allMapIds,
     layerSelectHeight: layerSelectHeight,
     serviceListHeight: serviceListHeight,
     layerSelectWidth: layerSelectWidth,
-    addLayer: addLayer,
+    addLayer: function addLayer(params) {
+      return _addLayer(params, mapId);
+    },
+    addLayerToAllMaps: addLayerToAllMaps,
     deleteLayer: deleteLayer,
+    removeLayerFromAllMaps: removeLayerFromAllMaps,
     mapLayers: mapLayers,
     searchFilter: searchFilter,
     isLayerInfoVisibleInStore: isLayerInfoVisibleInStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/layer-select",
-  "version": "14.2.2",
+  "version": "14.4.0",
   "description": "GeoWeb layer select library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,15 +8,15 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/shared": "14.2.2",
-    "@opengeoweb/store": "14.2.2",
+    "@opengeoweb/shared": "14.4.0",
+    "@opengeoweb/store": "14.4.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "14.2.2",
-    "@opengeoweb/webmap-react": "14.2.2",
-    "@opengeoweb/webmap": "14.2.2",
+    "@opengeoweb/theme": "14.4.0",
+    "@opengeoweb/webmap-react": "14.4.0",
+    "@opengeoweb/webmap": "14.4.0",
     "react-window": "^1.8.10",
-    "@opengeoweb/snackbar": "14.2.2",
-    "@opengeoweb/form-fields": "14.2.2",
+    "@opengeoweb/snackbar": "14.4.0",
+    "@opengeoweb/form-fields": "14.4.0",
     "react-hook-form": "^7.50.1",
     "@reduxjs/toolkit": "^2.6.1",
     "lodash": "^4.17.21",

package/src/lib/components/LayerList/LayerAddRemoveButton.d.ts

@@ -11,8 +11,12 @@ export interface DeleteLayerParams {
 interface LayerAddRemoveButtonProps {
     layer: layerTypes.ReduxLayer;
     serviceUrl: string;
+    allLayers: layerTypes.ReduxLayer[];
+    allMapIds: string[];
     addLayer: ({ serviceUrl, layerName }: AddLayerParams) => void;
+    addLayerToAllMaps: ({ serviceUrl, layerName }: AddLayerParams) => void;
     deleteLayer: ({ layerId, layerIndex }: DeleteLayerParams) => void;
+    removeLayerFromAllMaps: (layerId: string) => void;
     mapLayers: layerTypes.ReduxLayer[];
 }
 export declare const LayerAddRemoveButton: React.FC<LayerAddRemoveButtonProps>;

package/src/lib/components/LayerList/LayerList.d.ts

@@ -12,8 +12,12 @@ export interface LayerListProps {
     layerSelectHeight: number;
     serviceListHeight: number;
     layerSelectWidth: number;
+    allLayers: layerTypes.ReduxLayer[];
+    allMapIds: string[];
     addLayer: ({ serviceUrl, layerName }: AddLayerParams) => void;
+    addLayerToAllMaps: ({ serviceUrl, layerName }: AddLayerParams) => void;
     deleteLayer: ({ layerId }: DeleteLayerParams) => void;
+    removeLayerFromAllMaps: (layerId: string) => void;
     mapLayers: layerTypes.ReduxLayer[];
     searchFilter: string;
     isLayerInfoVisibleInStore: boolean;

package/src/lib/components/LayerList/LayerListRow.d.ts

@@ -9,8 +9,12 @@ interface AddLayerParams {
 interface LayerListRowProps {
     layer: LayerProps;
     service: serviceTypes.ReduxService;
+    allLayers: layerTypes.ReduxLayer[];
+    allMapIds: string[];
     addLayer: ({ serviceUrl, layerName }: AddLayerParams) => void;
+    addLayerToAllMaps: ({ serviceUrl, layerName }: AddLayerParams) => void;
     deleteLayer: ({ layerId, layerIndex }: DeleteLayerParams) => void;
+    removeLayerFromAllMaps: (layerId: string) => void;
     mapLayers: layerTypes.ReduxLayer[];
     layerSelectWidth: number;
     searchFilter: string;

package/src/lib/utils/i18n.d.ts

@@ -3,5 +3,5 @@ import { UseTranslationResponse } from 'react-i18next';
 export declare const LAYER_SELECT_NAMESPACE = "layerselect";
 export declare const initLayerSelectI18n: () => typeof i18n;
 export declare const useLayerSelectTranslation: () => UseTranslationResponse<typeof LAYER_SELECT_NAMESPACE, typeof i18n>;
-export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;
+export declare const translateInTestsAndStories: (key: string, params?: Record<string, string | number> | undefined) => string;
 export { i18n };