avansando más

Front/src/paginas/VerLogs.svelte

@@ -9,25 +9,25 @@
     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);
+    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(()=>{
+    onMount(() => {
         obtenerLogs();
         obtenerPaginas();
     });
 
     async function obtenerPaginas() {
-        try{
-            const r = await fetch($urlG+"/api/Logs/cantPag", {
+        try {
+            const r = await fetch($urlG + "/api/Logs/cantPag", {
                 method: "GET",
                 headers: {
-                    "Auth": token,
-                }
+                    Auth: token,
+                },
             });
             let data = await r.json();
             if (r.ok) {
@@ -41,12 +41,12 @@
     }
 
     async function obtenerLogs() {
-        try{
-            const r = await fetch($urlG+"/api/Logs?pag="+pagina, {
+        try {
+            const r = await fetch($urlG + "/api/Logs?pag=" + pagina, {
                 method: "GET",
                 headers: {
-                    "Auth": token,
-                }
+                    Auth: token,
+                },
             });
             let data = await r.json();
             if (r.ok) {
@@ -63,49 +63,65 @@
         ll = l;
         showmodal = true;
     }
-    function queryPag(a:number) {
+    function queryPag(a: number) {
         pagina = a;
         obtenerLogs();
     }
 </script>
 
-<NavBarAutocompletable/>
+<NavBarAutocompletable />
 
 {#if modaldata}
-    <ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")}/>
+    <ModalEstatico payload={modaldata} close={() => !!(modaldata = "")} />
 {/if}
 
 {#if showmodal}
-    <ModalLogs onClose={()=>!!(showmodal=!showmodal)} log={ll}/>
+    <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} centrado={true}/>
+    <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>