feat: EditModeToggle zeigt deaktiviertes Icon bei fehlender Bearbeitungsberechtigung (Right 56)

components/uiWidgets/mapLayersControlPanel/EditModeToggle.js

@@ -3,8 +3,15 @@ import React, { useState, useEffect } from "react";
 import EditOffIcon from "@mui/icons-material/EditOff";
 import ModeEditIcon from "@mui/icons-material/ModeEdit";
 import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI
+import { useSelector } from "react-redux";
+import { selectGisUserRightsFromWebservice } from "@/redux/slices/webservice/userRightsSlice";
+import BlockIcon from "@mui/icons-material/Block"; // 🚫 Symbol
 
 function EditModeToggle() {
+  const rights = useSelector(selectGisUserRightsFromWebservice);
+  const hasEditRight = rights.some(r => r.IdRight === 56);
+  const [isHovered, setIsHovered] = useState(false);
+
   const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");
 
   const toggleEditMode = () => {
@@ -21,17 +28,33 @@ function EditModeToggle() {
   }, []);
 
   return (
-    <div onClick={toggleEditMode} style={{ cursor: "pointer" }}>
-      {editMode ? (
-        <Tooltip title="Bearbeitungsmodus deaktivieren" placement="top">
-          <EditOffIcon />
-        </Tooltip>
-      ) : (
-        <Tooltip title="Bearbeitungsmodus aktivieren" placement="top">
-          <ModeEditIcon />
-        </Tooltip>
-      )}
-    </div>
+    <Tooltip
+      title={
+        hasEditRight
+          ? editMode
+            ? "Bearbeitungsmodus deaktivieren"
+            : "Bearbeitungsmodus aktivieren"
+          : "Keine Bearbeitungsrechte"
+      }
+      placement="top"
+    >
+      <div
+        onClick={hasEditRight ? toggleEditMode : undefined}
+        style={{
+          cursor: hasEditRight ? "pointer" : "default",
+          display: "inline-block",
+        }}
+      >
+        <div
+          style={{
+            opacity: hasEditRight ? 1 : 0.4,
+            pointerEvents: hasEditRight ? "auto" : "none", // nur Icon blockieren
+          }}
+        >
+          {editMode ? <EditOffIcon /> : <ModeEditIcon />}
+        </div>
+      </div>
+    </Tooltip>
   );
 }