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

133 lines
3.8 KiB
TypeScript

"use client";
import { useState } from "react";
import { Loader2, Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { createAssociation } from "@/lib/api";
import type { Association } from "@/lib/models";
export function CreateAssociationDialog({
onCreated,
}: {
onCreated: (association: Association) => void;
}) {
const [open, setOpen] = useState(false);
const [creating, setCreating] = useState(false);
const [name, setName] = useState("");
const [address, setAddress] = useState("");
const [vatNumber, setVatNumber] = useState("");
const [runtsId, setRuntsId] = useState("");
const reset = () => {
setName("");
setAddress("");
setVatNumber("");
setRuntsId("");
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setCreating(true);
try {
const association = await createAssociation({
name,
address,
vatNumber,
runtsId,
isShown: true,
associates: [],
users: [],
});
reset();
setOpen(false);
onCreated(association);
} catch (error) {
console.error("Failed to create association:", error);
alert("Impossibile creare l'associazione");
} finally {
setCreating(false);
}
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button>
<Plus className="size-4" />
Nuova associazione
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Crea nuova 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="name">Nome associazione *</Label>
<Input
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Associazione Sportiva Roma"
required
/>
</div>
<div className="space-y-2 sm:col-span-2">
<Label htmlFor="address">Indirizzo *</Label>
<Input
id="address"
value={address}
onChange={(e) => setAddress(e.target.value)}
placeholder="Via Roma 10, Milano, 20100"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="vatNumber">Partita IVA</Label>
<Input
id="vatNumber"
value={vatNumber}
onChange={(e) => setVatNumber(e.target.value)}
placeholder="12345678901"
/>
</div>
<div className="space-y-2">
<Label htmlFor="runtsId">Codice RUNTS</Label>
<Input
id="runtsId"
value={runtsId}
onChange={(e) => setRuntsId(e.target.value)}
placeholder="RUNTS001"
/>
</div>
</div>
<div className="flex justify-end gap-2">
<Button type="button" variant="outline" onClick={() => setOpen(false)}>
Annulla
</Button>
<Button type="submit" disabled={creating}>
{creating && <Loader2 className="size-4 animate-spin" />}
{creating ? "Creazione..." : "Crea e continua"}
</Button>
</div>
</form>
</DialogContent>
</Dialog>
);
}