Files
AlquilaFacil/Front/src/paginas/VerLogs.svelte
2025-04-17 13:24:07 -03:00

128 lines
3.7 KiB
Svelte

<script lang="ts">
import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
import type { LogDetalleDto, LogDto } from "../types";
import { onMount } from "svelte";
import { urlG } from "../stores/urlStore";
import ModalEstatico from "../Componentes/ModalEstatico.svelte";
import ModalLogs from "../Componentes/ModalLogs.svelte";
import PaginacionStepper from "../Componentes/PaginacionStepper.svelte";
let Logs: LogDto[] = $state([]);
let pagina: number = $state(1);
let token: string = sessionStorage.getItem("token") || "";
let modaldata: string = $state("");
let showmodal: boolean = $state(false);
let ll: LogDto | any = $state({});
let cantpag: number = $state(0);
onMount(() => {
obtenerLogs();
obtenerPaginas();
});
async function obtenerPaginas() {
try {
const r = await fetch($urlG + "/api/Logs/cantPag", {
method: "GET",
headers: {
Auth: token,
},
});
let data = await r.json();
if (r.ok) {
cantpag = data;
return;
}
modaldata = data.message;
} catch {
modaldata = "no se pudo hacer la request";
}
}
async function obtenerLogs() {
try {
const r = await fetch($urlG + "/api/Logs?pag=" + pagina, {
method: "GET",
headers: {
Auth: token,
},
});
let data = await r.json();
if (r.ok) {
Logs = data;
return;
}
modaldata = data.message;
} catch {
modaldata = "no se pudo hacer la request";
}
}
function prepararModal(l: LogDto) {
ll = l;
showmodal = true;
}
function queryPag(a: number) {
pagina = a;
obtenerLogs();
}
</script>
<NavBarAutocompletable />
{#if modaldata}
<ModalEstatico payload={modaldata} close={() => !!(modaldata = "")} />
{/if}
{#if showmodal}
<ModalLogs onClose={() => !!(showmodal = !showmodal)} log={ll} />
{/if}
<div class="container-fluid mt-2">
<BarraHorizontalConTexto text={"Logs"} />
<div
class="table-container"
style="height: 80vh; overflow-y: auto; margin-bottom: 2.5rem;"
>
<table class="table table-responsive table-hover table-striped">
<thead>
<tr>
<th>Fecha</th>
<th>Id Usuario</th>
<th>Accion</th>
<th></th>
</tr>
</thead>
<tbody>
{#each Logs as l}
<tr>
<td>{l.fecha}</td>
<td>{l.dniusuario}</td>
<td>{l.accion}</td>
<td>
<button
class="btn btn-primary"
onclick={() => prepararModal(l)}
>
Ver
</button>
</td>
</tr>
{/each}
</tbody>
</table>
<div
class="fixed-bottom w-100 d-flex justify-content-center border-top py-2"
style="background-color: rgba(0,0,0,0.5);"
>
<PaginacionStepper
currentPag={pagina}
{cantpag}
{queryPag}
centrado={true}
/>
</div>
</div>
</div>