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

CHANGELOG.md

@@ -4,6 +4,26 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.240] – 2025-06-06
+
+### ✨ UI-Verbesserung
+
+- Das Icon für den Bearbeitungsmodus (`EditModeToggle`) wird nun bei fehlender Berechtigung
+  (Recht-ID 56 nicht vorhanden) ausgegraut dargestellt.
+- Tooltip erscheint bei Mouseover mit dem Hinweis: **„Keine Bearbeitungsrechte“**
+- Kein Klick möglich – `pointerEvents: none`, bei gleichzeitig sichtbarem Icon für besseres UX
+
+### ♻️ Refactor
+
+- `EditModeToggle.js` vollständig angepasst zur dynamischen Rechteprüfung über
+  `gisUserRightsFromWebservice` Redux Slice.
+
+### 🔧 Version
+
+- 📦 `appVersion.js` auf Version **1.1.240** erhöht
+
+---
+
 ## [1.1.238] – 2025-06-06
 
 ### ♻️ Refactor

README.md

@@ -34,6 +34,9 @@ umgesetzt.
    entsprechend
 4. API-Endpunkte kommunizieren lokal mit Datenbankserver (MySQL)
 5. Interaktive Bearbeitung (POI hinzufügen, verschieben, löschen) ist möglich
+   - Die Bearbeitungsfunktionen (POI hinzufügen, bearbeiten) sind nur aktiv, wenn der Nutzer das
+     entsprechende Recht (ID 56) besitzt.
+   - Ist dies nicht der Fall, erscheint das Bearbeitungs-Icon ausgegraut mit Tooltip.
 
 ---
 

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>
   );
 }
 

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.240";
+export const APP_VERSION = "1.1.241";