Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 frcarlos
|
88f2ac13d7 |
@@ -2,312 +2,271 @@
|
|||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { axiosInstance } from "@/api/config";
|
import { axiosInstance } from "@/api/config";
|
||||||
import { ServicioSocialConCasoEspecial, ServicioSocialResponse } from "@/types/responses";
|
import {
|
||||||
|
ServicioSocialConCasoEspecial,
|
||||||
|
ServicioSocialResponse,
|
||||||
|
} from "@/types/responses";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
data?: ServicioSocialResponse[];
|
data?: ServicioSocialResponse[];
|
||||||
total?: number;
|
total?: number;
|
||||||
onPageChange?: (newPage: number) => void;
|
onPageChange?: (newPage: number) => void;
|
||||||
columnaFechaInicio?: boolean;
|
columnaFechaInicio?: boolean;
|
||||||
columnaFechaFin?: boolean;
|
columnaFechaFin?: boolean;
|
||||||
idTipoUsuario?: number; // 1=admin, 2=responsable, 3=alumno, 4=caso especial
|
idTipoUsuario?: number; // 1=admin, 2=responsable, 3=alumno, 4=caso especial
|
||||||
columnasResponsable?: boolean;
|
columnasResponsable?: boolean;
|
||||||
onRowAction?: (row: ServicioSocialResponse, path: string) => void;
|
onRowAction?: (row: ServicioSocialResponse, path: string) => void;
|
||||||
columnaCuestionario?: boolean;
|
columnaCuestionario?: boolean;
|
||||||
columnaCartaTermino?: boolean;
|
columnaCartaTermino?: boolean;
|
||||||
columnaCuestionarioCompleto?: boolean;
|
columnaCuestionarioCompleto?: boolean;
|
||||||
columnaFechaRegistro?: boolean;
|
columnaFechaRegistro?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ServicioSocialTabla({
|
export default function ServicioSocialTabla({
|
||||||
data,
|
data,
|
||||||
total = 0,
|
total = 0,
|
||||||
onPageChange,
|
onPageChange,
|
||||||
idTipoUsuario,
|
idTipoUsuario,
|
||||||
columnasResponsable = false,
|
columnasResponsable = false,
|
||||||
columnaFechaInicio = false,
|
columnaFechaInicio = true,
|
||||||
columnaFechaFin = false,
|
columnaFechaFin = true,
|
||||||
columnaCuestionario = false,
|
columnaCuestionario = false,
|
||||||
columnaCartaTermino = false,
|
columnaCartaTermino = false,
|
||||||
columnaCuestionarioCompleto = false,
|
columnaCuestionarioCompleto = false,
|
||||||
columnaFechaRegistro = false,
|
columnaFechaRegistro = false,
|
||||||
onRowAction,
|
onRowAction,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [info, setInfo] = useState<ServicioSocialResponse[]>(data || []);
|
const [info, setInfo] = useState<ServicioSocialResponse[]>(data || []);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
//const columnaFechaInicio = true;
|
// 🔹 Cargar datos del padre si existen
|
||||||
//const columnaFechaFin = true;
|
useEffect(() => {
|
||||||
|
if (data && data.length > 0) {
|
||||||
// 🔹 Cargar datos del padre si existen
|
setInfo(data);
|
||||||
useEffect(() => {
|
|
||||||
if (data && data.length > 0) {
|
|
||||||
setInfo(data);
|
|
||||||
}
|
|
||||||
}, [data]);
|
|
||||||
|
|
||||||
// 🔹 Paginación simple
|
|
||||||
function handlePrev() {
|
|
||||||
if (currentPage > 1) {
|
|
||||||
const np = currentPage - 1;
|
|
||||||
setCurrentPage(np);
|
|
||||||
onPageChange?.(np);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
function handleNext() {
|
// 🔹 Paginación simple
|
||||||
const lastPage = Math.max(1, Math.ceil(total / 10));
|
function handlePrev() {
|
||||||
if (currentPage < lastPage) {
|
if (currentPage > 1) {
|
||||||
const np = currentPage + 1;
|
const np = currentPage - 1;
|
||||||
setCurrentPage(np);
|
setCurrentPage(np);
|
||||||
onPageChange?.(np);
|
onPageChange?.(np);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const servicioSelected = (row: ServicioSocialResponse | ServicioSocialConCasoEspecial) => {
|
|
||||||
if (!row) return;
|
|
||||||
|
|
||||||
if (idTipoUsuario === 1) {
|
|
||||||
|
|
||||||
if (row.idServicio) {
|
|
||||||
localStorage.setItem("idServicio", String(row.idServicio));
|
|
||||||
}
|
|
||||||
|
|
||||||
if ("idCasoEspecial" in row && row.idCasoEspecial) {
|
|
||||||
localStorage.setItem("idCasoEspecial", String(row.idCasoEspecial));
|
|
||||||
}
|
|
||||||
|
|
||||||
router.push("/administrador/servicio");
|
|
||||||
|
|
||||||
} else if (
|
|
||||||
row.idServicio ||
|
|
||||||
("idCasoEspecial" in row && row.idCasoEspecial)
|
|
||||||
) {
|
|
||||||
console.log("Limpiando selección (no admin)");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
const servicioSelected = (row: ServicioSocialResponse | ServicioSocialConCasoEspecial) => {
|
|
||||||
if (!row) return;
|
|
||||||
|
|
||||||
if (idTipoUsuario === 1) {
|
|
||||||
if (row.idServicio) {
|
|
||||||
localStorage.setItem("idServicio", String(row.idServicio));
|
|
||||||
}
|
|
||||||
|
|
||||||
// ✅ forma segura sin any
|
|
||||||
if ("idCasoEspecial" in row && row.idCasoEspecial) {
|
|
||||||
localStorage.setItem("idCasoEspecial", String(row.idCasoEspecial));
|
|
||||||
}
|
|
||||||
|
|
||||||
router.push("/administrador/servicio");
|
|
||||||
} else if (
|
|
||||||
row.idServicio ||
|
|
||||||
("idCasoEspecial" in row && row.idCasoEspecial)
|
|
||||||
) {
|
|
||||||
console.log("Limpiando selección (no admin)");
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
// Codigo original
|
function handleNext() {
|
||||||
const servicioSelected = (row: ServicioSocialResponse | ServicioSocialConCasoEspecial) => {
|
const lastPage = Math.max(1, Math.ceil(total / 10));
|
||||||
if (!row) return;
|
if (currentPage < lastPage) {
|
||||||
|
const np = currentPage + 1;
|
||||||
|
setCurrentPage(np);
|
||||||
|
onPageChange?.(np);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (idTipoUsuario === 1) {
|
const servicioSelected = (
|
||||||
|
row: ServicioSocialResponse | ServicioSocialConCasoEspecial
|
||||||
|
) => {
|
||||||
|
if (!row) return;
|
||||||
|
|
||||||
if (row.idServicio) {
|
if (idTipoUsuario === 1) {
|
||||||
localStorage.setItem("idServicio", String(row.idServicio));
|
if (row.idServicio) {
|
||||||
}
|
localStorage.setItem("idServicio", String(row.idServicio));
|
||||||
if ((row as any).idCasoEspecial) {
|
}
|
||||||
localStorage.setItem("idCasoEspecial", String((row as any).idCasoEspecial));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Redirigir a la vista de detalle
|
if ("idCasoEspecial" in row && row.idCasoEspecial) {
|
||||||
router.push("/administrador/servicio");
|
localStorage.setItem("idCasoEspecial", String(row.idCasoEspecial));
|
||||||
} else if (row.idServicio || (row as any).idCasoEspecial) {
|
}
|
||||||
|
|
||||||
console.log("Limpiando selección (no admin)");
|
router.push("/administrador/servicio");
|
||||||
|
} else if (
|
||||||
|
row.idServicio ||
|
||||||
|
("idCasoEspecial" in row && row.idCasoEspecial)
|
||||||
|
) {
|
||||||
|
console.log("Limpiando selección (no admin)");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
}
|
return (
|
||||||
};
|
<section>
|
||||||
|
{loading ? (
|
||||||
*/
|
<div>Cargando...</div>
|
||||||
|
) : (
|
||||||
return (
|
<>
|
||||||
<section>
|
<div className="table-responsive">
|
||||||
{loading ? (
|
<table className="table table-striped">
|
||||||
<div>Cargando...</div>
|
<thead>
|
||||||
) : (
|
<tr>
|
||||||
<>
|
{columnaFechaRegistro && <th>Fecha Registro</th>}
|
||||||
<div className="table-responsive">
|
<th>Número de Cuenta</th>
|
||||||
<table className="table table-striped">
|
<th>Nombre</th>
|
||||||
<thead>
|
<th>Carrera</th>
|
||||||
<tr>
|
{columnaFechaInicio && <th>Fecha Inicio</th>}
|
||||||
{columnaFechaRegistro && <th>Fecha Registro</th>}
|
{columnaFechaFin && <th>Fecha Fin</th>}
|
||||||
<th>Número de Cuenta</th>
|
<th>Status</th>
|
||||||
<th>Nombre</th>
|
{columnaCuestionarioCompleto && (
|
||||||
<th>Carrera</th>
|
<th>Cuestionario Completo</th>
|
||||||
{columnaFechaInicio && <th>Fecha Inicio</th>}
|
)}
|
||||||
{columnaFechaFin && <th>Fecha Fin</th>}
|
{columnaCartaTermino && <th>Carta Termino</th>}
|
||||||
<th>Status</th>
|
{columnaCuestionario && <th>Cuestionario</th>}
|
||||||
{columnaCuestionarioCompleto && <th>Cuestionario Completo</th>}
|
</tr>
|
||||||
{columnaCartaTermino && <th>Carta Termino</th>}
|
</thead>
|
||||||
{columnaCuestionario && <th>Cuestionario</th>}
|
<tbody>
|
||||||
</tr>
|
{info.map((item, index) => (
|
||||||
</thead>
|
<tr
|
||||||
<tbody>
|
key={index}
|
||||||
{info.map((item, index) => (
|
style={{
|
||||||
<tr
|
cursor: idTipoUsuario === 1 ? "pointer" : "default",
|
||||||
key={index}
|
}}
|
||||||
style={{
|
onClick={() =>
|
||||||
cursor: idTipoUsuario === 1 ? "pointer" : "default",
|
idTipoUsuario === 1 ? servicioSelected(item) : undefined
|
||||||
}}
|
|
||||||
onClick={() => (
|
|
||||||
idTipoUsuario === 1 ? servicioSelected(item) : undefined
|
|
||||||
)}
|
|
||||||
//onClick={() => Falta corregir
|
|
||||||
//idTipoUsuario === 1 ? servicioSelected(item) : undefined
|
|
||||||
//}
|
|
||||||
>
|
|
||||||
<td>{item.Usuario?.usuario}</td>
|
|
||||||
<td>{item.Usuario?.nombre}</td>
|
|
||||||
<td>{item.Carrera?.carrera}</td>
|
|
||||||
{columnaFechaInicio && (
|
|
||||||
<td>{formatDate(item.fecha_inicio)}</td>
|
|
||||||
)}
|
|
||||||
{columnaFechaFin && <td>{formatDate(item.fecha_fin)}</td>}
|
|
||||||
<td>
|
|
||||||
{columnasResponsable && item.Status?.idStatus === 7 ? (
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-danger"
|
|
||||||
onClick={() =>
|
|
||||||
onRowAction?.(item, "carta_aceptacion")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Carta Aceptación Rechazada
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<span
|
|
||||||
className={`badge bg-${statusClass(
|
|
||||||
item.Status?.idStatus
|
|
||||||
)}`}
|
|
||||||
>
|
|
||||||
{item.Status?.status}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
{columnaCartaTermino && (
|
|
||||||
<td>{item.cartaTermino ? (
|
|
||||||
<span className="badge bg-success">Completado</span>
|
|
||||||
) : (
|
|
||||||
<span className="badge bg-danger">No Completado</span>
|
|
||||||
)}</td>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{columnaCuestionarioCompleto && (
|
|
||||||
<td>{item.cuestionarioCompletado ? (
|
|
||||||
<span className="badge bg-success">Completado</span>
|
|
||||||
) : (
|
|
||||||
<span className="badge bg-danger">No Completado</span>
|
|
||||||
)}</td>
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
{columnaCuestionario && (
|
|
||||||
<td>
|
|
||||||
{item.cuestionarioCompletado ? (
|
|
||||||
<span className="badge bg-success">Completado</span>
|
|
||||||
) : (
|
|
||||||
<span className="badge bg-danger">No Completado</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
)}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
{info.length === 0 && (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={7} className="text-center">
|
|
||||||
No hay registros
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-between align-items-center mt-2">
|
|
||||||
<div>Total: {total}</div>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-outline-primary me-2"
|
|
||||||
onClick={handlePrev}
|
|
||||||
disabled={currentPage <= 1}
|
|
||||||
>
|
|
||||||
Anterior
|
|
||||||
</button>
|
|
||||||
<span>Página {currentPage}</span>
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-outline-primary ms-2"
|
|
||||||
onClick={handleNext}
|
|
||||||
disabled={
|
|
||||||
currentPage >= Math.max(1, Math.ceil(total / 10))
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Siguiente
|
{/* Si el padre pidió mostrar Fecha Registro, la mostramos aquí (createdAt) */}
|
||||||
</button>
|
{columnaFechaRegistro && (
|
||||||
</div>
|
<td>{formatDate((item as any).createdAt)}</td>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<td>{item.Usuario?.usuario}</td>
|
||||||
|
<td>{item.Usuario?.nombre}</td>
|
||||||
|
<td>{item.Carrera?.carrera}</td>
|
||||||
|
|
||||||
|
{/* Usar las propiedades en camelCase que vienen en tu JSON */}
|
||||||
|
{columnaFechaInicio && (
|
||||||
|
<td>{formatDate((item as any).fechaInicio)}</td>
|
||||||
|
)}
|
||||||
|
{columnaFechaFin && (
|
||||||
|
<td>{formatDate((item as any).fechaFin)}</td>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<td>
|
||||||
|
{columnasResponsable && item.Status?.idStatus === 7 ? (
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-danger"
|
||||||
|
onClick={() =>
|
||||||
|
onRowAction?.(item, "carta_aceptacion")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Carta Aceptación Rechazada
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<span
|
||||||
|
className={`badge bg-${statusClass(
|
||||||
|
item.Status?.idStatus
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{item.Status?.status}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
{columnaCartaTermino && (
|
||||||
|
<td>
|
||||||
|
{item.cartaTermino ? (
|
||||||
|
<span className="badge bg-success">Completado</span>
|
||||||
|
) : (
|
||||||
|
<span className="badge bg-danger">No Completado</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{columnaCuestionarioCompleto && (
|
||||||
|
<td>
|
||||||
|
{item.cuestionarioCompletado ? (
|
||||||
|
<span className="badge bg-success">Completado</span>
|
||||||
|
) : (
|
||||||
|
<span className="badge bg-danger">No Completado</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{columnaCuestionario && (
|
||||||
|
<td>
|
||||||
|
{item.cuestionarioCompletado ? (
|
||||||
|
<span className="badge bg-success">Completado</span>
|
||||||
|
) : (
|
||||||
|
<span className="badge bg-danger">No Completado</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
{info.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={7} className="text-center">
|
||||||
|
No hay registros
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-between align-items-center mt-2">
|
||||||
|
<div>Total: {total}</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-primary me-2"
|
||||||
|
onClick={handlePrev}
|
||||||
|
disabled={currentPage <= 1}
|
||||||
|
>
|
||||||
|
Anterior
|
||||||
|
</button>
|
||||||
|
<span>Página {currentPage}</span>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-primary ms-2"
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={currentPage >= Math.max(1, Math.ceil(total / 10))}
|
||||||
|
>
|
||||||
|
Siguiente
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
)}
|
</>
|
||||||
</section>
|
)}
|
||||||
);
|
</section>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatDate(value?: string | null): string {
|
function formatDate(value?: string | null): string {
|
||||||
if (!value) return "";
|
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`);
|
||||||
const d = new Date(value.includes("T") ? value : `${value}T00:00:00`);
|
|
||||||
|
|
||||||
if (isNaN(d.getTime())) {
|
if (isNaN(d.getTime())) {
|
||||||
console.warn("⚠️ Fecha inválida:", value);
|
console.warn("⚠️ Fecha inválida:", value);
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
const day = String(d.getDate()).padStart(2, "0");
|
const day = String(d.getDate()).padStart(2, "0");
|
||||||
const month = String(d.getMonth() + 1).padStart(2, "0");
|
const month = String(d.getMonth() + 1).padStart(2, "0");
|
||||||
const year = d.getFullYear();
|
const year = d.getFullYear();
|
||||||
|
|
||||||
return `${day}/${month}/${year}`;
|
return `${day}/${month}/${year}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function statusClass(id?: number) {
|
function statusClass(id?: number) {
|
||||||
switch (id) {
|
switch (id) {
|
||||||
case 1:
|
case 1:
|
||||||
return "dark";
|
return "dark";
|
||||||
case 2:
|
case 2:
|
||||||
return "info";
|
return "info";
|
||||||
case 3:
|
case 3:
|
||||||
return "warning";
|
return "warning";
|
||||||
case 4:
|
case 4:
|
||||||
return "primary";
|
return "primary";
|
||||||
case 5:
|
case 5:
|
||||||
case 6:
|
case 6:
|
||||||
return "success";
|
return "success";
|
||||||
case 7:
|
case 7:
|
||||||
case 8:
|
case 8:
|
||||||
case 9:
|
case 9:
|
||||||
case 10:
|
case 10:
|
||||||
return "danger";
|
return "danger";
|
||||||
default:
|
default:
|
||||||
return "secondary";
|
return "secondary";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user