feat(ui): filtre région & département

mission-apprentissage · Nov 22, 2023 · 1534844 · 1534844
1 parent 6714b72
commit 1534844
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 1 deletion.
diff --git a/server/src/common/actions/users.actions.ts b/server/src/common/actions/users.actions.ts
@@ -198,7 +198,17 @@ export const getAllUsers = async (
                       },
                     },
                   },
-                  { $project: { type: 1, nom: 1, raison_sociale: 1, reseaux: 1, nature: 1 } },
+                  {
+                    $project: {
+                      type: 1,
+                      nom: 1,
+                      raison_sociale: 1,
+                      reseaux: 1,
+                      nature: 1,
+                      "adresse.departement": 1,
+                      "adresse.region": 1,
+                    },
+                  },
                 ],
               },
             },

diff --git a/ui/common/internal/User.ts b/ui/common/internal/User.ts
@@ -36,6 +36,10 @@ export interface UserOrganisme {
   reseaux: any[];
   nature: string;
   raison_sociale: string;
+  adresse?: {
+    departement?: string;
+    region?: string;
+  };
 }
 
 export interface Pagination {

diff --git a/ui/modules/admin/users/UsersFiltersPanel.tsx b/ui/modules/admin/users/UsersFiltersPanel.tsx
@@ -9,6 +9,8 @@ import {
 } from "@/modules/models/pagination";
 
 import FiltreUsersAccountStatut from "./filters/FiltreUsersAccountStatut";
+import FiltreUsersDepartment from "./filters/FiltreUsersDepartements";
+import FiltreUsersRegion from "./filters/FiltreUsersRegion";
 import FiltreUsersReseaux from "./filters/FiltreUsersReseaux";
 import FiltreUserTypes from "./filters/FiltreUsersType";
 import {
@@ -63,8 +65,13 @@ const UsersFiltersPanel = () => {
       </Text>
       <HStack>
         {/* FILTRE Département */}
+        <FiltreUsersDepartment
+          value={usersFilters.departements}
+          onChange={(departements) => updateState({ departements })}
+        />
 
         {/* FILTRE Région */}
+        <FiltreUsersRegion value={usersFilters.regions} onChange={(regions) => updateState({ regions })} />
 
         {/* FILTRE Type Utilisateur */}
         <FiltreUserTypes

diff --git a/ui/modules/admin/users/filters/FiltreUsersDepartements.tsx b/ui/modules/admin/users/filters/FiltreUsersDepartements.tsx
@@ -0,0 +1,41 @@
+import { Checkbox, CheckboxGroup, Stack } from "@chakra-ui/react";
+import { useState } from "react";
+import { DEPARTEMENTS_SORTED } from "shared";
+
+import { FilterButton } from "@/components/FilterButton/FilterButton";
+import SimpleOverlayMenu from "@/modules/dashboard/SimpleOverlayMenu";
+
+interface FiltreUsersDepartmentTypesProps {
+  value: string[];
+  onChange: (departements: string[]) => void;
+}
+
+function FiltreUsersDepartment(props: FiltreUsersDepartmentTypesProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const departements = props.value;
+
+  return (
+    <div>
+      <FilterButton isOpen={isOpen} setIsOpen={setIsOpen} buttonLabel="Département" badge={departements?.length} />
+      {isOpen && (
+        <SimpleOverlayMenu onClose={() => setIsOpen(false)} width="auto" p="3w">
+          <CheckboxGroup
+            defaultValue={departements}
+            size="sm"
+            onChange={(selectedDepartements: string[]) => props.onChange(selectedDepartements)}
+          >
+            <Stack>
+              {DEPARTEMENTS_SORTED.map((departement, i) => (
+                <Checkbox iconSize="0.5rem" value={departement.code} key={i}>
+                  {departement.nom}
+                </Checkbox>
+              ))}
+            </Stack>
+          </CheckboxGroup>
+        </SimpleOverlayMenu>
+      )}
+    </div>
+  );
+}
+
+export default FiltreUsersDepartment;
diff --git a/ui/modules/admin/users/filters/FiltreUsersRegion.tsx b/ui/modules/admin/users/filters/FiltreUsersRegion.tsx
@@ -0,0 +1,41 @@
+import { Checkbox, CheckboxGroup, Stack } from "@chakra-ui/react";
+import { useState } from "react";
+import { REGIONS_SORTED } from "shared";
+
+import { FilterButton } from "@/components/FilterButton/FilterButton";
+import SimpleOverlayMenu from "@/modules/dashboard/SimpleOverlayMenu";
+
+interface FiltreUsersRegionTypesProps {
+  value: string[];
+  onChange: (regions: string[]) => void;
+}
+
+function FiltreUsersRegion(props: FiltreUsersRegionTypesProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const regions = props.value;
+
+  return (
+    <div>
+      <FilterButton isOpen={isOpen} setIsOpen={setIsOpen} buttonLabel="Région" badge={regions?.length} />
+      {isOpen && (
+        <SimpleOverlayMenu onClose={() => setIsOpen(false)} width="auto" p="3w">
+          <CheckboxGroup
+            defaultValue={regions}
+            size="sm"
+            onChange={(selectedRegions: string[]) => props.onChange(selectedRegions)}
+          >
+            <Stack>
+              {REGIONS_SORTED.map((region, i) => (
+                <Checkbox iconSize="0.5rem" value={region.code} key={i}>
+                  {region.nom}
+                </Checkbox>
+              ))}
+            </Stack>
+          </CheckboxGroup>
+        </SimpleOverlayMenu>
+      )}
+    </div>
+  );
+}
+
+export default FiltreUsersRegion;
diff --git a/ui/modules/admin/users/models/users-filters.ts b/ui/modules/admin/users/models/users-filters.ts
@@ -6,19 +6,25 @@ export interface UsersFilters {
   type_utilisateur: string[];
   account_status: string[];
   reseaux: string[];
+  departements: string[];
+  regions: string[];
 }
 
 export interface UsersFiltersQuery {
   type_utilisateur?: string;
   account_status?: string;
   reseaux?: string;
+  departements?: string;
+  regions?: string;
 }
 
 export function parseUsersFiltersFromQuery(query: UsersFiltersQuery): UsersFilters {
   return {
     type_utilisateur: query.type_utilisateur?.split(",") ?? [],
     account_status: query.account_status?.split(",") ?? [],
     reseaux: query.reseaux?.split(",") ?? [],
+    departements: query.departements?.split(",") ?? [],
+    regions: query.regions?.split(",") ?? [],
   };
 }
 
@@ -27,6 +33,8 @@ export function convertUsersFiltersToQuery(organismesFilters: Partial<UsersFilte
     type_utilisateur: organismesFilters.type_utilisateur?.join(","),
     account_status: organismesFilters.account_status?.join(","),
     reseaux: organismesFilters.reseaux?.join(","),
+    departements: organismesFilters.departements?.join(","),
+    regions: organismesFilters.regions?.join(","),
   });
 }
 
@@ -49,5 +57,11 @@ export function filterUsersArrayFromUsersFilters(
         item.organismeReseaux.some((reseau) => usersFilters.reseaux?.includes(reseau))
     );
 
+  if (usersFilters.departements?.length && usersFilters.departements?.length > 0)
+    filteredUsers = filteredUsers?.filter((item) => usersFilters.departements?.includes(item.organismeDepartement));
+
+  if (usersFilters.regions?.length && usersFilters.regions?.length > 0)
+    filteredUsers = filteredUsers?.filter((item) => usersFilters.regions?.includes(item.organismeRegion));
+
   return filteredUsers;
 }
diff --git a/ui/modules/admin/users/models/users.ts b/ui/modules/admin/users/models/users.ts
@@ -17,6 +17,8 @@ export type UserNormalized = {
   organismeId: string;
   organismeNom: string;
   organismeReseaux: string[];
+  organismeDepartement: string;
+  organismeRegion: string;
   nom: string;
   prenom: string;
   account_status: string;
@@ -30,12 +32,16 @@ export const toUserNormalized = (user: User): UserNormalized => {
   const organismeId = user?.organisation?.organisme?._id;
   const organismeNom = user?.organisation?.organisme?.nom || user?.organisation?.label || "";
   const organismeReseaux = user?.organisation?.organisme?.reseaux || [];
+  const organismeDepartement = user?.organisation?.organisme?.adresse?.departement || "";
+  const organismeRegion = user?.organisation?.organisme?.adresse?.region || "";
 
   return {
     ...user,
     organismeId,
     organismeNom,
     organismeReseaux,
+    organismeDepartement,
+    organismeRegion,
     created_at: formatDateDayMonthYear(user.created_at),
     organisationType: user?.organisation?.label || "",
     userType: user?.organisation?.type || "",