filter user

Author: TI JONNY

src/Components/Menu/index.tsx

@@ -46,7 +46,6 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => {
   return (
     <Container active={viewdMenu}>
       <Padding padding="4px" />
-
       <Padding padding="16px">
         <Row id="center">
           <Column id="center">
@@ -136,7 +135,7 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => {
             path={"/beneficiarios"}
             icon={active === 5 ? beneficiaries_hover : beneficiaries}
           /><Padding />
-          <Item
+          {/* <Item
             text={"Reaplicadores"}
             funcActiv={() => {
               setActive(8);
@@ -145,8 +144,8 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => {
             active={active === 8 ? true : false}
             path={"/reaplicadores"}
             icon={active === 8 ? turmasHover : turmas}
-          />
-          <Padding />
+          /> */}
+          
           {props.user?.role === ROLE.ADMIN ||
             props.user?.role === ROLE.COORDINATORS ? (
             <Item

src/Context/Users/context.tsx

@@ -5,9 +5,9 @@ import { UsersState } from "./state";
 export const UsersContext = createContext<UsersTypes | null>(null);
 
 const UsersProvider = ({ children }: { children: React.ReactNode }) => {
-    const { users, CreateUser, DeleteUser, UpdateUser, isLoading } = UsersState()
+    const { users, CreateUser, DeleteUser, UpdateUser, isLoading, role, setRole } = UsersState()
     return (
-        <UsersContext.Provider value={{ users, CreateUser, DeleteUser, UpdateUser, isLoading }}>
+        <UsersContext.Provider value={{ users, CreateUser, DeleteUser, UpdateUser, isLoading, role, setRole }}>
             {children}
         </UsersContext.Provider>
     )

src/Context/Users/state.tsx

@@ -5,8 +5,9 @@ import { CreateUser } from "./type";
 
 export const UsersState = () => {
   const [users, setusers] = useState<any>();
+  const [role, setRole] = useState<string | undefined>()
 
-  const { data: userRequest, isLoading } = useFetchRequestUsers();
+  const { data: userRequest, isLoading } = useFetchRequestUsers(role);
 
   const props = ControllerUser();
 
@@ -21,45 +22,50 @@ export const UsersState = () => {
 
   const CreateUser = (data: CreateUser) => {
     const body = {
-        name: data.name,
-        username: data.username,
-        password: data.password,
-        role: data.role,
-        project: GetId(data.project),
-        sex: data.sex,
-        color_race: data.color_race,
-        birthday:data.birthday,
-        email: data.email,
-        initial_date: data.initial_date,
-        phone: data.phone
+      name: data.name,
+      username: data.username,
+      password: data.password,
+      role: data.role,
+      project: GetId(data.project),
+      sex: data.sex,
+      color_race: data.color_race,
+      birthday: data.birthday,
+      email: data.email,
+      initial_date: data.initial_date,
+      phone: data.phone
     }
     props.requestUserMutation.mutate(body);
   };
 
   const UpdateUser = (data: CreateUser, id: number) => {
     const body = {
-        name: data.name,
-        username: data.username,
-        role: data.role,
-        project: GetId(data.project),
-        sex: data.sex,
-        color_race: data.color_race,
-        birthday:data.birthday,
-        email: data.email,
-        initial_date: data.initial_date,
-        phone: data.phone
+      name: data.name,
+      username: data.username,
+      role: data.role,
+      project: GetId(data.project),
+      sex: data.sex,
+      color_race: data.color_race,
+      birthday: data.birthday,
+      email: data.email,
+      initial_date: data.initial_date,
+      phone: data.phone
     }
-    props.requestUpdateUserMutation.mutate({data: body, id: id});
+    props.requestUpdateUserMutation.mutate({ data: body, id: id });
   };
 
   const DeleteUser = (id: number) => {
     props.requestDeleteUserMutation.mutate(id)
   }
+
+  useEffect(() => {
+    setRole("TODOS")
+  }, [])
+
   useEffect(() => {
     if (userRequest) {
       setusers(userRequest);
     }
-  }, [userRequest]);
+  }, [userRequest, role]);
 
-  return { users, CreateUser, DeleteUser, UpdateUser, isLoading };
+  return { users, CreateUser, DeleteUser, UpdateUser, isLoading, role, setRole };
 };

src/Context/Users/type.tsx

@@ -1,29 +1,33 @@
+import { Dispatch, SetStateAction } from "react";
+
 export interface UsersTypes {
-    users: any;
-    CreateUser: (data: CreateUser) => void
-    DeleteUser: (id: number) => void
-    UpdateUser: (data: CreateUser, id: number) => void
-    isLoading: boolean
+  users: any;
+  CreateUser: (data: CreateUser) => void
+  DeleteUser: (id: number) => void
+  UpdateUser: (data: CreateUser, id: number) => void
+  isLoading: boolean,
+  role?: string,
+  setRole: Dispatch<SetStateAction<string | undefined>>
 }
 
 export interface CreateUser {
-    name: string;
-    username: string;
-    password?: string;
-    project: number[];
-    role?: {name: string, id: string}
-    email?: string,
-    phone?: string,
-    sex: number,
-    color_race: number,
-    initial_date: string,
-    birthday: string
-  }
+  name: string;
+  username: string;
+  password?: string;
+  project: number[];
+  role?: { name: string, id: string }
+  email?: string,
+  phone?: string,
+  sex: number,
+  color_race: number,
+  initial_date: string,
+  birthday: string
+}
 
-  export interface User {
-    id: number
-    name: string
-    username: string
-    active: boolean
-    role: string
-  }
+export interface User {
+  id: number
+  name: string
+  username: string
+  active: boolean
+  role: string
+}

src/Pages/Classroom/ClassroomOne/MeetingList/CreateMeeting/index.tsx

@@ -24,7 +24,7 @@ const CreateMeeting = () => {
 const CreateMeetingPage = () => {
   const props = useContext(CreateMeetingContext) as CreateMeetingType;
 
-  const { data: userRequest } = useFetchRequestUsers();
+  const { data: userRequest } = useFetchRequestUsers(undefined);
 
   const { id } = useParams();
 

src/Pages/Users/ListUsers.tsx

@@ -6,11 +6,14 @@ import { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import ContentPage from "../../Components/ContentPage";
 
+import DropdownComponent from "../../Components/Dropdown";
 import Loading from "../../Components/Loading";
+import { AplicationContext } from "../../Context/Aplication/context";
 import UsersProvider, { UsersContext } from "../../Context/Users/context";
 import { UsersTypes } from "../../Context/Users/type";
 import { ROLE } from "../../Controller/controllerGlobal";
 import { Container, Padding } from "../../Styles/styles";
+import { PropsAplicationContext } from "../../Types/types";
 
 const ListUsers = () => {
   return (
@@ -23,6 +26,8 @@ const ListUsers = () => {
 const ListUsersPage = () => {
   const props = useContext(UsersContext) as UsersTypes;
   const history = useNavigate();
+  const propsAplication = useContext(AplicationContext) as PropsAplicationContext;
+
 
   const [visible, setVisible] = useState<any>(false)
   // const actionBodyTemplate = (rowData: any) => {
@@ -41,10 +46,10 @@ const ListUsersPage = () => {
         {rowData.role === ROLE.ADMIN
           ? "Admin"
           : rowData.role === ROLE.COORDINATORS
-          ? "Coordenador"
-          : rowData.role === ROLE.REAPPLICATORS
-          ? "Reaplicador"
-          : null}
+            ? "Coordenador"
+            : rowData.role === ROLE.REAPPLICATORS
+              ? "Reaplicador"
+              : null}
       </p>
     );
   };
@@ -59,28 +64,55 @@ const ListUsersPage = () => {
 
   const ActionsUserBody = (rowData: any) => {
     return (
-      <Button severity="danger" rounded icon={"pi pi-trash"} onClick={() => {setVisible(rowData)}} />
+      <Button severity="danger" rounded icon={"pi pi-trash"} onClick={() => { setVisible(rowData) }} />
     );
   };
 
   if (props.isLoading) return <Loading />;
 
+  const renderHeader = () => {
+    return (
+      <div
+        className="flex justify-content-between"
+        // style={{ background: color.colorCard }}
+      >
+        <Button label="Criar usuário" onClick={() => history("/users/criar")} />
+
+        <div>
+          <DropdownComponent optionsLabel="name" value={props.role} onChange={(e) => props.setRole(e.target.value)} optionsValue="id" placerholder="Filtrar tipo de usuário" options={propsAplication.user?.role === ROLE.ADMIN
+
+            ? [
+              { id: "TODOS", name: "Todos" },
+              { id: ROLE.ADMIN, name: "Admin" },
+              { id: ROLE.COORDINATORS, name: "Coordenador" },
+              { id: ROLE.REAPPLICATORS, name: "Reaplicador" },
+            ]
+            : [
+              { id: "TODOS", name: "Todos" },
+              { id: ROLE.COORDINATORS, name: "Coordenador" },
+              { id: ROLE.REAPPLICATORS, name: "Reaplicador" },
+            ]
+          } />
+        </div>
+
+      </div>
+    );
+  };
+
 
   return (
     <Container>
-    <ContentPage title="Usuários" description="Lista usuários do MeuBen.">
-      <Padding padding="16px" />
-      <Button label="Criar usuário" onClick={() => history("/users/criar")} />
-      <Padding padding="16px" />
-      <DataTable value={props.users} paginator rows={10} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: "50rem" }}>
-        <Column field="name" header="Nome"></Column>
-        <Column field="username" header="Usuário"></Column>
-        <Column field="role" body={typeUserBody} header="Tipo"></Column>
-        <Column field="active" body={ActiveUserBody} header="Ativo"></Column>
-        <Column field="actions" body={ActionsUserBody} header="Ações"></Column>
-
-      </DataTable>
-    </ContentPage>
+      <ContentPage title="Usuários" description="Lista usuários do MeuBen.">
+        <Padding padding="16px" />
+        <DataTable value={props.users} header={renderHeader} paginator rows={10} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: "50rem" }}>
+          <Column field="name" header="Nome"></Column>
+          <Column field="username" header="Usuário"></Column>
+          <Column field="role" body={typeUserBody} header="Tipo"></Column>
+          <Column field="active" body={ActiveUserBody} header="Ativo"></Column>
+          <Column field="actions" body={ActionsUserBody} header="Ações"></Column>
+
+        </DataTable>
+      </ContentPage>
       <ConfirmDialog
         visible={visible}
         onHide={() => setVisible(false)}

src/Services/Users/query.tsx

@@ -1,8 +1,8 @@
 import { useQuery } from "react-query";
 import { requestUsers, requestUsersChart, requestUsersOne } from "./request";
 
-export const useFetchRequestUsers = () => {
-    return useQuery(["useRequestsUsers"], () => requestUsers());
+export const useFetchRequestUsers = (role: string | undefined) => {
+    return useQuery(["useRequestsUsers", role], () => requestUsers(role));
   };
 
   export const useFetchRequestUsersChart = () => {

src/Services/Users/request.tsx

@@ -2,9 +2,13 @@ import { CreateUser } from "../../Context/Users/type";
 import http from "../axios";
 import { getYear, logout } from "../localstorage";
 
-export const requestUsers = () => {
+export const requestUsers = (role: string | undefined) => {
   let path = "/user-bff";
 
+  if(role && role !== "TODOS"){
+    path = path + "?role="+role
+  }
+
   return http
     .get(path)
     .then((response) => response.data)