ente_nazionale_frontend/components/associations/edit-association-dialog.tsx
2026-08-17 11:34:06 +03:00

126 lines
4.2 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { Loader2, Pencil } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { updateAssociation } from "@/lib/api";
import type { Association } from "@/lib/models";
export function EditAssociationDialog({
association,
onSaved,
}: {
association: Association;
onSaved: (association: Association) => void;
}) {
const [open, setOpen] = useState(false);
const [saving, setSaving] = useState(false);
const [name, setName] = useState(association.name);
const [address, setAddress] = useState(association.address);
const [vatNumber, setVatNumber] = useState(association.vatNumber ?? "");
const [runtsId, setRuntsId] = useState(association.runtsId ?? "");
const [isShown, setIsShown] = useState(association.isShown ?? true);
useEffect(() => {
if (open) {
setName(association.name);
setAddress(association.address);
setVatNumber(association.vatNumber ?? "");
setRuntsId(association.runtsId ?? "");
setIsShown(association.isShown ?? true);
}
}, [open, association]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setSaving(true);
try {
const updated = await updateAssociation(association.id!, {
...association,
name,
address,
vatNumber,
runtsId,
isShown,
});
onSaved(updated);
setOpen(false);
} catch (error) {
console.error("Failed to update association:", error);
alert("Impossibile salvare le modifiche");
} finally {
setSaving(false);
}
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline">
<Pencil className="size-4" />
Modifica
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Modifica associazione</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-5">
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2 sm:col-span-2">
<Label htmlFor="e-name">Nome associazione *</Label>
<Input id="e-name" value={name} onChange={(e) => setName(e.target.value)} required />
</div>
<div className="space-y-2 sm:col-span-2">
<Label htmlFor="e-address">Indirizzo *</Label>
<Input id="e-address" value={address} onChange={(e) => setAddress(e.target.value)} required />
</div>
<div className="space-y-2">
<Label htmlFor="e-vatNumber">Partita IVA</Label>
<Input id="e-vatNumber" value={vatNumber} onChange={(e) => setVatNumber(e.target.value)} />
</div>
<div className="space-y-2">
<Label htmlFor="e-runtsId">Codice RUNTS</Label>
<Input id="e-runtsId" value={runtsId} onChange={(e) => setRuntsId(e.target.value)} />
</div>
<div className="flex items-center justify-between rounded-lg border p-3 sm:col-span-2">
<div>
<Label htmlFor="e-isShown">Associazione attiva</Label>
<p className="text-sm text-muted-foreground">
Le associazioni non attive non compaiono nell&apos;elenco
</p>
</div>
<Switch id="e-isShown" checked={isShown} onCheckedChange={setIsShown} />
</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => setOpen(false)}>
Annulla
</Button>
<Button type="submit" disabled={saving}>
{saving && <Loader2 className="size-4 animate-spin" />}
{saving ? "Salvataggio..." : "Salva modifiche"}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}