Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Tyrannuss
|
525c64dd74 | ||
|
Tyrannuss
|
512e22e78c | ||
 santiago
|
1cc2637b25 |
@@ -1,44 +1,42 @@
|
|||||||
'use client';
|
"use client";
|
||||||
import BotonRegresar from "@/components/boton-regresar";
|
import BotonRegresar from "@/components/boton-regresar";
|
||||||
import CasoEspecialForm from "@/components/casoEspecial/caso-especial-form";
|
import CasoEspecialForm from "@/components/casoEspecial/caso-especial-form";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function Nuevo() {
|
export default function Nuevo() {
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
const imprimirError = (error: unknown) => {
|
const imprimirError = (error: unknown) => {
|
||||||
alert(`Error: ${JSON.stringify(error)}`)
|
alert(`Error: ${JSON.stringify(error)}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const imprimirMensaje = (message: string) => {
|
||||||
|
alert(`${message}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const imprimirWarning = (message: string, onConfirm: () => void) => {
|
||||||
|
if (confirm(`${message}\n¿Desea continuar?`)) {
|
||||||
|
onConfirm();
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const imprimirMensaje = (message: string) => {
|
const updateIsLoading = (value: boolean) => {
|
||||||
alert(`${message}`);
|
setIsLoading(value);
|
||||||
}
|
};
|
||||||
|
|
||||||
const imprimirWarning = (message: string, onConfirm: () => void) => {
|
return (
|
||||||
if (confirm(`${message}\n¿Desea continuar?`)) {
|
<div>
|
||||||
onConfirm();
|
<BotonRegresar />
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateIsLoading = (value: boolean) => {
|
<h2 style={{ marginLeft: "19rem" }}>Agregar un Servicio Social</h2>
|
||||||
setIsLoading(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
<CasoEspecialForm
|
||||||
<div>
|
imprimirError={imprimirError}
|
||||||
<BotonRegresar />
|
imprimirMensaje={imprimirMensaje}
|
||||||
|
imprimirWarning={imprimirWarning}
|
||||||
<h2>Agregar un Servicio Social</h2>
|
updateIsLoading={updateIsLoading}
|
||||||
|
/>
|
||||||
<CasoEspecialForm
|
{/* <CasoEspecialForm /> */}
|
||||||
imprimirError={imprimirError}
|
</div>
|
||||||
imprimirMensaje={imprimirMensaje}
|
);
|
||||||
imprimirWarning={imprimirWarning}
|
|
||||||
updateIsLoading={updateIsLoading}
|
|
||||||
/>
|
|
||||||
{/* <CasoEspecialForm /> */}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
@@ -4,58 +4,90 @@ import React, { useEffect, useState } from "react";
|
|||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import LiberarCasoEspecial from "@/components/casoEspecial/liberacion-caso-especial";
|
import LiberarCasoEspecial from "@/components/casoEspecial/liberacion-caso-especial";
|
||||||
|
|
||||||
type LocalResponsable = { idUsuario?: number; idTipoUsuario?: number; tipoUsuario?: string | null; token?: string };
|
type LocalResponsable = {
|
||||||
|
idUsuario?: number;
|
||||||
|
idTipoUsuario?: number;
|
||||||
|
tipoUsuario?: string | null;
|
||||||
|
token?: string;
|
||||||
|
};
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [responsable, setResponsable] = useState<LocalResponsable>({});
|
const [responsable, setResponsable] = useState<LocalResponsable>({});
|
||||||
|
|
||||||
const getMessageFromUnknown = (err: unknown) => {
|
const getMessageFromUnknown = (err: unknown) => {
|
||||||
if (typeof err === 'string') return err;
|
if (typeof err === "string") return err;
|
||||||
if (err instanceof Error) return err.message;
|
if (err instanceof Error) return err.message;
|
||||||
try { return JSON.stringify(err); } catch (_) { return String(err); }
|
try {
|
||||||
};
|
return JSON.stringify(err);
|
||||||
|
} catch (_) {
|
||||||
|
return String(err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const imprimirError = (err: unknown = {}, title = '¡Hubo un error!', onConfirm: () => void = () => {}) => {
|
const imprimirError = (
|
||||||
const msg = getMessageFromUnknown(err);
|
err: unknown = {},
|
||||||
// eslint-disable-next-line no-alert
|
title = "¡Hubo un error!",
|
||||||
alert(`${title}\n\n${msg}`);
|
onConfirm: () => void = () => {}
|
||||||
onConfirm();
|
) => {
|
||||||
if (typeof err === 'object' && err !== null && (err as { err?: unknown }).err === 'token error') {
|
const msg = getMessageFromUnknown(err);
|
||||||
try { localStorage.clear(); } catch (_) {}
|
// eslint-disable-next-line no-alert
|
||||||
router.push('/');
|
alert(`${title}\n\n${msg}`);
|
||||||
}
|
onConfirm();
|
||||||
};
|
if (
|
||||||
|
typeof err === "object" &&
|
||||||
|
err !== null &&
|
||||||
|
(err as { err?: unknown }).err === "token error"
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
localStorage.clear();
|
||||||
|
} catch (_) {}
|
||||||
|
router.push("/");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const getLocalhostInfo = () => {
|
const getLocalhostInfo = () => {
|
||||||
const idUsuario = Number(localStorage.getItem('idUsuario'));
|
const idUsuario = Number(localStorage.getItem("idUsuario"));
|
||||||
const idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'));
|
const idTipoUsuario = Number(localStorage.getItem("idTipoUsuario"));
|
||||||
const tipoUsuario = localStorage.getItem('tipoUsuario');
|
const tipoUsuario = localStorage.getItem("tipoUsuario");
|
||||||
const token = localStorage.getItem('token') || undefined;
|
const token = localStorage.getItem("token") || undefined;
|
||||||
setResponsable({ idUsuario: Number.isNaN(idUsuario) ? undefined : idUsuario, idTipoUsuario: Number.isNaN(idTipoUsuario) ? undefined : idTipoUsuario, tipoUsuario, token: token ?? undefined });
|
setResponsable({
|
||||||
};
|
idUsuario: Number.isNaN(idUsuario) ? undefined : idUsuario,
|
||||||
|
idTipoUsuario: Number.isNaN(idTipoUsuario) ? undefined : idTipoUsuario,
|
||||||
|
tipoUsuario,
|
||||||
|
token: token ?? undefined,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getLocalhostInfo();
|
getLocalhostInfo();
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (responsable.idTipoUsuario === 1) router.push('/admin');
|
if (responsable.idTipoUsuario === 1) router.push("/admin");
|
||||||
if (responsable.idTipoUsuario === 2) router.push('/responsable');
|
if (responsable.idTipoUsuario === 2) router.push("/responsable");
|
||||||
if (responsable.idTipoUsuario === 3) router.push('/alumno');
|
if (responsable.idTipoUsuario === 3) router.push("/alumno");
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [responsable]);
|
}, [responsable]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="container px-2 pb-6">
|
<section className="container px-2 pb-6">
|
||||||
<div className="pb-5 pt-6 mt-5 mb-4 border-b border-gray-200">
|
<div className="pb-5 pt-6 mt-5 mb-4 border-b border-gray-200">
|
||||||
<button onClick={() => router.push('/casoEspecial/nuevo')}>Nuevo Caso Especial</button>
|
<button onClick={() => router.push("/casoEspecial/nuevo")}>
|
||||||
</div>
|
Nuevo Caso Especial
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{responsable.idTipoUsuario !== undefined && responsable.token ? (
|
{responsable.idTipoUsuario !== undefined && responsable.token ? (
|
||||||
<LiberarCasoEspecial responsable={{ idTipoUsuario: responsable.idTipoUsuario!, token: responsable.token! }} imprimirError={(msg: string) => imprimirError(msg)} />
|
<LiberarCasoEspecial
|
||||||
) : null}
|
responsable={{
|
||||||
</section>
|
idTipoUsuario: responsable.idTipoUsuario!,
|
||||||
);
|
token: responsable.token!,
|
||||||
|
}}
|
||||||
|
imprimirError={(msg: string) => imprimirError(msg)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+93
-69
@@ -1,85 +1,109 @@
|
|||||||
'use client'
|
"use client";
|
||||||
import { axiosInstance } from "@/api/config";
|
import { axiosInstance } from "@/api/config";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const handleOnSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
const handleOnSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const formData = new FormData(e.currentTarget);
|
const formData = new FormData(e.currentTarget);
|
||||||
const object = Object.fromEntries(formData);
|
const object = Object.fromEntries(formData);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await axiosInstance.post('/usuario/login', object);
|
const res = await axiosInstance.post("/usuario/login", object);
|
||||||
|
|
||||||
// Extraer datos del backend
|
// Extraer datos del backend
|
||||||
const token = res?.data?.token ?? '';
|
const token = res?.data?.token ?? "";
|
||||||
const usuarioObj = res?.data?.Usuario ?? res?.data ?? {};
|
const usuarioObj = res?.data?.Usuario ?? res?.data ?? {};
|
||||||
const idUsuario = usuarioObj.idUsuario ?? '';
|
const idUsuario = usuarioObj.idUsuario ?? "";
|
||||||
const usuario = usuarioObj.usuario ?? '';
|
const usuario = usuarioObj.usuario ?? "";
|
||||||
const nombre = usuarioObj.nombre ?? '';
|
const nombre = usuarioObj.nombre ?? "";
|
||||||
const idTipoUsuario = Number(usuarioObj.TipoUsuario?.idTipoUsuario ?? 0);
|
const idTipoUsuario = Number(usuarioObj.TipoUsuario?.idTipoUsuario ?? 0);
|
||||||
//const idTipoUsuario = Number((usuarioObj as any).TipoUsuario?.idTipoUsuario ?? 0);
|
//const idTipoUsuario = Number((usuarioObj as any).TipoUsuario?.idTipoUsuario ?? 0);
|
||||||
|
|
||||||
|
// Guardar en localStorage
|
||||||
|
localStorage.setItem("token", String(token));
|
||||||
|
localStorage.setItem("idUsuario", String(idUsuario));
|
||||||
|
localStorage.setItem("usuario", String(usuario));
|
||||||
|
localStorage.setItem("nombre", String(nombre));
|
||||||
|
localStorage.setItem("idTipoUsuario", String(idTipoUsuario));
|
||||||
|
|
||||||
// Guardar en localStorage
|
// Validar y redirigir según el idTipoUsuario
|
||||||
localStorage.setItem('token', String(token));
|
if (token && idUsuario && idTipoUsuario) {
|
||||||
localStorage.setItem('idUsuario', String(idUsuario));
|
switch (idTipoUsuario) {
|
||||||
localStorage.setItem('usuario', String(usuario));
|
case 1:
|
||||||
localStorage.setItem('nombre', String(nombre));
|
router.push("/administrador");
|
||||||
localStorage.setItem('idTipoUsuario', String(idTipoUsuario));
|
break;
|
||||||
|
case 2:
|
||||||
// Validar y redirigir según el idTipoUsuario
|
router.push("/responsable");
|
||||||
if (token && idUsuario && idTipoUsuario) {
|
break;
|
||||||
switch (idTipoUsuario) {
|
case 3:
|
||||||
case 1:
|
router.push("/alumno");
|
||||||
router.push('/administrador');
|
break;
|
||||||
break;
|
case 4:
|
||||||
case 2:
|
router.push("/casoEspecial");
|
||||||
router.push('/responsable');
|
break;
|
||||||
break;
|
default:
|
||||||
case 3:
|
console.warn(`Tipo de usuario desconocido: ${idTipoUsuario}`);
|
||||||
router.push('/alumno');
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
router.push('/casoEspecial');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.warn(`Tipo de usuario desconocido: ${idTipoUsuario}`);
|
|
||||||
localStorage.clear();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
localStorage.clear();
|
|
||||||
console.error('Error: datos de usuario incompletos');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error en el inicio de sesión:', error);
|
|
||||||
localStorage.clear();
|
localStorage.clear();
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
};
|
} else {
|
||||||
|
localStorage.clear();
|
||||||
|
console.error("Error: datos de usuario incompletos");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error en el inicio de sesión:", error);
|
||||||
|
localStorage.clear();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="d-flex justify-content-center align-items-center bg-light" style={{ minHeight: 'calc(100vh - 200px)' }}>
|
<div
|
||||||
<form className="p-4 shadow rounded bg-white w-100" style={{ maxWidth: '400px' }} onSubmit={handleOnSubmit}>
|
className="d-flex justify-content-center align-items-center bg-light"
|
||||||
<h2 className="text-center mb-4 fw-bold">IRIS</h2>
|
style={{ minHeight: "calc(100vh - 200px)" }}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
className="p-4 shadow rounded bg-white w-100"
|
||||||
|
style={{ maxWidth: "400px" }}
|
||||||
|
onSubmit={handleOnSubmit}
|
||||||
|
>
|
||||||
|
<h2 className="text-center mb-4 fw-bold">IRIS</h2>
|
||||||
|
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<label htmlFor="usuario" className="form-label">Usuario</label>
|
<label htmlFor="usuario" className="form-label">
|
||||||
<input type="text" name="usuario" id="usuario" className="form-control" required />
|
Usuario
|
||||||
</div>
|
</label>
|
||||||
|
<input
|
||||||
<div className="mb-4">
|
type="text"
|
||||||
<label htmlFor="password" className="form-label">Contraseña</label>
|
name="usuario"
|
||||||
<input type="password" name="password" id="password" className="form-control" required />
|
id="usuario"
|
||||||
</div>
|
className="form-control"
|
||||||
|
required
|
||||||
<div className="d-grid">
|
/>
|
||||||
<button type="submit" className="btn btn-primary btn-lg">Iniciar Sesión</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<label htmlFor="password" className="form-label">
|
||||||
|
Contraseña
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
id="password"
|
||||||
|
className="form-control"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-grid">
|
||||||
|
<button type="submit" className="btn btn-primary btn-lg">
|
||||||
|
Iniciar Sesión
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -99,6 +99,12 @@ export default function TablaServicioSocial({ admin, imprimirError }: Props) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
|
export default function TablaServicioSocial() {
|
||||||
|
|
||||||
|
|
||||||
|
=======
|
||||||
|
>>>>>>> origin/develop
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<div className="columns">
|
<div className="columns">
|
||||||
|
|||||||
@@ -1,22 +1,23 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import React from "react"
|
import React from "react";
|
||||||
|
|
||||||
const BotonRegresar: React.FC = () => {
|
const BotonRegresar: React.FC = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const handleGoBack = () => {
|
const handleGoBack = () => {
|
||||||
//window.history.back();
|
//window.history.back();
|
||||||
router.back();
|
router.back();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ marginLeft: "19rem" }} className="pb-5 pt-3">
|
||||||
|
<button onClick={handleGoBack} className="btn-outline-primary">
|
||||||
|
Regresar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
export default BotonRegresar;
|
||||||
<div className="pb-5 pt-3">
|
|
||||||
<button onClick={handleGoBack} className="btn-outline-primary">Regresar</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BotonRegresar
|
|
||||||
|
|||||||
@@ -1,460 +1,491 @@
|
|||||||
'use client';
|
"use client";
|
||||||
|
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from "react";
|
||||||
import { axiosInstance } from '@/api/config';
|
import { axiosInstance } from "@/api/config";
|
||||||
import moment from 'moment';
|
import moment from "moment";
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||||||
import { Col, FormGroup, FormLabel, InputGroup } from 'react-bootstrap';
|
import { Col, FormGroup, FormLabel, InputGroup } from "react-bootstrap";
|
||||||
import { FaRegCalendarAlt, FaUpload } from 'react-icons/fa';
|
import { FaRegCalendarAlt, FaUpload } from "react-icons/fa";
|
||||||
import DatePicker from 'react-datepicker';
|
import DatePicker from "react-datepicker";
|
||||||
import BotonRegresar from '../boton-regresar';
|
import BotonRegresar from "../boton-regresar";
|
||||||
|
|
||||||
// 🔹 Tipos estrictos
|
// 🔹 Tipos estrictos
|
||||||
interface Alumno {
|
interface Alumno {
|
||||||
idUsuario?: number;
|
idUsuario?: number;
|
||||||
idCarrera?: number;
|
idCarrera?: number;
|
||||||
nombre?: string;
|
nombre?: string;
|
||||||
carrera?: string;
|
carrera?: string;
|
||||||
creditos?: string;
|
creditos?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Responsable {
|
interface Responsable {
|
||||||
//token: { headers: Record<string, string> };
|
//token: { headers: Record<string, string> };
|
||||||
tokenArchivo: { headers: Record<string, string> };
|
tokenArchivo: { headers: Record<string, string> };
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
//responsable: Responsable;
|
//responsable: Responsable;
|
||||||
imprimirError: (msg: { message: string }) => void;
|
imprimirError: (msg: { message: string }) => void;
|
||||||
imprimirMensaje: (msg: string) => void;
|
imprimirMensaje: (msg: string) => void;
|
||||||
imprimirWarning: (msg: string, callback: () => void) => void;
|
imprimirWarning: (msg: string, callback: () => void) => void;
|
||||||
updateIsLoading: (value: boolean) => void;
|
updateIsLoading: (value: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function CasoEspecialForm({
|
export default function CasoEspecialForm({
|
||||||
//responsable,
|
//responsable,
|
||||||
imprimirError,
|
imprimirError,
|
||||||
imprimirMensaje,
|
imprimirMensaje,
|
||||||
imprimirWarning,
|
imprimirWarning,
|
||||||
updateIsLoading,
|
updateIsLoading,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
// 🔹 Estados del formulario
|
// 🔹 Estados del formulario
|
||||||
const [dependencia, setDependencia] = useState('');
|
const [dependencia, setDependencia] = useState("");
|
||||||
const [direccion, setDireccion] = useState('');
|
const [direccion, setDireccion] = useState("");
|
||||||
const [correo, setCorreo] = useState('');
|
const [correo, setCorreo] = useState("");
|
||||||
const [idStatus, setIdStatus] = useState('');
|
const [idStatus, setIdStatus] = useState("");
|
||||||
const [institucion, setInstitucion] = useState('');
|
const [institucion, setInstitucion] = useState("");
|
||||||
const [motivo, setMotivo] = useState('');
|
const [motivo, setMotivo] = useState("");
|
||||||
const [numeroCuenta, setNumeroCuenta] = useState('');
|
const [numeroCuenta, setNumeroCuenta] = useState("");
|
||||||
const [telefono, setTelefono] = useState('');
|
const [telefono, setTelefono] = useState("");
|
||||||
const [alumno, setAlumno] = useState<Alumno>({});
|
const [alumno, setAlumno] = useState<Alumno>({});
|
||||||
const [fechaInicio, setFechaInicio] = useState<Date>(new Date());
|
const [fechaInicio, setFechaInicio] = useState<Date>(new Date());
|
||||||
const [fechaFin, setFechaFin] = useState<Date>(new Date());
|
const [fechaFin, setFechaFin] = useState<Date>(new Date());
|
||||||
const [fechaNacimiento, setFechaNacimiento] = useState<Date>(new Date());
|
const [fechaNacimiento, setFechaNacimiento] = useState<Date>(new Date());
|
||||||
const [file, setFile] = useState<File | null>(null);
|
const [file, setFile] = useState<File | null>(null);
|
||||||
const [minDate, setMinDate] = useState<Date>(new Date('2020-01-02'));
|
const [minDate, setMinDate] = useState<Date>(new Date("2020-01-02"));
|
||||||
const [minDate2, setMinDate2] = useState<Date>(new Date());
|
const [minDate2, setMinDate2] = useState<Date>(new Date());
|
||||||
|
const handleFechaInicioChange = (date: Date | null) => {
|
||||||
|
setFechaInicio(date || new Date());
|
||||||
|
};
|
||||||
|
const handleFechaFinChange = (date: Date | null) => {
|
||||||
|
setFechaFin(date || new Date());
|
||||||
|
};
|
||||||
|
const handleFechaNacimientoChange = (date: Date | null) => {
|
||||||
|
setFechaNacimiento(date || new Date());
|
||||||
|
};
|
||||||
|
// Función para resetear campos
|
||||||
|
const resetear = (): void => {
|
||||||
|
setDependencia("");
|
||||||
|
setDireccion("");
|
||||||
|
setCorreo("");
|
||||||
|
setIdStatus("");
|
||||||
|
setInstitucion("");
|
||||||
|
setMotivo("");
|
||||||
|
setTelefono("");
|
||||||
|
setAlumno({});
|
||||||
|
setFechaInicio(new Date());
|
||||||
|
setFechaFin(new Date());
|
||||||
|
setFechaNacimiento(new Date());
|
||||||
|
setFile(null);
|
||||||
|
};
|
||||||
|
|
||||||
// Función para resetear campos
|
// Validar extensión
|
||||||
const resetear = (): void => {
|
const validarExtencion = (archivo: File): void => {
|
||||||
setDependencia('');
|
const permitidas = [/.zip$/i, /.rar$/i];
|
||||||
setDireccion('');
|
const esValida = permitidas.some((regex) => regex.test(archivo.name));
|
||||||
setCorreo('');
|
if (!esValida) {
|
||||||
setIdStatus('');
|
setFile(null);
|
||||||
setInstitucion('');
|
imprimirError({
|
||||||
setMotivo('');
|
message:
|
||||||
setTelefono('');
|
"Asegúrate de ingresar un archivo con la extensión correcta (.zip o .rar).",
|
||||||
setAlumno({});
|
});
|
||||||
setFechaInicio(new Date());
|
}
|
||||||
setFechaFin(new Date());
|
};
|
||||||
setFechaNacimiento(new Date());
|
|
||||||
setFile(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Validar extensión
|
// Mostrar/ocultar botón de enviar
|
||||||
const validarExtencion = (archivo: File): void => {
|
const mostrarBoton = (): boolean => {
|
||||||
const permitidas = [/.zip$/i, /.rar$/i];
|
|
||||||
const esValida = permitidas.some((regex) => regex.test(archivo.name));
|
|
||||||
if (!esValida) {
|
|
||||||
setFile(null);
|
|
||||||
imprimirError({
|
|
||||||
message: 'Asegúrate de ingresar un archivo con la extensión correcta (.zip o .rar).',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Mostrar/ocultar botón de enviar
|
|
||||||
const mostrarBoton = (): boolean => {
|
|
||||||
return (
|
|
||||||
!alumno.idUsuario ||
|
|
||||||
!telefono ||
|
|
||||||
!direccion ||
|
|
||||||
!correo ||
|
|
||||||
!idStatus ||
|
|
||||||
(idStatus === '11' && !motivo) ||
|
|
||||||
(idStatus === '12' && (!dependencia || !institucion)) ||
|
|
||||||
!file
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Buscar alumno
|
|
||||||
const buscarAlumno = async (): Promise<void> => {
|
|
||||||
try {
|
|
||||||
updateIsLoading(true);
|
|
||||||
const res = await axiosInstance.get(`/usuario/escolares?numeroCuenta=${numeroCuenta}`);
|
|
||||||
resetear();
|
|
||||||
setAlumno(res.data);
|
|
||||||
} catch (err: unknown) {
|
|
||||||
resetear();
|
|
||||||
setNumeroCuenta('');
|
|
||||||
let msg = { message: 'Error al buscar alumno.' };
|
|
||||||
if (typeof err === 'object' && err !== null && 'response' in err) {
|
|
||||||
const anyErr = err as { response?: { data?: { message?: unknown } } };
|
|
||||||
const m = anyErr.response?.data as { message?: unknown } | undefined;
|
|
||||||
msg = { message: m?.message ? String(m.message) : msg.message };
|
|
||||||
} else if (err instanceof Error) msg = { message: err.message };
|
|
||||||
imprimirError(msg);
|
|
||||||
} finally {
|
|
||||||
updateIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Enviar formulario
|
|
||||||
const enviar = async (): Promise<void> => {
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
const data = {
|
|
||||||
idUsuario: alumno.idUsuario,
|
|
||||||
idCarrera: alumno.idCarrera,
|
|
||||||
idStatus,
|
|
||||||
numeroCuenta,
|
|
||||||
creditos: alumno.creditos,
|
|
||||||
correo,
|
|
||||||
fechaInicio: moment(fechaInicio),
|
|
||||||
fechaFin: moment(fechaFin),
|
|
||||||
fechaNacimiento: moment(fechaNacimiento),
|
|
||||||
direccion,
|
|
||||||
telefono,
|
|
||||||
institucion,
|
|
||||||
dependencia,
|
|
||||||
motivo,
|
|
||||||
};
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('alumno', JSON.stringify(data));
|
|
||||||
formData.append('archivos', file);
|
|
||||||
|
|
||||||
try {
|
|
||||||
updateIsLoading(true);
|
|
||||||
const res = await axiosInstance.post(`/caso_especial/nuevo`, formData);
|
|
||||||
resetear();
|
|
||||||
setNumeroCuenta('');
|
|
||||||
imprimirMensaje(res.data.message);
|
|
||||||
} catch (err: unknown) {
|
|
||||||
let msg: { message: string } = { message: 'Error al enviar formulario.' };
|
|
||||||
if (typeof err === 'object' && err !== null && 'response' in err) {
|
|
||||||
const anyErr = err as { response?: { data?: unknown } };
|
|
||||||
if (anyErr.response && typeof anyErr.response.data === 'object' && anyErr.response.data !== null) {
|
|
||||||
const d = anyErr.response.data as { message?: unknown } | unknown;
|
|
||||||
if (d && typeof d === 'object' && 'message' in d && typeof (d as { message?: unknown }).message === 'string') {
|
|
||||||
msg = { message: (d as { message?: unknown }).message as string };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (err instanceof Error) {
|
|
||||||
msg = { message: err.message };
|
|
||||||
}
|
|
||||||
imprimirError(msg);
|
|
||||||
} finally {
|
|
||||||
updateIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar fechas automáticamente
|
|
||||||
const updateFechas = (): void => {
|
|
||||||
const nuevaFin = new Date(
|
|
||||||
fechaInicio.getFullYear(),
|
|
||||||
fechaInicio.getMonth() + 6,
|
|
||||||
fechaInicio.getDate()
|
|
||||||
);
|
|
||||||
setFechaFin(nuevaFin);
|
|
||||||
setMinDate2(nuevaFin);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Efectos (equivalentes a watch)
|
|
||||||
useEffect(() => {
|
|
||||||
setMotivo('');
|
|
||||||
setInstitucion('');
|
|
||||||
setDependencia('');
|
|
||||||
}, [idStatus]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (file && file.size >= 20_000_000) {
|
|
||||||
imprimirError({ message: 'El tamaño del archivo excede los 20MB.' });
|
|
||||||
setFile(null);
|
|
||||||
} else if (file) {
|
|
||||||
validarExtencion(file);
|
|
||||||
}
|
|
||||||
}, [file]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
updateFechas();
|
|
||||||
}, [fechaInicio]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const min = new Date('2020-01-02');
|
|
||||||
min.setDate(min.getDate() - 1);
|
|
||||||
setMinDate(min);
|
|
||||||
updateFechas();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
|
||||||
{/* Validaciones del cuestionario */}
|
|
||||||
|
|
||||||
|
|
||||||
// Render
|
|
||||||
return (
|
return (
|
||||||
<div className="container mt-4">
|
!alumno.idUsuario ||
|
||||||
<div className="mb-3">
|
!telefono ||
|
||||||
<label className="form-label">Número de Cuenta</label>
|
!direccion ||
|
||||||
<div className="input-group">
|
!correo ||
|
||||||
<input
|
!idStatus ||
|
||||||
type="text"
|
(idStatus === "11" && !motivo) ||
|
||||||
className="form-control"
|
(idStatus === "12" && (!dependencia || !institucion)) ||
|
||||||
placeholder="Número de Cuenta"
|
!file
|
||||||
maxLength={9}
|
);
|
||||||
value={numeroCuenta}
|
};
|
||||||
onChange={(e) => setNumeroCuenta(e.target.value)}
|
|
||||||
onKeyDown={(e) => e.key === 'Enter' && buscarAlumno()}
|
|
||||||
/>
|
|
||||||
<button className="btn btn-info text-white" onClick={buscarAlumno}>
|
|
||||||
Buscar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-3">
|
// Buscar alumno
|
||||||
<label className="form-label">Nombre</label>
|
const buscarAlumno = async (): Promise<void> => {
|
||||||
<p className="form-control">{alumno.nombre || ''}</p>
|
try {
|
||||||
</div>
|
updateIsLoading(true);
|
||||||
|
const res = await axiosInstance.get(
|
||||||
|
`/usuario/escolares?numeroCuenta=${numeroCuenta}`
|
||||||
|
);
|
||||||
|
resetear();
|
||||||
|
setAlumno(res.data);
|
||||||
|
} catch (err: unknown) {
|
||||||
|
resetear();
|
||||||
|
setNumeroCuenta("");
|
||||||
|
let msg = { message: "Error al buscar alumno." };
|
||||||
|
if (typeof err === "object" && err !== null && "response" in err) {
|
||||||
|
const anyErr = err as { response?: { data?: { message?: unknown } } };
|
||||||
|
const m = anyErr.response?.data as { message?: unknown } | undefined;
|
||||||
|
msg = { message: m?.message ? String(m.message) : msg.message };
|
||||||
|
} else if (err instanceof Error) msg = { message: err.message };
|
||||||
|
imprimirError(msg);
|
||||||
|
} finally {
|
||||||
|
updateIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
<div className="mb-3">
|
// Enviar formulario
|
||||||
<label className="form-label">Carrera</label>
|
const enviar = async (): Promise<void> => {
|
||||||
<p className="form-control">{alumno.carrera || ''}</p>
|
if (!file) return;
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-3">
|
const data = {
|
||||||
<label className="form-label">Créditos</label>
|
idUsuario: alumno.idUsuario,
|
||||||
<p className="form-control">
|
idCarrera: alumno.idCarrera,
|
||||||
{alumno.creditos ? parseInt(alumno.creditos) : ''}{' '}
|
idStatus,
|
||||||
{alumno.creditos ? '%' : ''}
|
numeroCuenta,
|
||||||
</p>
|
creditos: alumno.creditos,
|
||||||
</div>
|
correo,
|
||||||
|
fechaInicio: moment(fechaInicio),
|
||||||
|
fechaFin: moment(fechaFin),
|
||||||
|
fechaNacimiento: moment(fechaNacimiento),
|
||||||
|
direccion,
|
||||||
|
telefono,
|
||||||
|
institucion,
|
||||||
|
dependencia,
|
||||||
|
motivo,
|
||||||
|
};
|
||||||
|
|
||||||
<div className="mb-3">
|
const formData = new FormData();
|
||||||
<label className="form-label">Dirección</label>
|
formData.append("alumno", JSON.stringify(data));
|
||||||
<input
|
formData.append("archivos", file);
|
||||||
|
|
||||||
|
try {
|
||||||
|
updateIsLoading(true);
|
||||||
|
const res = await axiosInstance.post(`/caso_especial/nuevo`, formData);
|
||||||
|
resetear();
|
||||||
|
setNumeroCuenta("");
|
||||||
|
imprimirMensaje(res.data.message);
|
||||||
|
} catch (err: unknown) {
|
||||||
|
let msg: { message: string } = { message: "Error al enviar formulario." };
|
||||||
|
if (typeof err === "object" && err !== null && "response" in err) {
|
||||||
|
const anyErr = err as { response?: { data?: unknown } };
|
||||||
|
if (
|
||||||
|
anyErr.response &&
|
||||||
|
typeof anyErr.response.data === "object" &&
|
||||||
|
anyErr.response.data !== null
|
||||||
|
) {
|
||||||
|
const d = anyErr.response.data as { message?: unknown } | unknown;
|
||||||
|
if (
|
||||||
|
d &&
|
||||||
|
typeof d === "object" &&
|
||||||
|
"message" in d &&
|
||||||
|
typeof (d as { message?: unknown }).message === "string"
|
||||||
|
) {
|
||||||
|
msg = { message: (d as { message?: unknown }).message as string };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (err instanceof Error) {
|
||||||
|
msg = { message: err.message };
|
||||||
|
}
|
||||||
|
imprimirError(msg);
|
||||||
|
} finally {
|
||||||
|
updateIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Actualizar fechas automáticamente
|
||||||
|
const updateFechas = (): void => {
|
||||||
|
const nuevaFin = new Date(
|
||||||
|
fechaInicio.getFullYear(),
|
||||||
|
fechaInicio.getMonth() + 6,
|
||||||
|
fechaInicio.getDate()
|
||||||
|
);
|
||||||
|
setFechaFin(nuevaFin);
|
||||||
|
setMinDate2(nuevaFin);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Efectos (equivalentes a watch)
|
||||||
|
useEffect(() => {
|
||||||
|
setMotivo("");
|
||||||
|
setInstitucion("");
|
||||||
|
setDependencia("");
|
||||||
|
}, [idStatus]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (file && file.size >= 20_000_000) {
|
||||||
|
imprimirError({ message: "El tamaño del archivo excede los 20MB." });
|
||||||
|
setFile(null);
|
||||||
|
} else if (file) {
|
||||||
|
validarExtencion(file);
|
||||||
|
}
|
||||||
|
}, [file]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
updateFechas();
|
||||||
|
}, [fechaInicio]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const min = new Date("2020-01-02");
|
||||||
|
min.setDate(min.getDate() - 1);
|
||||||
|
setMinDate(min);
|
||||||
|
updateFechas();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
{
|
||||||
|
/* Validaciones del cuestionario */
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render
|
||||||
|
return (
|
||||||
|
<div className="container mt-4">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Número de Cuenta</label>
|
||||||
|
<div className="input-group">
|
||||||
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
maxLength={200}
|
placeholder="Número de Cuenta"
|
||||||
value={direccion}
|
maxLength={9}
|
||||||
onChange={(e) => setDireccion(e.target.value)}
|
value={numeroCuenta}
|
||||||
/>
|
onChange={(e) => setNumeroCuenta(e.target.value)}
|
||||||
|
onKeyDown={(e) => e.key === "Enter" && buscarAlumno()}
|
||||||
|
/>
|
||||||
|
<button className="btn btn-info text-white" onClick={buscarAlumno}>
|
||||||
|
Buscar
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<label className="form-label">Teléfono</label>
|
<label className="form-label">Nombre</label>
|
||||||
<input
|
<p className="form-control" style={{ padding: "1rem 1rem" }}>
|
||||||
type="tel"
|
{alumno.nombre || ""}
|
||||||
className="form-control"
|
</p>
|
||||||
maxLength={10}
|
</div>
|
||||||
value={telefono}
|
|
||||||
onChange={(e) => setTelefono(e.target.value)}
|
<div className="mb-3">
|
||||||
/>
|
<label className="form-label">Carrera</label>
|
||||||
</div>
|
<p className="form-control" style={{ padding: "1rem 1rem" }}>
|
||||||
|
{alumno.carrera || ""}
|
||||||
<div className="mb-3">
|
</p>
|
||||||
<label className="form-label">Correo electrónico</label>
|
</div>
|
||||||
<input
|
|
||||||
type="email"
|
<div className="mb-3">
|
||||||
className="form-control"
|
<label className="form-label">Créditos</label>
|
||||||
value={correo}
|
<p className="form-control" style={{ padding: "1rem 1rem" }}>
|
||||||
onChange={(e) => setCorreo(e.target.value)}
|
{alumno.creditos ? parseInt(alumno.creditos) : ""}{" "}
|
||||||
/>
|
{alumno.creditos ? "%" : ""}
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
<Col>
|
|
||||||
<FormGroup>
|
<div className="mb-3">
|
||||||
<FormLabel>Fecha de inicio</FormLabel>
|
<label className="form-label">Dirección</label>
|
||||||
<InputGroup>
|
<input
|
||||||
<InputGroup.Text>
|
type="text"
|
||||||
<FaRegCalendarAlt />
|
className="form-control"
|
||||||
</InputGroup.Text>
|
maxLength={200}
|
||||||
|
value={direccion}
|
||||||
<DatePicker
|
onChange={(e) => setDireccion(e.target.value)}
|
||||||
selected={fechaInicio}
|
/>
|
||||||
minDate={minDate}
|
</div>
|
||||||
dateFormat="dd-MM-yyyy"
|
|
||||||
className="form-control"
|
<div className="mb-3">
|
||||||
wrapperClassName="flex-grow-1"
|
<label className="form-label">Teléfono</label>
|
||||||
calendarClassName="mi-calendario"
|
<input
|
||||||
/>
|
type="tel"
|
||||||
</InputGroup>
|
className="form-control"
|
||||||
</FormGroup>
|
maxLength={10}
|
||||||
</Col>
|
value={telefono}
|
||||||
|
onChange={(e) => setTelefono(e.target.value)}
|
||||||
<Col>
|
/>
|
||||||
<FormGroup>
|
</div>
|
||||||
<FormLabel>Fecha de fin</FormLabel>
|
|
||||||
<InputGroup>
|
<div className="mb-3">
|
||||||
<InputGroup.Text>
|
<label className="form-label">Correo electrónico</label>
|
||||||
<FaRegCalendarAlt />
|
<input
|
||||||
</InputGroup.Text>
|
type="email"
|
||||||
|
className="form-control"
|
||||||
<DatePicker
|
value={correo}
|
||||||
selected={fechaFin}
|
onChange={(e) => setCorreo(e.target.value)}
|
||||||
value={fechaFin.toISOString().substring(0,10)}
|
/>
|
||||||
minDate={minDate2}
|
</div>
|
||||||
dateFormat="dd-MM-yyyy"
|
|
||||||
className="form-control"
|
<Col>
|
||||||
wrapperClassName="flex-grow-1"
|
<FormGroup>
|
||||||
calendarClassName="mi-calendario"
|
<FormLabel>Fecha de inicio</FormLabel>
|
||||||
/>
|
<InputGroup>
|
||||||
</InputGroup>
|
<InputGroup.Text>
|
||||||
</FormGroup>
|
<FaRegCalendarAlt />
|
||||||
</Col>
|
</InputGroup.Text>
|
||||||
|
|
||||||
<Col>
|
<DatePicker
|
||||||
<FormGroup>
|
selected={fechaInicio}
|
||||||
<FormLabel>Fecha de nacimiento</FormLabel>
|
onChange={handleFechaInicioChange}
|
||||||
<InputGroup>
|
minDate={minDate}
|
||||||
<InputGroup.Text>
|
dateFormat="yyyy-MM-dd"
|
||||||
<FaRegCalendarAlt />
|
className="form-control"
|
||||||
</InputGroup.Text>
|
wrapperClassName="flex-grow-1"
|
||||||
|
calendarClassName="mi-calendario"
|
||||||
<DatePicker
|
|
||||||
selected={fechaNacimiento}
|
|
||||||
maxDate={new Date()}
|
|
||||||
dateFormat="dd-MM-yyyy"
|
|
||||||
className="form-control"
|
|
||||||
wrapperClassName="flex-grow-1"
|
|
||||||
calendarClassName="mi-calendario"
|
|
||||||
/>
|
|
||||||
</InputGroup>
|
|
||||||
</FormGroup>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Fecha de inicio</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
className="form-control"
|
|
||||||
value={fechaInicio.toISOString().substring(0, 10)}
|
|
||||||
onChange={(e) => setFechaInicio(new Date(e.target.value))}
|
|
||||||
min={minDate.toISOString().substring(0, 10)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{fechaInicio && (
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Fecha de fin</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
className="form-control"
|
|
||||||
value={fechaFin.toISOString().substring(0, 10)}
|
|
||||||
onChange={(e) => setFechaFin(new Date(e.target.value))}
|
|
||||||
min={minDate2.toISOString().substring(0, 10)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Fecha de nacimiento</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
className="form-control"
|
|
||||||
max={new Date().toISOString().substring(0, 10)}
|
|
||||||
value={fechaNacimiento.toISOString().substring(0, 10)}
|
|
||||||
onChange={(e) => setFechaNacimiento(new Date(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Artículo</label>
|
|
||||||
<select
|
|
||||||
className="form-select"
|
|
||||||
value={idStatus}
|
|
||||||
onChange={(e) => setIdStatus(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="">Selecciona una opción</option>
|
|
||||||
<option value="11">Artículo 52</option>
|
|
||||||
<option value="12">Artículo 91</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{idStatus === '11' && (
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Motivo</label>
|
|
||||||
<select
|
|
||||||
className="form-select"
|
|
||||||
value={motivo}
|
|
||||||
onChange={(e) => setMotivo(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="">Selecciona una opción</option>
|
|
||||||
<option value="1">Tercera edad</option>
|
|
||||||
<option value="2">Capacidades diferentes</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{idStatus === '12' && (
|
|
||||||
<>
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Institución</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
maxLength={250}
|
|
||||||
value={institucion}
|
|
||||||
onChange={(e) => setInstitucion(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Dependencia</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
maxLength={250}
|
|
||||||
value={dependencia}
|
|
||||||
onChange={(e) => setDependencia(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<FormGroup className='mb-3'>
|
|
||||||
<FormLabel>Archivo (.zip, .rar)</FormLabel>
|
|
||||||
<div
|
|
||||||
className='border p-4 text-center rounded'
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
onClick={() => document.getElementById('fileInput')?.click()}
|
|
||||||
>
|
|
||||||
<FaUpload size={40} className='mb-2'/>
|
|
||||||
<p className='mb-1'>
|
|
||||||
{file?.name || 'Arrastra aquí tu archivo o da click aquí para buscar'}
|
|
||||||
</p>
|
|
||||||
<p className='is-size-6'>Tmaño máximo 20MB</p>
|
|
||||||
<p className='is-size-6'>Si al momento de elegir un archivo este no se selecciona, haga click en cancelar en la ventana emergente e intente de nuevo.</p>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
id='fileInput'
|
|
||||||
type="file"
|
|
||||||
style={{ display: 'none'}}
|
|
||||||
onChange={e => setFile(e.target.files ? e.target.files[0] : null)}
|
|
||||||
/>
|
/>
|
||||||
|
</InputGroup>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
</Col>
|
||||||
|
|
||||||
{/*
|
<Col>
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Fecha de fin</FormLabel>
|
||||||
|
<InputGroup>
|
||||||
|
<InputGroup.Text>
|
||||||
|
<FaRegCalendarAlt />
|
||||||
|
</InputGroup.Text>
|
||||||
|
|
||||||
|
<DatePicker
|
||||||
|
selected={fechaFin}
|
||||||
|
onChange={handleFechaFinChange}
|
||||||
|
value={fechaFin.toISOString().substring(0, 10)}
|
||||||
|
minDate={minDate2}
|
||||||
|
dateFormat="yyyy-MM-dd"
|
||||||
|
className="form-control"
|
||||||
|
wrapperClassName="flex-grow-1"
|
||||||
|
calendarClassName="mi-calendario"
|
||||||
|
/>
|
||||||
|
</InputGroup>
|
||||||
|
</FormGroup>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col>
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Fecha de nacimiento</FormLabel>
|
||||||
|
<InputGroup>
|
||||||
|
<InputGroup.Text>
|
||||||
|
<FaRegCalendarAlt />
|
||||||
|
</InputGroup.Text>
|
||||||
|
|
||||||
|
<DatePicker
|
||||||
|
selected={fechaNacimiento}
|
||||||
|
maxDate={new Date()}
|
||||||
|
onChange={handleFechaNacimientoChange}
|
||||||
|
dateFormat="yyyy-MM-dd"
|
||||||
|
className="form-control"
|
||||||
|
wrapperClassName="flex-grow-1"
|
||||||
|
calendarClassName="mi-calendario"
|
||||||
|
/>
|
||||||
|
</InputGroup>
|
||||||
|
</FormGroup>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Fecha de inicio</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
className="form-control"
|
||||||
|
value={fechaInicio.toISOString().substring(0, 10)}
|
||||||
|
onChange={(e) => setFechaInicio(new Date(e.target.value))}
|
||||||
|
min={minDate.toISOString().substring(0, 10)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{fechaInicio && (
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Fecha de fin</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
className="form-control"
|
||||||
|
value={fechaFin.toISOString().substring(0, 10)}
|
||||||
|
onChange={(e) => setFechaFin(new Date(e.target.value))}
|
||||||
|
min={minDate2.toISOString().substring(0, 10)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Fecha de nacimiento</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
className="form-control"
|
||||||
|
max={new Date().toISOString().substring(0, 10)}
|
||||||
|
value={fechaNacimiento.toISOString().substring(0, 10)}
|
||||||
|
onChange={(e) => setFechaNacimiento(new Date(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Artículo</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={idStatus}
|
||||||
|
onChange={(e) => setIdStatus(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">Selecciona una opción</option>
|
||||||
|
<option value="11">Artículo 52</option>
|
||||||
|
<option value="12">Artículo 91</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{idStatus === "11" && (
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Motivo</label>
|
||||||
|
<select
|
||||||
|
className="form-select"
|
||||||
|
value={motivo}
|
||||||
|
onChange={(e) => setMotivo(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">Selecciona una opción</option>
|
||||||
|
<option value="1">Tercera edad</option>
|
||||||
|
<option value="2">Capacidades diferentes</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{idStatus === "12" && (
|
||||||
|
<>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Institución</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
maxLength={250}
|
||||||
|
value={institucion}
|
||||||
|
onChange={(e) => setInstitucion(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Dependencia</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
maxLength={250}
|
||||||
|
value={dependencia}
|
||||||
|
onChange={(e) => setDependencia(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormGroup className="mb-3">
|
||||||
|
<FormLabel>Archivo (.zip, .rar)</FormLabel>
|
||||||
|
<div
|
||||||
|
className="border p-4 text-center rounded"
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
|
onClick={() => document.getElementById("fileInput")?.click()}
|
||||||
|
>
|
||||||
|
<FaUpload size={40} className="mb-2" />
|
||||||
|
<p className="mb-1">
|
||||||
|
{file?.name ||
|
||||||
|
"Arrastra aquí tu archivo o da click aquí para buscar"}
|
||||||
|
</p>
|
||||||
|
<p className="is-size-6">Tmaño máximo 20MB</p>
|
||||||
|
<p className="is-size-6">
|
||||||
|
Si al momento de elegir un archivo este no se selecciona, haga click
|
||||||
|
en cancelar en la ventana emergente e intente de nuevo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="fileInput"
|
||||||
|
type="file"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
onChange={(e) => setFile(e.target.files ? e.target.files[0] : null)}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
{/*
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<label className="form-label">Archivo (.zip, .rar)</label>
|
<label className="form-label">Archivo (.zip, .rar)</label>
|
||||||
<input
|
<input
|
||||||
@@ -467,22 +498,22 @@ export default function CasoEspecialForm({
|
|||||||
</div>
|
</div>
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
<div className="text-center mt-4 mb-3">
|
<div className="text-center mt-4 mb-3">
|
||||||
<button
|
<button
|
||||||
className="btn btn-success"
|
className="btn btn-success"
|
||||||
disabled={mostrarBoton()}
|
disabled={mostrarBoton()}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
imprimirWarning(
|
imprimirWarning(
|
||||||
'¿Estás seguro(a) de querer crear un nuevo caso especial?',
|
"¿Estás seguro(a) de querer crear un nuevo caso especial?",
|
||||||
enviar
|
enviar
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Enviar
|
Enviar
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BotonRegresar />
|
<BotonRegresar />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,30 +2,28 @@ import { useRouter } from "next/navigation";
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
export default function Logout() {
|
export default function Logout() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [usuario, setUsuario] = useState<string | null>(null);
|
const [usuario, setUsuario] = useState<string | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const storedUsuario = localStorage.getItem("usuario")
|
const storedUsuario = localStorage.getItem("usuario");
|
||||||
setUsuario(storedUsuario);
|
setUsuario(storedUsuario);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem("token");
|
||||||
|
localStorage.removeItem("usuario");
|
||||||
|
router.push("/");
|
||||||
|
};
|
||||||
|
|
||||||
const handleLogout = () => {
|
return (
|
||||||
localStorage.removeItem("token");
|
<section className="bg-dorado">
|
||||||
localStorage.removeItem('usuario');
|
<div className="container d-flex justify-content-between align-items-center">
|
||||||
router.push("/");
|
<h2 className="m-2 text-white">{usuario}</h2>
|
||||||
}
|
<button onClick={handleLogout} className="m-2 bg-danger">
|
||||||
|
Cerrar Sesion
|
||||||
return(
|
</button>
|
||||||
<section className="bg-dorado">
|
</div>
|
||||||
<div className="container d-flex justify-content-between align-items-center">
|
</section>
|
||||||
<h2 className="m-2 text-white">{ usuario }</h2>
|
);
|
||||||
<button onClick={handleLogout} className="m-2 bg-danger">
|
|
||||||
Cerrar Sesion
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user