From f85f5d81fd83dfa5ee2a66aeac749bf9b102bc07 Mon Sep 17 00:00:00 2001 From: Maxime Letoffet Date: Sun, 31 Aug 2025 18:29:31 +0200 Subject: [PATCH 1/2] Fix : - Another day, another try to fix UTC --- .../Admin/AdminPerm/adminPermForm.tsx | 32 +++++++++---------- .../src/components/utils/datetime_utils.ts | 24 ++++++++++---- .../services/requests/permanence.service.ts | 8 ++--- 3 files changed, 38 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/Admin/AdminPerm/adminPermForm.tsx b/frontend/src/components/Admin/AdminPerm/adminPermForm.tsx index d9e4e93..3a63b7d 100644 --- a/frontend/src/components/Admin/AdminPerm/adminPermForm.tsx +++ b/frontend/src/components/Admin/AdminPerm/adminPermForm.tsx @@ -15,7 +15,7 @@ import { getUsers } from "../../../services/requests/user.service"; import { Permanence } from "../../../interfaces/permanence.interface"; import { User } from "../../../interfaces/user.interface"; -import { formatDateForInput } from "../../utils/datetime_utils"; +import { formatDateForDB, formatDateForInput } from "../../utils/datetime_utils"; interface PermanenceFormProps { editMode: boolean; @@ -58,8 +58,8 @@ const PermanenceForm = ({ setName(editPermanence.name); setDesc(editPermanence.description); setLocation(editPermanence.location); - setStartAt(formatDateForInput(editPermanence.start_at)); - setEndAt(formatDateForInput(editPermanence.end_at)); + setStartAt(formatDateForInput(editPermanence.start_at)); + setEndAt(formatDateForInput(editPermanence.end_at)); setCapacity(editPermanence.capacity); setDifficulty(editPermanence.difficulty); if (editPermanence.respo) { @@ -75,31 +75,31 @@ const PermanenceForm = ({ } let respoId = respo && !isNaN(Number(respo.userId)) ? Number(respo.userId) : null; - + try { const payload = { name, description: desc, location, - start_at: formatDateForInput(startAt), - end_at: formatDateForInput(endAt), + start_at: formatDateForDB(startAt), // ✅ en UTC + end_at: formatDateForDB(endAt), // ✅ en UTC capacity, difficulty, respoId, }; - - if (editMode && editPermanence) { - await updatePermanence(editPermanence.id, payload); - Swal.fire("Succès", "Permanence mise à jour", "success"); - onCancelEdit(); - } else { - await createPermanence(payload); - Swal.fire("Succès", "Permanence créée", "success"); - } + + if (editMode && editPermanence) { + await updatePermanence(editPermanence.id, payload); + Swal.fire("Succès", "Permanence mise à jour", "success"); + onCancelEdit(); + } else { + await createPermanence(payload); + Swal.fire("Succès", "Permanence créée", "success"); + } resetForm(); onRefresh(); - } catch(err : any) { + } catch (err: any) { Swal.fire("Erreur", err.response.data.message, "error"); } }; diff --git a/frontend/src/components/utils/datetime_utils.ts b/frontend/src/components/utils/datetime_utils.ts index c266602..e3caa5b 100644 --- a/frontend/src/components/utils/datetime_utils.ts +++ b/frontend/src/components/utils/datetime_utils.ts @@ -1,19 +1,31 @@ -// Pour l'input datetime-local +// Pour préremplir un +// On reçoit une date en UTC (string ISO venant de la DB) +// On la convertit en locale (Europe/Paris) et on renvoie une string sans timezone export const formatDateForInput = (date?: string | null) => { if (!date) return ""; const localDate = new Date(date); - if (isNaN(localDate.getTime())) return ""; // date invalide - const offsetDate = new Date(localDate.getTime() - localDate.getTimezoneOffset() * 60000); - return offsetDate.toISOString().slice(0, 16); + if (isNaN(localDate.getTime())) return ""; + // Convertir en "YYYY-MM-DDTHH:mm" + return localDate.toISOString().slice(0, 16); +}; + +// Pour envoyer vers la DB +// On reçoit une string "YYYY-MM-DDTHH:mm" venant de l'input datetime-local +// On la convertit en UTC ISO (toujours ce que ta DB attend) +export const formatDateForDB = (inputValue?: string | null) => { + if (!inputValue) return null; + const localDate = new Date(inputValue); // interprété en local + if (isNaN(localDate.getTime())) return null; + return localDate.toISOString(); // UTC }; -// Pour affichage lisible en français +// Pour affichage lisible en français (Europe/Paris) export const formatDateForDisplay = (date?: string | null) => { if (!date) return ""; const localDate = new Date(date); if (isNaN(localDate.getTime())) return ""; return localDate.toLocaleString("fr-FR", { - timeZone: "Europe/Paris", // évite les surprises + timeZone: "Europe/Paris", weekday: "long", year: "numeric", month: "long", diff --git a/frontend/src/services/requests/permanence.service.ts b/frontend/src/services/requests/permanence.service.ts index 2a88bf7..a5c824f 100644 --- a/frontend/src/services/requests/permanence.service.ts +++ b/frontend/src/services/requests/permanence.service.ts @@ -29,8 +29,8 @@ export const createPermanence = async (permanenceData: { name: string; description: string; location: string; - start_at: string; - end_at: string; + start_at: string | null; + end_at: string | null; capacity: number; difficulty : number; respoId: number | null; @@ -88,8 +88,8 @@ export const updatePermanence = async ( permId: number, permanenceData: { name: string; description: string; location: string; - start_at: string; - end_at: string; + start_at: string | null; + end_at: string | null; capacity: number; difficulty : number; respoId: number | null; From 1ed74ad19229c8170f2bab1dd431cbac9b5484fa Mon Sep 17 00:00:00 2001 From: Maxime Letoffet Date: Sun, 31 Aug 2025 18:51:36 +0200 Subject: [PATCH 2/2] Fix : Correct display for perm input in edit mode --- frontend/src/components/utils/datetime_utils.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/utils/datetime_utils.ts b/frontend/src/components/utils/datetime_utils.ts index e3caa5b..db37c17 100644 --- a/frontend/src/components/utils/datetime_utils.ts +++ b/frontend/src/components/utils/datetime_utils.ts @@ -5,10 +5,18 @@ export const formatDateForInput = (date?: string | null) => { if (!date) return ""; const localDate = new Date(date); if (isNaN(localDate.getTime())) return ""; - // Convertir en "YYYY-MM-DDTHH:mm" - return localDate.toISOString().slice(0, 16); + + // Construire YYYY-MM-DDTHH:mm en LOCAL + const year = localDate.getFullYear(); + const month = String(localDate.getMonth() + 1).padStart(2, "0"); + const day = String(localDate.getDate()).padStart(2, "0"); + const hours = String(localDate.getHours()).padStart(2, "0"); + const minutes = String(localDate.getMinutes()).padStart(2, "0"); + + return `${year}-${month}-${day}T${hours}:${minutes}`; }; + // Pour envoyer vers la DB // On reçoit une string "YYYY-MM-DDTHH:mm" venant de l'input datetime-local // On la convertit en UTC ISO (toujours ce que ta DB attend)