From 0ebd1043d5946871ddd6d41785f038663bd3d976 Mon Sep 17 00:00:00 2001 From: Baligh ZOGHLAMI Date: Thu, 4 Jul 2024 10:49:40 +0100 Subject: [PATCH 1/7] fix date & side bar checkox error --- src/app/(dashboard)/reservation/page.jsx | 14 ++++++++++--- src/app/lib/DateHelper.js | 26 +++++++++++++++++++++++- src/app/ui/SideBarLink.jsx | 9 ++++---- 3 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/app/(dashboard)/reservation/page.jsx b/src/app/(dashboard)/reservation/page.jsx index 0b82d13..e75a1b4 100644 --- a/src/app/(dashboard)/reservation/page.jsx +++ b/src/app/(dashboard)/reservation/page.jsx @@ -9,6 +9,7 @@ import PresenceButton from './PresenceButton' import Cookies from 'js-cookie'; import { decrypt } from '@/app/lib/session'; import ReservationConfirmation from '@/app/ui/ReservationConfirmation' +import { dateDiffInDays, extractDate } from '@/app/lib/DateHelper' export const ReservationContext = React.createContext() @@ -174,10 +175,17 @@ const Reservation = () => { const currentMonth = new Date().getMonth() + 1 // filter dates from now to 2 weeks later + + // console.log("target date", datesData); + // const filteredDatesData = datesData?.filter((element) => { + // const date = new Date(element.date) + // const month = date.getMonth() + 1 + // return (month === currentMonth) && (date.getDate() >= new Date().getDate() && date.getDate() <= new Date().getDate() + 14) + // }) const filteredDatesData = datesData?.filter((element) => { - const date = new Date(element.date) - const month = date.getMonth() + 1 - return (month === currentMonth) && (date.getDate() >= new Date().getDate() && date.getDate() <= new Date().getDate() + 14) + const diff = dateDiffInDays(extractDate(new Date()), element.date) + return diff >= 0 && diff <= 14 + }) const selectedZoneData = floors.find((element) => element.id == selectedZone.floorId)?.zones.find((zone) => zone.id === selectedZone.zoneId) return ( diff --git a/src/app/lib/DateHelper.js b/src/app/lib/DateHelper.js index a056401..39a4aa3 100644 --- a/src/app/lib/DateHelper.js +++ b/src/app/lib/DateHelper.js @@ -117,4 +117,28 @@ export const getWeeksBetween = (fromWeek, toWeek) => { } return weeks; -}; \ No newline at end of file +}; + +/** + * Calculates the difference in days between two dates. + * + * @param {string} date1 - The first date in 'YYYY-MM-DD' format. + * @param {string} date2 - The second date in 'YYYY-MM-DD' format. + * @returns {number} The difference in days between the two dates. + */ +export function dateDiffInDays(date1, date2) { + const dateObj1 = new Date(date1); + const dateObj2 = new Date(date2); + + dateObj1.setHours(0, 0, 0, 0); + dateObj2.setHours(0, 0, 0, 0); + + const timestamp1 = dateObj1.getTime(); + const timestamp2 = dateObj2.getTime(); + + const differenceInMillis = timestamp2 - timestamp1 + + const differenceInDays = Math.ceil(differenceInMillis / (1000 * 60 * 60 * 24)); + + return differenceInDays; +} \ No newline at end of file diff --git a/src/app/ui/SideBarLink.jsx b/src/app/ui/SideBarLink.jsx index 22e3549..b64503e 100644 --- a/src/app/ui/SideBarLink.jsx +++ b/src/app/ui/SideBarLink.jsx @@ -1,7 +1,7 @@ 'use client' import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import React from 'react'; +import React, { useLayoutEffect, useState } from 'react'; const SideBarLink = ({ links, label }) => { const pathname = usePathname(); @@ -13,10 +13,11 @@ const SideBarLink = ({ links, label }) => { target.classList.replace("active", "notActive"); sideBar.classList.replace("active", "notActive"); } - console.log(target, sideBar); }; - - const isActive = links?.find((element) => element.link === pathname); + const [isActive, setActive] = useState(false) + useLayoutEffect(() => { + setActive(links?.find((element) => element.link === pathname) !== undefined) + }, [pathname]) return (
Date: Thu, 4 Jul 2024 12:19:09 +0100 Subject: [PATCH 2/7] version before merge with dev fixing filters place interface --- .../AffectationsFilter.jsx | 4 +- .../(dashboard)/assign-zone-project/page.jsx | 5 +- src/app/(dashboard)/place/PlacesFilter.jsx | 112 ++++++++++++++---- src/app/(dashboard)/place/page.jsx | 1 - src/app/(dashboard)/table/TablesFilter.jsx | 4 +- src/app/(dashboard)/zone/ZonesFilter.jsx | 2 +- 6 files changed, 96 insertions(+), 32 deletions(-) diff --git a/src/app/(dashboard)/assign-zone-project/AffectationsFilter.jsx b/src/app/(dashboard)/assign-zone-project/AffectationsFilter.jsx index 9d9c222..0fe9025 100644 --- a/src/app/(dashboard)/assign-zone-project/AffectationsFilter.jsx +++ b/src/app/(dashboard)/assign-zone-project/AffectationsFilter.jsx @@ -13,7 +13,7 @@ const AffectationsFilter = memo(function Page({ setFilter, filter, zones, projec // "nom": "weleaf", // "id": 1 // } - + console.log("filterr", filter) const handleResetFilters = (event) => { const value = event.target.value setFilter({ semaines: [], jours: [], projects: [], zones: [] }) @@ -168,7 +168,7 @@ const AffectationsFilter = memo(function Page({ setFilter, filter, zones, projec isSearchable={true} value={filter.zones || ""} isMulti - name="jours" + name="zones" onChange={handleZoneChange} options={zones.map((element) => ({ label: 'Zone:'+ element.nomZone +' - '+ 'Étage:' +element.numeroEtage , value: element.id }))} styles={ diff --git a/src/app/(dashboard)/assign-zone-project/page.jsx b/src/app/(dashboard)/assign-zone-project/page.jsx index e7a343c..c9484c0 100644 --- a/src/app/(dashboard)/assign-zone-project/page.jsx +++ b/src/app/(dashboard)/assign-zone-project/page.jsx @@ -39,7 +39,6 @@ const AffectingZoneProject = () => { await fetchRequest(`/zoaning/distinct-projects-zones/` ,{ method: 'GET' } ) if (isSuccess) { - console.log("getDistinctsProjectsAndZones", data) setProjects(data.projects) setZones(data.zones) } else { @@ -61,7 +60,6 @@ const AffectingZoneProject = () => { }, []) - useEffect(() => { // this function is to detect if there is a project that is not fully affected and return the corresponding data to use @@ -251,7 +249,6 @@ const AffectingZoneProject = () => { } - console.log("listProjectsAffected", listProjectsAffected) return ( <> @@ -277,8 +274,8 @@ const AffectingZoneProject = () => { Plateau Projet Places occupées + Nb des personnes Places disponible - Places occupées Actions {(listProjectsAffected.map((element, index) => diff --git a/src/app/(dashboard)/place/PlacesFilter.jsx b/src/app/(dashboard)/place/PlacesFilter.jsx index 2c23693..01a9038 100644 --- a/src/app/(dashboard)/place/PlacesFilter.jsx +++ b/src/app/(dashboard)/place/PlacesFilter.jsx @@ -21,16 +21,19 @@ const PlacesFilter = memo(function Page({ setFilter, filter, etages, zones, tabl const handleResetFilters = () => { setFilter({ place: "", etage: "", zone: "", tables: [] }) } - + console.log("filter", filter) + + console.log("zones", zones) + console.log("etages", etages) return (

Recherche

- +
-
+
setSelectedWeek(e.target.value)} className='rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-500 outline-none'> - - - - - - - -
- -
+
+ + table.zone.id === filter.zone).map((table) => ({ label: table.numero, value: table.id }))} + styles={ + { + menu: (provided) => ({ + ...provided, + maxHeight: '170px', + overflowY: 'auto' + }), + menuList: (provided) => ({ + ...provided, + maxHeight: '170px', + overflowY: 'auto' + }), + control: (provided, state) => ({ + ...provided, + borderColor: state.isFocused ? '#93a84c' : 'rgb(212 212 212)', + borderWidth: "1px", + boxShadow: 'none', + borderRadius: "0.375rem", + minHeight: "2.5rem", + }), + option: (provided, state) => ({ + ...provided, + backgroundColor: state.isSelected ? '#D3E193' : state.isFocused ? '#d9e1b5' : 'white', + color: state.isSelected ? 'black' : 'inherit', + '&:hover': { + backgroundColor: '#d9e1b5', // Tailwind's blue-200 + }, + }), + } + } + />
diff --git a/src/app/(dashboard)/place/page.jsx b/src/app/(dashboard)/place/page.jsx index 120a0ac..08c1014 100644 --- a/src/app/(dashboard)/place/page.jsx +++ b/src/app/(dashboard)/place/page.jsx @@ -19,7 +19,6 @@ const Place = () => { const [filter, setFilter] = useState({ place: "", etage: "", zone: "", tables: [] }); - console.log(filter) useEffect(() => { const getPlaces = async () => { var tablesIdString = filter.tables.map((element) => element.value).toString() diff --git a/src/app/(dashboard)/table/TablesFilter.jsx b/src/app/(dashboard)/table/TablesFilter.jsx index 53648ce..df099d9 100644 --- a/src/app/(dashboard)/table/TablesFilter.jsx +++ b/src/app/(dashboard)/table/TablesFilter.jsx @@ -25,7 +25,7 @@ const TablesFilter = memo(function Page({ setFilter, filter, etages, zones }) {
-
+
Nom de la zone
-
+
+ + + + {(!image) && <> + + } + + + + {(image) && <> +
+
+
+ +
+
+

{image.name}

+

{Math.round((image.size / (1024 * 1024)) * 100) / 100}Mo

+
+
+

Voir l'image

+
+ {(isDisplayingImage) &&
+
+
setIsDisplayingImage(false)} className='ml-auto relative bottom-3'> + +
+
+ User uploaded +
+
+
} +
+
+ +
+
+
+
+ }
diff --git a/src/app/(dashboard)/etage/EtageTableRow.jsx b/src/app/(dashboard)/etage/EtageTableRow.jsx index ff162b5..501be4b 100644 --- a/src/app/(dashboard)/etage/EtageTableRow.jsx +++ b/src/app/(dashboard)/etage/EtageTableRow.jsx @@ -72,8 +72,9 @@ const EtageTableRow = ({ id, numero, setEtages }) => { <> - setNumeroEtage(event.target.value)} defaultValue={numero} type='text' className='w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' /> + setNumeroEtage(event.target.value)} defaultValue={numero} type='text' className='w-full min-w-80 border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' /> +