Reset form state on dialog close in NewCustomerModal
- Add `resetForm` utility to restore initial modal state. - Automatically reset form state when dialog closes or a new customer is created to improve UX.
This commit is contained in:
@@ -75,6 +75,7 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
|
|||||||
if (onCustomerCreated) {
|
if (onCustomerCreated) {
|
||||||
onCustomerCreated();
|
onCustomerCreated();
|
||||||
}
|
}
|
||||||
|
resetForm();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
handleError(err);
|
handleError(err);
|
||||||
}
|
}
|
||||||
@@ -123,6 +124,20 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
|
|||||||
setNotes(updated);
|
setNotes(updated);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setStep(1); // Reset to step 1
|
||||||
|
setEmail("");
|
||||||
|
setName("");
|
||||||
|
setCompanyName("");
|
||||||
|
setPhoneNumbers([{note: "", number: ""}]);
|
||||||
|
setNotes([{text: ""}]);
|
||||||
|
setStreet("");
|
||||||
|
setZip("");
|
||||||
|
setCity("");
|
||||||
|
setMatches([]);
|
||||||
|
setShowDetailModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
const renderStepOne = () => (
|
const renderStepOne = () => (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
@@ -227,6 +242,9 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Dialog open={open} onOpenChange={() => {
|
<Dialog open={open} onOpenChange={() => {
|
||||||
|
if (!open) {
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
// Prevent closing on backdrop click - modal can only be closed explicitly
|
// Prevent closing on backdrop click - modal can only be closed explicitly
|
||||||
}}>
|
}}>
|
||||||
<DialogTrigger asChild>
|
<DialogTrigger asChild>
|
||||||
@@ -257,7 +275,7 @@ export function NewCustomerModal({onCustomerCreated}: Readonly<NewCustomerModalP
|
|||||||
{step === 1 ? (
|
{step === 1 ? (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => setStep(2)}
|
onClick={() => setStep(2)}
|
||||||
// disabled={!email || !name || !companyName || phoneNumbers.length === 0 || !phoneNumbers.some(p => p.number.trim()) || emailExists}
|
disabled={!email || !name || !companyName || phoneNumbers.length === 0 || !phoneNumbers.some(p => p.number.trim()) || emailExists}
|
||||||
>
|
>
|
||||||
Weiter
|
Weiter
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Reference in New Issue
Block a user