WIP 2

apps/client/package.json

@@ -83,10 +83,11 @@
     "react-number-format": "^5.3.3",
     "react-rnd": "^10.4.1",
     "react-scroll": "^1.9.0",
+    "react-smooth-dnd": "^0.11.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "uuid": "^9.0.1",
     "x2js": "^3.4.4",
     "xlsx": "^0.18.5"
   }
-}
+}

apps/client/public/index.css

@@ -84,6 +84,10 @@ body {
   min-width: 280px !important;
 }
 
+/* Z-index override for draggable listitem in layerswitcher */
+.smooth-dnd-ghost.vertical.smooth-dnd-draggable-wrapper {
+  z-index: 99999 !important;
+}
 .material-icons {
   font-family: "Material Icons";
   font-weight: normal;

apps/client/src/components/App.js

@@ -4,7 +4,6 @@ import { PLUGINS_TO_IGNORE_IN_HASH_APP_STATE } from "constants";
 
 import PropTypes from "prop-types";
 import { styled } from "@mui/material/styles";
-import { SnackbarProvider } from "notistack";
 import Observer from "react-event-observer";
 import { isMobile } from "../utils/IsMobile";
 import { getMergedSearchAndHashParams } from "../utils/getMergedSearchAndHashParams";
@@ -24,6 +23,7 @@ import Alert from "./Alert";
 import PluginWindows from "./PluginWindows";
 import SimpleDialog from "./SimpleDialog";
 import MapClickViewer from "./MapClickViewer/MapClickViewer";
+import SnackbarProvider from "./SnackbarProvider";
 
 import Search from "./Search/Search.js";
 
@@ -806,6 +806,18 @@ class App extends React.PureComponent {
           // to anyone wanting to act on layer visibility change.
           this.globalObserver.publish("core.layerVisibilityChanged", e);
         });
+        // Listener for "quickAccess" changes
+        layer.on("change:quickAccess", (e) => {
+          // Send an event on the global observer
+          // to anyone wanting to act on layer quickAccess change.
+          this.globalObserver.publish("core.layerQuickAccessChanged", e);
+        });
+        // Listener for "subLayers" changes
+        layer.on("change:subLayers", (e) => {
+          // Send an event on the global observer
+          // to anyone wanting to act on layer subLayers change.
+          this.globalObserver.publish("core.layerSubLayersChanged", e);
+        });
       });
   }
 

apps/client/src/components/ConfirmationDialog.js

@@ -32,10 +32,25 @@ const ConfirmationDialog = ({
         <Typography>{contentDescription}</Typography>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleConfirm}>{confirm}</Button>
-        <Button onClick={handleAbort} variant="contained">
+        <Button
+          onClick={(e) => {
+            e.stopPropagation();
+            handleAbort();
+          }}
+        >
           {cancel}
         </Button>
+        {confirm && (
+          <Button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleConfirm();
+            }}
+            variant="contained"
+          >
+            {confirm}
+          </Button>
+        )}
       </DialogActions>
     </Dialog>,
     document.getElementById("map")

apps/client/src/components/SnackbarProvider.js

