Gallery
Events still not working
This commit is contained in:
cdricms
@@ -1,23 +1,44 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import { CalendarIcon } from "lucide-react"
|
||||
import { format } from "date-fns"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import * as z from "zod"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Calendar } from "@/components/ui/calendar"
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { useForm } from "react-hook-form"
|
||||
import * as React from "react";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import {
|
||||
CalendarEventExternal,
|
||||
} from "@schedule-x/calendar";
|
||||
import ICalendarEvent from "@/interfaces/ICalendarEvent"
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
SubmitErrorHandler,
|
||||
SubmitHandler,
|
||||
useForm,
|
||||
UseFormReturn,
|
||||
} from "react-hook-form";
|
||||
import { CalendarEventExternal } from "@schedule-x/calendar";
|
||||
import ICalendarEvent from "@/interfaces/ICalendarEvent";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export const eventFormSchema = z.object({
|
||||
title: z.string().min(1, "Titre requis"),
|
||||
@@ -33,254 +54,364 @@ export const eventFormSchema = z.object({
|
||||
frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]),
|
||||
frequencyEndDate: z.date().optional(),
|
||||
isVisible: z.boolean().default(true),
|
||||
})
|
||||
});
|
||||
|
||||
export type EventFormValues = z.infer<typeof eventFormSchema>
|
||||
export type EventFormValues = z.infer<typeof eventFormSchema>;
|
||||
|
||||
const frequencies = [
|
||||
{ label: "Unique", value: "unique" },
|
||||
{ label: "Quotidien", value: "quotidien" },
|
||||
{ label: "Hebdomadaire", value: "hebdomadaire" },
|
||||
{ label: "Mensuel", value: "mensuel" },
|
||||
]
|
||||
];
|
||||
|
||||
const isCalendarEventExternal = (event: CalendarEventExternal | Omit<CalendarEventExternal, "id">): event is CalendarEventExternal => {
|
||||
return (event as CalendarEventExternal).id !== undefined;
|
||||
const isCalendarEventExternal = (
|
||||
event: CalendarEventExternal | Omit<CalendarEventExternal, "id">,
|
||||
): event is CalendarEventExternal => {
|
||||
return (event as CalendarEventExternal).id !== undefined;
|
||||
};
|
||||
|
||||
export const EventForm: React.FC<
|
||||
{
|
||||
event: ICalendarEvent | Omit<ICalendarEvent, "id">;
|
||||
onSubmitEvent: (eventFormValues: EventFormValues) => void;
|
||||
}
|
||||
> = ({
|
||||
event,
|
||||
onSubmitEvent,
|
||||
}) => {
|
||||
|
||||
const form = useForm<EventFormValues>({
|
||||
resolver: zodResolver(eventFormSchema),
|
||||
defaultValues: {
|
||||
title: event.title ? event.title : "",
|
||||
startDate: new Date(), // event.start),
|
||||
startTime: `${new Date(event.start).getHours()}:${new Date(event.start).getMinutes()}`,
|
||||
endDate: new Date(), // event.end),
|
||||
endTime: `${new Date(event.end).getHours()}:${new Date(event.end).getMinutes()}`,
|
||||
fullDay: event.fullday,
|
||||
frequency: "unique",
|
||||
isVisible: event.isVisible,
|
||||
},
|
||||
})
|
||||
export const EventForm: React.FC<{
|
||||
event: ICalendarEvent | Omit<ICalendarEvent, "id">;
|
||||
onSubmit: (data: EventFormValues) => any;
|
||||
}> = ({ event, onSubmit }) => {
|
||||
const _start = new Date(event.start ?? Date.now());
|
||||
const _end = new Date(event.end ?? Date.now());
|
||||
const form = useForm<EventFormValues>({
|
||||
resolver: zodResolver(eventFormSchema),
|
||||
defaultValues: {
|
||||
title: event.title ? event.title : "",
|
||||
startDate: _start, // event.start),
|
||||
startTime: format(_start, "HH:mm"),
|
||||
endDate: _end, // event.end),
|
||||
endTime: format(_end, "HH:mm"),
|
||||
fullDay: event.fullday,
|
||||
frequency: "unique",
|
||||
isVisible: event.isVisible,
|
||||
},
|
||||
});
|
||||
|
||||
const frequency = form.watch("frequency")
|
||||
const frequency = form.watch("frequency");
|
||||
|
||||
async function onSubmit(data: EventFormValues) {
|
||||
try {
|
||||
const validatedData = eventFormSchema.parse(data)
|
||||
onSubmitEvent(validatedData)
|
||||
} catch (error) {
|
||||
console.error("On submit error : ", error)
|
||||
}
|
||||
}
|
||||
// async function onSubmit(data: EventFormValues) {
|
||||
// try {
|
||||
// const validatedData = eventFormSchema.parse(data);
|
||||
// onSubmitEvent(validatedData);
|
||||
// } catch (error) {
|
||||
// console.error("On submit error : ", error);
|
||||
// }
|
||||
// }
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md space-y-4">
|
||||
// useEffect(() => {
|
||||
// try {
|
||||
// const validatedData = eventFormSchema.parse(form);
|
||||
// setEvent((old) => {
|
||||
// const rrule = mapFrequencyToRrule(
|
||||
// validatedData.frequency,
|
||||
// validatedData.frequencyEndDate,
|
||||
// );
|
||||
// const [sHours, sMinutes] = validatedData.startTime.split(":");
|
||||
// validatedData.startDate.setHours(
|
||||
// parseInt(sHours),
|
||||
// parseInt(sMinutes),
|
||||
// );
|
||||
// const [eHours, eMinutes] = validatedData.endTime.split(":");
|
||||
// validatedData.endDate.setHours(
|
||||
// parseInt(eHours),
|
||||
// parseInt(eMinutes),
|
||||
// );
|
||||
// return {
|
||||
// ...old,
|
||||
// start: validatedData.startDate.toISOString(),
|
||||
// end: validatedData.endDate.toISOString(),
|
||||
// title: `${validatedData.title}`,
|
||||
// fullDay: validatedData.fullDay,
|
||||
// rrule: rrule,
|
||||
// isVisible: validatedData.isVisible,
|
||||
// };
|
||||
// });
|
||||
// } catch (e) {
|
||||
// console.log(e);
|
||||
// }
|
||||
// }, [form]);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="w-full max-w-md space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Titre</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Ajouter un titre"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-[1fr,auto,1fr] items-end gap-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
name="startDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Début</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value &&
|
||||
"text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(
|
||||
field.value,
|
||||
"dd/MM/yyyy",
|
||||
)
|
||||
) : (
|
||||
<span>
|
||||
Choisis une date
|
||||
</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-auto p-0"
|
||||
align="start"
|
||||
>
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="startTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Titre</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Ajouter un titre" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-[1fr,auto,1fr] items-end gap-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="startDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Début</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
|
||||
>
|
||||
{field.value ? format(field.value, "yyyy-mm-dd hh:mm") : <span>Choisis une date</span>}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="startTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input type="time" {...field} className="w-[120px]" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<span className="invisible">Until</span>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Fin</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
|
||||
>
|
||||
{field.value ? format(field.value, "yyyy-mm-dd hh:mm") : <span>Choisis une date</span>}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input type="time" {...field} className="w-[120px]" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="fullDay"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
<FormLabel>Journée complète</FormLabel>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 items-end">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequency"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>Fréquence</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selectionner Fréquence" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{frequencies.map((frequency) => (
|
||||
<SelectItem key={frequency.value} value={frequency.value}>
|
||||
{frequency.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{frequency !== "unique" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequencyEndDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>Jusqu'au</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
|
||||
>
|
||||
{field.value ? format(field.value, "MM/dd/yyyy") : <span>Choisis une date</span>}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isVisible"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel className="align-sub">Evènement visible ?</FormLabel>
|
||||
<FormControl>
|
||||
<Checkbox className="m-3 align-top justify-center"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
<Input
|
||||
type="time"
|
||||
{...field}
|
||||
className="w-[120px]"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="outline" type="button">
|
||||
Abandonner
|
||||
</Button>
|
||||
<Button type="submit" className="bg-[#6B4EFF] hover:bg-[#5B3FEF]">
|
||||
Sauvegarder
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
<span className="invisible">Until</span>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Fin</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value &&
|
||||
"text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(
|
||||
field.value,
|
||||
"dd/MM/yyyy",
|
||||
)
|
||||
) : (
|
||||
<span>
|
||||
Choisis une date
|
||||
</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-auto p-0"
|
||||
align="start"
|
||||
>
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="time"
|
||||
{...field}
|
||||
className="w-[120px]"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="fullDay"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel>Journée complète</FormLabel>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 items-end">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequency"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>Fréquence</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selectionner Fréquence" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{frequencies.map((frequency) => (
|
||||
<SelectItem
|
||||
key={frequency.value}
|
||||
value={frequency.value}
|
||||
>
|
||||
{frequency.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{frequency !== "unique" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequencyEndDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>Jusqu'au</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value &&
|
||||
"text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(
|
||||
field.value,
|
||||
"dd/MM/yyyy",
|
||||
)
|
||||
) : (
|
||||
<span>
|
||||
Choisis une date
|
||||
</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-auto p-0"
|
||||
align="start"
|
||||
>
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isVisible"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel className="align-sub">
|
||||
Evènement visible ?
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
className="m-3 align-top justify-center"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user