Files
AlquilaFacil/Front/src/paginas/VerLogs.svelte

112 lines
3.1 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"}/>
<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="d-flex justify-content-center">
<PaginacionStepper currentPag={pagina} {cantpag} {queryPag}/>
</div>
</div>