Merge branch 'devel' of https://github.com/fga-eps-mds/2021.1-Oraculo…

…-FrontEnd into 121-cadastro-usuario-registros
fga-eps-mds · Nov 5, 2021 · 62622a5 · 62622a5
2 parents 6a55560 + 404118a
commit 62622a5
Show file tree

Hide file tree

Showing 9 changed files with 268 additions and 11 deletions.
diff --git a/src/Components/HeaderWithButtons/index.js b/src/Components/HeaderWithButtons/index.js
@@ -52,6 +52,11 @@ const HeaderWithButtons = () => {
     window.location.reload();
   }
 
+  function handleSeeAllUsers() {
+    history.push("/visualizar-usuarios");
+    window.location.reload();
+  }
+
   const [nameUser, setName] = useState("-");
 
   async function fetchUserData() {
@@ -90,6 +95,7 @@ const HeaderWithButtons = () => {
               <button onClick={() => {}}>Criar Departamento</button>
               <button onClick={() => {}}>Tag</button>
               <button onClick={handleSeeAllFields}>Campos</button>
+              <button onClick={handleSeeAllUsers}>Listar Usuários</button>
             </div>
           </StyledDropDown>
           <StyledDropDown>

diff --git a/src/Components/PocketUser/index.js b/src/Components/PocketUser/index.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { StyledListGroup, StyledBigDiv, StyledText } from "./style";
+
+const PocketUser = ({ user }) => {
+  return (
+    <StyledListGroup>
+      {user.map((singleUser) => (
+        <StyledBigDiv>
+          <StyledText>{singleUser.name}</StyledText>
+          <StyledText>{singleUser.email}</StyledText>
+        </StyledBigDiv>
+      ))}
+    </StyledListGroup>
+  );
+};
+
+export default PocketUser;
diff --git a/src/Components/PocketUser/style.js b/src/Components/PocketUser/style.js
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const StyledListGroup = styled.ul`
+  display: contents;
+  list-style-type: none;
+`;
+
+export const StyledBigDiv = styled.div`
+  width: 100%;
+  height: 5rem;
+  margin-top: 2rem;
+  border-radius: 15px;
+  background: #ffffff;
+  border: 2px solid #000000;
+`;
+
+export const StyledText = styled.text`
+  margin: auto;
+  text-align: center;
+  width: 50%;
+  background: transparent;
+  font-family: Montserrat;
+  font-style: normal;
+  font-size: 26px;
+`;
diff --git a/src/Pages/AllRegistersScreen/index.js b/src/Pages/AllRegistersScreen/index.js
@@ -2,11 +2,15 @@ import React, { useEffect, useState } from "react";
 import { history } from "../../history";
 import HeaderWithButtons from "../../Components/HeaderWithButtons";
 import MainButton from "../../Components/MainButton";
+import SearchBar from "../../Components/SearchBar";
 import {
   StyledTitle,
   StyledBody,
   StyledOrganizeButtons,
   StyledBigButton,
+  StyledTop,
+  ButtonDiv,
+  StyledSearchBarSize,
 } from "./styles";
 
 import Process from "../../Components/Process";
@@ -56,9 +60,14 @@ const AllRegistersScreen = () => {
 
       <StyledBody>
         <StyledTitle>Registros - Todos</StyledTitle>
-        <div>
-          <MainButton title={"Novo Registro"} onClick={handleProcess} />
-        </div>
+        <StyledTop>
+          <StyledSearchBarSize>
+            <SearchBar />
+          </StyledSearchBarSize>
+          <ButtonDiv>
+            <MainButton onClick={handleProcess} title={"Novo Registro"} />
+          </ButtonDiv>
+        </StyledTop>
         <StyledOrganizeButtons>
           <StyledBigButton>Nº do Registro</StyledBigButton>
           <StyledBigButton>Cidade</StyledBigButton>

diff --git a/src/Pages/AllRegistersScreen/styles.js b/src/Pages/AllRegistersScreen/styles.js
@@ -54,3 +54,30 @@ export const StyledTitle = styled.div`
   text-align: left;
   color: #000000;
 `;
+
+export const ButtonDiv = styled.div`
+  width: 19.5rem;
+  align-items: center;
+`;
+
+export const StyledTop = styled.div`
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+
+  @media only screen and (max-width: 1300px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: safe;
+    margin-top: 1rem;
+  }
+`;
+
+export const StyledSearchBarSize = styled.div`
+  width: 30rem;
+  @media only screen and (max-width: 1300px) {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+`;
diff --git a/src/Pages/ViewAllUsers/index.js b/src/Pages/ViewAllUsers/index.js
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import HeaderWithButtons from "../../Components/HeaderWithButtons";
+import MainButton from "../../Components/MainButton";
+import SearchBar from "../../Components/SearchBar";
+import toast, { Toaster } from "react-hot-toast";
+import { history } from "../../history";
+import {
+  StyledTitle,
+  StyledBottom,
+  StyledOrganizeButtons,
+  StyledBigButton,
+  StyledSearchBarSize,
+  StyledPage,
+  StyledTop,
+  StyledFooter,
+  ButtonDiv,
+} from "./styles";
+import { listAllUsers } from "../../Services/Axios/profileService";
+import PocketUser from "../../Components/PocketUser";
+
+const ViewAllUsers = () => {
+  const [users, setUsers] = useState([]);
+
+  const receiveUsers = async () => {
+    setUsers(await listAllUsers(toast));
+  };
+
+  window.onload = function () {
+    receiveUsers();
+  };
+
+  function handleCreateUser() {
+    history.push("/criar-usuario");
+    window.location.reload();
+  }
+
+  return (
+    <>
+      <HeaderWithButtons />
+      <StyledPage>
+        <StyledTitle>Usuários</StyledTitle>
+        <StyledTop>
+          <StyledSearchBarSize>
+            <SearchBar />
+          </StyledSearchBarSize>
+          <ButtonDiv>
+            <MainButton onClick={handleCreateUser} title={"Criar Usuário"} />
+          </ButtonDiv>
+        </StyledTop>
+        <StyledBottom>
+          <StyledOrganizeButtons>
+            <StyledBigButton>Nome</StyledBigButton>
+            <StyledBigButton>Email</StyledBigButton>
+          </StyledOrganizeButtons>
+          {users ? (
+            <PocketUser user={users} />
+          ) : (
+            <StyledTitle>Não há usuários cadastrados</StyledTitle>
+          )}
+          <StyledFooter>
+            <StyledBigButton>Nome</StyledBigButton>
+            <StyledBigButton>Email</StyledBigButton>
+          </StyledFooter>
+        </StyledBottom>
+      </StyledPage>
+      <Toaster></Toaster>
+    </>
+  );
+};
+
+export default ViewAllUsers;
diff --git a/src/Pages/ViewAllUsers/styles.js b/src/Pages/ViewAllUsers/styles.js
@@ -0,0 +1,97 @@
+import styled from "styled-components";
+import { colors } from "../../style";
+
+export const styles = {};
+
+export const StyledPage = styled.div`
+  display: -ms-flexbox;
+  align-items: center;
+  margin-inline: 15rem;
+`;
+
+export const StyledTitle = styled.h1`
+  margin-top: 4rem;
+  margin-bottom: 3rem;
+  font-family: Montserrat;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 40px;
+  line-height: 49px;
+  display: flex;
+  text-align: left;
+  color: #000000;
+`;
+
+export const StyledTop = styled.div`
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+
+  @media only screen and (max-width: 1300px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: safe;
+    margin-top: 1rem;
+  }
+`;
+
+export const StyledSearchBarSize = styled.div`
+  width: 30rem;
+  @media only screen and (max-width: 1300px) {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+`;
+
+export const StyledBottom = styled.div`
+  margin-bottom: 2rem;
+  div {
+    display: flex;
+    justify-content: space-between;
+    margin: 2rem 0 0 0;
+  }
+`;
+
+export const StyledOrganizeButtons = styled.div`
+  background: #1f3541;
+  border: 0px solid #5e5e5e;
+  box-sizing: border-box;
+  border-radius: 10px 10px 0px 0px;
+  height: 4rem;
+  align-items: center;
+`;
+
+export const StyledBigButton = styled.button`
+  width: 50%;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Montserrat;
+  color: #ffffff;
+  font-style: normal;
+  font-size: 28px;
+  line-height: 20px;
+  text-align: center;
+  background: transparent;
+  cursor: pointer;
+  border: none;
+`;
+
+export const StyledScroll = styled.div`
+  height: 20rem;
+`;
+
+export const StyledFooter = styled.div`
+  height: 4rem;
+  width: 100%;
+  background-color: ${colors.header};
+  border-radius: 0px 0px 10px 10px;
+  align-items: center;
+`;
+
+export const ButtonDiv = styled.div`
+  width: 19.5rem;
+  align-items: center;
+`;
diff --git a/src/Routes.js b/src/Routes.js
@@ -11,6 +11,7 @@ import HomePage from "./Pages/HomePage";
 import ChangePassword from "./Pages/ChangePassword";
 import AllRegistersScreen from "./Pages/AllRegistersScreen";
 import ViewAllFields from "./Pages/ViewAllFields";
+import ViewAllUsers from "./Pages/ViewAllUsers";
 
 const PrivateRoutes = ({ component: Component, ...prop }) => (
   <Route
@@ -35,7 +36,11 @@ const Routes = () => (
         path="/login"
         component={() => <LoginScreen history={history} />}
       />
-      <PrivateRoutes exact path="/ver-registro/:id" component={() => <ViewRecord/>} />
+      <PrivateRoutes
+        exact
+        path="/ver-registro/:id"
+        component={() => <ViewRecord />}
+      />
       <PrivateRoutes path="/tela-inicial" component={() => <HomePage />} />
       <PrivateRoutes
         path="/criar-registro"
@@ -55,6 +60,10 @@ const Routes = () => (
         path="/todos-os-campos"
         component={() => <ViewAllFields />}
       />
+      <PrivateRoutes
+        path="/visualizar-usuarios"
+        component={() => <ViewAllUsers />}
+      />
       <Route exact path="/" component={() => <LoginScreen />} />
     </Switch>
   </BrowserRouter>

diff --git a/src/Services/Axios/profileService.js b/src/Services/Axios/profileService.js
@@ -113,13 +113,9 @@ export async function loginUser(user, toast) {
 
 export async function listAllUsers(toast) {
   try {
-    const response = await APIProfile.post(
-      "/users/all",
-      {},
-      {
-        headers: { "X-Access-Token": getToken() },
-      }
-    );
+    const response = await APIProfile.get("/users/all", {
+      headers: { "X-Access-Token": getToken() },
+    });
     return response.data;
   } catch (err) {
     const status = err.response?.status;