From 266c1d09c8dcebe1637e40b1d7bd49d1d9bb5b90 Mon Sep 17 00:00:00 2001
From: Raed BOUAFIF <raed.bouafif@teamwillgroup.com>
Date: Thu, 4 Jul 2024 12:19:09 +0100
Subject: [PATCH]  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 (
     <>
         <AffectationsFilter setFilter={setFilter} filter={filter} zones={zones} projects={projects} />
@@ -277,8 +274,8 @@ const AffectingZoneProject = () => {
                             <th className="py-2 text-left text-neutral-700 border-b border-white">Plateau</th>
                             <th className="py-2 text-left text-neutral-700 border-b border-white">Projet</th>
                             <th className="py-2 text-left text-neutral-700 border-b border-white">Places occupées</th>
+                            <th className="py-2 text-left text-neutral-700 border-b border-white">Nb des personnes</th>
                             <th className="py-2 text-left text-neutral-700 border-b border-white">Places disponible</th>
-                            <th className="py-2 text-left text-neutral-700 border-b border-white">Places occupées</th>
                             <th className="py-2 text-center text-neutral-700 border-b border-white">Actions</th>
                         </tr>
                         {(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 (
         <div className='w-full bg-white flex flex-col justify-center pt-2 p-5 rounded-xl border border-neutral-300'>
             <h2 className='text-lg text-neutral-700 font-medium'>Recherche</h2>
             <div className='flex my-2 flex-wrap w-full items-center gap-3'>
                 <div className='flex flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[300px] min-w-[220px]'>
-                    <label htmlFor="role" className='text-neutral-600 text-sm'>Nom de la table</label>
+                    <label htmlFor="role" className='text-neutral-600 text-sm'>Nom de la place</label>
                     <input value={filter.place || ""} onInput={handleChangePlaceNumero} type="text" name="zone" id="zone" className="rounded-md px-3 w-full duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
                 </div>
-                <div className='flex flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[400px] min-w-[220px]'>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
                     <label className='text-neutral-600 text-sm'>Étage</label>
                     <Select
                         isDisabled={etages.length === 0}
@@ -72,25 +75,90 @@ const PlacesFilter = memo(function Page({ setFilter, filter, etages, zones, tabl
                         }
                     />
                 </div>
-                <div className='flex justify-around gap-x-4'>
-                    <select onChange={(e) => 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'>
-                        <option value="" selected disabled>Sélectionner une semaine</option>
-                        <option value="1">Semaine 1</option>
-                        <option value="2">Semaine 2</option>
-                        <option value="3">Semaine 3</option>
-                        <option value="4">Semaine 4</option>
-                        <option value="5">Semaine 5</option>
-                    </select>
-                    <div className="flex flex-col w-full">
-                        <select onChange={(e) => setSelectedDay(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-300 outline-none'>
-                            <option value="" selected disabled>Sélectionner un jour</option>
-                            <option value="1">Jour 1</option>
-                            <option value="2">Jour 2</option>
-                            <option value="3">Jour 3</option>
-                            <option value="4">Jour 4</option>
-                            <option value="5">Jour 5</option>
-                        </select>
-                    </div>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
+                    <label className='text-neutral-600 text-sm'>Zones</label>
+                    <Select
+                        isDisabled={zones.length === 0 || !filter.etage}
+                        placeholder=""
+                        isSearchable={true}
+                        value={{ label: zones.find(zone => zone.id === filter.zone)?.nom, value: zones.find(zone => zone.id === filter.zone)?.id} || ""}
+                        name="zones"
+                        onChange={handleZonesChange}
+                        options={etages.find( (etage) => etage.id === filter.etage)?.zones.map((zone) => ({ label: zone.nom, value: zone.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
+                                    },
+                                }),
+                            }
+                        }
+                    />
+                </div>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
+                    <label className='text-neutral-600 text-sm'>Tables</label>
+                    <Select
+                        isDisabled={tables.length === 0 || !filter.zone}
+                        placeholder=""
+                        isSearchable={true}
+                        value={filter?.tables || ""}
+                        isMulti
+                        name="tables"
+                        onChange={handleTableChange}
+                        options={tables.filter(table => 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
+                                    },
+                                }),
+                            }
+                        }
+                    />
                 </div>
             </div>
             <div className='flex w-full items-center mt-4 justify-end'>
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 }) {
                     <label htmlFor="role" className='text-neutral-600 text-sm'>Nom de la table</label>
                     <input value={filter.table || ""} onInput={handleChangeTableNumero} type="text" name="zone" id="zone" className="rounded-md px-3 w-full duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
                 </div>
-                <div className='flex flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[400px] min-w-[220px]'>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
                     <label className='text-neutral-600 text-sm'>Étage</label>
                     <Select
                         isDisabled={etages.length === 0}
@@ -67,7 +67,7 @@ const TablesFilter = memo(function Page({ setFilter, filter, etages, zones }) {
                         }
                     />
                 </div>
-                <div className='flex flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[400px] min-w-[220px]'>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
                     <label className='text-neutral-600 text-sm'>Zones</label>
                     <Select
                         isDisabled={zones.length === 0 || !filter.etage}
diff --git a/src/app/(dashboard)/zone/ZonesFilter.jsx b/src/app/(dashboard)/zone/ZonesFilter.jsx
index 8fdb739..0da9e91 100644
--- a/src/app/(dashboard)/zone/ZonesFilter.jsx
+++ b/src/app/(dashboard)/zone/ZonesFilter.jsx
@@ -22,7 +22,7 @@ const ZonesFilter = memo(function Page({ setFilter, filter, etages }) {
                     <label htmlFor="role" className='text-neutral-600 text-sm'>Nom de la zone</label>
                     <input value={filter.zone || ""} onInput={handleChangeZoneName} type="text" name="zone" id="zone" className="rounded-md px-3 w-full duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none" />
                 </div>
-                <div className='flex flex-col gap-y-2 w-full md:w-auto md:flex-1 md:max-w-[400px] min-w-[220px]'>
+                <div className='flex flex-col gap-y-2 w-auto flex-wrap min-w-[150px] md:min-w-[200px] lg:min-w-[260px]'>
                     <label className='text-neutral-600 text-sm'>Zones</label>
                     <Select
                         placeholder=""
-- 
GitLab