@@ -0,0 +1,49 @@
+import React, { createContext, useState } from "react";
+import {
+  SnackbarProvider as NotistackSnackbarProvider,
+  useSnackbar,
+} from "notistack";
+
+// Create a context for sharing state across components.
+// This context will hold message items and functions to control the snackbar.
+export const SnackbarContext = createContext();
+
+// SnackbarProvider is a custom component that sets up the SnackbarContext provider.
+// It uses the useSnackbar hook to provide snackbar controls to its child components.
+const SnackbarProvider = ({
+  // Destructure and set defaults for maxSnack and anchorOrigin props.
+  // maxSnack is the maximum number of snackbar notifications that can be displayed at once.
+  // anchorOrigin defines the position of the snackbar on the screen.
+  children,
+  maxSnack = 3,
+  anchorOrigin = { vertical: "bottom", horizontal: "left" },
+  ...props
+}) => {
+  // Initialize the shared state (messageItems) and its updater (setMessageItems)
+  // messageItems holds a list of messages to be displayed in the snackbar.
+  const [messageItems, setMessageItems] = useState([]);
+
+  // Get the snackbar object containing functions control the snackbar's visibility and its messages.
+  const snackbar = useSnackbar();
+
+  // Render the NotistackSnackbarProvider and provide the shared state and functions through the SnackbarContext.
+  // This allows any child component to access the snackbar controls and the shared state.
+  return (
+    <NotistackSnackbarProvider
+      maxSnack={maxSnack}
+      anchorOrigin={anchorOrigin}
+      preventDuplicate
+      {...props}
+    >
+      {/* Pass shared state and functions to the SnackbarContext.Provider value. */}
+      {/* This allows child components to access the snackbar controls and the shared state. */}
+      <SnackbarContext.Provider
+        value={{ ...snackbar, messageItems, setMessageItems }}
+      >
+        {children}
+      </SnackbarContext.Provider>
+    </NotistackSnackbarProvider>
+  );
+};
+
+export default SnackbarProvider;

apps/client/src/controls/MapCleaner.js

@@ -5,6 +5,8 @@ import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import { styled } from "@mui/material/styles";
 import HajkToolTip from "components/HajkToolTip";
 
+import useSnackbar from "../hooks/useSnackbar";
+
 const StyledPaper = styled(Paper)(({ theme }) => ({
   marginBottom: theme.spacing(1),
 }));
