Fix: Messkurven-Modal (ISO/RSL) lädt Kurve automatisch, setzt Dropdown & DateRangePicker korrekt zurück

- Dropdown für Messkurven (ISO/RSL) wird beim Öffnen auf 'Alle Messwerte' (DIA0) gesetzt
- Messkurve wird beim Öffnen des Modals automatisch geladen
- Beim Schließen werden vonDatum, bisDatum, Dropdown und DateRangePicker zurückgesetzt
- Gleiches Verhalten für ISO- und RSL/Loop-Modal

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.729
+NEXT_PUBLIC_APP_VERSION=1.6.730
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.729
+NEXT_PUBLIC_APP_VERSION=1.6.730
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,13 @@
+## [1.6.730] – 2025-08-15
+
+- Fix: Messkurven-Modal (ISO/RSL) lädt Kurve automatisch, setzt Dropdown & DateRangePicker korrekt zurück
+
+- Dropdown für Messkurven (ISO/RSL) wird beim Öffnen auf 'Alle Messwerte' (DIA0) gesetzt
+- Messkurve wird beim Öffnen des Modals automatisch geladen
+- Beim Schließen werden vonDatum, bisDatum, Dropdown und DateRangePicker zurückgesetzt
+- Gleiches Verhalten für ISO- und RSL/Loop-Modal
+
+---
 ## [1.6.729] – 2025-08-15
 
 - playwright: Einstellungen Seite

components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx

@@ -1,6 +1,6 @@
 "use client";
 // /components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx
-import React from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import DateRangePicker from "@/components/common/DateRangePicker";
 import { useSelector } from "react-redux";
 import { RootState, useAppDispatch } from "@/redux/store";
@@ -170,7 +170,10 @@ export const useIsoDataLoader = () => {
 };
 
 //-----------------------------------------------------------------------------------IsoChartActionBar
-const IsoChartActionBar: React.FC = () => {
+// ...existing code...
+
+const IsoChartActionBar = forwardRef((_props, ref) => {
+  IsoChartActionBar.displayName = "IsoChartActionBar";
   const dispatch = useAppDispatch();
 
   const { vonDatum, bisDatum, selectedMode, slotNumber, chartTitle } =
@@ -278,6 +281,10 @@ const IsoChartActionBar: React.FC = () => {
     }
   };
 
+  useImperativeHandle(ref, () => ({
+    handleFetchData,
+  }));
+
   return (
     <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
       <div className="flex items-center">
@@ -377,6 +384,6 @@ const IsoChartActionBar: React.FC = () => {
       </div>
     </div>
   );
-};
+});
 
 export default IsoChartActionBar;

components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartView.tsx

@@ -1,10 +1,10 @@
 "use client"; // IsoChartView.tsx
 
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { Listbox } from "@headlessui/react";
 import ReactModal from "react-modal";
 import IsoMeasurementChart from "./IsoMeasurementChart";
-import IsoChartActionBar, { useIsoDataLoader } from "./IsoChartActionBar";
+import IsoChartActionBar from "./IsoChartActionBar";
 import Report from "./Report";
 import { useSelector, useDispatch } from "react-redux";
 import { AppDispatch } from "@/redux/store";
@@ -38,7 +38,7 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
   slotIndex,
 }) => {
   const dispatch = useDispatch<AppDispatch>();
-  const { loadData } = useIsoDataLoader();
+  // removed unused loadData
 
   const { isFullScreen, chartTitle } = useSelector(
     (state: RootState) => state.kabelueberwachungChartSlice
@@ -78,6 +78,8 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
   };
 
   // Modal öffnen - ISO spezifische Einstellungen
+  type ActionBarRefType = { handleFetchData: () => void };
+  const actionBarRef = useRef<ActionBarRefType>(null);
   useEffect(() => {
     if (isOpen) {
       const today = new Date();
@@ -100,17 +102,16 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
       // Set default to Messkurve
       dispatch(setChartTitle("Messkurve"));
 
-      // Automatisch Daten laden nach kurzer Verzögerung
+      // Automatisch Daten laden wie Button-Klick
-      // um sicherzustellen, dass alle Redux-States gesetzt sind
       const timer = setTimeout(() => {
-        loadData();
+        actionBarRef.current?.handleFetchData();
-      }, 100);
+      }, 120);
 
       // Cleanup timer
       return () => clearTimeout(timer);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, slotIndex, dispatch]); // loadData bewusst ausgelassen um Endlosschleife zu vermeiden
