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

104 lines
4.3 KiB
Svelte

<script lang="ts">
import { onMount } from "svelte";
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
import type { GrupoDto } from "../types";
import { urlG } from "../stores/urlStore";
const token: string = sessionStorage.getItem("token") || "";
let grupos: GrupoDto[] = $state([]);
let modaldat: string = $state("");
onMount(() => {
ObtenerGrupos();
});
async function ObtenerGrupos() {
try {
const ret = await fetch($urlG + "/api/admin/grupos", {
method: "GET",
headers: {
Auth: token,
},
});
if (!ret.ok) {
modaldat = "Fallo Al intentar hacer la request";
return;
}
grupos = await ret.json();
} catch {
modaldat = "Fallo Al intentar hacer la request";
}
}
</script>
<NavBarAutocompletable />
<div class="container-fluid">
{#if grupos.length == 0}
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
{:else}
{#each grupos as grupo}
<div class="accordion mt-2">
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target={`#${grupo.idgrupo}`}
aria-expanded="false"
aria-controls={grupo.idgrupo}
>
{grupo.nombre}
</button>
</h2>
<div id={grupo.idgrupo} class="accordion-collapse collapse">
<div class="accordion-body">
<div class="row">
<div class="col-6">
<h5>Grupos Incluidos</h5>
<ul class="list-group">
{#if grupo.gruposIncluidos.length == 0}
<li class="list-group-item">
No hay grupos incluidos
</li>
{:else}
{#each grupo.gruposIncluidos as grupoIncluido}
<li class="list-group-item">
{grupoIncluido}
</li>
{/each}
{/if}
</ul>
</div>
<div class="col-6">
<h5>Permisos</h5>
<ul class="list-group">
{#if grupo.permisos.length == 0}
<li class="list-group-item">
No hay grupos incluidos
</li>
{:else}
{#each grupo.permisos as permiso}
<li class="list-group-item">
{permiso.descripcion}
</li>
{/each}
{/if}
</ul>
</div>
</div>
<hr />
<div class="d-flex justify-content-between">
<button class="btn btn-primary">Editar</button>
</div>
</div>
</div>
</div>
</div>
{/each}
{/if}
</div>