status registration, and status classroom fix: cards height

ipti · Dec 5, 2024 · d876887 · d876887
1 parent a03d535
commit d876887
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 32 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
-# REACT_APP_API_PATH=http://localhost:3000/
-REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
+REACT_APP_API_PATH=http://localhost:3000/
+# REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
diff --git a/src/Components/Card/CardClassroom/style.tsx b/src/Components/Card/CardClassroom/style.tsx
@@ -10,6 +10,10 @@ export const Container = styled.div`
   background: ${styles.colors.colorCard};
   
   border-radius: 16px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
   .boxQuantity {
     display: flex;

diff --git a/src/Components/Card/CardMeeting/style.tsx b/src/Components/Card/CardMeeting/style.tsx
@@ -7,6 +7,10 @@ export const Container = styled.div`
 
   border: 1.22px solid rgba(219, 230, 255, 1);
   background: ${styles.colors.colorCard};
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   
   border-radius: 16px;
 

diff --git a/src/Components/Card/CardProject/style.tsx b/src/Components/Card/CardProject/style.tsx
@@ -8,6 +8,10 @@ export const Container = styled.div`
 
   border: 1.22px solid rgba(219, 230, 255, 1);
   background: ${styles.colors.colorCard};
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   
   border-radius: 16px;
 

diff --git a/src/Components/Card/CardRegistration/index.tsx b/src/Components/Card/CardRegistration/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import avatar from "../../../Assets/images/avatar.svg"
 import { RegistrationClassroomContext } from "../../../Context/Classroom/RegistrationsList/context";
 import { RegistrationClassroomTypes } from "../../../Context/Classroom/RegistrationsList/type";
-import { ROLE, Status } from "../../../Controller/controllerGlobal";
+import { ROLE, Status, StatusEnum } from "../../../Controller/controllerGlobal";
 import { Column, Padding, Row } from "../../../Styles/styles";
 import Icon from "../../Icon";
 import { Container } from "./style";
@@ -80,22 +80,16 @@ const CardRegistration = ({
           </div>
           <Padding />
           <Column>
-            <div style={{fontWeight: "500",
-              padding: 4, textAlign: "center", width: "96px", color: "white", borderRadius: "16px", backgroundColor: `${status === statuGlobal.APPROVED
+            <div className="status" style={{fontWeight: "500",
+              padding: 4, textAlign: "center", minWidth: "96px", maxWidth: "128px", color: "white", borderRadius: "16px", backgroundColor: `${status === statuGlobal.APPROVED
                 ? color.green
                 : status === statuGlobal.PENDING
                   ? color.colorCardOrange
                   : status === statuGlobal.REPROVED
                     ? color.red
-                    : ""}`
+                    : color.colorCardOrange}`
             }}>
-              {status === statuGlobal.APPROVED
-                ? "Aprovado"
-                : status === statuGlobal.PENDING
-                  ? "Pendente"
-                  : status === statuGlobal.REPROVED
-                    ? "Reprovado"
-                    : ""}
+              {StatusEnum[status]}
             </div>
             <Padding />
             <h4>{subtitle}</h4>

diff --git a/src/Components/Card/CardRegistration/style.tsx b/src/Components/Card/CardRegistration/style.tsx
@@ -8,6 +8,10 @@ export const Container = styled.div`
 
   border: 1.22px solid rgba(219, 230, 255, 1);
   background: ${styles.colors.colorCard};
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   
   border-radius: 16px;
 
@@ -17,6 +21,16 @@ export const Container = styled.div`
     font-size: ${styles.typography.font.extraSmall};
   }
 
+  .status {
+    display: inline-block; /* Permite que a largura seja ajustada pelo conteúdo */
+      padding: 10px; /* Espaçamento interno */
+      border: 1px solid #ccc; /* Borda para destacar o div */
+      min-width: 150px; /* Largura mínima */
+      max-width: 300px; /* Largura máxima */
+      word-wrap: break-word; /* Quebra o texto se ele ultrapassar a largura máxima */
+      text-align: center;
+  }
+
 `;
 
 interface StatusProps {

diff --git a/src/Components/Card/CardSchedule/style.tsx b/src/Components/Card/CardSchedule/style.tsx
@@ -5,6 +5,10 @@ export const Container = styled.div`
   color: ${styles.colors.grayClear};
   font-size: ${styles.typography.font.extraSmall};
   justify-content: space-between;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
   .boxQuantity {
     display: flex;

diff --git a/src/Components/Card/CardTs/style.tsx b/src/Components/Card/CardTs/style.tsx
@@ -8,6 +8,10 @@ export const Container = styled.div`
 
   border: 1.22px solid rgba(219, 230, 255, 1);
   background: ${styles.colors.colorCard};
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   
   border-radius: 16px;
 

diff --git a/src/Controller/controllerGlobal.tsx b/src/Controller/controllerGlobal.tsx
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { Buffer } from 'buffer'; 
+import { Buffer } from 'buffer';
 
 
 export const gerarIdAleatorio = (tamanho: number) => {
@@ -24,15 +24,15 @@ export function formatarData(data: string): string {
 export function converterData(data: string) {
   // Divide a string pelo separador "/"
   const partes = data.split('/');
-  
+
   // As partes serão: partes[0] = dia, partes[1] = mês, partes[2] = ano
   const dia = partes[0];
   const mes = partes[1];
   const ano = partes[2];
-  
+
   // Reorganiza no formato YYYY-MM-DD
   const dataFormatada = `${ano}-${mes}-${dia}`;
-  
+
   return dataFormatada;
 }
 
@@ -51,19 +51,18 @@ export const VerifyColor = (color_race_number: number) => {
 };
 
 export const getStatus = (id: string) => {
-  const status = [
-    { id: Status.APPROVED, name: "Aprovado" },
-    { id: Status.REPROVED, name: "Reprovado" },
-    { id: Status.PENDING, name: "Pedente" },
-  ];
+  const status = getStatusList();
   return status.find((props) => props.id === id);
 };
 
 export const getStatusList = () => {
   const status = [
     { id: Status.APPROVED, name: "Aprovado" },
     { id: Status.REPROVED, name: "Reprovado" },
-    { id: Status.PENDING, name: "Pedente" },
+    { id: Status.PENDING, name: "Pendente" },
+    { id: Status.PENDING_DOCUMENTATION, name: "Pendente de documentação" },
+    { id: Status.PENDING_TERM, name: "Pendente de termo" },
+
   ];
   return status;
 };
@@ -72,7 +71,7 @@ export const getStatusList = () => {
 export const getStatusClassroomList = () => {
   const status = [
     { id: Status.APPROVED, name: "Aprovado" },
-    { id: Status.PENDING, name: "Pedente" },
+    { id: Status.PENDING, name: "Pendente" },
   ];
   return status;
 };
@@ -96,6 +95,17 @@ export const Status = {
   APPROVED: "APPROVED",
   PENDING: "PENDING",
   REPROVED: "REPROVED",
+  PENDING_TERM: "PENDING_TERM",
+  PENDING_DOCUMENTATION: "PENDING_DOCUMENTATION"
+};
+
+
+export const StatusEnum: any = {
+  APPROVED: "Aprovado",
+  PENDING: "Pendente",
+  REPROVED: "Reprovado",
+  PENDING_TERM: "Pend. de termo",
+  PENDING_DOCUMENTATION: "Pend. de documentação"
 };
 
 export const ROLE = {

diff --git a/src/Pages/Classroom/ClassroomOne/RegistrationList/Registration/index.tsx b/src/Pages/Classroom/ClassroomOne/RegistrationList/Registration/index.tsx
@@ -2,6 +2,7 @@ import { Form, Formik } from "formik";
 import { Button } from "primereact/button";
 import { useContext } from "react";
 import { useParams } from "react-router-dom";
+import avatar from "../../../../../Assets/images/avatar.svg";
 import ContentPage from "../../../../../Components/ContentPage";
 import DropdownComponent from "../../../../../Components/Dropdown";
 import MaskInput from "../../../../../Components/InputMask";
@@ -12,14 +13,13 @@ import RegistartionDetailsProvider, {
 } from "../../../../../Context/Classroom/Registration/context";
 import { RegistrationDetailsTypes } from "../../../../../Context/Classroom/Registration/type";
 import {
-  Status,
   color_race,
-  typesex,
+  getStatusList,
+  typesex
 } from "../../../../../Controller/controllerGlobal";
 import { useFetchRequestClassroomOne } from "../../../../../Services/Classroom/query";
 import { Padding } from "../../../../../Styles/styles";
 import { Avatar } from "../../../../Beneficiaries/BeneficiariesEdit";
-import avatar from "../../../../../Assets/images/avatar.svg"
 
 
 const Registration = () => {
@@ -70,11 +70,9 @@ const RegistrationPage = () => {
                       name="status"
                       placerholder="Status"
                       optionsLabel="name"
-                      options={[
-                        { id: Status.APPROVED, name: "Aprovado" },
-                        { id: Status.REPROVED, name: "Reprovado" },
-                        { id: Status.PENDING, name: "Pedente" },
-                      ]}
+                      options={
+                        getStatusList()
+                      }
                     />
                   </div>
                 </div>{" "}