107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useState } from 'react';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { Plus } from 'lucide-react';
|
|
|
|
import { createDepartment } from '@kit/member-management/actions/member-actions';
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@kit/ui/dialog';
|
|
import { Input } from '@kit/ui/input';
|
|
import { Label } from '@kit/ui/label';
|
|
import { useActionWithToast } from '@kit/ui/use-action-with-toast';
|
|
|
|
interface CreateDepartmentDialogProps {
|
|
accountId: string;
|
|
}
|
|
|
|
export function CreateDepartmentDialog({
|
|
accountId,
|
|
}: CreateDepartmentDialogProps) {
|
|
const router = useRouter();
|
|
const [open, setOpen] = useState(false);
|
|
const [name, setName] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
|
|
const { execute, isPending } = useActionWithToast(createDepartment, {
|
|
successMessage: 'Abteilung erstellt',
|
|
errorMessage: 'Fehler beim Erstellen der Abteilung',
|
|
onSuccess: () => {
|
|
setOpen(false);
|
|
setName('');
|
|
setDescription('');
|
|
router.refresh();
|
|
},
|
|
});
|
|
|
|
const handleSubmit = useCallback(
|
|
(e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!name.trim()) return;
|
|
execute({
|
|
accountId,
|
|
name: name.trim(),
|
|
description: description.trim() || undefined,
|
|
});
|
|
},
|
|
[execute, accountId, name, description],
|
|
);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger render={<Button size="sm" />}>
|
|
<Plus className="mr-1 h-4 w-4" />
|
|
Neue Abteilung
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<form onSubmit={handleSubmit}>
|
|
<DialogHeader>
|
|
<DialogTitle>Neue Abteilung</DialogTitle>
|
|
<DialogDescription>
|
|
Erstellen Sie eine neue Abteilung oder Sparte für Ihren Verein.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="mt-4 space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="dept-name">Name</Label>
|
|
<Input
|
|
id="dept-name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="z. B. Jugendabteilung"
|
|
required
|
|
minLength={1}
|
|
maxLength={128}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="dept-description">Beschreibung (optional)</Label>
|
|
<Input
|
|
id="dept-description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Kurze Beschreibung"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter className="mt-4">
|
|
<Button type="submit" disabled={isPending || !name.trim()}>
|
|
{isPending ? 'Wird erstellt…' : 'Erstellen'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|