Merge pull request #85 from fga-eps-mds/187-edicao-de-departamentos

187 edicao de departamentos

src/Components/Departments/index.js

@@ -15,7 +15,7 @@ const Departments = ({ departments, searchTerm }) => {
           }
         })
         .map((post) => (
-          <PocketDepartment key={post.id} name={post.name} />
+          <PocketDepartment key={post.id} id={post.id} name={post.name} />
         ))}
     </StyledListGroup>
   );

src/Components/PocketDepartment/index.js

@@ -2,9 +2,17 @@ import React from "react";
 
 import { StyledBigDiv } from "./styles";
 
-const PocketDepartment = ({ name }) => (
+const PocketDepartment = ({ name, id }) => (
   <StyledBigDiv>
-    <button class="registerNumber">{name}</button>
+    <button
+      onClick={(e) => {
+        e.preventDefault();
+        window.location.href = `/editar-departamento/${id}`;
+      }}
+      class="registerNumber"
+    >
+      {name}
+    </button>
   </StyledBigDiv>
 );
 

src/Pages/EditDepartment/index.js

@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import toast, { Toaster } from "react-hot-toast";
+import { BiBuildings } from "react-icons/bi";
+import HeaderWithButtons from "../../Components/HeaderWithButtons";
+import {
+  editDepartmentById,
+  getDepartments,
+} from "../../Services/Axios/profileService";
+
+import {
+  StyledBlueRectangle,
+  StyledButtonsDiv,
+  StyledBackButton,
+  StyledRegisterButton,
+  StyledForms,
+  StyledViewProfile,
+  StyledWhiteRectangle,
+} from "../CreateDepartment/styles.js";
+import { useParams } from "react-router";
+
+const EditDepartment = () => {
+  const { id } = useParams();
+  const [department, setDepartment] = useState("");
+
+  async function setAll() {
+    const allDepart = await getDepartments();
+
+    for (const element of allDepart) {
+      console.log(element);
+      if (element.id == id) {
+        setDepartment(element.name);
+        break;
+      }
+    }
+  }
+
+  window.onload = function () {
+    setAll();
+  };
+
+  async function handleClick(event) {
+    return editDepartmentById(department, id, toast);
+  }
+
+  return (
+    <>
+      <HeaderWithButtons />
+      <div>
+        <Toaster />
+        <StyledViewProfile>
+          {/* Create Department image */}
+          <StyledBlueRectangle>
+            <BiBuildings size="20rem" color="white" />
+          </StyledBlueRectangle>
+
+          <StyledWhiteRectangle>
+            <StyledForms>
+              <form>
+                <div>
+                  <h1>Editar Departamento</h1>
+                  <input
+                    id="email"
+                    type="text"
+                    required
+                    placeholder="Nome do departamento"
+                    value={department}
+                    onChange={(event) => setDepartment(event.target.value)}
+                  />
+                </div>
+              </form>
+            </StyledForms>
+            <StyledButtonsDiv>
+              <StyledBackButton
+                type="button"
+                onClick={() => window.history.back()}
+              >
+                Voltar
+              </StyledBackButton>
+              <StyledRegisterButton
+                type="button"
+                onClick={(event) => handleClick(event)}
+              >
+                Editar
+              </StyledRegisterButton>
+            </StyledButtonsDiv>
+          </StyledWhiteRectangle>
+        </StyledViewProfile>
+      </div>
+    </>
+  );
+};
+
+export default EditDepartment;

src/Routes.js

@@ -16,8 +16,10 @@ import ViewAllFields from "./Pages/ViewAllFields";
 import CreateDepartment from "./Pages/CreateDepartment";
 import ViewAllUsers from "./Pages/ViewAllUsers";
 import EditRecord from "./Pages/EditRecord";
+import EditDepartment from "./Pages/EditDepartment";
 import GenericBlueButton from "./Components/GenericBlueButton";
 
+
 const PrivateRoutes = ({ component: Component, ...prop }) => (
   <Route
     {...prop}
@@ -112,6 +114,11 @@ const Routes = () => (
         path="/editar-registro/:id"
         component={() => <EditRecord />}
       />
+      <PrivateRoutes
+        exact
+        path="/editar-departamento/:id"
+        component={() => <EditDepartment />}
+      />
       <Route exact path="/" component={() => <LoginScreen />} />
     </Switch>
   </BrowserRouter>

src/Services/Axios/profileService.js

@@ -268,3 +268,27 @@ export async function registerSection(name, toast) {
     toast.error("Não foi possível cadastrar o departamento!");
   }
 }
+
+export async function editDepartmentById(departmentInfo, id, toast) {
+  try {
+    // Edit record with the id and the new information
+    const temp = await APIProfile.post(`/departments/change-department/${id}`, {
+      name: departmentInfo,
+    });
+    toast.success((t) => (
+      <span style={{ textAlign: "center" }}>
+        <p>Departamento editado com sucesso!</p>
+      </span>
+    ));
+    return temp;
+  } catch (err) {
+    const status = err.response?.status;
+    if (status === 500) {
+      toast.error("Não foi possível editar o departamento");
+    }
+    if (status === 400) {
+      toast.error("Nome de departamento inválido");
+    }
+    return err;
+  }
+}