cdricms/latosa-escrima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gallery

Browse Source 
Events still not working
This commit is contained in:
cdricms
2025-02-12 16:51:57 +01:00
parent 27c17fc33f
commit 9d6aa4c163
10 changed files with 746 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx
View File

@@ -16,6 +16,8 @@ export default function ShortcodesPage() {
success,
} = useApi<IShortcode[]>("/shortcodes", undefined, true);
console.log(shortcodes);
const handleUpdate = async (updatedShortcode: IShortcode) => {
const res = await request<IShortcode>(
`/shortcodes/${updatedShortcode.code}/update`,

106
frontend/app/(main)/gallery/page.tsx Normal file
View File

@@ -0,0 +1,106 @@
"use client";
import Image from "next/image";
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import useMedia from "@/hooks/use-media";
import { Loader2 } from "lucide-react";
export default function PhotoGallery() {
const {
data,
error: mediaError,
isLoading,
success,
setPage,
setLimit,
mutate,
} = useMedia();
return (
<div className="container mx-auto px-4 py-8">
<div className="flex justify-between items-center mb-8">
<h1 className="text-3xl font-bold">Gallerie Photo</h1>
</div>
{isLoading ? (
<div className="flex w-full h-full justify-center">
<Loader2 className="animate-spin" />
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{data?.items.map((photo) => (
<div
key={photo.id}
className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
onClick={() => {}}
>
<Image
src={photo.url || "/placeholder.svg"}
alt={photo.alt}
width={300}
height={300}
unoptimized
className="w-full h-full object-cover"
/>
</div>
))}
)
</div>
)}
<Pagination className="mt-8">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
href="#"
onClick={(e) => {
e.preventDefault();
setPage((prev) => Math.max(prev - 1, 1));
}}
className={
data?.page === 1
? "pointer-events-none opacity-50"
: ""
}
/>
</PaginationItem>
{[...Array(data?.totalPages)].map((_, i) => (
<PaginationItem key={i + 1}>
<PaginationLink
href="#"
onClick={(e) => {
e.preventDefault();
setPage(i + 1);
}}
isActive={data?.page === i + 1}
>
{i + 1}
</PaginationLink>
</PaginationItem>
))}
<PaginationItem>
<PaginationNext
href="#"
onClick={(e) => {
e.preventDefault();
setPage((prev) =>
Math.min(prev + 1, data?.totalPages ?? 1),
);
}}
className={
data?.page === data?.totalPages
? "pointer-events-none opacity-50"
: ""
}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
);
}

13
frontend/app/(main)/page.tsx
View File

@@ -2,6 +2,7 @@ export const dynamic = "force-dynamic"; // Prevents static rendering
import Features, { FeatureItem } from "@/components/features";
import Gallery from "@/components/gallery";
import Hero from "@/components/hero";
import HomepageGalleryItems from "@/components/homepage-gallery";
import Testimonial from "@/components/testimonial";
import { CarouselItem } from "@/components/ui/carousel";
import YouTubeEmbed from "@/components/youtube-embed";
@@ -149,11 +150,13 @@ export default async function Home() {
</FeatureItem>
</Features>
<Gallery
tagLine="Tag Line"
cta="Book a demo"
ctaHref="#"
title="Gallery"
/>
tagLine=""
cta="Voir toutes les photos"
ctaHref="/gallery"
title="Gallerie"
>
<HomepageGalleryItems />
</Gallery>
{videos && (
<Gallery
tagLine=""

615
frontend/components/event-dialog.tsx
View File

@@ -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,
}) => {
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 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,
},
})
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)
}
}
// 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">
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>
);
};

43
frontend/components/homepage-gallery.tsx Normal file
View File