@@ -20,6 +22,10 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
  * @returns {object} React
  */
 const MapCleaner = React.memo((props) => {
+  // Import the clearAllMessages function from the useSnackbar hook.
+  // This allows us to clear the Snackbar's state when the button is clicked.
+  const { clearSnackbar } = useSnackbar();
+
   return (
     props.appModel.config.mapConfig.map.mapcleaner && (
       <HajkToolTip title="Dölj alla aktiva lager">
@@ -28,6 +34,11 @@ const MapCleaner = React.memo((props) => {
             aria-label="Rensa kartan"
             onClick={(e) => {
               props.appModel.clear();
+
+              // Call the clearAllMessages function from the useCustomSnackbar hook.
+              // This clears the state of messageItems in the Snackbar,
+              // ensuring it stays in sync with the actual visibility of the layers.
+              clearSnackbar();
             }}
           >
             <VisibilityOffIcon />

apps/client/src/hooks/useSnackbar.js

@@ -0,0 +1,139 @@
+import { useContext, useEffect, useState, useRef, useCallback } from "react";
+import { useSnackbar as useNotistackSnackbar } from "notistack";
+import { IconButton } from "@mui/material";
+import { Close as CloseIcon } from "@mui/icons-material";
+import { SnackbarContext } from "../components/SnackbarProvider";
+
+// Constants for operation types.
+const ADD = "ADD";
+const SHOW = "SHOW";
+const REMOVE = "REMOVE";
+const ADD_ONLY = "ADD_ONLY";
+
+// Function to generate a composite key for identifying message items.
+const generateCompositeKey = (id, caption) => `${id}-${caption}`;
+
+// Custom hook to manage snackbars.
+const useSnackbar = () => {
+  const { enqueueSnackbar, closeSnackbar } = useNotistackSnackbar();
+  const { messageItems, setMessageItems } = useContext(SnackbarContext);
+  const [operationType, setOperationType] = useState(null);
+
+  // Reference to keep track of the current message items.
+  const messageItemsRef = useRef({});
+
+  // Effect to update messageItemsRef whenever messageItems changes.
+  useEffect(() => {
+    if (messageItems !== messageItemsRef.current) {
+      messageItemsRef.current = messageItems;
+    }
+  }, [messageItems]);
+
+  // Function to format the message text for the snackbar.
+  const formatMessage = (items) => {
+    const keys = Object.keys(items);
+    if (keys.length === 0) return "";
+
+    const mostRecentKey = keys[keys.length - 1];
+    const mostRecentLayer = items[mostRecentKey];
+    const otherLayersCount = keys.length - 1;
+
+    return otherLayersCount > 0
+      ? `Lagret '${mostRecentLayer}' och ${otherLayersCount} andra lager är inte synliga vid aktuell zoomnivå.`
+      : `Lagret '${mostRecentLayer}' är inte synligt vid aktuell zoomnivå.`;
+  };
+
+  // Function to display the snackbar.
+  const displaySnackbar = useCallback(() => {
+    const message = formatMessage(messageItemsRef.current);
+    if (!message) return;
+
+    // Action to display a close button on the snackbar.
+    const action = (key) => (
+      <IconButton
+        size="small"
+        color="inherit"
+        onClick={() => closeSnackbar(key)}
+      >
+        <CloseIcon fontSize="small" />
+      </IconButton>
+    );
+
+    enqueueSnackbar(message, {
+      variant: "warning",
+      autoHideDuration: 5000,
+      action,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center",
+      },
+    });
+  }, [enqueueSnackbar, closeSnackbar]);
+
+  // Effect to handle the display of the snackbar based on operationType.
+  useEffect(() => {
+    if (!operationType || Object.keys(messageItems).length === 0) return;
+
+    // Exclude REMOVE operation type from triggering snackbar.
+    if ([ADD, SHOW].includes(operationType)) {
+      displaySnackbar();
+    }
+
+    setOperationType(null);
+  }, [operationType, messageItems, displaySnackbar]);
+
+  // Function to update the snackbar messages and type.
+  const updateSnackbar = useCallback(
+    (type, id, caption) => {
+      if (!id || !caption) return;
+      const key = generateCompositeKey(id, caption);
+
+      setMessageItems((prevItems) => {
+        if ([ADD, ADD_ONLY].includes(type)) {
+          return { ...prevItems, [key]: caption };
+        }
+        const { [key]: _, ...rest } = prevItems;
+        return rest;
+      });
+
+      if (type !== ADD_ONLY) {
+        setOperationType(type);
+      }
+    },
+    [setMessageItems]
+  );
+
+  // Function to add a new message to the snackbar.
+  const addToSnackbar = (id, caption, addOnly = false) => {
+    updateSnackbar(addOnly ? ADD_ONLY : ADD, id, caption);
+  };
+
+  // Function to remove a message from the snackbar.
+  const removeFromSnackbar = (id, caption) =>
+    updateSnackbar(REMOVE, id, caption);
+
+  // Function to hide the snackbar.
+  const hideSnackbar = useCallback(
+    (key) => {
+      if (key) closeSnackbar(key);
+    },
+    [closeSnackbar]
+  );
+
+  // Function to clear all messages from the snackbar.
+  const clearSnackbar = () => setMessageItems({});
+
+  // Function to display the snackbar.
+  const showSnackbar = () => setOperationType(SHOW);
+
+  // Return the snackbar methods.
+  return {
+    addToSnackbar,
+    removeFromSnackbar,
+    hideSnackbar,
+    clearSnackbar,
+    showSnackbar,
+  };
+};
+
+export default useSnackbar;

apps/client/src/models/layers/WMSLayer.js

@@ -118,6 +118,12 @@ class WMSLayer {
     this.layer.layersInfo = config.layersInfo;
     this.layer.subLayers = this.subLayers;
     this.layer.visibleAtStartSubLayers = config.visibleAtStartSubLayers;
+    this.layer.set(
+      "subLayers",
+      config.visibleAtStartSubLayers?.length > 0
+        ? config.visibleAtStartSubLayers
+        : this.subLayers
+    );
     this.layer.getSource().set("url", config.url);
     this.type = "wms";
     this.bindHandlers();