Merge pull request #32 from ipti/feature/user

Feature/user
ipti · Jul 4, 2024 · 7e275fd · 7e275fd
2 parents 524fe2a + b8a6caa
commit 7e275fd
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 103 deletions.
diff --git a/src/Components/Menu/index.tsx b/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

diff --git a/src/Context/Aplication/state.tsx b/src/Context/Aplication/state.tsx
@@ -7,13 +7,13 @@ import { User } from "../Users/type";
 
 const AplicationState = () => {
     const [form, setform] = useState<PropsForm>({ title: "Formulário Sem título", description: "", question: [] })
-    const { data: projects } = useFetchRequestSocialTechnologyLists()
+    const { data: projects } = useFetchRequestSocialTechnologyLists();
 
-    const [project, setproject] = useState<Array<Projects> | undefined>()
-    const [user, setuser] = useState<User | undefined>()
+    const [project, setproject] = useState<Array<Projects> | undefined>();
+    const [user, setuser] = useState<User | undefined>();
 
 
-    const { data: userRequest } = useFetchRequestUsersOne(parseInt(GetIdUser()!))
+    const { data: userRequest } = useFetchRequestUsersOne(parseInt(GetIdUser()!));
 
 
 

diff --git a/src/Context/Users/context.tsx b/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>
     )

diff --git a/src/Context/Users/state.tsx b/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 };
 };
diff --git a/src/Context/Users/type.tsx b/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
+}
diff --git a/src/Pages/Classroom/ClassroomOne/MeetingList/CreateMeeting/index.tsx b/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();
 

diff --git a/src/Pages/InitialPage/index.tsx b/src/Pages/InitialPage/index.tsx
@@ -1,11 +1,12 @@
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import CardQuant from "../../Components/Chart/CardQuant";
 import ContentPage from "../../Components/ContentPage";
 import Loading from "../../Components/Loading";
 import { AplicationContext } from "../../Context/Aplication/context";
 import { useFetchRequestUsersChart } from "../../Services/Users/query";
-import { Padding } from "../../Styles/styles";
+import { Padding, Row } from "../../Styles/styles";
 import { PropsAplicationContext } from "../../Types/types";
+import DropdownComponent from "../../Components/Dropdown";
 
 export interface Chart {
   totalUserSocialTechnologies: number;
@@ -17,27 +18,30 @@ export interface Chart {
 }
 
 const State = () => {
-  const { data, isLoading, isError } = useFetchRequestUsersChart();
+
+  const [ts, setTs] = useState<number | undefined>()
+  const { data, isLoading, isError } = useFetchRequestUsersChart(ts?.toString());
+
+  console.log(ts)
 
   var chart: Chart | undefined = data;
 
   return {
     chart,
     isLoading,
-    isError,
+    isError, ts, setTs
   };
 };
 
 const InitialPage = () => {
   const propsAplication = useContext(AplicationContext) as PropsAplicationContext
   const props = State();
-
   if (props.isLoading) return <Loading />;
   return (
     <ContentPage title={"Bem vindo, " + propsAplication.user?.name + "!"} description="Visualização dos dados gerais do meuBen.">
-      <Padding />
-      <h1> </h1>
-      <Padding padding="16px" />
+      <Padding padding="8px" />
+      {propsAplication.project && <Row id="end"><DropdownComponent options={[...propsAplication.project, { id: undefined, name: "Todos" }]} optionsLabel="name" optionsValue="id" value={props.ts} onChange={(e) => props.setTs(e.target.value)} placerholder="Filtrar por Tecnologia" /></Row>
+      }      <Padding padding="16px" />
       <div className="grid">
         <div className="col-12 md:col-4 lg:col-4">
           <CardQuant title="Total de Ts" quant={props.chart?.totalUserSocialTechnologies!} color="navy_blue" />

diff --git a/src/Pages/Users/ListUsers.tsx b/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)}

diff --git a/src/Services/Users/query.tsx b/src/Services/Users/query.tsx
@@ -1,12 +1,12 @@
 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 = () => {
-    return useQuery(["useRequestsUsersChart"], () => requestUsersChart());
+  export const useFetchRequestUsersChart = (id?: string) => {
+    return useQuery(["useRequestsUsersChart", id], () => requestUsersChart(id));
   };
 
   export const useFetchRequestUsersOne = (id: number) => {