@@ -0,0 +1,43 @@
"use client";
import useMedia from "@/hooks/use-media";
import { CarouselItem } from "./ui/carousel";
import Image from "next/image";
import { Loader2 } from "lucide-react";
export default function HomepageGalleryItems() {
const {
data,
error,
mutate,
setPage,
success,
setLimit,
isLoading,
isValidating,
} = useMedia(20);
if (isLoading) {
return (
<div className="flex justify-center w-full h-full">
<Loader2 className="animate-spin" />
</div>
);
}
return (
<>
{data?.items.map((i) => (
<CarouselItem className="pl-[20px] md:max-w-[452px]">
<div className="w-full aspect-square" key={i.id}>
<img
src={i.url}
alt={i.alt}
className="inset-0 border rounded-sm w-full h-full object-cover"
/>
</div>
</CarouselItem>
))}
</>
);
}

52
frontend/components/nav-bar.tsx
View File

@@ -128,6 +128,18 @@ const Navbar = () => {
>
A propos
</a>
<a
className={cn(
"text-muted-foreground",
navigationMenuTriggerStyle,
buttonVariants({
variant: "ghost",
}),
)}
href="/gallery"
>
Gallerie
</a>
<a
className={cn(
"text-muted-foreground",
@@ -144,13 +156,33 @@ const Navbar = () => {
</div>
<div className="flex gap-2 animate-in ease-in-out">
<ThemeSwitcher />
<Button variant="outline">
{cookie ? (
<Link href="/dashboard">Compte</Link>
) : (
<Link href="/login">Se connecter</Link>
)}
</Button>
{cookie ? (
<Link
className={cn(
"text-muted-foreground",
navigationMenuTriggerStyle,
buttonVariants({
variant: "outline",
}),
)}
href="/dashboard"
>
Compte
</Link>
) : (
<Link
className={cn(
"text-muted-foreground",
navigationMenuTriggerStyle,
buttonVariants({
variant: "outline",
}),
)}
href="/login"
>
Se connecter
</Link>
)}
{cookie ? (
<Button
onClick={() => {
@@ -219,6 +251,12 @@ const Navbar = () => {
>
À propos
</Link>
<Link
href="/gallery"
className="font-semibold"
>
Gallerie
</Link>
<Link
href="/blog"
className="font-semibold"

208
frontend/components/planning.tsx
View File

@@ -23,41 +23,10 @@ import { Button } from "@/components/ui/button";
import { KeyedMutator } from "swr";
import { getCookie } from "cookies-next";
import { useTheme } from "next-themes";
import { EventForm, EventFormValues } from "./event-dialog";
import { EventForm, eventFormSchema, EventFormValues } from "./event-dialog";
import ICalendarEvent from "@/interfaces/ICalendarEvent";
const mapFrequencyToRrule = (
frequency: "unique" | "quotidien" | "hebdomadaire" | "mensuel",
frequencyEndDate?: Date,
): string => {
let rrule = "";
switch (frequency) {
case "quotidien":
rrule = "FREQ=DAILY";
break;
case "hebdomadaire":
rrule = "FREQ=WEEKLY";
break;
case "mensuel":
rrule = "FREQ=MONTHLY";
break;
default:
return "";
}
if (frequencyEndDate) {
const until = frequencyEndDate.getTime();
const untilDate = new Date(until);
const epochDateString = untilDate
.toISOString()
.replace(/[-:]/g, "")
.split(".")[0]; // Format as YYYYMMDDTHHmmss
rrule += `;UNTIL=${epochDateString}`;
}
return rrule;
};
import { UseFormReturn } from "react-hook-form";
import mapFrequencyToRrule from "@/lib/mapFrequencyToRrule";
const Planning: React.FC<{
events: ICalendarEvent[];
@@ -81,12 +50,14 @@ const Planning: React.FC<{
null,
);
const handleEventUpdate = async (eventSelected: ICalendarEvent) => {
const event: ICalendarEvent = {
const handleEventUpdate = async (
eventSelected: ICalendarEvent | Omit<ICalendarEvent, "id">,
) => {
const event = {
...eventSelected,
start: `${new Date(eventSelected.start).toISOString()}`,
end: `${new Date(eventSelected.end).toISOString()}`,
};
} as ICalendarEvent;
try {
const res = await request<undefined>(`/events/${event.id}/update`, {
method: "PATCH",
@@ -157,42 +128,47 @@ const Planning: React.FC<{
onOpenChange={(open) => {
setNewEvent((e) => (open ? e : null));
}}
event={newEvent}
onSubmitEvent={async (eventFormValues) => {
onAdd={async (formValues) => {
const rrule = mapFrequencyToRrule(
eventFormValues.frequency,
eventFormValues.frequencyEndDate,
formValues.frequency,
formValues.frequencyEndDate,
);
try {
const event: Omit<ICalendarEvent, "id"> = {
...newEvent,
start: `${eventFormValues.startDate} ${eventFormValues.startTime}`,
end: `${eventFormValues.endDate} ${eventFormValues.endTime}`,
title: `${eventFormValues.title}`,
fullDay: eventFormValues.fullDay,
rrule: rrule,
isVisible: eventFormValues.isVisible,
};
const res = await request<undefined>(
`/events/new`,
{
method: "POST",
body: event,
requiresAuth: true,
csrfToken: false,
},
);
if (res.status === "Error") {
console.log("Error");
}
if (res.status === "Success") {
mutate?.();
console.log("Success");
}
} catch (e) {
console.log(e);
const [sHours, sMinutes] =
formValues.startTime.split(":");
formValues.startDate.setHours(
parseInt(sHours),
parseInt(sMinutes),
);
const [eHours, eMinutes] =
formValues.endTime.split(":");
formValues.endDate.setHours(
parseInt(eHours),
parseInt(eMinutes),
);
const event: Omit<ICalendarEvent, "id"> = {
...newEvent,
start: formValues.startDate.toISOString(),
end: formValues.endDate.toISOString(),
title: `${formValues.title}`,
fullday: formValues.fullDay,
rrule: rrule,
isVisible: formValues.isVisible,
};
const res = await request<undefined>(`/events/new`, {
method: "POST",
body: event,
requiresAuth: true,
csrfToken: false,
});
if (res.status === "Error") {
console.log("Error");
}
if (res.status === "Success") {
mutate?.();
console.log("Success");
}
}}
event={newEvent}
/>
)}
{eventSelected && (
@@ -202,17 +178,13 @@ const Planning: React.FC<{
setEventSelected((e) => (open ? e : null));
}}
event={eventSelected}
onSubmitEvent={(eventForm) => {
console.log("Event form: " + eventForm);
}}
onDelete={async () => {
calendar?.events?.remove(eventSelected.id);
onDelete={async (id) => {
calendar?.events?.remove(id);
try {
const res = await request<undefined>(
`/events/${eventSelected.id}/delete`,
`/events/${id}/delete`,
{
method: "DELETE",
body: eventSelected,
requiresAuth: false,
csrfToken: false,
},
@@ -228,8 +200,33 @@ const Planning: React.FC<{
}
setEventSelected(null);
}}
onUpdate={async () => {
await handleEventUpdate(eventSelected);
onUpdate={async (formValues) => {
const rrule = mapFrequencyToRrule(
formValues.frequency,
formValues.frequencyEndDate,
);
const [sHours, sMinutes] =
formValues.startTime.split(":");
formValues.startDate.setHours(
parseInt(sHours),
parseInt(sMinutes),
);
const [eHours, eMinutes] =
formValues.endTime.split(":");
formValues.endDate.setHours(
parseInt(eHours),
parseInt(eMinutes),
);
const event: ICalendarEvent = {
...eventSelected,
start: formValues.startDate.toISOString(),
end: formValues.endDate.toISOString(),
title: `${formValues.title}`,
fullday: formValues.fullDay,
rrule: rrule,
isVisible: formValues.isVisible,
};
await handleEventUpdate(event);
setEventSelected(null);
}}
/>
@@ -240,21 +237,27 @@ const Planning: React.FC<{
const EventDialog: React.FC<
{
onSubmitEvent: (eventFormValues: EventFormValues) => void;
onDelete?: () => void;
onUpdate?: () => void;
onAdd?: () => void;
onDelete?: (id: string) => void;
onUpdate?: (formValues: EventFormValues) => void;
onAdd?: (formValues: EventFormValues) => void;
event: ICalendarEvent | Omit<ICalendarEvent, "id">;
} & DialogProps
> = ({
open,
onOpenChange,
onSubmitEvent,
onDelete,
onUpdate,
onAdd,
event,
}) => {
> = ({ open, onOpenChange, onDelete, onUpdate, onAdd, event }) => {
const [form, setForm] = useState<UseFormReturn<EventFormValues>>();
const handleOnAdd = (data: EventFormValues) => {
onAdd?.(data);
};
const onSubmit = (data: EventFormValues) => {
try {
const validatedData = eventFormSchema.parse(data);
handleOnAdd(data);
} catch (e) {
console.error(e);
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md">
@@ -262,12 +265,24 @@ const EventDialog: React.FC<
<DialogTitle>{event.title}</DialogTitle>
<DialogDescription>{event.description}</DialogDescription>
</DialogHeader>
<EventForm event={event} onSubmitEvent={onSubmitEvent} />
<EventForm event={event} onSubmit={onSubmit} />
<DialogFooter className="flex flex-row justify-end">
{onUpdate && (
<Button
variant="outline"
onClick={() => onUpdate()}
onClick={() => {
form?.handleSubmit((data) => {
console.log(data);
try {
const validatedData =
eventFormSchema.parse(data);
console.log(validatedData);
onUpdate(validatedData);
} catch (e) {
console.error(e);
}
});
}}
type="submit"
>
Actualiser
@@ -276,14 +291,17 @@ const EventDialog: React.FC<
{onDelete && (
<Button
variant="destructive"
onClick={() => onDelete()}
onClick={() => onDelete(event.id)}
type="submit"
>
Supprimer
</Button>
)}
{onAdd && !onUpdate && !onDelete && (
<Button onClick={() => onAdd()} type="submit">
<Button
onClick={() => form?.handleSubmit((data) => {})}
type="submit"
>
Créer
</Button>
)}

3
frontend/hooks/use-media.tsx
View File

@@ -17,6 +17,9 @@ export default function useMedia(_limit: number = 20) {
const [limit, setLimit] = useState(_limit);
const res = useApi<IPaginatedResponse<Media>>(
`/media?page=${page}&limit=${limit}`,
{},
false,
false,
);
return {
...res,

51
frontend/lib/mapFrequencyToRrule.ts Normal file
View File

@@ -0,0 +1,51 @@
// const mapRruleToFrequency = (rrule: string) => {
//
// switch (frequency) {
// case "quotidien":
// rrule = "FREQ=DAILY";
// break;
// case "hebdomadaire":
// rrule = "FREQ=WEEKLY";
// break;
// case "mensuel":
// rrule = "FREQ=MONTHLY";
// break;
// default:
// return "";
// }
// }
const mapFrequencyToRrule = (
frequency: "unique" | "quotidien" | "hebdomadaire" | "mensuel",
frequencyEndDate?: Date,
): string => {
let rrule = "";
switch (frequency) {
case "quotidien":
rrule = "FREQ=DAILY";
break;
case "hebdomadaire":
rrule = "FREQ=WEEKLY";
break;
case "mensuel":
rrule = "FREQ=MONTHLY";
break;
default:
return "";
}
if (frequencyEndDate) {
const until = frequencyEndDate.getTime();
const untilDate = new Date(until);
const epochDateString = untilDate
.toISOString()
.replace(/[-:]/g, "")
.split(".")[0]; // Format as YYYYMMDDTHHmmss
rrule += `;UNTIL=${epochDateString}`;
}
return rrule;
};
export default mapFrequencyToRrule;

1
frontend/lib/request.ts
View File

@@ -12,6 +12,7 @@ export default async function request<T>(
cookies?: () => Promise<ReadonlyRequestCookies>;
} = {},
): Promise<ApiResponse<T>> {
console.log(API_URL, endpoint);
const { method = "GET", body, requiresAuth = true } = options;
const headers: Record<string, string> = {
"Content-Type": "application/json",