From f323cd8575e53eba390c9d7c45803823211c0a0a Mon Sep 17 00:00:00 2001
From: Viky-Gomez <20200999@uaz.edu.mx>
Date: Fri, 13 Sep 2024 13:39:33 -0600
Subject: [PATCH] Validaciones para documentos de una modalidad

---
 .../src/components/FormsValidations.jsx       |  85 +++++---
 .../common/utility/HeaderSection.jsx          |   2 +-
 .../components/common/utility/InputFile.jsx   |   9 +-
 .../components/common/utility/InputMonto.jsx  |   9 +-
 .../common/utility/StatusDocument.jsx         |   4 +-
 .../src/components/modalidades/Modalidad.jsx  | 199 +++++++++++++++---
 6 files changed, 239 insertions(+), 69 deletions(-)

diff --git a/cosiap_frontend/src/components/FormsValidations.jsx b/cosiap_frontend/src/components/FormsValidations.jsx
index 076e4e8..626e4d9 100644
--- a/cosiap_frontend/src/components/FormsValidations.jsx
+++ b/cosiap_frontend/src/components/FormsValidations.jsx
@@ -1,57 +1,72 @@
 import * as Yup from "yup";
 
-
 // Variable de formato para validación de formato de CURP
-const CURP_REGEX = /^[A-Z]{1}[AEIOU]{1}[A-Z]{2}[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])[HM]{1}(AS|BC|BS|CC|CH|CL|CM|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS|NE)[B-DF-HJ-NP-TV-Z]{3}[0-9A-Z]{1}[0-9]{1}$/;
+const CURP_REGEX =
+  /^[A-Z]{1}[AEIOU]{1}[A-Z]{2}[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])[HM]{1}(AS|BC|BS|CC|CH|CL|CM|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS|NE)[B-DF-HJ-NP-TV-Z]{3}[0-9A-Z]{1}[0-9]{1}$/;
 
 // Validación de un campo CURP
 const CURP_VALIDATION = Yup.string()
-    .required("La CURP es requerida")
-    .matches(CURP_REGEX, "Formato de CURP inválido");
-
+  .required("La CURP es requerida")
+  .matches(CURP_REGEX, "Formato de CURP inválido");
 
 const PASSWORD_CREATION_VALIDATION = Yup.string()
