133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useState } from 'react';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { Plus } from 'lucide-react';
|
|
|
|
import { createLocation } from '@kit/course-management/actions/course-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 CreateLocationDialogProps {
|
|
accountId: string;
|
|
}
|
|
|
|
export function CreateLocationDialog({ accountId }: CreateLocationDialogProps) {
|
|
const router = useRouter();
|
|
const [open, setOpen] = useState(false);
|
|
const [name, setName] = useState('');
|
|
const [address, setAddress] = useState('');
|
|
const [room, setRoom] = useState('');
|
|
const [capacity, setCapacity] = useState('');
|
|
|
|
const { execute, isPending } = useActionWithToast(createLocation, {
|
|
successMessage: 'Ort erstellt',
|
|
errorMessage: 'Fehler beim Erstellen des Ortes',
|
|
onSuccess: () => {
|
|
setOpen(false);
|
|
setName('');
|
|
setAddress('');
|
|
setRoom('');
|
|
setCapacity('');
|
|
router.refresh();
|
|
},
|
|
});
|
|
|
|
const handleSubmit = useCallback(
|
|
(e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!name.trim()) return;
|
|
execute({
|
|
accountId,
|
|
name: name.trim(),
|
|
address: address.trim() || undefined,
|
|
room: room.trim() || undefined,
|
|
capacity: capacity ? Number(capacity) : undefined,
|
|
});
|
|
},
|
|
[execute, accountId, name, address, room, capacity],
|
|
);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger render={<Button size="sm" />}>
|
|
<Plus className="mr-1 h-4 w-4" />
|
|
Neuer Ort
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<form onSubmit={handleSubmit}>
|
|
<DialogHeader>
|
|
<DialogTitle>Neuer Ort</DialogTitle>
|
|
<DialogDescription>
|
|
Einen neuen Kurs- oder Veranstaltungsort hinzufuegen.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="mt-4 space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="loc-name">Name</Label>
|
|
<Input
|
|
id="loc-name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="z. B. Vereinsheim"
|
|
required
|
|
minLength={1}
|
|
maxLength={128}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="loc-address">Adresse (optional)</Label>
|
|
<Input
|
|
id="loc-address"
|
|
value={address}
|
|
onChange={(e) => setAddress(e.target.value)}
|
|
placeholder="Musterstr. 1, 12345 Musterstadt"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="loc-room">Raum (optional)</Label>
|
|
<Input
|
|
id="loc-room"
|
|
value={room}
|
|
onChange={(e) => setRoom(e.target.value)}
|
|
placeholder="z. B. Raum 101"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="loc-capacity">Kapazitaet (optional)</Label>
|
|
<Input
|
|
id="loc-capacity"
|
|
type="number"
|
|
min={1}
|
|
value={capacity}
|
|
onChange={(e) => setCapacity(e.target.value)}
|
|
placeholder="z. B. 30"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter className="mt-4">
|
|
<Button type="submit" disabled={isPending || !name.trim()}>
|
|
{isPending ? 'Wird erstellt...' : 'Erstellen'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|