feat(ui): ajout filtre réseaux

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

Hide file tree

Showing 4 changed files with 58 additions and 0 deletions.
diff --git a/ui/modules/admin/users/UsersFiltersPanel.tsx b/ui/modules/admin/users/UsersFiltersPanel.tsx
@@ -9,6 +9,7 @@ import {
 } from "@/modules/models/pagination";
 
 import FiltreUsersAccountStatut from "./filters/FiltreUsersAccountStatut";
+import FiltreUsersReseaux from "./filters/FiltreUsersReseaux";
 import FiltreUserTypes from "./filters/FiltreUsersType";
 import {
   UsersFilters,
@@ -72,6 +73,7 @@ const UsersFiltersPanel = () => {
         />
 
         {/* FILTRE Réseau */}
+        <FiltreUsersReseaux value={usersFilters.reseaux} onChange={(reseaux) => updateState({ reseaux })} />
 
         {/* FILTRE Statut du compte */}
         <FiltreUsersAccountStatut

diff --git a/ui/modules/admin/users/filters/FiltreUsersReseaux.tsx b/ui/modules/admin/users/filters/FiltreUsersReseaux.tsx
@@ -0,0 +1,41 @@
+import { Checkbox, CheckboxGroup, Stack } from "@chakra-ui/react";
+import { useState } from "react";
+import { TETE_DE_RESEAUX_SORTED } from "shared";
+
+import { FilterButton } from "@/components/FilterButton/FilterButton";
+import SimpleOverlayMenu from "@/modules/dashboard/SimpleOverlayMenu";
+
+interface FiltreUsersReseauxTypesProps {
+  value: string[];
+  onChange: (reseaux: string[]) => void;
+}
+
+function FiltreUsersReseaux(props: FiltreUsersReseauxTypesProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const reseaux = props.value;
+
+  return (
+    <div>
+      <FilterButton isOpen={isOpen} setIsOpen={setIsOpen} buttonLabel="Réseaux" badge={reseaux?.length} />
+      {isOpen && (
+        <SimpleOverlayMenu onClose={() => setIsOpen(false)} width="auto" p="3w">
+          <CheckboxGroup
+            defaultValue={reseaux}
+            size="sm"
+            onChange={(selectedReseaux: string[]) => props.onChange(selectedReseaux)}
+          >
+            <Stack>
+              {TETE_DE_RESEAUX_SORTED.map((reseau, i) => (
+                <Checkbox iconSize="0.5rem" value={reseau.key} key={i}>
+                  {reseau.nom}
+                </Checkbox>
+              ))}
+            </Stack>
+          </CheckboxGroup>
+        </SimpleOverlayMenu>
+      )}
+    </div>
+  );
+}
+
+export default FiltreUsersReseaux;
diff --git a/ui/modules/admin/users/models/users-filters.ts b/ui/modules/admin/users/models/users-filters.ts
@@ -5,24 +5,28 @@ import { UserNormalized } from "./users";
 export interface UsersFilters {
   type_utilisateur: string[];
   account_status: string[];
+  reseaux: string[];
 }
 
 export interface UsersFiltersQuery {
   type_utilisateur?: string;
   account_status?: string;
+  reseaux?: string;
 }
 
 export function parseUsersFiltersFromQuery(query: UsersFiltersQuery): UsersFilters {
   return {
     type_utilisateur: query.type_utilisateur?.split(",") ?? [],
     account_status: query.account_status?.split(",") ?? [],
+    reseaux: query.reseaux?.split(",") ?? [],
   };
 }
 
 export function convertUsersFiltersToQuery(organismesFilters: Partial<UsersFilters>): Partial<UsersFiltersQuery> {
   return stripEmptyFields({
     type_utilisateur: organismesFilters.type_utilisateur?.join(","),
     account_status: organismesFilters.account_status?.join(","),
+    reseaux: organismesFilters.reseaux?.join(","),
   });
 }
 
@@ -38,5 +42,12 @@ export function filterUsersArrayFromUsersFilters(
   if (usersFilters.account_status?.length && usersFilters.account_status?.length > 0)
     filteredUsers = filteredUsers?.filter((item) => usersFilters.account_status?.includes(item.account_status));
 
+  if (usersFilters.reseaux?.length && usersFilters.reseaux?.length > 0)
+    filteredUsers = filteredUsers?.filter(
+      (item) =>
+        item.organismeReseaux.length > 0 &&
+        item.organismeReseaux.some((reseau) => usersFilters.reseaux?.includes(reseau))
+    );
+
   return filteredUsers;
 }
diff --git a/ui/modules/admin/users/models/users.ts b/ui/modules/admin/users/models/users.ts
@@ -16,6 +16,7 @@ export type UserNormalized = {
   userType: string;
   organismeId: string;
   organismeNom: string;
+  organismeReseaux: string[];
   nom: string;
   prenom: string;
   account_status: string;
@@ -28,10 +29,13 @@ export type UserNormalized = {
 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 || [];
+
   return {
     ...user,
     organismeId,
     organismeNom,
+    organismeReseaux,
     created_at: formatDateDayMonthYear(user.created_at),
     organisationType: user?.organisation?.label || "",
     userType: user?.organisation?.type || "",