Add Child functionality
This commit is contained in:
Philip
191
src/app/dashboard/add-child/page.tsx
Normal file
191
src/app/dashboard/add-child/page.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
"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",
|
||||
}),
|
||||
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 form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
gender: "male",
|
||||
},
|
||||
});
|
||||
|
||||
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);
|
||||
addChild.mutate({
|
||||
name: values.name,
|
||||
birthDate: values.birthDate.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 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"
|
||||
placeholder="TT.MM.JJJJ"
|
||||
value={field.value ? format(field.value, "dd.MM.yyyy") : ""}
|
||||
onChange={(e) => {
|
||||
const date = new Date(e.target.value);
|
||||
if (!isNaN(date.getTime())) {
|
||||
field.onChange(date);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</div>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
disabled={(date) =>
|
||||
date > new Date() || date < new Date("1900-01-01")
|
||||
}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user