feat(ui): filtre type user

wip

wip

ui/modules/admin/users/UsersFiltersPanel.tsx

@@ -1,32 +1,47 @@
 import { Button, HStack, Stack, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import { useMemo } from "react";
+
+import {
+  PaginationInfosQuery,
+  parsePaginationInfosFromQuery,
+  convertPaginationInfosToQuery,
+} from "@/modules/models/pagination";
+
+import FiltreUserTypes from "./filters/FiltreUsersType";
+import {
+  UsersFilters,
+  UsersFiltersQuery,
+  parseUsersFiltersFromQuery,
+  convertUsersFiltersToQuery,
+} from "./models/users-filters";
 
 const UsersFiltersPanel = () => {
   const router = useRouter();
 
-  //   const { organismesFilters, sort } = useMemo(() => {
-  //     const { pagination, sort } = parsePaginationInfosFromQuery(router.query as unknown as PaginationInfosQuery);
-  //     return {
-  //       organismesFilters: parseOrganismesFiltersFromQuery(router.query as unknown as OrganismesFiltersQuery),
-  //       pagination: pagination,
-  //       sort: sort ?? [{ desc: false, id: "nom" }],
-  //     };
-  //   }, [JSON.stringify(router.query)]);
+  const { usersFilters, sort } = useMemo(() => {
+    const { pagination, sort } = parsePaginationInfosFromQuery(router.query as unknown as PaginationInfosQuery);
+    return {
+      usersFilters: parseUsersFiltersFromQuery(router.query as unknown as UsersFiltersQuery),
+      pagination: pagination,
+      sort: sort ?? [{ desc: false, id: "nom" }],
+    };
+  }, [JSON.stringify(router.query)]);
 
-  //   const updateState = (newParams: Partial<{ [key in keyof OrganismesFilters]: any }>) => {
-  //     void router.push(
-  //       {
-  //         pathname: router.pathname,
-  //         query: {
-  //           ...(router.query.organismeId ? { organismeId: router.query.organismeId } : {}),
-  //           ...convertOrganismesFiltersToQuery({ ...organismesFilters, ...newParams }),
-  //           ...convertPaginationInfosToQuery({ sort, ...newParams }),
-  //         },
-  //       },
-  //       undefined,
-  //       { shallow: true }
-  //     );
-  //   };
+  const updateState = (newParams: Partial<{ [key in keyof UsersFilters]: any }>) => {
+    void router.push(
+      {
+        pathname: router.pathname,
+        query: {
+          ...(router.query.organismeId ? { organismeId: router.query.organismeId } : {}),
+          ...convertUsersFiltersToQuery({ ...usersFilters, ...newParams }),
+          ...convertPaginationInfosToQuery({ sort, ...newParams }),
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
 
   const resetFilters = () => {
     void router.push(
@@ -50,6 +65,10 @@ const UsersFiltersPanel = () => {
         {/* FILTRE Région */}
 
         {/* FILTRE Type Utilisateur */}
+        <FiltreUserTypes
+          value={usersFilters.type_utilisateur}
+          onChange={(type_utilisateur) => updateState({ type_utilisateur })}
+        />
 
         {/* FILTRE Réseau */}
 

ui/modules/admin/users/filters/FiltreUsersType.tsx

@@ -0,0 +1,46 @@
+import { Checkbox, CheckboxGroup, Stack } from "@chakra-ui/react";
+import { useState } from "react";
+
+import { organisationTypes } from "@/common/internal/Organisation";
+import SimpleOverlayMenu from "@/modules/dashboard/SimpleOverlayMenu";
+import { OrganismesFilterButton } from "@/modules/organismes/filters/OrganismesFilterButton";
+
+interface FiltreUsersTypesProps {
+  value: string[];
+  onChange: (typesUtilisateurs: string[]) => void;
+}
+
+function FiltreUserTypes(props: FiltreUsersTypesProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const typesUtilisateurs = props.value;
+
+  return (
+    <div>
+      <OrganismesFilterButton
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        buttonLabel="Type d'utilisateur"
+        badge={typesUtilisateurs?.length}
+      />
+      {isOpen && (
+        <SimpleOverlayMenu onClose={() => setIsOpen(false)} width="auto" p="3w">
+          <CheckboxGroup
+            defaultValue={typesUtilisateurs}
+            size="sm"
+            onChange={(selectedTypesUtilisateurs: string[]) => props.onChange(selectedTypesUtilisateurs)}
+          >
+            <Stack>
+              {organisationTypes.map((type, i) => (
+                <Checkbox iconSize="0.5rem" value={type} key={i}>
+                  {type}
+                </Checkbox>
+              ))}
+            </Stack>
+          </CheckboxGroup>
+        </SimpleOverlayMenu>
+      )}
+    </div>
+  );
+}
+
+export default FiltreUserTypes;

ui/modules/admin/users/models/users-filters.ts

@@ -0,0 +1,32 @@
+import { stripEmptyFields } from "@/common/utils/misc";
+
+export interface UsersFilters {
+  type_utilisateur: string[];
+}
+
+export interface UsersFiltersQuery {
+  type_utilisateur?: string;
+}
+
+export function parseUsersFiltersFromQuery(query: UsersFiltersQuery): UsersFilters {
+  return {
+    type_utilisateur: query.type_utilisateur?.split(",") ?? [],
+  };
+}
+
+export function convertUsersFiltersToQuery(organismesFilters: Partial<UsersFilters>): Partial<UsersFiltersQuery> {
+  return stripEmptyFields({
+    type_utilisateur: organismesFilters.type_utilisateur?.join(","),
+  });
+}
+
+export function filterUsersArrayFromUsersFilters(users, usersFilters: Partial<UsersFilters>) {
+  let filteredUsers = users;
+  console.log("usersFilters :>> ", usersFilters);
+
+  if (usersFilters.type_utilisateur?.length && usersFilters.type_utilisateur?.length > 0)
+    filteredUsers = filteredUsers?.filter((item) => usersFilters.type_utilisateur?.includes(item.userType));
+
+  console.log("filteredUsers :>> ", filteredUsers);
+  return filteredUsers;
+}

ui/pages/admin/users/index.tsx

@@ -32,6 +32,11 @@ import DownloadButton from "@/components/buttons/DownloadButton";
 import Page from "@/components/Page/Page";
 import withAuth from "@/components/withAuth";
 import UserForm from "@/modules/admin/UserForm";
+import {
+  filterUsersArrayFromUsersFilters,
+  parseUsersFiltersFromQuery,
+  UsersFiltersQuery,
+} from "@/modules/admin/users/models/users-filters";
 import UsersFiltersPanel from "@/modules/admin/users/UsersFiltersPanel";
 import NewTable from "@/modules/indicateurs/NewTable";
 import { ArrowRightLine } from "@/theme/components/icons";
@@ -40,12 +45,13 @@ export const getServerSideProps = async (context) => ({ props: { ...(await getAu
 
 const NO_LIMIT = 10_000;
 
-type UserNormalized = {
+export type UserNormalized = {
   _id: string;
   normalizedNomPrenom: string;
   normalizedEmail: string;
   normalizedOrganismeNom: string;
   organisationType: string;
+  userType: string;
   organismeId: string;
   organismeNom: string;
   nom: string;
@@ -160,26 +166,34 @@ const Users = () => {
         organismeId,
         organismeNom,
         organisationType: user?.organisation?.label || "",
+        userType: user?.organisation?.type || "",
         normalizedOrganismeNom: organismeNom.toLowerCase(),
         normalizedNomPrenom: user.nom.toLowerCase() + " " + user.prenom.toLowerCase(),
         normalizedEmail: user.email.toLowerCase(),
       };
     });
   }, [data]);
 
-  console.log("users :>> ", users);
+  const usersQueryFiltered = useMemo(() => {
+    return users
+      ? filterUsersArrayFromUsersFilters(
+          users,
+          parseUsersFiltersFromQuery(router.query as unknown as UsersFiltersQuery)
+        )
+      : [];
+  }, [users, router.query]);
 
   const filteredUsers = useMemo(() => {
-    if (!search) return users;
-    return users?.filter((user) => {
+    if (!search) return usersQueryFiltered;
+    return usersQueryFiltered?.filter((user) => {
       const searchLower = search.toLowerCase();
       return (
         user.normalizedNomPrenom.includes(searchLower) ||
         user.normalizedEmail.includes(searchLower) ||
         user.normalizedOrganismeNom.toLowerCase().includes(searchLower)
       );
     });
-  }, [search, users]);
+  }, [search, usersQueryFiltered]);
 
   const defaultSort: SortingState = [{ desc: true, id: "created_at" }];
   const [sort, setSort] = useState<SortingState>(defaultSort);
@@ -245,7 +259,7 @@ const Users = () => {
             action={async () => {
               exportDataAsXlsx(
                 `users.xlsx`,
-                filteredUsers.map((e) => {
+                filteredUsers?.map((e) => {
                   return {
                     account_status: e.account_status,
                     civility: e.civility,