refactor: extract DetailsStep, ScheduleStep, RecurrenceStep into EventDialog
This commit is contained in:
@@ -9,344 +9,484 @@ import { RecurrencePicker } from "@/components/recurrence-picker";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useIsMobile } from "@/hooks/use-mobile";
|
||||
import {
|
||||
type EventFormValues,
|
||||
getDefaultEventFormValues,
|
||||
validateEventFormValues,
|
||||
type EventFormValues,
|
||||
getDefaultEventFormValues,
|
||||
validateEventFormValues,
|
||||
} from "@/lib/event-form";
|
||||
import { parseRecurrenceRule, validateRecurrence } from "@/lib/recurrence";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface EventDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
editingId: string | null;
|
||||
dialogSource: "manual" | "ai";
|
||||
initialValues: EventFormValues;
|
||||
onSave: (values: EventFormValues) => void;
|
||||
onReset: () => void;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
editingId: string | null;
|
||||
dialogSource: "manual" | "ai";
|
||||
initialValues: EventFormValues;
|
||||
onSave: (values: EventFormValues) => void;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
export const EventDialog = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
editingId,
|
||||
dialogSource,
|
||||
initialValues,
|
||||
onSave,
|
||||
onReset,
|
||||
open,
|
||||
onOpenChange,
|
||||
editingId,
|
||||
dialogSource,
|
||||
initialValues,
|
||||
onSave,
|
||||
onReset,
|
||||
}: EventDialogProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
const isAiDraft = dialogSource === "ai" && !editingId;
|
||||
const titleText = editingId
|
||||
? "Edit Event"
|
||||
: isAiDraft
|
||||
? "Review AI Draft"
|
||||
: "New Event";
|
||||
const descriptionText = editingId
|
||||
? "Update the event details below. Title and start date are required."
|
||||
: isAiDraft
|
||||
? "AI filled in this event from your prompt. Review each field, then save when it looks right."
|
||||
: "Create an event manually. Title and start date are required.";
|
||||
const saveLabel = editingId ? "Update Event" : "Save Event";
|
||||
const isMobile = useIsMobile();
|
||||
const isAiDraft = dialogSource === "ai" && !editingId;
|
||||
const titleText = editingId ? "Edit Event" : isAiDraft ? "Review AI Draft" : "New Event";
|
||||
const descriptionText = editingId
|
||||
? "Update the event details below. Title and start date are required."
|
||||
: isAiDraft
|
||||
? "AI filled in this event from your prompt. Review each field, then save when it looks right."
|
||||
: "Create an event manually. Title and start date are required.";
|
||||
const saveLabel = editingId ? "Update Event" : "Save Event";
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
register,
|
||||
reset,
|
||||
setError,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm<EventFormValues>({
|
||||
defaultValues: getDefaultEventFormValues(),
|
||||
});
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
register,
|
||||
reset,
|
||||
setError,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm<EventFormValues>({
|
||||
defaultValues: getDefaultEventFormValues(),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(initialValues);
|
||||
}, [initialValues, reset]);
|
||||
useEffect(() => {
|
||||
reset(initialValues);
|
||||
}, [initialValues, reset]);
|
||||
|
||||
const allDay = watch("allDay");
|
||||
const start = watch("start");
|
||||
const allDay = watch("allDay");
|
||||
const start = watch("start");
|
||||
|
||||
const handleOpenChange = (nextOpen: boolean) => {
|
||||
if (!nextOpen) {
|
||||
reset(getDefaultEventFormValues());
|
||||
onReset();
|
||||
}
|
||||
onOpenChange(nextOpen);
|
||||
};
|
||||
const handleOpenChange = (nextOpen: boolean) => {
|
||||
if (!nextOpen) {
|
||||
reset(getDefaultEventFormValues());
|
||||
onReset();
|
||||
}
|
||||
onOpenChange(nextOpen);
|
||||
};
|
||||
|
||||
const DURATIONS = [
|
||||
{ label: "+15 min", minutes: 15 },
|
||||
{ label: "+30 min", minutes: 30 },
|
||||
{ label: "+1 hour", minutes: 60 },
|
||||
{ label: "+3 hours", minutes: 180 },
|
||||
];
|
||||
const DURATIONS = [
|
||||
{ label: "+15 min", minutes: 15 },
|
||||
{ label: "+30 min", minutes: 30 },
|
||||
{ label: "+1 hour", minutes: 60 },
|
||||
{ label: "+3 hours", minutes: 180 },
|
||||
];
|
||||
|
||||
const handleApplyDuration = (
|
||||
minutes: number,
|
||||
currentAllDay: boolean,
|
||||
currentStart: string,
|
||||
) => {
|
||||
if (!currentStart) return;
|
||||
const base = parseISO(currentStart);
|
||||
if (!isValid(base)) return;
|
||||
const next =
|
||||
minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
|
||||
const pad = (value: number) => String(value).padStart(2, "0");
|
||||
const result = currentAllDay
|
||||
? `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`
|
||||
: `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}T${pad(next.getHours())}:${pad(next.getMinutes())}:00`;
|
||||
setValue("end", result, { shouldDirty: true });
|
||||
};
|
||||
const handleApplyDuration = (minutes: number, currentAllDay: boolean, currentStart: string) => {
|
||||
if (!currentStart) return;
|
||||
const base = parseISO(currentStart);
|
||||
if (!isValid(base)) return;
|
||||
const next = minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
|
||||
const pad = (value: number) => String(value).padStart(2, "0");
|
||||
const result = currentAllDay
|
||||
? `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`
|
||||
: `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}T${pad(next.getHours())}:${pad(next.getMinutes())}:00`;
|
||||
setValue("end", result, { shouldDirty: true });
|
||||
};
|
||||
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
const result = validateEventFormValues(values);
|
||||
if (!result.success) {
|
||||
const fieldErrors = result.error.flatten().fieldErrors;
|
||||
for (const [fieldName, messages] of Object.entries(fieldErrors)) {
|
||||
const firstMessage = messages?.[0];
|
||||
if (firstMessage) {
|
||||
setError(fieldName as keyof EventFormValues, {
|
||||
message: firstMessage,
|
||||
});
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
const result = validateEventFormValues(values);
|
||||
if (!result.success) {
|
||||
const fieldErrors = result.error.flatten().fieldErrors;
|
||||
for (const [fieldName, messages] of Object.entries(fieldErrors)) {
|
||||
const firstMessage = messages?.[0];
|
||||
if (firstMessage) {
|
||||
setError(fieldName as keyof EventFormValues, {
|
||||
message: firstMessage,
|
||||
});
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (values.recurrenceRule) {
|
||||
const recurrenceValidation = validateRecurrence(
|
||||
parseRecurrenceRule(values.recurrenceRule),
|
||||
);
|
||||
if (!recurrenceValidation.isValid) {
|
||||
setError("recurrenceRule", {
|
||||
message:
|
||||
recurrenceValidation.errors.rule ||
|
||||
recurrenceValidation.errors.count ||
|
||||
recurrenceValidation.errors.until ||
|
||||
"Invalid recurrence.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (values.recurrenceRule) {
|
||||
const recurrenceValidation = validateRecurrence(parseRecurrenceRule(values.recurrenceRule));
|
||||
if (!recurrenceValidation.isValid) {
|
||||
setError("recurrenceRule", {
|
||||
message:
|
||||
recurrenceValidation.errors.rule ||
|
||||
recurrenceValidation.errors.count ||
|
||||
recurrenceValidation.errors.until ||
|
||||
"Invalid recurrence.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
onSave(result.data);
|
||||
reset(getDefaultEventFormValues());
|
||||
});
|
||||
onSave(result.data);
|
||||
reset(getDefaultEventFormValues());
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-xl">
|
||||
<DialogHeader className="px-6 py-5 shadow-[inset_0_-1px_0_0_var(--color-border)]">
|
||||
<DialogTitle className="text-[28px] tracking-[-0.06em]">
|
||||
{titleText}
|
||||
</DialogTitle>
|
||||
<DialogDescription>{descriptionText}</DialogDescription>
|
||||
</DialogHeader>
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-xl">
|
||||
<DialogHeader className="px-6 py-5 shadow-[inset_0_-1px_0_0_var(--color-border)]">
|
||||
<DialogTitle className="text-[28px] tracking-[-0.06em]">{titleText}</DialogTitle>
|
||||
<DialogDescription>{descriptionText}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form className="grid gap-6 px-6 py-5" onSubmit={onSubmit}>
|
||||
{isAiDraft && (
|
||||
<div className="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs leading-relaxed text-primary">
|
||||
This draft was generated from natural language. Double-check
|
||||
dates, times, location, recurrence, and links before saving.
|
||||
</div>
|
||||
)}
|
||||
<form className="grid gap-6 px-6 py-5" onSubmit={onSubmit}>
|
||||
{isAiDraft && (
|
||||
<div className="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs leading-relaxed text-primary">
|
||||
This draft was generated from natural language. Double-check dates, times, location,
|
||||
recurrence, and links before saving.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="grid gap-3">
|
||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||
Event details
|
||||
</p>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-title">Title</Label>
|
||||
<Input
|
||||
id="event-title"
|
||||
placeholder="Event title"
|
||||
className="font-medium"
|
||||
{...register("title")}
|
||||
/>
|
||||
{errors.title && (
|
||||
<p className="text-xs text-destructive">
|
||||
{errors.title.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<section className="grid gap-3">
|
||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">Event details</p>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-title">Title</Label>
|
||||
<Input
|
||||
id="event-title"
|
||||
placeholder="Event title"
|
||||
className="font-medium"
|
||||
{...register("title")}
|
||||
/>
|
||||
{errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-description">Description / notes</Label>
|
||||
<Textarea
|
||||
id="event-description"
|
||||
className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50"
|
||||
placeholder="Add a description..."
|
||||
{...register("description")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-description">Description / notes</Label>
|
||||
<Textarea
|
||||
id="event-description"
|
||||
className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50"
|
||||
placeholder="Add a description..."
|
||||
{...register("description")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"
|
||||
}
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-location">Location</Label>
|
||||
<Controller
|
||||
name="location"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<LocationAutocomplete
|
||||
id="event-location"
|
||||
onChange={field.onChange}
|
||||
value={field.value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-url">URL</Label>
|
||||
<Input id="event-url" placeholder="URL" {...register("url")} />
|
||||
{errors.url && (
|
||||
<p className="text-xs text-destructive">
|
||||
{errors.url.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className={isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"}>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-location">Location</Label>
|
||||
<Controller
|
||||
name="location"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<LocationAutocomplete
|
||||
id="event-location"
|
||||
onChange={field.onChange}
|
||||
value={field.value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-url">URL</Label>
|
||||
<Input id="event-url" placeholder="URL" {...register("url")} />
|
||||
{errors.url && <p className="text-xs text-destructive">{errors.url.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-3">
|
||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||
Schedule
|
||||
</p>
|
||||
<section className="grid gap-3">
|
||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">Schedule</p>
|
||||
|
||||
<div className="flex items-center gap-2 py-1">
|
||||
<Controller
|
||||
name="allDay"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
id="event-all-day"
|
||||
checked={field.value}
|
||||
onCheckedChange={(checked) =>
|
||||
field.onChange(checked === true)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="event-all-day"
|
||||
className="cursor-pointer text-sm font-normal"
|
||||
>
|
||||
All day
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 py-1">
|
||||
<Controller
|
||||
name="allDay"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
id="event-all-day"
|
||||
checked={field.value}
|
||||
onCheckedChange={(checked) => field.onChange(checked === true)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label htmlFor="event-all-day" className="cursor-pointer text-sm font-normal">
|
||||
All day
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Controller
|
||||
name="start"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<DateTimePicker
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
allDay={allDay}
|
||||
placeholder="Start date"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{!allDay && (
|
||||
<Controller
|
||||
name="end"
|
||||
control={control}
|
||||
render={() => (
|
||||
<div className="flex gap-1 pl-0.5">
|
||||
{DURATIONS.map(({ label, minutes }) => (
|
||||
<Button
|
||||
key={label}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={!start}
|
||||
onClick={() =>
|
||||
handleApplyDuration(minutes, allDay, start)
|
||||
}
|
||||
className="px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Controller
|
||||
name="end"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<DateTimePicker
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
allDay={allDay}
|
||||
placeholder="End date"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.start && (
|
||||
<p className="text-xs text-destructive">
|
||||
{errors.start.message}
|
||||
</p>
|
||||
)}
|
||||
{errors.end && (
|
||||
<p className="text-xs text-destructive">{errors.end.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<div className="space-y-2">
|
||||
<Controller
|
||||
name="start"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<DateTimePicker
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
allDay={allDay}
|
||||
placeholder="Start date"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{!allDay && (
|
||||
<Controller
|
||||
name="end"
|
||||
control={control}
|
||||
render={() => (
|
||||
<div className="flex gap-1 pl-0.5">
|
||||
{DURATIONS.map(({ label, minutes }) => (
|
||||
<Button
|
||||
key={label}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={!start}
|
||||
onClick={() => handleApplyDuration(minutes, allDay, start)}
|
||||
className="px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Controller
|
||||
name="end"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<DateTimePicker
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
allDay={allDay}
|
||||
placeholder="End date"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.start && <p className="text-xs text-destructive">{errors.start.message}</p>}
|
||||
{errors.end && <p className="text-xs text-destructive">{errors.end.message}</p>}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-3">
|
||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||
Recurrence
|
||||
</p>
|
||||
<Controller
|
||||
name="recurrenceRule"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<RecurrencePicker
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
start={start}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.recurrenceRule && (
|
||||
<p className="text-xs text-destructive">
|
||||
{errors.recurrenceRule.message}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
<section className="grid gap-3">
|
||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">Recurrence</p>
|
||||
<Controller
|
||||
name="recurrenceRule"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<RecurrencePicker value={field.value} onChange={field.onChange} start={start} />
|
||||
)}
|
||||
/>
|
||||
{errors.recurrenceRule && (
|
||||
<p className="text-xs text-destructive">{errors.recurrenceRule.message}</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<DialogFooter className={isMobile ? "gap-2" : "gap-0"}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => handleOpenChange(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit">{saveLabel}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
<DialogFooter className={isMobile ? "gap-2" : "gap-0"}>
|
||||
<Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit">{saveLabel}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
interface StepProps {
|
||||
control: ReturnType<typeof useForm<EventFormValues>>["control"];
|
||||
register: ReturnType<typeof useForm<EventFormValues>>["register"];
|
||||
errors: ReturnType<typeof useForm<EventFormValues>>["formState"]["errors"];
|
||||
watch: ReturnType<typeof useForm<EventFormValues>>["watch"];
|
||||
setValue: ReturnType<typeof useForm<EventFormValues>>["setValue"];
|
||||
isAiDraft: boolean;
|
||||
}
|
||||
|
||||
function AiDraftBanner() {
|
||||
return (
|
||||
<div className="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs leading-relaxed text-primary">
|
||||
This draft was generated from natural language. Double-check dates, times, location,
|
||||
recurrence, and links before saving.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailsStep({
|
||||
control,
|
||||
register,
|
||||
errors,
|
||||
isAiDraft,
|
||||
}: Omit<StepProps, "watch" | "setValue">) {
|
||||
const isMobile = useIsMobile();
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
{isAiDraft && <AiDraftBanner />}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-title">Title</Label>
|
||||
<Input
|
||||
id="event-title"
|
||||
placeholder="Event title"
|
||||
className="font-medium"
|
||||
{...register("title")}
|
||||
/>
|
||||
{errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-description">Description / notes</Label>
|
||||
<Textarea
|
||||
id="event-description"
|
||||
className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50"
|
||||
placeholder="Add a description..."
|
||||
{...register("description")}
|
||||
/>
|
||||
</div>
|
||||
<div className={isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"}>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-location">Location</Label>
|
||||
<Controller
|
||||
name="location"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<LocationAutocomplete
|
||||
id="event-location"
|
||||
onChange={field.onChange}
|
||||
value={field.value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-url">URL</Label>
|
||||
<Input id="event-url" placeholder="URL" {...register("url")} />
|
||||
{errors.url && <p className="text-xs text-destructive">{errors.url.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ScheduleStep({
|
||||
control,
|
||||
errors,
|
||||
watch,
|
||||
setValue,
|
||||
isAiDraft,
|
||||
}: Omit<StepProps, "register">) {
|
||||
const allDay = watch("allDay");
|
||||
const start = watch("start");
|
||||
|
||||
const DURATIONS = [
|
||||
{ label: "+15 min", minutes: 15 },
|
||||
{ label: "+30 min", minutes: 30 },
|
||||
{ label: "+1 hour", minutes: 60 },
|
||||
{ label: "+3 hours", minutes: 180 },
|
||||
];
|
||||
|
||||
const handleApplyDuration = (minutes: number) => {
|
||||
if (!start) return;
|
||||
const base = parseISO(start);
|
||||
if (!isValid(base)) return;
|
||||
const next = minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
|
||||
const pad = (v: number) => String(v).padStart(2, "0");
|
||||
const result = allDay
|
||||
? `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`
|
||||
: `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}T${pad(next.getHours())}:${pad(next.getMinutes())}:00`;
|
||||
setValue("end", result, { shouldDirty: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
{isAiDraft && <AiDraftBanner />}
|
||||
<div className="flex items-center gap-2 py-1">
|
||||
<Controller
|
||||
name="allDay"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
id="event-all-day"
|
||||
checked={field.value}
|
||||
onCheckedChange={(checked) => field.onChange(checked === true)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label htmlFor="event-all-day" className="cursor-pointer text-sm font-normal">
|
||||
All day
|
||||
</Label>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Controller
|
||||
name="start"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<DateTimePicker
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
allDay={allDay}
|
||||
placeholder="Start date"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{!allDay && (
|
||||
<div className="flex gap-1 pl-0.5">
|
||||
{DURATIONS.map(({ label, minutes }) => (
|
||||
<Button
|
||||
key={label}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={!start}
|
||||
onClick={() => handleApplyDuration(minutes)}
|
||||
className="px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Controller
|
||||
name="end"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<DateTimePicker
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
allDay={allDay}
|
||||
placeholder="End date"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.start && <p className="text-xs text-destructive">{errors.start.message}</p>}
|
||||
{errors.end && <p className="text-xs text-destructive">{errors.end.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RecurrenceStep({
|
||||
control,
|
||||
errors,
|
||||
watch,
|
||||
isAiDraft,
|
||||
}: Omit<StepProps, "register" | "setValue">) {
|
||||
const start = watch("start");
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
{isAiDraft && <AiDraftBanner />}
|
||||
<Controller
|
||||
name="recurrenceRule"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<RecurrencePicker value={field.value} onChange={field.onChange} start={start} />
|
||||
)}
|
||||
/>
|
||||
{errors.recurrenceRule && (
|
||||
<p className="text-xs text-destructive">{errors.recurrenceRule.message}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user