283 lines
10 KiB
TypeScript
283 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
import { CalendarIcon } from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import { toast } from "sonner";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Calendar } from "@/components/ui/calendar";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import { trpc } from "@/utils/trpc";
|
|
import { Header } from "@/components/layout/header";
|
|
import { Footer } from "@/components/layout/footer";
|
|
|
|
const formSchema = z.object({
|
|
name: z.string().min(1, "Name wird benötigt"),
|
|
birthDate: z.date({
|
|
required_error: "Bitte wähle ein Geburtsdatum",
|
|
}),
|
|
birthTime: z.string().regex(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/, "Ungültiges Zeitformat (HH:MM)").optional(),
|
|
gender: z.enum(["male", "female"], {
|
|
required_error: "Bitte wähle das Geschlecht",
|
|
}),
|
|
});
|
|
|
|
type FormValues = z.infer<typeof formSchema>;
|
|
|
|
export default function AddChildPage() {
|
|
const router = useRouter();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [dateInputValue, setDateInputValue] = useState("");
|
|
|
|
const form = useForm<FormValues>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
name: "",
|
|
gender: "male",
|
|
birthTime: "",
|
|
},
|
|
});
|
|
|
|
const addChild = trpc.child.add.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Kind hinzugefügt", {
|
|
description: "Das Kind wurde erfolgreich hinzugefügt."
|
|
});
|
|
form.reset();
|
|
router.push("/app");
|
|
router.refresh();
|
|
},
|
|
onError: (err) => {
|
|
toast.error("Fehler", {
|
|
description: err.message
|
|
});
|
|
setIsLoading(false);
|
|
},
|
|
});
|
|
|
|
function onSubmit(values: FormValues) {
|
|
setIsLoading(true);
|
|
|
|
// Create a date with the selected time or default to noon
|
|
let birthDateTime = values.birthDate;
|
|
if (values.birthTime) {
|
|
const [hours, minutes] = values.birthTime.split(':').map(Number);
|
|
birthDateTime = new Date(Date.UTC(
|
|
values.birthDate.getUTCFullYear(),
|
|
values.birthDate.getUTCMonth(),
|
|
values.birthDate.getUTCDate(),
|
|
hours,
|
|
minutes,
|
|
0
|
|
));
|
|
} else {
|
|
// Default to noon if no time is specified
|
|
birthDateTime = new Date(Date.UTC(
|
|
values.birthDate.getUTCFullYear(),
|
|
values.birthDate.getUTCMonth(),
|
|
values.birthDate.getUTCDate(),
|
|
12,
|
|
0,
|
|
0
|
|
));
|
|
}
|
|
|
|
addChild.mutate({
|
|
name: values.name,
|
|
birthDate: birthDateTime.toISOString(),
|
|
gender: values.gender,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<main className="min-h-[calc(100vh-160px)] px-6 py-10 bg-gradient-to-br from-rose-100 to-rose-50">
|
|
<div className="max-w-md mx-auto">
|
|
<h1 className="text-2xl font-bold text-zinc-800 mb-6">
|
|
Kind hinzufügen
|
|
</h1>
|
|
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Name</FormLabel>
|
|
<FormControl>
|
|
<Input className="bg-white" placeholder="Name des Kindes" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="birthDate"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-col">
|
|
<FormLabel>Geburtsdatum</FormLabel>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<div className="flex h-9 w-full items-center rounded-md border bg-white px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]">
|
|
<Input
|
|
type="text"
|
|
className="border-0 bg-transparent p-0 focus-visible:ring-0 focus-visible:ring-offset-0 flex-1"
|
|
placeholder="TT.MM.JJJJ"
|
|
value={dateInputValue}
|
|
onChange={(e) => {
|
|
setDateInputValue(e.target.value);
|
|
}}
|
|
onBlur={(e) => {
|
|
const inputValue = e.target.value;
|
|
|
|
// Allow empty input
|
|
if (!inputValue) {
|
|
field.onChange(null);
|
|
return;
|
|
}
|
|
|
|
// Check if the input matches the expected format (DD.MM.YYYY)
|
|
const dateRegex = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
|
|
const match = inputValue.match(dateRegex);
|
|
|
|
if (match) {
|
|
const day = parseInt(match[1], 10);
|
|
const month = parseInt(match[2], 10) - 1; // JavaScript months are 0-indexed
|
|
const year = parseInt(match[3], 10);
|
|
|
|
// Create a date object and validate it
|
|
// Set the time to noon UTC to avoid timezone issues
|
|
const date = new Date(Date.UTC(year, month, day, 12, 0, 0));
|
|
|
|
// Check if the date is valid (e.g., not February 30th)
|
|
if (
|
|
date.getUTCDate() === day &&
|
|
date.getUTCMonth() === month &&
|
|
date.getUTCFullYear() === year &&
|
|
date <= new Date() &&
|
|
date >= new Date("1900-01-01")
|
|
) {
|
|
field.onChange(date);
|
|
setDateInputValue(format(date, "dd.MM.yyyy"));
|
|
} else {
|
|
// If invalid, reset to the last valid value
|
|
setDateInputValue(field.value ? format(field.value, "dd.MM.yyyy") : "");
|
|
}
|
|
} else {
|
|
// If format is wrong, reset to the last valid value
|
|
setDateInputValue(field.value ? format(field.value, "dd.MM.yyyy") : "");
|
|
}
|
|
}}
|
|
/>
|
|
<CalendarIcon className="h-4 w-4 opacity-50" />
|
|
</div>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={field.value}
|
|
onSelect={(date) => {
|
|
field.onChange(date);
|
|
if (date) {
|
|
setDateInputValue(format(date, "dd.MM.yyyy"));
|
|
} else {
|
|
setDateInputValue("");
|
|
}
|
|
}}
|
|
disabled={(date) =>
|
|
date > new Date() || date < new Date("1900-01-01")
|
|
}
|
|
initialFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="birthTime"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Geburtszeit (optional)</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="time"
|
|
className="bg-white"
|
|
placeholder="HH:MM"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="gender"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Geschlecht</FormLabel>
|
|
<Select
|
|
onValueChange={field.onChange}
|
|
defaultValue={field.value}
|
|
>
|
|
<FormControl>
|
|
<SelectTrigger className="bg-white">
|
|
<SelectValue placeholder="Geschlecht auswählen" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
<SelectItem value="male">Bub</SelectItem>
|
|
<SelectItem value="female">Mädchen</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading ? "Wird hinzugefügt..." : "Kind hinzufügen"}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
} |