-    .required("La contraseña es requerida")
-    .min(8, 'La contraseña debe tener al menos 8 caracteres')
-    .max(20, 'La contraseña no puede tener más de 20 caracteres')
-    .matches(/\d/, 'Debe contener al menos un número')
-    .matches(/[a-z]/, 'Debe contener al menos una letra minúscula')
-    .matches(/[A-Z]/, 'Debe contener al menos una letra mayúscula')
-    .matches(/[@$#¡!%*¿?&]/, 'Debe contener al menos un carácter especial')
-    .matches(/^\S*$/, 'La contraseña no puede contener espacios');
+  .required("La contraseña es requerida")
+  .min(8, "La contraseña debe tener al menos 8 caracteres")
+  .max(20, "La contraseña no puede tener más de 20 caracteres")
+  .matches(/\d/, "Debe contener al menos un número")
+  .matches(/[a-z]/, "Debe contener al menos una letra minúscula")
+  .matches(/[A-Z]/, "Debe contener al menos una letra mayúscula")
+  .matches(/[@$#¡!%*¿?&]/, "Debe contener al menos un carácter especial")
+  .matches(/^\S*$/, "La contraseña no puede contener espacios");
 
 const CONFIRM_PASSWORD_VALIDATION = Yup.string()
-    .required("La confirmacion de la contraseña es requerida")
-    .oneOf([Yup.ref('password'), null], 'Las contraseñas no coinciden');
-
-
-
+  .required("La confirmacion de la contraseña es requerida")
+  .oneOf([Yup.ref("password"), null], "Las contraseñas no coinciden");
 
 export const LoginValidationSchema = Yup.object().shape({
-    curp: CURP_VALIDATION,
-    password: Yup.string()
-        .required("La contraseña es requerida")
+  curp: CURP_VALIDATION,
+  password: Yup.string().required("La contraseña es requerida"),
 });
 
 export const RegisterValidationSchema = Yup.object({
-    nombre: Yup.string()
-        .required('El nombre es requerido')
-        .min(3, 'El nombre debe tener al menos 3 caracteres'),
-    curp: CURP_VALIDATION,
-    email: Yup.string()
-        .required("El correo electronico es requerido")
-        .email("El correo electronico no es válido"),
-    password: PASSWORD_CREATION_VALIDATION,
-    confirmar_password: CONFIRM_PASSWORD_VALIDATION
+  nombre: Yup.string()
+    .required("El nombre es requerido")
+    .min(3, "El nombre debe tener al menos 3 caracteres"),
+  curp: CURP_VALIDATION,
+  email: Yup.string()
+    .required("El correo electronico es requerido")
+    .email("El correo electronico no es válido"),
+  password: PASSWORD_CREATION_VALIDATION,
+  confirmar_password: CONFIRM_PASSWORD_VALIDATION,
 });
 
 export const ResetPasswordValidationSchema = Yup.object().shape({
-    email: Yup.string()
-        .required("El correo electronico es requerido")
-        .email("El correo electronico no es válido")
+  email: Yup.string()
+    .required("El correo electronico es requerido")
+    .email("El correo electronico no es válido"),
 });
 
 export const NewPasswordValidationSchema = Yup.object().shape({
-    password: PASSWORD_CREATION_VALIDATION,
-    confirmar_password: CONFIRM_PASSWORD_VALIDATION
+  password: PASSWORD_CREATION_VALIDATION,
+  confirmar_password: CONFIRM_PASSWORD_VALIDATION,
+});
+
+const FILE_SIZE = 5 * 1024 * 1024; // Tamaño máximo de archivo en bytes (5MB)
+const SUPPORTED_FORMATS = ['application/pdf'];
+
+export const PDF_FileValidation = Yup.mixed()
+  .required("Este campo es requerido")
+  .test("fileFormat", "Formato de archivo no soportado", (value) => value && SUPPORTED_FORMATS.includes(value.type)
+  )
+  .test("fileSize", "El archivo supera el tamaño máximo", (value) => value && value.size <= FILE_SIZE);
+
+export const MontoValidation = Yup.number()
+  .typeError("El monto debe ser un número válido")
+  .required("El monto es requerido")
+  .positive("El monto debe ser mayor a 0")
+  .max(1000000, "El monto no puede ser muy grande");
+
+export const FormValidationSchema = Yup.object({
+  archivo: PDF_FileValidation,
+  monto: MontoValidation,
 });
diff --git a/cosiap_frontend/src/components/common/utility/HeaderSection.jsx b/cosiap_frontend/src/components/common/utility/HeaderSection.jsx
index a372cca..130a977 100644
--- a/cosiap_frontend/src/components/common/utility/HeaderSection.jsx
+++ b/cosiap_frontend/src/components/common/utility/HeaderSection.jsx
@@ -1,6 +1,6 @@
 export default function HeaderSection({ title }) {
   return (
-    <div className="flex flex-row m-3 items-center justify-center">
+    <div className="flex flex-row m-3 mt-0 items-center justify-center">
       <div className="flex-grow h-2 rounded-l-md rounded-r-md bg-[var(--error)]"></div>
       <div className="flex-shrink text-[var(--principal-mf)] px-4">
         <h3 className="uppercase font-bold text-lg lg:text-2xl text-center">
diff --git a/cosiap_frontend/src/components/common/utility/InputFile.jsx b/cosiap_frontend/src/components/common/utility/InputFile.jsx
index daf4db1..327c01e 100644
--- a/cosiap_frontend/src/components/common/utility/InputFile.jsx
+++ b/cosiap_frontend/src/components/common/utility/InputFile.jsx
@@ -1,14 +1,15 @@
-export default function InputFile({ titleBtn, descBtn }) {
+export default function InputFile({ titleBtn, descBtn, onChange, hasError }) {
   return (
     <label>
-      <div className="mb-5 w-full h-8 rounded-lg border border--[var(--secundario)] justify-between items-center inline-flex">
+      <div className={`mb-5 w-full h-8 rounded-lg border justify-between items-center inline-flex ${
+        hasError ? "border-[var(--error-f)]" : "border-[var(--secundario-c)]"}`}>
         <div className="flex w-auto h-8 px-1 flex-col bg-[var(--principal-f)] rounded-l-lg shadow text-[var(--blanco)] text-sm font-bold items-center justify-center cursor-pointer focus:outline-none">
           {titleBtn}
         </div>
-        <h4 className="m-3 text-[var(--secundario)] text-[10px] font-normal">
+        <h4 className="m-3 text-[var(--secundario-f)] text-[10px] font-normal">
           {descBtn}
         </h4>
-        <input type="file" hidden />
+        <input type="file" hidden onChange={onChange}/>
       </div>
     </label>
   );
diff --git a/cosiap_frontend/src/components/common/utility/InputMonto.jsx b/cosiap_frontend/src/components/common/utility/InputMonto.jsx
index 4c61b9f..502328f 100644
--- a/cosiap_frontend/src/components/common/utility/InputMonto.jsx
+++ b/cosiap_frontend/src/components/common/utility/InputMonto.jsx
@@ -1,9 +1,14 @@
-export default function InputMonto() {
+export default function InputMonto({ value, onChange, hasError }) {
+  console.log("hasError:", hasError);
     return (
       <div className="relative">
         <input
           type="text"
-          className="px-4 ps-11 block w-full h-8 border-[var(--secundario-mc)] shadow-sm rounded-lg text-sm font-medium focus:z-10 focus:border-[var(--principal)] disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-[var(--secundario-mc)] text-[var(--secundario-f)] dark:placeholder-[var(--secundario-f)] dark:focus:ring-[var(--error)]"
+          value={value}
+          onChange={onChange}
+          className={`px-4 ps-11 block w-full h-8 shadow-sm rounded-lg text-sm font-medium focus:z-10 focus:border-[var(--principal-f)] disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-[var(--secundario-c)] text-[var(--secundario-f)] dark:placeholder-[var(--secundario-f)] dark:focus:ring-[var(--principal-mf)] ${
+          hasError ? "border-[var(--error-f)]" : "border-[var(--secundario-c)]"
+          }`}
           placeholder="0.00"
           maxLength="8"
         />
diff --git a/cosiap_frontend/src/components/common/utility/StatusDocument.jsx b/cosiap_frontend/src/components/common/utility/StatusDocument.jsx
index 19784a6..39f18f7 100644
--- a/cosiap_frontend/src/components/common/utility/StatusDocument.jsx
+++ b/cosiap_frontend/src/components/common/utility/StatusDocument.jsx
@@ -1,10 +1,10 @@
 export default function StatusDocument({ title, description }) {
   return (
-    <div className="flex flex-col pb-2 mt-5">
+    <div className="flex flex-col pb-2 mt-1">
       <h2 className="text-[var(--principal-f)] font-semibold text-lg text-center">
         {title}
       </h2>
-      <h3 className="text-[var(--negro)] font-medium text-sm text-justify">
+      <h3 className="text-[var(--negro)] font-medium text-sm text-center">
         {description}
       </h3>
     </div>
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.jsx b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
index 988ae4d..7996c33 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
@@ -3,6 +3,12 @@ import HeaderSection from "@/components/common/utility/HeaderSection";
 import StatusDocument from "@/components/common/utility/StatusDocument";
 import InputMonto from "@/components/common/utility/InputMonto";
 import InputFile from "@/components/common/utility/InputFile";
+/* Validaciones para formularios */
+import {
+  MontoValidation,
+  PDF_FileValidation,
+} from "@/components/FormsValidations";
+
 import api from "@/api";
 import { useEffect, useState } from "react";
 
@@ -11,6 +17,19 @@ export { useNavigate } from "react-router-dom";
 
 export default function Modalidad({ id, setViewPageLoader }) {
   const [modalidad, setModalidad] = useState();
+  const [archivo1, setArchivo1] = useState(null);
+  const [archivo2, setArchivo2] = useState(null);
+  const [archivoError1, setArchivoError1] = useState("");
+  const [archivoError2, setArchivoError2] = useState("");
+  const [fileName1, setFileName1] = useState("");
+  const [fileName2, setFileName2] = useState("");
+
+  const [montoError, setMontoError] = useState("");
+  const [montoSolicitado, setMontoSolicitado] = useState("");
+
+  const [showAlert, setShowAlert] = useState(false);
+  const [archivoTieneError, setArchivoTieneError] = useState(false);
+  const [montoTieneError, setMontoTieneError] = useState(false);
 
   const obtenerModalidad = async () => {
     setViewPageLoader(true);
@@ -37,19 +56,93 @@ export default function Modalidad({ id, setViewPageLoader }) {
     }).format(amount);
   };
 
+  /* Validación de los archivos PDF. */
+  const validarArchivo = async (archivo) => {
+    try {
+      await PDF_FileValidation.validate(archivo);
+      setArchivoError("");
+      setArchivoTieneError(false); // sin error
+      return true;
+    } catch (error) {
+      setArchivoError(error.message);
+      setArchivoTieneError(true); // existe un error
+      return false;
+    }
+  };
+
+  /* Validación del monto_maximo */
+  const validarMonto = async (monto) => {
+    try {
+      await MontoValidation.max(
+        modalidad.monto_maximo,
+        `La cantidad supera el monto máximo (${formatCurrency(modalidad.monto_maximo)})`
+      ).validate(monto);
+      setMontoError(false); // no hay error
+      setMontoError("");
+      return true;
+    } catch (error) {
+      setMontoError(error.message);
+      setMontoTieneError(true); // existe un error
+      return false;
+    }
+  };
+
+  const handleFileChange1 = async (e) => {
+    const file = e.target.files[0];
+    setArchivo1(file);
+    setFileName1(file ? file.name : "");
+    const esValido = await validarArchivo(file);
+    if (esValido) {
+      setArchivoError1("");
+    } else {
+      setArchivoError1("Error en el archivo");
+    }
+  };
+
+    const handleFileChange2 = async (e) => {
+    const file = e.target.files[0];
+    setArchivo2(file);
+    setFileName2(file ? file.name : "");
+    const esValido = await validarArchivo(file);
+    if (esValido) {
+      setArchivoError2("");
+    } else {
+      setArchivoError2("Error en el archivo");
+    }
+  };
+
+  const handleMontoChange = async (e) => {
+    const monto = e.target.value;
+    setMontoSolicitado(monto);
+    await validarMonto(monto);
+  };
+
+  const handleSubmit = async () => {
+    const archivoValido = await validarArchivo(archivo);
+    const montoValido = await validarMonto(montoSolicitado);
+
+    if (archivoValido && montoValido) {
+      console.log("Formulario válido, listo para enviar.");
+      // Ocultar la alerta si el formulario es válido.
+      setShowAlert(false);
+    } else {
+      setShowAlert(true);
+    }
+  };
+
   return (
     modalidad && (
-      <div className="flex flex-col items-center pb-8 w-auto lg:w-[90%] mt-5 m-5 bg-[var(--gris-0)] rounded-[45px]">
+      <div className="flex flex-col items-center pb-8 w-auto lg:w-[90%] mt-5 m-5 bg-[var(--secundario-mc)] rounded-[45px]">
         <div className="relative w-full h-full mt-0 rounded-t-[45px]">
-          <div className="flex flex-col items-center text-[var(--blanco)] pb-16">
+          <div className="flex flex-col items-center text-[var(--blanco)]">
             <img
-              className="rounded-t-[45px] w-full h-[400px] overflow-hidden"
+              className="rounded-t-[45px] w-full h-[400px] object-fill overflow-hidden"
               src={`http://localhost:8000${modalidad.imagen}`}
               alt="Modalidad"
             />
-            <div className="absolute inset-0 bg-[var(--gris-6)] opacity-60 rounded-t-[45px]"></div>
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="absolute mt-5 top-0 p-4 text-center">
+            <div className="absolute inset-x-0 top-0 h-[85%] bg-[var(--gris-6)] opacity-60 rounded-t-[45px]"></div>
+            <div className="absolute inset-x-0 flex items-center justify-center">
+              <div className="absolute top-10 text-center">
                 <h3 className="text-2xl font-bold uppercase drop-shadow-xl">
                   Modalidad:
                 </h3>
@@ -71,23 +164,58 @@ export default function Modalidad({ id, setViewPageLoader }) {
               </div>
             </div>
           </div>
-          <HeaderSection title="Documentos" />
-        </div>
-        <div className="relative">
+          <div className="py-3.5">
+            <HeaderSection title="Documentos" />
+          </div>
         </div>
-
+        {showAlert && (
+          <div
+            className="w-[330px] md:w-[500px] lg:w-[50%] p-4 mb-4 text-center bg-[var(--error)] border border-[var(--error-f)] text-[var(--blanco)] px-4 py-3 rounded relative"
+            role="alert"
+          >
+            <strong className="font-semibold text-sm">
+              Por favor, suba toda la documentación.
+            </strong>
+            <span className="absolute top-0 bottom-0 right-0 px-4 py-3">
+              <button
+                onClick={() => setShowAlert(false)}
+                className="text-[var(--error-f)] font-bold "
+              >
+                <svg
+                  className="fill-current h-6 w-6 text-[var(--error-f)]"
+                  role="button"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                >
+                  <title>Cerrar</title>
+                  <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
+                </svg>
+              </button>
+            </span>
+          </div>
+        )}
         {/* Campos para subir documentación. */}
         <div className="flex flex-wrap items-center justify-center gap-4 mb-6 mt-4">
           <DocumentInput
             title="Constancia de estudios"
             description="Constancia de estudios vigente."
           >
-            <div className="flex flex-col items-center justify-between pb-4 mt-5 w-full h-full">
-              <InputFile
-                titleBtn="Seleccionar"
-                descBtn="Ningún archivo seleccionado."
-              />
-              <div className="bg-[var(--gris-1)] w-[250px] h-[200px] border border-[var(--gris-1)]"></div>
+            <div className="flex flex-col justify-between w-full">
+            <InputFile
+              titleBtn="Seleccionar"
+              descBtn={fileName1 || "Ningún archivo seleccionado."}
+              onChange={handleFileChange1}
+              hasError={!!archivoError1} // true si hay error
+              
+            />
+            {archivoError1 && (
+              <div className="flex -mt-4 w-full justify-center">
+                <p className="text-[var(--error-f)] font-bold text-center text-xs underline">{archivoError1}</p>
+              </div>
+            )}
+            </div>
+            <div className="bg-[var(--secundario-c)] w-full h-[200px] border border-[var(--secundario-c)]"></div>
+            <div className="flex flex-col items-center justify-between mt-8">
               <StatusDocument
                 title="Estatus"
                 description="Sube tu documentación para su revisión."
@@ -102,12 +230,22 @@ export default function Modalidad({ id, setViewPageLoader }) {
             title="Kardex de calificaciones"
             description="Calificaciones de los semestres cursados hasta ahora."
           >
-            <div className="flex flex-col items-center justify-between pb-4 w-full h-full">
+            <div className="flex flex-col justify-between w-full">
               <InputFile
-                titleBtn="Seleccionar"
-                descBtn="Ningún archivo seleccionado."
-              />
-              <div className="bg-[var(--gris-1)] w-[250px] h-[200px] border border-[var(--gris-1)]"></div>
+              titleBtn="Seleccionar"
+              descBtn={fileName2 || "Ningún archivo seleccionado."}
+              onChange={handleFileChange2}
+              hasError={!!archivoError2}
+              
+            />
+            {archivoError2 && (
+              <div className="flex -mt-4 w-full justify-center">
+                <p className="text-[var(--error-f)] font-bold text-center text-xs underline">{archivoError2}</p>
+              </div>
+            )}
+            </div>
+            <div className="bg-[var(--secundario-c)] w-full h-[200px] border border-[var(--secundario-c)]"></div>
+            <div className="flex flex-col items-center justify-between mt-4">
               <StatusDocument
                 title="Estatus"
                 description="Sube tu documentación para su revisión."
@@ -122,12 +260,20 @@ export default function Modalidad({ id, setViewPageLoader }) {
             title="Monto solicitado"
             description="Ingresa la cantidad que deseas solicitar."
           >
-            <InputMonto />
-            <div className="flex flex-col items-center inset-x-0 bottom-0 w-full h-full">
-              <StatusDocument
+            <div className="flex flex-col items-center justify-center mt-4 ">
+              <InputMonto
+                value={montoSolicitado}
+                onChange={handleMontoChange}
+              />
+              {montoError && (                
+                <p className="mt-4 text-[var(--error-f)] font-bold text-center text-xs underline">{montoError}</p>
+              )}
+              <div className="flex mt-5">
+                <StatusDocument
                 title="Estatus del monto"
                 description="Monto aprobado o rechazado."
               />
+              </div>
             </div>
           </DocumentInput>
         </div>
@@ -135,7 +281,10 @@ export default function Modalidad({ id, setViewPageLoader }) {
           <button className="flex items-center justify-center lg:w-[15%] text-sm h-8 mr-10 bg-[var(--secundario)] hover:bg-[var(--secundario-f)] text-[var(--blanco)] font-bold py-2 px-8 border border-[var(--secundario)] rounded">
             Cancelar
           </button>
-          <button className="flex items-center justify-center lg:w-[15%] text-sm h-8 bg-[var(--exito-btn)] hover:bg-[#527f18e2] text-[var(--blanco)] font-bold py-2 px-4 border border-[#527f18] rounded">
+          <button
+            className="flex items-center justify-center lg:w-[15%] text-sm h-8 bg-[var(--exito-btn)] hover:bg-[#527f18e2] text-[var(--blanco)] font-bold py-2 px-4 border border-[#527f18] rounded"
+            onClick={handleSubmit}
+          >
             Enviar Solicitud
           </button>
         </div>
-- 
GitLab