+  }, [isOpen, slotIndex, dispatch]);
 
   return (
     <ReactModal
@@ -237,7 +238,7 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
             </div>
           </Listbox>
         </div>
-        <IsoChartActionBar />
+        <IsoChartActionBar ref={actionBarRef} />
         <div style={{ flex: 1, height: "90%" }}>
           {chartTitle === "Messkurve" ? (
             <IsoMeasurementChart />

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -1,6 +1,11 @@
 "use client";
 // /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
-import React, { useEffect, useState } from "react";
+import React, {
+  useEffect,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 import { useAppDispatch } from "@/redux/store";
 import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
 import { RSL_DURATION_SECONDS, NODE_ENV } from "@/utils/env";
@@ -94,7 +99,7 @@ export const useLoopChartLoader = () => {
 };
 
 //-----------------------------------------------------------------------------------LoopChartActionBar
-const LoopChartActionBar: React.FC = () => {
+const LoopChartActionBar = forwardRef((_props, ref) => {
   const dispatch = useAppDispatch();
   // RSL Progress State – Dauer konfigurierbar über NEXT_PUBLIC_RSL_DURATION_SECONDS
   const TOTAL_DURATION = RSL_DURATION_SECONDS;
@@ -272,6 +277,10 @@ const LoopChartActionBar: React.FC = () => {
     }
   };
 
+  useImperativeHandle(ref, () => ({
+    handleFetchData,
+  }));
+
   return (
     <div className="flex justify-between  p-1 bg-gray-100 rounded-lg ">
       <div className="flex items-center">
@@ -393,6 +402,7 @@ const LoopChartActionBar: React.FC = () => {
       )}
     </div>
   );
-};
+});
 
+LoopChartActionBar.displayName = "LoopChartActionBar";
 export default LoopChartActionBar;

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx

@@ -6,6 +6,7 @@ import ReactModal from "react-modal";
 import LoopMeasurementChart from "./LoopMeasurementChart";
 import Report from "../IsoMeasurementChart/Report";
 import LoopChartActionBar from "./LoopChartActionBar";
+import { useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { AppDispatch } from "@/redux/store";
 import { RootState } from "@/redux/store";
@@ -85,6 +86,7 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
   };
 
   // Modal öffnen - RSL spezifische Einstellungen
+  const actionBarRef = useRef<{ handleFetchData: () => void }>(null);
   useEffect(() => {
     if (isOpen) {
       const today = new Date();
@@ -104,10 +106,13 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
       dispatch(setSelectedSlotType("schleifenwiderstand"));
       dispatch(setSelectedMode("DIA0")); // Set to Alle Messwerte on open
 
-      // Load data for Schleife mode after a small delay to ensure Redux state is updated
+      // Automatisch Daten laden wie Button-Klick
-      setTimeout(() => {
+      const timer = setTimeout(() => {
-        loadLoopChartData.loadLoopChartData();
+        actionBarRef.current?.handleFetchData();
-      }, 10);
+      }, 120);
+
+      // Cleanup timer
+      return () => clearTimeout(timer);
     }
     //ESLint ignore
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -238,7 +243,7 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
             </div>
           </Listbox>
         </div>
-        <LoopChartActionBar />
+        <LoopChartActionBar ref={actionBarRef} />
         <div style={{ flex: 1, height: "90%" }}>
           {chartTitle === "Messkurve" ? (
             <LoopMeasurementChart />

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.729",
+  "version": "1.6.730",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.729",
+      "version": "1.6.730",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.729",
+  "version": "1.6.730",
   "private": true,
   "scripts": {
     "dev": "next dev",