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
This commit is contained in:
ISA
2025-08-15 11:22:32 +02:00
parent d75d9ce578
commit 4e8221c892
9 changed files with 58 additions and 25 deletions

View File

@@ -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;

View File

@@ -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 />