Se agregaron nuevos estilos en la vista de responsable/editar
This commit is contained in:
santiago
@@ -63,33 +63,35 @@ export default function Editar() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section>
|
||||
<BotonRegresar />
|
||||
<section className="container px-2 pb-5">
|
||||
<div className="pt-4">
|
||||
<BotonRegresar />
|
||||
</div>
|
||||
|
||||
<EditarResponsable
|
||||
<EditarResponsable
|
||||
responsable={data}
|
||||
imprimirError={imprimirError}
|
||||
imprimirMensaje={imprimirMensaje}
|
||||
imprimirWarning={imprimirWarning}
|
||||
updateIsLoading={updateIsLoading}
|
||||
/>
|
||||
|
||||
<ReasignacionProgramas
|
||||
responsable={data}
|
||||
imprimirError={imprimirError}
|
||||
imprimirMensaje={imprimirMensaje}
|
||||
imprimirWarning={imprimirWarning}
|
||||
updateIsLoading={updateIsLoading}
|
||||
/>
|
||||
|
||||
<ReasignacionProgramas
|
||||
responsable={data}
|
||||
imprimirError={imprimirError}
|
||||
imprimirMensaje={imprimirMensaje}
|
||||
imprimirWarning={imprimirWarning}
|
||||
updateIsLoading={updateIsLoading}
|
||||
/>
|
||||
{/*
|
||||
<EditarResponsable
|
||||
token={token ?? undefined}
|
||||
imprimirError={imprimirError}
|
||||
imprimirMensaje={imprimirMensaje}
|
||||
imprimirWarning={imprimirWarning}
|
||||
updateIsLoading={updateIsLoading}
|
||||
/>
|
||||
*/}
|
||||
{/*
|
||||
<EditarResponsable
|
||||
token={token ?? undefined}
|
||||
imprimirError={imprimirError}
|
||||
imprimirMensaje={imprimirMensaje}
|
||||
imprimirWarning={imprimirWarning}
|
||||
updateIsLoading={updateIsLoading}
|
||||
/>
|
||||
*/}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -100,62 +100,64 @@ export default function EditarResponsable({
|
||||
|
||||
|
||||
return (
|
||||
<div className="space-y-4 mt-6">
|
||||
<h3 className="text-2xl font-semibold mb-4">Editar información del responsable</h3>
|
||||
<div className="sspace-y-4 mt-6">
|
||||
<h2 className="text-2xl mb-4 fw-semibold">Editar información del responsable</h2>
|
||||
|
||||
{/* Nombre */}
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={responsable.nombre}
|
||||
value={nuevo.nombre || ""}
|
||||
onChange={(e) => setNuevo({ ...nuevo, nombre: e.target.value })}
|
||||
className="border rounded p-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Correo */}
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Correo electrónico</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder={responsable.usuario}
|
||||
value={nuevo.correo || ""}
|
||||
onChange={(e) => setNuevo({ ...nuevo, correo: e.target.value })}
|
||||
className="border rounded p-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
{/* Nombre */}
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold block mb-1 font-medium">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={responsable.nombre}
|
||||
value={nuevo.nombre || ""}
|
||||
onChange={(e) => setNuevo({ ...nuevo, nombre: e.target.value })}
|
||||
className="form-control border rounded p-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Botones */}
|
||||
<div className="pt-5 flex gap-4">
|
||||
<button
|
||||
disabled={mostrarBoton()}
|
||||
onClick={() =>
|
||||
imprimirWarning(
|
||||
"¿Seguro(a) que quiere actualizar la información de este usuario?",
|
||||
actualizar
|
||||
)
|
||||
}
|
||||
className={`px-4 py-2 rounded text-white ${
|
||||
mostrarBoton() ? "bg-gray-400 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-700"
|
||||
}`}
|
||||
>
|
||||
Guardar Cambios
|
||||
</button>
|
||||
{/* Correo */}
|
||||
<div>
|
||||
<label className="form-label block mb-1 font-medium">Correo electrónico</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder={responsable.usuario}
|
||||
value={nuevo.correo || ""}
|
||||
onChange={(e) => setNuevo({ ...nuevo, correo: e.target.value })}
|
||||
className="form-control border rounded p-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
imprimirWarning(
|
||||
"¿Seguro(a) que quiere cambiar la contraseña para este usuario?",
|
||||
password
|
||||
)
|
||||
}
|
||||
className="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white"
|
||||
>
|
||||
Cambiar contraseña
|
||||
</button>
|
||||
</div>
|
||||
{/* Botones */}
|
||||
<div className="pt-5 flex gap-4">
|
||||
<button
|
||||
disabled={mostrarBoton()}
|
||||
onClick={() =>
|
||||
imprimirWarning(
|
||||
"¿Seguro(a) que quiere actualizar la información de este usuario?",
|
||||
actualizar
|
||||
)
|
||||
}
|
||||
className={`mb-4 px-4 py-2 rounded text-white ${
|
||||
mostrarBoton() ? "bg-gray-400 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-700"
|
||||
}`}
|
||||
>
|
||||
Guardar Cambios
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
imprimirWarning(
|
||||
"¿Seguro(a) que quiere cambiar la contraseña para este usuario?",
|
||||
password
|
||||
)
|
||||
}
|
||||
className="ms-3 px-4 py-2 rounded bg-morado hover:bg-blue-600 text-white"
|
||||
>
|
||||
Cambiar contraseña
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -178,11 +178,13 @@ export default function InformacionServicio({ admin, imprimirError, updateIsLoad
|
||||
<p className="form-control">{datos.Usuario?.nombre || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Fecha de nacimiento:
|
||||
<p className="form-control">{datos.fechaNacimiento}</p>
|
||||
</label>
|
||||
</div>
|
||||
{datos.fechaNacimiento && (
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Fecha de nacimiento:
|
||||
<p className="form-control">{formatDate(datos.fechaNacimiento)}</p>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Carrera:</label>
|
||||
@@ -194,50 +196,63 @@ export default function InformacionServicio({ admin, imprimirError, updateIsLoad
|
||||
<p className="form-control">{datos.creditos || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Telèfono:</label>
|
||||
<p className="form-control">{datos.telefono}</p>
|
||||
</div>
|
||||
{datos.telefono && (
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Telèfono:</label>
|
||||
<p className="form-control">{datos.telefono}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{datos.direccion && (
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Direcciòn:</label>
|
||||
<p className="form-control">{datos.direccion}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Direcciòn:</label>
|
||||
<p className="form-control">{datos.direccion}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Email:</label>
|
||||
<p className="form-control">{datos.correo || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Programa Interno:</label>
|
||||
<p className="form-control">{datos.programaInterno}</p>
|
||||
</div>
|
||||
{datos.programaInterno && (
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Programa Interno:</label>
|
||||
<p className="form-control">{datos.programaInterno}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{datos.profesor && (
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Profesor:</label>
|
||||
<p className="form-control">{datos.profesor}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Profesor:</label>
|
||||
<p className="form-control">{datos.profesor}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Fecha de registro:</label>
|
||||
<p className="form-control">{datos.createdAt || '-'}</p>
|
||||
<p className="form-control">{formatDate(datos.createdAt) || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">fecha de inicio:</label>
|
||||
<p className="form-control">{datos.fechaInicio || '-'}</p>
|
||||
<p className="form-control">{formatDate(datos.fechaInicio)|| '-'}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Fecha de termino:</label>
|
||||
<p className="form-control">{datos.fechaFin || '-'}</p>
|
||||
<p className="form-control">{formatDate(datos.fechaFin) || '-'}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Fecha de liberaciòn:</label>
|
||||
<p className="form-control">{datos.fechaLiberacion}</p>
|
||||
</div>
|
||||
{datos.fechaLiberacion && (
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold">Fecha de liberaciòn:</label>
|
||||
<p className="form-control">{formatDate(datos.fechaLiberacion)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<button className="btn btn-primary"
|
||||
@@ -247,4 +262,23 @@ export default function InformacionServicio({ admin, imprimirError, updateIsLoad
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Para dar formato a la fecha
|
||||
function formatDate(value?: string | null): string {
|
||||
if (!value) return "";
|
||||
|
||||
// Si ya viene como fecha ISO, forzamos a hora local sin modificar el día
|
||||
const d = new Date(value.includes("T") ? value : `${value}T00:00:00`);
|
||||
|
||||
if (isNaN(d.getTime())) {
|
||||
console.warn("⚠️ Fecha inválida:", value);
|
||||
return "";
|
||||
}
|
||||
|
||||
const day = String(d.getDate()).padStart(2, "0");
|
||||
const month = String(d.getMonth() + 1).padStart(2, "0");
|
||||
const year = d.getFullYear();
|
||||
|
||||
return `${day}/${month}/${year}`;
|
||||
}
|
||||
@@ -58,7 +58,7 @@ export default function ReasignacionProgramas({
|
||||
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<h3 className="text-2xl font-semibold mb-3">Reasignación de programas</h3>
|
||||
<h3 className="fw-semibold text-2xl font-semibold mb-3">Reasignación de programas</h3>
|
||||
|
||||
<div className="text-base mb-4">
|
||||
<p>
|
||||
@@ -69,21 +69,21 @@ export default function ReasignacionProgramas({
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="form-label fw-semibold block text-sm font-medium text-gray-700 mb-2">
|
||||
Usuario/Correo electrónico
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Usuario"
|
||||
value={correoOtroResponsable}
|
||||
onChange={(e) => setCorreoOtroResponsable(e.target.value)}
|
||||
className="border border-gray-300 rounded-lg p-2 w-full"
|
||||
type="email"
|
||||
placeholder="Usuario"
|
||||
value={correoOtroResponsable}
|
||||
onChange={(e) => setCorreoOtroResponsable(e.target.value)}
|
||||
className="form-control border border-gray-300 rounded-lg p-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-5">
|
||||
<div className="pt-3">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md text-white ${
|
||||
className={`px-4 py-2 rounded-1 text-white ${
|
||||
mostrarBoton()
|
||||
? "bg-gray-400 cursor-not-allowed"
|
||||
: "bg-blue-600 hover:bg-blue-700"
|
||||
|
||||
Reference in New Issue
Block a user