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, success,
} = useApi<IShortcode[]>("/shortcodes", undefined, true); } = useApi<IShortcode[]>("/shortcodes", undefined, true);
console.log(shortcodes);
const handleUpdate = async (updatedShortcode: IShortcode) => { const handleUpdate = async (updatedShortcode: IShortcode) => {
const res = await request<IShortcode>( const res = await request<IShortcode>(
`/shortcodes/${updatedShortcode.code}/update`, `/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 Features, { FeatureItem } from "@/components/features";
import Gallery from "@/components/gallery"; import Gallery from "@/components/gallery";
import Hero from "@/components/hero"; import Hero from "@/components/hero";
import HomepageGalleryItems from "@/components/homepage-gallery";
import Testimonial from "@/components/testimonial"; import Testimonial from "@/components/testimonial";
import { CarouselItem } from "@/components/ui/carousel"; import { CarouselItem } from "@/components/ui/carousel";
import YouTubeEmbed from "@/components/youtube-embed"; import YouTubeEmbed from "@/components/youtube-embed";
@@ -149,11 +150,13 @@ export default async function Home() {
</FeatureItem> </FeatureItem>
</Features> </Features>
<Gallery <Gallery
tagLine="Tag Line" tagLine=""
cta="Book a demo" cta="Voir toutes les photos"
ctaHref="#" ctaHref="/gallery"
title="Gallery" title="Gallerie"
/> >
<HomepageGalleryItems />
</Gallery>
{videos && ( {videos && (
<Gallery <Gallery
tagLine="" tagLine=""

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

@@ -1,23 +1,44 @@
"use client" "use client";
import * as React from "react" import * as React from "react";
import { CalendarIcon } from "lucide-react" import { CalendarIcon } from "lucide-react";
import { format } from "date-fns" import { format } from "date-fns";
import { zodResolver } from "@hookform/resolvers/zod" import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod" import * as z from "zod";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar" 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 { import {
CalendarEventExternal, Form,
} from "@schedule-x/calendar"; FormControl,
import ICalendarEvent from "@/interfaces/ICalendarEvent" 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({ export const eventFormSchema = z.object({
title: z.string().min(1, "Titre requis"), title: z.string().min(1, "Titre requis"),
@@ -33,254 +54,364 @@ export const eventFormSchema = z.object({
frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]), frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]),
frequencyEndDate: z.date().optional(), frequencyEndDate: z.date().optional(),
isVisible: z.boolean().default(true), isVisible: z.boolean().default(true),
}) });
export type EventFormValues = z.infer<typeof eventFormSchema> export type EventFormValues = z.infer<typeof eventFormSchema>;
const frequencies = [ const frequencies = [
{ label: "Unique", value: "unique" }, { label: "Unique", value: "unique" },
{ label: "Quotidien", value: "quotidien" }, { label: "Quotidien", value: "quotidien" },
{ label: "Hebdomadaire", value: "hebdomadaire" }, { label: "Hebdomadaire", value: "hebdomadaire" },
{ label: "Mensuel", value: "mensuel" }, { label: "Mensuel", value: "mensuel" },
] ];
const isCalendarEventExternal = (event: CalendarEventExternal | Omit<CalendarEventExternal, "id">): event is CalendarEventExternal => { const isCalendarEventExternal = (
return (event as CalendarEventExternal).id !== undefined; event: CalendarEventExternal | Omit<CalendarEventExternal, "id">,
): event is CalendarEventExternal => {
return (event as CalendarEventExternal).id !== undefined;
}; };
export const EventForm: React.FC< export const EventForm: React.FC<{
{ event: ICalendarEvent | Omit<ICalendarEvent, "id">;
event: ICalendarEvent | Omit<ICalendarEvent, "id">; onSubmit: (data: EventFormValues) => any;
onSubmitEvent: (eventFormValues: EventFormValues) => void; }> = ({ event, onSubmit }) => {
} const _start = new Date(event.start ?? Date.now());
> = ({ const _end = new Date(event.end ?? Date.now());
event, const form = useForm<EventFormValues>({
onSubmitEvent, resolver: zodResolver(eventFormSchema),
}) => { defaultValues: {
title: event.title ? event.title : "",
const form = useForm<EventFormValues>({ startDate: _start, // event.start),
resolver: zodResolver(eventFormSchema), startTime: format(_start, "HH:mm"),
defaultValues: { endDate: _end, // event.end),
title: event.title ? event.title : "", endTime: format(_end, "HH:mm"),
startDate: new Date(), // event.start), fullDay: event.fullday,
startTime: `${new Date(event.start).getHours()}:${new Date(event.start).getMinutes()}`, frequency: "unique",
endDate: new Date(), // event.end), isVisible: event.isVisible,
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) { // async function onSubmit(data: EventFormValues) {
try { // try {
const validatedData = eventFormSchema.parse(data) // const validatedData = eventFormSchema.parse(data);
onSubmitEvent(validatedData) // onSubmitEvent(validatedData);
} catch (error) { // } catch (error) {
console.error("On submit error : ", error) // console.error("On submit error : ", error);
} // }
} // }
return ( // useEffect(() => {
<Form {...form}> // try {
<form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md space-y-4"> // 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 <FormField
control={form.control} 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 }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Titre</FormLabel>
<FormControl> <FormControl>
<Input placeholder="Ajouter un titre" {...field} /> <Input
</FormControl> type="time"
<FormMessage /> {...field}
</FormItem> className="w-[120px]"
)}
/>
<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}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </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 propos
</a> </a>
<a
className={cn(
"text-muted-foreground",
navigationMenuTriggerStyle,
buttonVariants({
variant: "ghost",
}),
)}
href="/gallery"
>
Gallerie
</a>
<a <a
className={cn( className={cn(
"text-muted-foreground", "text-muted-foreground",
@@ -144,13 +156,33 @@ const Navbar = () => {
</div> </div>
<div className="flex gap-2 animate-in ease-in-out"> <div className="flex gap-2 animate-in ease-in-out">
<ThemeSwitcher /> <ThemeSwitcher />
<Button variant="outline"> {cookie ? (
{cookie ? ( <Link
<Link href="/dashboard">Compte</Link> className={cn(
) : ( "text-muted-foreground",
<Link href="/login">Se connecter</Link> navigationMenuTriggerStyle,
)} buttonVariants({
</Button> variant: "outline",
}),
)}
href="/dashboard"
>
Compte
</Link>
) : (
<Link
className={cn(
"text-muted-foreground",
navigationMenuTriggerStyle,
buttonVariants({
variant: "outline",
}),
)}
href="/login"
>
Se connecter
</Link>
)}
{cookie ? ( {cookie ? (
<Button <Button
onClick={() => { onClick={() => {
@@ -219,6 +251,12 @@ const Navbar = () => {
> >
À propos À propos
</Link> </Link>
<Link
href="/gallery"
className="font-semibold"
>
Gallerie
</Link>
<Link <Link
href="/blog" href="/blog"
className="font-semibold" 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 { KeyedMutator } from "swr";
import { getCookie } from "cookies-next"; import { getCookie } from "cookies-next";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { EventForm, EventFormValues } from "./event-dialog"; import { EventForm, eventFormSchema, EventFormValues } from "./event-dialog";
import ICalendarEvent from "@/interfaces/ICalendarEvent"; import ICalendarEvent from "@/interfaces/ICalendarEvent";
import { UseFormReturn } from "react-hook-form";
const mapFrequencyToRrule = ( import mapFrequencyToRrule from "@/lib/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;
};
const Planning: React.FC<{ const Planning: React.FC<{
events: ICalendarEvent[]; events: ICalendarEvent[];
@@ -81,12 +50,14 @@ const Planning: React.FC<{
null, null,
); );
const handleEventUpdate = async (eventSelected: ICalendarEvent) => { const handleEventUpdate = async (
const event: ICalendarEvent = { eventSelected: ICalendarEvent | Omit<ICalendarEvent, "id">,
) => {
const event = {
...eventSelected, ...eventSelected,
start: `${new Date(eventSelected.start).toISOString()}`, start: `${new Date(eventSelected.start).toISOString()}`,
end: `${new Date(eventSelected.end).toISOString()}`, end: `${new Date(eventSelected.end).toISOString()}`,
}; } as ICalendarEvent;
try { try {
const res = await request<undefined>(`/events/${event.id}/update`, { const res = await request<undefined>(`/events/${event.id}/update`, {
method: "PATCH", method: "PATCH",
@@ -157,42 +128,47 @@ const Planning: React.FC<{
onOpenChange={(open) => { onOpenChange={(open) => {
setNewEvent((e) => (open ? e : null)); setNewEvent((e) => (open ? e : null));
}} }}
event={newEvent} onAdd={async (formValues) => {
onSubmitEvent={async (eventFormValues) => {
const rrule = mapFrequencyToRrule( const rrule = mapFrequencyToRrule(
eventFormValues.frequency, formValues.frequency,
eventFormValues.frequencyEndDate, formValues.frequencyEndDate,
); );
try { const [sHours, sMinutes] =
const event: Omit<ICalendarEvent, "id"> = { formValues.startTime.split(":");
...newEvent, formValues.startDate.setHours(
start: `${eventFormValues.startDate} ${eventFormValues.startTime}`, parseInt(sHours),
end: `${eventFormValues.endDate} ${eventFormValues.endTime}`, parseInt(sMinutes),
title: `${eventFormValues.title}`, );
fullDay: eventFormValues.fullDay, const [eHours, eMinutes] =
rrule: rrule, formValues.endTime.split(":");
isVisible: eventFormValues.isVisible, formValues.endDate.setHours(
}; parseInt(eHours),
const res = await request<undefined>( parseInt(eMinutes),
`/events/new`, );
{ const event: Omit<ICalendarEvent, "id"> = {
method: "POST", ...newEvent,
body: event, start: formValues.startDate.toISOString(),
requiresAuth: true, end: formValues.endDate.toISOString(),
csrfToken: false, title: `${formValues.title}`,
}, fullday: formValues.fullDay,
); rrule: rrule,
if (res.status === "Error") { isVisible: formValues.isVisible,
console.log("Error"); };
} const res = await request<undefined>(`/events/new`, {
if (res.status === "Success") { method: "POST",
mutate?.(); body: event,
console.log("Success"); requiresAuth: true,
} csrfToken: false,
} catch (e) { });
console.log(e); if (res.status === "Error") {
console.log("Error");
}
if (res.status === "Success") {
mutate?.();
console.log("Success");
} }
}} }}
event={newEvent}
/> />
)} )}
{eventSelected && ( {eventSelected && (
@@ -202,17 +178,13 @@ const Planning: React.FC<{
setEventSelected((e) => (open ? e : null)); setEventSelected((e) => (open ? e : null));
}} }}
event={eventSelected} event={eventSelected}
onSubmitEvent={(eventForm) => { onDelete={async (id) => {
console.log("Event form: " + eventForm); calendar?.events?.remove(id);
}}
onDelete={async () => {
calendar?.events?.remove(eventSelected.id);
try { try {
const res = await request<undefined>( const res = await request<undefined>(
`/events/${eventSelected.id}/delete`, `/events/${id}/delete`,
{ {
method: "DELETE", method: "DELETE",
body: eventSelected,
requiresAuth: false, requiresAuth: false,
csrfToken: false, csrfToken: false,
}, },
@@ -228,8 +200,33 @@ const Planning: React.FC<{
} }
setEventSelected(null); setEventSelected(null);
}} }}
onUpdate={async () => { onUpdate={async (formValues) => {
await handleEventUpdate(eventSelected); 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); setEventSelected(null);
}} }}
/> />
@@ -240,21 +237,27 @@ const Planning: React.FC<{
const EventDialog: React.FC< const EventDialog: React.FC<
{ {
onSubmitEvent: (eventFormValues: EventFormValues) => void; onDelete?: (id: string) => void;
onDelete?: () => void; onUpdate?: (formValues: EventFormValues) => void;
onUpdate?: () => void; onAdd?: (formValues: EventFormValues) => void;
onAdd?: () => void;
event: ICalendarEvent | Omit<ICalendarEvent, "id">; event: ICalendarEvent | Omit<ICalendarEvent, "id">;
} & DialogProps } & DialogProps
> = ({ > = ({ open, onOpenChange, onDelete, onUpdate, onAdd, event }) => {
open, const [form, setForm] = useState<UseFormReturn<EventFormValues>>();
onOpenChange,
onSubmitEvent, const handleOnAdd = (data: EventFormValues) => {
onDelete, onAdd?.(data);
onUpdate, };
onAdd,
event, const onSubmit = (data: EventFormValues) => {
}) => { try {
const validatedData = eventFormSchema.parse(data);
handleOnAdd(data);
} catch (e) {
console.error(e);
}
};
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md"> <DialogContent className="sm:max-w-md">
@@ -262,12 +265,24 @@ const EventDialog: React.FC<
<DialogTitle>{event.title}</DialogTitle> <DialogTitle>{event.title}</DialogTitle>
<DialogDescription>{event.description}</DialogDescription> <DialogDescription>{event.description}</DialogDescription>
</DialogHeader> </DialogHeader>
<EventForm event={event} onSubmitEvent={onSubmitEvent} /> <EventForm event={event} onSubmit={onSubmit} />
<DialogFooter className="flex flex-row justify-end"> <DialogFooter className="flex flex-row justify-end">
{onUpdate && ( {onUpdate && (
<Button <Button
variant="outline" 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" type="submit"
> >
Actualiser Actualiser
@@ -276,14 +291,17 @@ const EventDialog: React.FC<
{onDelete && ( {onDelete && (
<Button <Button
variant="destructive" variant="destructive"
onClick={() => onDelete()} onClick={() => onDelete(event.id)}
type="submit" type="submit"
> >
Supprimer Supprimer
</Button> </Button>
)} )}
{onAdd && !onUpdate && !onDelete && ( {onAdd && !onUpdate && !onDelete && (
<Button onClick={() => onAdd()} type="submit"> <Button
onClick={() => form?.handleSubmit((data) => {})}
type="submit"
>
Créer Créer
</Button> </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 [limit, setLimit] = useState(_limit);
const res = useApi<IPaginatedResponse<Media>>( const res = useApi<IPaginatedResponse<Media>>(
`/media?page=${page}&limit=${limit}`, `/media?page=${page}&limit=${limit}`,
{},
false,
false,
); );
return { return {
...res, ...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>; cookies?: () => Promise<ReadonlyRequestCookies>;
} = {}, } = {},
): Promise<ApiResponse<T>> { ): Promise<ApiResponse<T>> {
console.log(API_URL, endpoint);
const { method = "GET", body, requiresAuth = true } = options; const { method = "GET", body, requiresAuth = true } = options;
const headers: Record<string, string> = { const headers: Record<string, string> = {
"Content-Type": "application/json", "Content-Type": "application/json",