fix(settings): preserve Rules drafts across internal tabs
This commit is contained in:
cesnimda
@@ -1,13 +1,11 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React from "react";
|
||||
|
||||
import { Alert, Box, Button, TextField, Typography } from "@mui/material";
|
||||
import { PageSection } from "../layout/PageLayout";
|
||||
|
||||
import { api, getApiErrorMessage } from "../api";
|
||||
import { useToast } from "../toast";
|
||||
import { useI18n } from "../i18n/I18nProvider";
|
||||
|
||||
type RuleSettings = {
|
||||
export type RuleSettings = {
|
||||
id: number;
|
||||
appliedFollowUpDays: number;
|
||||
appliedGhostDays: number;
|
||||
@@ -17,61 +15,47 @@ type RuleSettings = {
|
||||
feedbackGhostDays: number;
|
||||
};
|
||||
|
||||
export default function RulesSettingsCard() {
|
||||
const { toast } = useToast();
|
||||
export const RULE_FIELDS = ["appliedFollowUpDays", "appliedGhostDays", "offerFollowUpDays", "offerGhostDays", "feedbackFollowUpDays", "feedbackGhostDays"] as const;
|
||||
export type RuleField = typeof RULE_FIELDS[number];
|
||||
export type RuleDraft = Record<RuleField, string>;
|
||||
|
||||
type Props = {
|
||||
draft: RuleDraft | null;
|
||||
loadError: string | null;
|
||||
saveError: boolean;
|
||||
invalid: RuleField[];
|
||||
saving: boolean;
|
||||
dirty: boolean;
|
||||
onChange: (field: RuleField, value: string) => void;
|
||||
onSave: () => void;
|
||||
onDiscard: () => void;
|
||||
onRetry: () => void;
|
||||
};
|
||||
|
||||
export default function RulesSettingsCard({ draft, loadError, saveError, invalid, saving, dirty, onChange, onSave, onDiscard, onRetry }: Props) {
|
||||
const { t } = useI18n();
|
||||
const [s, setS] = useState<RuleSettings | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
api.get<RuleSettings>("/rules")
|
||||
.then((r) => {
|
||||
if (!active) return;
|
||||
setS(r.data);
|
||||
setLoadError(null);
|
||||
})
|
||||
.catch((e: any) => {
|
||||
if (!active) return;
|
||||
setS(null);
|
||||
setLoadError(getApiErrorMessage(e, t("rulesLoadFailed")));
|
||||
});
|
||||
return () => { active = false; };
|
||||
}, [t]);
|
||||
|
||||
const save = async () => {
|
||||
if (!s) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.put("/rules", s);
|
||||
toast(t("rulesSave"), "success");
|
||||
} catch {
|
||||
toast(t("rulesSaveFailed"), "error");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!s) {
|
||||
if (!draft) {
|
||||
return (
|
||||
<PageSection surface title={t("rulesTitle")}>
|
||||
{loadError ? <Alert severity="error">{loadError}</Alert> : <Typography sx={{ color: "text.secondary" }}>{t("rulesLoading")}</Typography>}
|
||||
{loadError ? <Alert severity="error" action={<Button color="inherit" onClick={onRetry}>{t("retry")}</Button>}>{loadError}</Alert> : <Typography role="status" sx={{ color: "text.secondary" }}>{t("rulesLoading")}</Typography>}
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
|
||||
const num = (k: keyof RuleSettings) => ({
|
||||
value: s[k],
|
||||
const num = (k: RuleField) => ({
|
||||
value: draft[k],
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setS((p) => (p ? { ...p, [k]: Number(e.target.value) } : p)),
|
||||
onChange(k, e.target.value),
|
||||
type: "number" as const,
|
||||
inputProps: { min: 1, max: 365 },
|
||||
error: invalid.includes(k),
|
||||
helperText: invalid.includes(k) ? t("rulesDaysInvalid") : undefined,
|
||||
inputProps: { min: 1, max: 365, step: 1, required: true },
|
||||
});
|
||||
|
||||
return (
|
||||
<PageSection surface title={t("rulesTitle")} description={t("rulesBody")}>
|
||||
|
||||
<Box component="form" noValidate onSubmit={(event) => { event.preventDefault(); onSave(); }}>
|
||||
{saveError ? <Alert severity="error" sx={{ mb: 2 }}>{t("rulesSaveFailed")}</Alert> : null}
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2 }}>
|
||||
<TextField label={t("rulesAppliedFollowUpDays")} {...num("appliedFollowUpDays")} />
|
||||
<TextField label={t("rulesAppliedGhostDays")} {...num("appliedGhostDays")} />
|
||||
@@ -84,11 +68,13 @@ export default function RulesSettingsCard() {
|
||||
<Box />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 2 }}>
|
||||
<Button variant="contained" onClick={save} disabled={saving}>
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", flexWrap: "wrap", gap: 1, mt: 2 }}>
|
||||
<Button onClick={onDiscard} disabled={!dirty || saving}>{t("assetsDiscardChanges")}</Button>
|
||||
<Button variant="contained" type="submit" disabled={saving}>
|
||||
{saving ? t("rulesSaving") : t("rulesSave")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user