fix(settings): preserve Rules drafts across internal tabs

2026-10-09 19:02:50 +02:00
parent 5b5dcd0b80
commit 30f513d0c9
6 changed files with 446 additions and 61 deletions
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";

 import {
  Box,
@@ -20,7 +20,7 @@ import { useNavigate } from "react-router-dom";

 import { JobTableColumns } from "./JobTable";
 import ImportExportJobs from "./ImportExportJobs";
-import RulesSettingsCard from "./RulesSettingsCard";
+import RulesSettingsCard, { RULE_FIELDS, RuleDraft, RuleField, RuleSettings } from "./RulesSettingsCard";
 import BackupCard from "./BackupCard";
 import QuickCaptureCard from "./QuickCaptureCard";
 import AiUsageCard from "./AiUsageCard";
@@ -49,6 +49,10 @@ type NotificationPrefs = {
  emailFollowUpRemindersEnabled: boolean;
 };

+function ruleDraft(settings: RuleSettings): RuleDraft {
+  return Object.fromEntries(RULE_FIELDS.map(field => [field, String(settings[field])])) as RuleDraft;
+}
+
 export default function SettingsView({
  pageSize,
  onPageSizeChange,
@@ -64,6 +68,73 @@ export default function SettingsView({
  const [notificationPrefs, setNotificationPrefs] = useState<NotificationPrefs | null>(null);
  const [notificationError, setNotificationError] = useState<string | null>(null);
  const [savingNotifications, setSavingNotifications] = useState(false);
+  const [savedRules, setSavedRules] = useState<RuleSettings | null>(null);
+  const [rulesDraft, setRulesDraft] = useState<RuleDraft | null>(null);
+  const [rulesLoadError, setRulesLoadError] = useState<string | null>(null);
+  const [rulesSaveError, setRulesSaveError] = useState(false);
+  const [invalidRules, setInvalidRules] = useState<RuleField[]>([]);
+  const [savingRules, setSavingRules] = useState(false);
+  const rulesSession = useRef({ mounted: true, loading: false, saving: false });
+  const rulesDirty = Boolean(rulesDraft && savedRules && RULE_FIELDS.some(field => rulesDraft[field] !== String(savedRules[field])));
+
+  useEffect(() => {
+    const session = rulesSession.current;
+    session.mounted = true;
+    return () => { session.mounted = false; };
+  }, []);
+
+  const loadRules = async () => {
+    const session = rulesSession.current;
+    if (rulesDraft || session.loading) return;
+    session.loading = true;
+    setRulesLoadError(null);
+    try {
+      const { data } = await api.get<RuleSettings>("/rules");
+      if (!session.mounted) return;
+      setSavedRules(data);
+      setRulesDraft(ruleDraft(data));
+    } catch (error) {
+      if (session.mounted) setRulesLoadError(getApiErrorMessage(error, t("rulesLoadFailed")));
+    } finally { session.loading = false; }
+  };
+
+  const selectSection = (next: number) => {
+    setTab(next);
+    if (next === 1) void loadRules();
+  };
+
+  const saveRules = async () => {
+    const session = rulesSession.current;
+    if (!rulesDraft || !savedRules || session.saving) return;
+    const invalid = RULE_FIELDS.filter(field => !rulesDraft[field].trim() || !Number.isInteger(Number(rulesDraft[field])) || Number(rulesDraft[field]) < 1 || Number(rulesDraft[field]) > 365);
+    setInvalidRules(invalid);
+    if (invalid.length) return;
+    const submittedDraft = rulesDraft;
+    const submitted = { id: savedRules.id, ...Object.fromEntries(RULE_FIELDS.map(field => [field, Number(submittedDraft[field])])) } as RuleSettings;
+    session.saving = true;
+    setSavingRules(true);
+    setRulesSaveError(false);
+    try {
+      await api.put("/rules", submitted);
+      if (!session.mounted) return;
+      setSavedRules(submitted);
+      // A completed save acknowledges its snapshot, not edits made while it was pending.
+      setRulesDraft(current => current && RULE_FIELDS.every(field => current[field] === submittedDraft[field]) ? ruleDraft(submitted) : current);
+      toast(t("rulesSaved"), "success");
+    } catch {
+      if (session.mounted) setRulesSaveError(true);
+    } finally {
+      session.saving = false;
+      if (session.mounted) setSavingRules(false);
+    }
+  };
+
+  const discardRules = () => {
+    if (!savedRules || savingRules) return;
+    setRulesDraft(ruleDraft(savedRules));
+    setInvalidRules([]);
+    setRulesSaveError(false);
+  };

  useEffect(() => {
    let active = true;
@@ -94,7 +165,7 @@ export default function SettingsView({
          labelId="settings-section-label"
          value={tab}
          label={t("settingsNavigation")}
-          onChange={(event) => setTab(Number(event.target.value))}
+          onChange={(event) => selectSection(Number(event.target.value))}
        >
          <MenuItem value={0}>{t("settingsTabGeneral")}</MenuItem>
          <MenuItem value={1}>{t("settingsTabFollowUps")}</MenuItem>
@@ -103,13 +174,15 @@ export default function SettingsView({
        </Select>
      </FormControl>

-      <Tabs aria-label={t("settings")} value={tab} onChange={(_, v) => setTab(v)} variant="scrollable" scrollButtons="auto" sx={{ display: { xs: "none", sm: "flex" }, mb: 1 }}>
+      <Tabs aria-label={t("settings")} value={tab} onChange={(_, v) => selectSection(v)} variant="scrollable" scrollButtons="auto" sx={{ display: { xs: "none", sm: "flex" }, mb: 1 }}>
        <Tab label={t("settingsTabGeneral")} />
        <Tab label={t("settingsTabFollowUps")} />
        <Tab label={t("settingsTabNotifications")} />
        <Tab label={t("settingsTabBackup")} />
      </Tabs>

+      {rulesDirty ? <Typography role="status" variant="body2" sx={{ mt: 1, color: "text.secondary" }}>{t("assetsUnsavedChanges")}. {t("rulesDraftScope")}</Typography> : null}
+
      <TabPanel value={tab} index={0}>
        <Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "repeat(2, minmax(0, 1fr))" }, gap: "var(--app-section-gap)" }}>
@@ -201,7 +274,12 @@ export default function SettingsView({
      </TabPanel>

      <TabPanel value={tab} index={1}>
-        <RulesSettingsCard />
+        <RulesSettingsCard draft={rulesDraft} loadError={rulesLoadError} saveError={rulesSaveError} invalid={invalidRules}
+          saving={savingRules} dirty={rulesDirty} onSave={() => void saveRules()} onRetry={() => void loadRules()} onDiscard={discardRules}
+          onChange={(field, value) => {
+            setRulesDraft(current => current ? { ...current, [field]: value } : current);
+            setInvalidRules(current => current.filter(key => key !== field));
+          }} />
      </TabPanel>

      <TabPanel value={tab} index={2}>