Merge pull request #9 from ipti/new/registration

New/registration

.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/

src/Assets/css/styles.css

@@ -122,7 +122,7 @@
 
   .card {
     box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
-    padding: 2rem;
+    padding: 1rem;
     border-radius: 10px;
     margin-bottom: 1rem;
   }

src/Components/Card/CardMeeting/index.tsx

@@ -2,12 +2,20 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Container } from "./style";
 import { Column, Padding, Row } from "../../../Styles/styles";
 import Icon from "../../Icon";
-import { formatarData, Status } from "../../../Controller/controllerGlobal";
-import { Message } from "primereact/message";
+import {
+  formatarData,
+  ROLE,
+  Status,
+} from "../../../Controller/controllerGlobal";
 import { useContext, useState } from "react";
 import { MeetingListContext } from "../../../Context/Classroom/Meeting/MeetingList/context";
 import { MeetingListTypes } from "../../../Context/Classroom/Meeting/MeetingList/type";
 import { ConfirmDialog } from "primereact/confirmdialog";
+import { AplicationContext } from "../../../Context/Aplication/context";
+import { PropsAplicationContext } from "../../../Types/types";
+import IconMeeting from "./../../../Assets/images/meeting_card.svg";
+import IconCalendar from "./../../../Assets/images/calendar.svg";
+import IconStatus from "./../../../Assets/images/published_with_changes.svg";
 
 const CardMeeting = ({
   title,
@@ -23,6 +31,10 @@ const CardMeeting = ({
   const history = useNavigate();
   const [visible, setVisible] = useState(false);
 
+  const propsAplication = useContext(
+    AplicationContext
+  ) as PropsAplicationContext;
+
   const { id } = useParams();
 
   const props = useContext(MeetingListContext) as MeetingListTypes;
@@ -34,38 +46,61 @@ const CardMeeting = ({
         onClick={() => history(`/turma/${id}/encontros/${idMeeting}`)}
       >
         <Row id="space-between">
-          <h3>{title}</h3>
-          <div
-            className="cursor-pointer"
-            onClick={(e) => {
-              e.stopPropagation();
-              setVisible(true);
-            }}
-          >
-            <Icon icon="pi pi-trash" size="1rem" />
-          </div>
+          <Row>
+            <div className={`boxQuantity`}>
+              <img src={IconMeeting} alt="" style={{ height: 32 }} />
+            </div>
+            <Padding padding="4px" />
+            <Column id="center">
+              <h3>{title}</h3>
+            </Column>
+          </Row>
+          {(propsAplication.user?.role === ROLE.ADMIN ||
+            propsAplication.user?.role === ROLE.COORDINATORS) && (
+            <div
+              className="cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                setVisible(true);
+              }}
+            >
+              <Icon icon="pi pi-trash" size="1rem" />
+            </div>
+          )}
         </Row>
         <Padding padding="8px" />
         <Row id="space-between">
           <Column>
             <div className={"boxYear"}>
               <Column id="center" style={{ height: "100%" }}>
                 <Row>
-                  <p>Data: </p>
-                  <Padding /> {formatarData(data)}
+                  <img
+                    src={IconCalendar}
+                    alt=""
+                    style={{ height: 16, marginRight: 2 }}
+                  />
+                  <p style={{ fontSize: "14px" }}>Data: {formatarData(data)}</p>
                 </Row>
               </Column>
             </div>
           </Column>
-          <Column>
-            {status === Status.PENDING ? (
-              <Message severity="warn"  />
-            ) : status === Status.APPROVED ? (
-              <Message severity="success" />
-            ) : status === Status.REPROVED ? (
-              <Message severity="error" />
-            ) : null}
-          </Column>
+          <Row>
+            <img
+              src={IconStatus}
+              alt=""
+              style={{ height: 16, marginRight: 2 }}
+            />
+            <Row style={{ fontSize: "14px" }}>
+              Status: {" "}<Padding padding="2px" />
+              {status === Status.PENDING ? (
+                <p style={{ fontWeight: "600" }}> Pendente</p>
+              ) : status === Status.APPROVED ? (
+                <p style={{ fontWeight: "600" }}> Aprovado</p>
+              ) : status === Status.REPROVED ? (
+                <p style={{ fontWeight: "600" }}> Reprovado</p>
+              ) : null}
+            </Row>
+          </Row>
         </Row>
       </Container>
       <ConfirmDialog

src/Components/Card/CardMeeting/style.tsx

@@ -2,23 +2,28 @@ import styled from "styled-components";
 import styles from "../../../Styles";
 
 export const Container = styled.div`
-  color: ${styles.colors.grayClear};
-  font-size: ${styles.typography.font.extraSmall};
   justify-content: space-between;
   cursor: pointer;
 
+  border: 1.22px solid rgba(219, 230, 255, 1);
+  background: ${styles.colors.colorCard};
+  
+  border-radius: 16px;
+
   .boxQuantity {
     display: flex;
     color: white;
-    font-size: ${styles.typography.font.extraSmall};
+  }
+
+  p {
+    font-weight: 400;
+    font-size: 4;
   }
   .boxYear {
     border-radius: 25px;
     height: 100%;
     justify-content: center;
     align-items: center;
     text-align: center;
-    font-weight: 600;
-    color: ${styles.colors.colorsBaseInkLighterActive};
   }
 `;

src/Context/Beneficiaries/BeneficiaresCreate/state.tsx

@@ -47,6 +47,7 @@ export const BeneficiariesCreateState = () => {
     project: undefined,
     status: "",
     classroom: 0,
+    deficiency_description: ""
   };
   return {
     initialValue,

src/Context/Beneficiaries/BeneficiaresCreate/type.ts

@@ -15,7 +15,8 @@ export interface BeneficiariesCreateType {
     status: string;
     classroom: number;
     zone: number | undefined, 
-    project: number | undefined
+    project: number | undefined,
+    deficiency_description: string | undefined
   };
   tsOne: Tsone | undefined;
   project: any | undefined;

src/Context/Beneficiaries/BeneficiaresEdit/state.tsx

@@ -64,6 +64,8 @@ export const BeneficiariesEditState = () => {
     responsable_cpf: registrations?.responsable_cpf,
     responsable_telephone: registrations?.responsable_telephone,
     status: getStatus(registrations?.status!),
+    deficiency_description: registrations?.deficiency_description
+
   };
 
   const CreateRegisterClassroom = (data: CreateRegistrationClassroomType) => {

src/Context/Classroom/Registration/state.tsx

@@ -36,6 +36,8 @@ export const RegistrationClassroomState = () => {
     responsable_cpf: registration?.registration.responsable_cpf,
     responsable_telephone: registration?.registration.responsable_telephone,
     status: getStatus(registration?.status!),
+    deficiency_description: registration?.registration.deficiency_description
+
   };
 
   const handleUpdateRegistration = (data: UpdateRegister, id: number) => {

src/Context/Classroom/Registration/type.tsx

@@ -28,6 +28,7 @@ export interface UpdateRegister
     responsable_telephone: string | undefined;
     status: {id: string, name: string} | undefined;
     registration_classroom_id?: number
+    deficiency_description: any
 }
 export interface RegistrationType {
   id: number

src/Pages/Beneficiaries/BeneficiariesCreate/index.tsx

@@ -45,9 +45,7 @@ const RegistrationPage = () => {
       }
       return true;
     }),
-    responsable_telephone: Yup.string().required(
-      "Telefone é obrigatório"
-    ),
+    responsable_telephone: Yup.string().required("Telefone é obrigatório"),
     birthday: Yup.string()
       .nullable()
       .required("Data de nascimento é obrigatória"),
@@ -196,36 +194,48 @@ const RegistrationPage = () => {
                       </div>
                     ) : null}
                   </div>
-                  <div>
+                  {values.deficiency && (
                     <div className="col-12 md:col-6">
-                      <label>Zona *</label>
+                      <label>Qual deficiência?</label>
                       <Padding />
-                      <Column id="end">
-                        <Row className="gap-2">
-                          <RadioButtonComponent
-                            value={1}
-                            checked={values.zone === 1}
-                            onChange={handleChange}
-                            name="zone"
-                            label="Rural"
-                          />
-                          <RadioButtonComponent
-                            value={2}
-                            checked={values.zone === 2}
-                            onChange={handleChange}
-                            name="zone"
-                            label="Urbana"
-                          />
-                        </Row>
-                      </Column>
-                      {errors.zone && touched.zone ? (
-                        <div style={{ color: "red", marginTop: "8px" }}>
-                          {errors.zone}
-                        </div>
-                      ) : null}
+                      <TextInput
+                        value={values.deficiency_description}
+                        name="deficiency_description"
+                        onChange={handleChange}
+                        placeholder="Qual deficiência ?"
+                      />
                     </div>
-                  </div>
+                  )}
                 </div>{" "}
+                <div className="grid">
+                  <div className="col-12 md:col-6">
+                    <label>Zona *</label>
+                    <Padding />
+                    <Column id="end">
+                      <Row className="gap-2">
+                        <RadioButtonComponent
+                          value={1}
+                          checked={values.zone === 1}
+                          onChange={handleChange}
+                          name="zone"
+                          label="Rural"
+                        />
+                        <RadioButtonComponent
+                          value={2}
+                          checked={values.zone === 2}
+                          onChange={handleChange}
+                          name="zone"
+                          label="Urbana"
+                        />
+                      </Row>
+                    </Column>
+                    {errors.zone && touched.zone ? (
+                      <div style={{ color: "red", marginTop: "8px" }}>
+                        {errors.zone}
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
                 <Padding padding="8px" />
                 <h3>Dados Responsavel</h3>
                 <Padding />
@@ -292,7 +302,10 @@ const RegistrationPage = () => {
                       value={props.project}
                       placerholder="Selecione o projeto"
                       name="project"
-                      onChange={(e) => {props.setProject(e.target.value); setFieldValue("project", e.target.value)}}
+                      onChange={(e) => {
+                        props.setProject(e.target.value);
+                        setFieldValue("project", e.target.value);
+                      }}
                       options={props.tsOne?.project}
                       optionsLabel="name"
                       optionsValue="id"