CIDWA/new_servicio_social_front
12
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Se agrego la vista de editar casos especiales

Browse Source
This commit is contained in:
santiago
2026-01-29 11:08:12 -06:00
parent 2146daf642
commit 4fdf6429ec
8 changed files with 315 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/administrador/casos_especiales/caso_especial/editar/page.tsx
+127
View File
@@ -0,0 +1,127 @@
'use client'
import EditarAlumno from "@/components/administrador/editar-caso-especial";
import BotonRegresar from "@/components/boton-regresar";
import { getUserCasoEspecial } from "@/services/userCasoE.services";
import { CasoEspecial } from "@/types/responses";
import { AxiosError, isAxiosError } from "axios";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import Swal from "sweetalert2";
interface Admin {
idTipoUsuario: number;
tipoUsuario?: string;
token: string;
}
export default function EditarCasoEspecial() {
const [idCasoEspecial, setIdCasoEspecial] = useState<number | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [casoEspecial, setCasoEspecial] = useState<Admin>({});
const [datos, setDatos] = useState({}); // es de casoEspecial
const router = useRouter();
const getLocalInfo = () => {
const storedAdmin: Admin = {
idTipoUsuario: Number(localStorage.getItem('idTipoUsuario')),
tipoUsuario: localStorage.getItem('tipoUsuario') || undefined,
token: localStorage.getItem('token') || '',
}
setCasoEspecial(storedAdmin);
const storageIdCaso = Number(localStorage.getItem('idCasoEspecial'));
setIdCasoEspecial(storageIdCaso);
}
const imprimirError = (err: unknown = {}, title = '¡Hubo un error!', onConfirm = () => {}) => {
let message = 'Ocurrió un error';
if (typeof err === 'string') message = err;
else if (err instanceof Error) message = err.message;
else if (isAxiosError(err) && err.response?.data?.message) message = String(err.response.data.message);
Swal.fire({
title,
text: message,
icon: 'error',
confirmButtonText: 'Entendido',
}).then(() => onConfirm());
try {
const anyErr = err as { err?: string };
if (anyErr.err === 'token error') {
localStorage.clear();
router.replace('/');
}
} catch (_) {}
};
const imprimirMensaje = (message: string, title = '¡Felicidades!', onConfirm = () => {}) => {
Swal.fire({
title,
text: message,
icon: 'success',
confirmButtonText: 'Ok',
}).then(() => onConfirm());
};
const imprimirWarning = (
message: string,
onConfirm = () => {},
title = '¡Espera un minuto!',
onCancel = () => {}
) => {
Swal.fire({
title,
text: message,
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Confirmar',
cancelButtonText: 'Cancelar',
}).then((result) => {
if (result.isConfirmed) onConfirm();
else onCancel();
});
};
const updateIsLoading = (value: boolean) => setIsLoading(value);
useEffect(() => {
const fetchUser = async () => {
await getLocalInfo();
if (!idCasoEspecial) return
try {
setIsLoading(true);
const data = await getUserCasoEspecial(idCasoEspecial)
setDatos(data);
} catch (error) {
const axiosErr = error as AxiosError<any>;
const mensaje = axiosErr?.response?.data?.message || 'No se pudo obtener la infromacion del caso especial.'
Swal.fire({
title: 'Error',
icon: 'error',
text: mensaje,
})
}
}
}, [])
return (
<section className="container px-2 pb-5">
<BotonRegresar />
<EditarAlumno
idCasoEspecial={idCasoEspecial!}
admin={casoEspecial}
viejo={datos}
updateIsLoading={updateIsLoading}
imprimirError={imprimirError}
imprimirMensaje={imprimirMensaje}
imprimirWarning={imprimirWarning}
/>
</section>
)
}
src/app/administrador/casos_especiales/caso_especial/page.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ export default function CasoEspecialPage() {
title = '¡Espera un minuto!',
onCancel = () => {}
) => {
MySwal.fire({
Swal.fire({
title,
text: message,
icon: 'warning',
src/app/casoEspecial/nuevo/page.tsx
+19 -4
View File
@@ -2,6 +2,7 @@
import BotonRegresar from "@/components/boton-regresar";
import CasoEspecialForm from "@/components/casoEspecial/caso-especial-form";
import { useState } from "react";
import Swal from "sweetalert2";
export default function Nuevo() {
const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -17,10 +18,24 @@ export default function Nuevo() {
alert(`${message}`);
}
const imprimirWarning = (message: string, onConfirm: () => void) => {
if (confirm(`${message}\n¿Desea continuar?`)) {
onConfirm();
}
const imprimirWarning = (message: string, onConfirm: () => void, title: string) => {
Swal.fire({
title,
text: message,
icon: "warning",
showCancelButton: true,
confirmButtonText: 'confirmar',
cancelButtonText: 'cancelar',
confirmButtonColor: "#0d6efd",
cancelButtonColor: "#dc3545",
}).then((result) => {
if (result.isConfirmed) {
onConfirm();
}
})
// if (confirm(`${message}\n¿Desea continuar?`)) {
// onConfirm();
// }
}
const updateIsLoading = (value: boolean) => {
src/components/administrador/editar-caso-especial.tsx
+135 -36
View File
@@ -1,6 +1,6 @@
"use client";
import { useState, useMemo } from "react";
import { useState, useMemo, useEffect } from "react";
import { axiosInstance } from "@/api/config";
import { isAxiosError } from "axios";
import moment from "moment";
@@ -10,6 +10,8 @@ import "react-datepicker/dist/react-datepicker.css";
import { useRouter } from "next/navigation";
import { registerLocale } from "react-datepicker";
import { es } from "date-fns/locale/es";
import { Col, FormGroup, FormLabel, InputGroup } from "react-bootstrap";
import { FaRegCalendar } from "react-icons/fa6";
registerLocale("es", es);
@@ -26,7 +28,9 @@ interface Viejo {
}
interface Admin {
token: { headers: Record<string, string> };
idTipoUsuario: number;
tipoUsuario?: string;
token: string;
}
interface Props {
@@ -103,7 +107,7 @@ export default function EditarAlumno({
try {
updateIsLoading(true);
const res = await axiosInstance.put(`/caso_especial/update`, data, admin.token);
const res = await axiosInstance.put(`/caso_especial/update/${idCasoEspecial}`, data);
imprimirMensaje(res.data.message);
router.push("/admin/casos_especiales/caso_especial");
} catch (err: unknown) {
@@ -121,60 +125,127 @@ export default function EditarAlumno({
return (
<div className="space-y-4 mt-6">
<h3 className="text-2xl font-semibold mb-4">Editar información del alumno</h3>
<h2 className="fw-bold mb-4">Editar información del alumno</h2>
{/* Correo */}
<div>
<label className="block mb-1 font-medium">Correo electrónico</label>
<div className="mb-3">
<label className="form-label fw-semibold block mb-1 font-medium">Correo electrónico</label>
<input
type="email"
placeholder={viejo.correo}
value={nuevo.correo || ""}
onChange={(e) => setNuevo({ ...nuevo, correo: e.target.value })}
className="border rounded p-2 w-full"
className="form-control border rounded p-2 w-full"
/>
</div>
{/* Teléfono */}
<div>
<label className="block mb-1 font-medium">Teléfono</label>
<div className="mb-3">
<label className="form-label fw-semibold block mb-1 font-medium">Teléfono</label>
<input
type="tel"
maxLength={10}
placeholder={viejo.telefono}
value={nuevo.telefono || ""}
onChange={(e) => setNuevo({ ...nuevo, telefono: e.target.value })}
className="border rounded p-2 w-full"
className="form-control border rounded p-2 w-full"
/>
</div>
{/* Dirección */}
<div>
<label className="block mb-1 font-medium">Dirección</label>
<div className="mb-3">
<label className="form-label fw-semibold block mb-1 font-medium">Dirección</label>
<input
type="text"
placeholder={viejo.direccion}
value={nuevo.direccion || ""}
onChange={(e) => setNuevo({ ...nuevo, direccion: e.target.value })}
className="border rounded p-2 w-full"
className="form-control border rounded p-2 w-full"
/>
</div>
<Col>
<FormGroup>
<FormLabel>
Fecha de inicio
</FormLabel>
<InputGroup>
<InputGroup.Text>
<FaRegCalendar />
</InputGroup.Text>
<DatePicker
selected={nuevo.fechaInicio}
onChange={(date) => setNuevo({ ...nuevo, fechaInicio: date || undefined })}
minDate={minDate1}
placeholderText={fecha(viejo.fechaInicio)}
className="form-control"
wrapperClassName="flex-grow-1"
calendarClassName="mi-calendario"
showMonthDropdown
showYearDropdown
scrollableYearDropdown
yearDropdownItemNumber={60}
dropdownMode="select"
locale="es"
/>
</InputGroup>
</FormGroup>
</Col>
{/* Fecha inicio */}
<div>
<label className="block mb-1 font-medium">Fecha de inicio</label>
{/* <div>
<label className="form-label fw-semibold block mb-1 font-medium">Fecha de inicio</label>
<DatePicker
selected={nuevo.fechaInicio}
onChange={(date) => setNuevo({ ...nuevo, fechaInicio: date || undefined })}
minDate={minDate1}
placeholderText={fecha(viejo.fechaInicio)}
className="border rounded p-2 w-full"
selected={nuevo.fechaInicio}
onChange={(date) => setNuevo({ ...nuevo, fechaInicio: date || undefined })}
minDate={minDate1}
placeholderText={fecha(viejo.fechaInicio)}
className="form-control"
wrapperClassName="flex-grow-1"
calendarClassName="mi-calendario"
locale="es"
showMonthDropdown
showYearDropdown
scrollableYearDropdown
yearDropdownItemNumber={60}
dropdownMode="select"
locale="es"
/>
</div>
</div> */}
{/* Fecha fin */}
<Col>
<FormGroup>
<FormLabel>Fecha de fin</FormLabel>
<InputGroup>
<InputGroup.Text>
<FaRegCalendar />
</InputGroup.Text>
<DatePicker
selected={nuevo.fechaFin}
onChange={(date) => setNuevo({ ...nuevo, fechaFin: date || undefined })}
minDate={minDate2}
placeholderText={fecha(viejo.fechaFin)}
dateFormat={'dd-MM-yyyy'}
className="form-control"
wrapperClassName="flex-grow-1"
calendarClassName="mi-calendario"
showMonthDropdown
showYearDropdown
scrollableYearDropdown
yearDropdownItemNumber={60}
dropdownMode="select"
locale='es'
/>
</InputGroup>
</FormGroup>
</Col>
{/* Fecha fin
{nuevo.fechaInicio && (
<div>
<label className="block mb-1 font-medium">Fecha de fin</label>
@@ -188,29 +259,57 @@ export default function EditarAlumno({
locale='es'
/>
</div>
)}
)} */}
<Col>
<FormGroup>
<FormLabel>Fecha de nacimiento</FormLabel>
<InputGroup>
<InputGroup.Text>
<FaRegCalendar />
</InputGroup.Text>
<DatePicker
selected={nuevo.fechaNacimiento}
onChange={(date) => setNuevo({ ...nuevo, fechaNacimiento: date || undefined })}
placeholderText={fecha(viejo.fechaNacimiento)}
dateFormat={'dd-MM-yyyy'}
className="form-control"
wrapperClassName="flex-grow-1"
calendarClassName="mi-calendario"
showMonthDropdown
showYearDropdown
scrollableYearDropdown
yearDropdownItemNumber={60}
dropdownMode="select"
locale='es'
/>
</InputGroup>
</FormGroup>
</Col>
{/* Fecha nacimiento */}
<div>
{/* <div>
<label className="block mb-1 font-medium">Fecha de nacimiento</label>
<DatePicker
selected={nuevo.fechaNacimiento}
onChange={(date) => setNuevo({ ...nuevo, fechaNacimiento: date || undefined })}
placeholderText={fecha(viejo.fechaNacimiento)}
className="border rounded p-2 w-full"
className="form-control border rounded p-2 w-full"
locale='es'
/>
</div>
</div> */}
{/* Motivo */}
{viejo.motivo && (
<div>
<label className="block mb-1 font-medium">Motivo</label>
<div className="mb-3">
<label className="form-label fw-semibold block mb-1 font-medium">Motivo</label>
<select
value={nuevo.motivo || ""}
onChange={(e) => setNuevo({ ...nuevo, motivo: e.target.value })}
className="border rounded p-2 w-full my-2"
className="form-control border rounded p-2 w-full my-2"
>
<option value="">Seleccione...</option>
<option value="1">Tercera edad</option>
@@ -221,28 +320,28 @@ export default function EditarAlumno({
{/* Dependencia */}
{viejo.dependencia && (
<div>
<label className="block mb-1 font-medium">Dependencia</label>
<div className="mb-3">
<label className="form-label fw-semibold block mb-1 font-medium">Dependencia</label>
<input
type="text"
placeholder={viejo.dependencia}
value={nuevo.dependencia || ""}
onChange={(e) => setNuevo({ ...nuevo, dependencia: e.target.value })}
className="border rounded p-2 w-full"
className="form-control border rounded p-2 w-full"
/>
</div>
)}
{/* Institución */}
{viejo.institucion && (
<div>
<label className="block mb-1 font-medium">Institución</label>
<div className="mb-3">
<label className="form-label fw-semibold block mb-1 font-medium">Institución</label>
<input
type="text"
placeholder={viejo.institucion}
value={nuevo.institucion || ""}
onChange={(e) => setNuevo({ ...nuevo, institucion: e.target.value })}
className="border rounded p-2 w-full"
className="form-control border rounded p-2 w-full"
/>
</div>
)}
src/components/administrador/liberar-caso-especial.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export default function LiberarCasoEspecial({
try {
updateIsLoading(true);
const res = await axiosInstance.put(`/caso_especial/liberaciony${idCasoEspecial}`, data);
const res = await axiosInstance.put(`/caso-especial/liberaciony/${idCasoEspecial}`, data);
imprimirMensaje(res.data.message);
router.replace('/administrador/casos_especiales');
} catch (err: unknown) {
src/components/casoEspecial/caso-especial-form.tsx
+11 -4
View File
@@ -42,7 +42,7 @@ interface Props {
// responsable: Responsable;
imprimirError: (msg: { message: string }) => void;
imprimirMensaje: (msg: string) => void;
imprimirWarning: (msg: string, callback: () => void) => void;
imprimirWarning: (msg: string, callback: () => void, title: string) => void;
updateIsLoading: (value: boolean) => void;
}
@@ -139,6 +139,7 @@ export default function CasoEspecialForm({
updateIsLoading(true);
const res = await axiosInstance.post(`/usuario/escolares/${numeroCuenta}`);
resetear();
console.log('Esta es la res:' , res)
setAlumno(res.data);
} catch (err: unknown) {
resetear();
@@ -377,6 +378,12 @@ export default function CasoEspecialForm({
updateFechas();
}, []);
const confirmarCasoEspecial = () => {
Swal.fire({
})
}
// Render
return (
@@ -682,9 +689,9 @@ export default function CasoEspecialForm({
onClick={() =>
imprimirWarning(
'¿Estás seguro(a) de querer crear un nuevo caso especial?',
enviar
)
}
enviar,
'Aviso'
)}
>
Enviar
</button>
src/services/userCasoE.services.ts
+8
View File
@@ -0,0 +1,8 @@
import { axiosInstance } from "@/api/config"
import { CasoEspecial } from "@/types/responses"
export const getUserCasoEspecial = async (idCasoEspecial: number): Promise<CasoEspecial[]> => {
const res = await axiosInstance.get(`caso-especial/caso_especial/${idCasoEspecial}`)
return res.data
}
src/types/responses.d.ts
Vendored
+13
View File
@@ -57,4 +57,17 @@ export interface Responsables {
interface ServicioSocialConCasoEspecial extends ServicioSocialResponse {
idCasoEspecial?: number;
}
interface CasoEspecial {
idCasoEspecial: number;
correo?: string;
telefono?: string;
direccion?: string;
fechaInicio?: Date;
fechaFin?: Date;
fechaNacimiento?: Date;
motivo?: string;
dependencia?: string;
institucion?: string;
}