132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Loader2 } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import type { User } from "@/lib/models";
|
|
|
|
const ROLE_OPTIONS: { value: User["role"]; label: string }[] = [
|
|
{ value: "CLIENT", label: "Associazione" },
|
|
{ value: "MANAGER", label: "Gestore" },
|
|
{ value: "ADMIN", label: "Amministratore" },
|
|
];
|
|
|
|
const EMPTY_USER: User = { email: "", password: "", role: "CLIENT" };
|
|
|
|
export function UserFormDialog({
|
|
open,
|
|
onOpenChange,
|
|
initialValue,
|
|
onSubmit,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
initialValue?: User;
|
|
onSubmit: (user: User) => Promise<void> | void;
|
|
}) {
|
|
const [value, setValue] = useState<User>(initialValue ?? EMPTY_USER);
|
|
const [saving, setSaving] = useState(false);
|
|
const isEdit = Boolean(initialValue);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setValue(initialValue ?? EMPTY_USER);
|
|
}
|
|
}, [open, initialValue]);
|
|
|
|
const update = <K extends keyof User>(key: K, fieldValue: User[K]) =>
|
|
setValue((prev) => ({ ...prev, [key]: fieldValue }));
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
try {
|
|
await onSubmit(value);
|
|
onOpenChange(false);
|
|
} catch (error) {
|
|
console.error("Failed to save user:", error);
|
|
alert("Impossibile salvare l'account");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>{isEdit ? "Modifica account" : "Nuovo account di accesso"}</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="u-email">Email *</Label>
|
|
<Input
|
|
id="u-email"
|
|
type="email"
|
|
value={value.email}
|
|
onChange={(e) => update("email", e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="u-password">
|
|
Password {isEdit ? "" : "*"}
|
|
</Label>
|
|
<Input
|
|
id="u-password"
|
|
type="text"
|
|
value={value.password ?? ""}
|
|
onChange={(e) => update("password", e.target.value)}
|
|
placeholder={isEdit ? "Lascia vuoto per non modificarla" : undefined}
|
|
required={!isEdit}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="u-role">Ruolo *</Label>
|
|
<Select value={value.role} onValueChange={(v) => update("role", v as User["role"])}>
|
|
<SelectTrigger id="u-role" className="w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{ROLE_OPTIONS.map((role) => (
|
|
<SelectItem key={role.value} value={role.value}>
|
|
{role.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
Annulla
|
|
</Button>
|
|
<Button type="submit" disabled={saving}>
|
|
{saving && <Loader2 className="size-4 animate-spin" />}
|
|
{saving ? "Salvataggio..." : "Salva"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|