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
2025-08-15 11:22:32 +02:00
parent d75d9ce578
commit 4e8221c892
9 changed files with 58 additions and 25 deletions
--- a/.env.development
+++ b/.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)

--- a/.env.production
+++ b/.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
--- a/CHANGELOG.md
+++ b/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
--- a/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx
+++ b/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;
--- a/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartView.tsx
+++ b/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
-      // um sicherzustellen, dass alle Redux-States gesetzt sind
+      // Automatisch Daten laden wie Button-Klick
      const timer = setTimeout(() => {
-        loadData();
-      }, 100);
+        actionBarRef.current?.handleFetchData();
+      }, 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 />
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/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;
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx
+++ b/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
-      setTimeout(() => {
-        loadLoopChartData.loadLoopChartData();
-      }, 10);
+      // Automatisch Daten laden wie Button-Klick
+      const timer = setTimeout(() => {
+        actionBarRef.current?.handleFetchData();
+      }, 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 />
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.729",
+  "version": "1.6.730",
  "private": true,
  "scripts": {
    "dev": "next dev",