avansando más

Front/src/paginas/AdminGrupos.svelte

@@ -1,6 +1,103 @@
-<script>
+<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"></div>
+<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>