feat: add plan title and interval editing to settings

- Add Settings button label i18n (de: Einstellungen)
- Allow editing plan title, feeding per day, feeding interval, and litter interval
- Update PlanSettings component with new form fields
- Add German and English translations for new settings
- Update Plan type to include title property
This commit is contained in:
2026-01-12 23:49:17 +01:00
parent e395f2a8b1
commit 8854cfd1f9
5 changed files with 113 additions and 2 deletions

View File

@@ -33,18 +33,26 @@ import { updatePlan } from "@/app/actions/plan"
interface PlanSettingsProps {
planId: string
initialTitle: string
initialInstructions: string | null
initialWebhookUrl: string | null
initialNotifyAll: boolean
initialFeedingPerDay: number
initialFeedingInterval: number
initialLitterInterval: number
dict: any
lang: string
}
export function PlanSettings({
planId,
initialTitle,
initialInstructions,
initialWebhookUrl,
initialNotifyAll,
initialFeedingPerDay,
initialFeedingInterval,
initialLitterInterval,
dict,
lang
}: PlanSettingsProps) {
@@ -52,9 +60,13 @@ export function PlanSettings({
const [isPending, setIsPending] = useState(false)
const formSchema = z.object({
title: z.string().min(2),
instructions: z.string().optional(),
webhookUrl: z.string().url().optional().or(z.literal("")),
notifyAll: z.boolean(),
feedingPerDay: z.number().min(1).max(10),
feedingInterval: z.number().min(1).max(30),
litterInterval: z.number().min(1).max(30),
})
type FormValues = z.infer<typeof formSchema>
@@ -62,9 +74,13 @@ export function PlanSettings({
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
title: initialTitle,
instructions: initialInstructions || "",
webhookUrl: initialWebhookUrl || "",
notifyAll: initialNotifyAll,
feedingPerDay: initialFeedingPerDay,
feedingInterval: initialFeedingInterval,
litterInterval: initialLitterInterval,
},
})
@@ -86,7 +102,7 @@ export function PlanSettings({
<DialogTrigger asChild>
<Button variant="outline" size="sm">
<Settings className="w-4 h-4 mr-2" />
{dict.title.split(" ")[1] || "Settings"}
{dict.label}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
@@ -98,6 +114,21 @@ export function PlanSettings({
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>{dict.titleLabel}</FormLabel>
<FormControl>
<Input
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookUrl"
@@ -117,6 +148,59 @@ export function PlanSettings({
</FormItem>
)}
/>
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name="feedingPerDay"
render={({ field }) => (
<FormItem>
<FormLabel>{dict.feedingPerDayLabel}</FormLabel>
<FormControl>
<Input
type="number"
{...field}
onChange={(e) => field.onChange(parseInt(e.target.value))}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="feedingInterval"
render={({ field }) => (
<FormItem>
<FormLabel>{dict.feedingIntervalLabel}</FormLabel>
<FormControl>
<Input
type="number"
{...field}
onChange={(e) => field.onChange(parseInt(e.target.value))}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="litterInterval"
render={({ field }) => (
<FormItem>
<FormLabel>{dict.litterIntervalLabel}</FormLabel>
<FormControl>
<Input
type="number"
{...field}
onChange={(e) => field.onChange(parseInt(e.target.value))}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="notifyAll"