AlquilaFacil/Front/src/paginas/AdminGrupos.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import type { GrupoDto, PermisoDto } from "../types";
    import { urlG } from "../stores/urlStore";
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import ModalEditarGrupo from "../Componentes/ModalEditarGrupo.svelte";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import BotonEsquina from "../Componentes/BotonEsquina.svelte";
    import ModalAadirGrupo from "../Componentes/ModalAñadirGrupo.svelte";

    const token: string = sessionStorage.getItem("token") || "";

    let grupos: GrupoDto[] = $state([]);
    let modaldat: string = $state("");
    let showmodaladd = $state(false);

    onMount(() => {
        ObtenerGrupos();
        obtenerPermisos();
    });
    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";
        }
    }
    let selgru: GrupoDto = $state({
        gruposIncluidos: [],
        idgrupo: 0,
        habilitado: false,
        nombre: "",
        permisos: [],
    });

    let showModal: boolean = $state(false);
    function setModalEditar(data: GrupoDto) {
        selgru = data;
        showModal = true;
    }

    async function submitedit(a: GrupoDto) {
        let b = a;
        try {
            let req = await fetch($urlG + "/api/grupo", {
                method: "PATCH",
                headers: {
                    Auth: token,
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(b),
            });
            const resp = await req.json();
            modaldat = resp.message;
            if (req.ok) {
                ObtenerGrupos();
            }
        } catch {
            modaldat = "Fallo al hacer la request";
        }
    }

    let permisos: PermisoDto[] = $state([]);
    async function obtenerPermisos() {
        try {
            let a = await fetch($urlG + "/api/permisos/todos", {
                method: "GET",
                headers: {
                    Auth: token,
                },
            });
            if (!a.ok) {
                modaldat = "Fallo al obtener los permisos";
                return;
            }
            permisos = await a.json();
        } catch {
            modaldat = "Fallo Al intentar hacer la request";
        }
    }

    async function submitGrupo(a: GrupoDto) {
        let b = a;
        try {
            let req = await fetch($urlG + "/api/grupo", {
                method: "POST",
                headers: {
                    Auth: token,
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(b),
            });
            const resp = await req.json();
            modaldat = resp.message;
            if (req.ok) {
                ObtenerGrupos();
            }
        } catch {
            modaldat = "Fallo al hacer la request";
        }
    }

    async function togglegrupo(grupo: GrupoDto) {
        try {
            const req = await fetch($urlG + "/api/grupo?id=" + grupo.idgrupo, {
                method: "DELETE",
                headers: {
                    Auth: token,
                },
            });
            if (req.ok) {
                grupo.habilitado = !grupo.habilitado;
            }
            modaldat = (await req.json()).message;
            ObtenerGrupos();
        } catch {
            modaldat = "Fallo al hacer la request";
        }
    }
</script>

{#if modaldat != ""}
    <ModalEstatico payload={modaldat} close={() => !!(modaldat = "")} />
{/if}

{#if showModal}
    <ModalEditarGrupo
        bind:data={selgru}
        {permisos}
        {grupos}
        onClose={() => (showModal = false)}
        onSubmit={submitedit}
    />
{/if}
<NavBarAutocompletable />
<div class="container mt-2">
    <BarraHorizontalConTexto text="Gestionar Grupos" />

    {#if grupos.length == 0}
        <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    {:else}
        {#if showmodaladd}
            <ModalAadirGrupo
                onClose={() => (showmodaladd = false)}
                {grupos}
                {permisos}
                onSubmit={submitGrupo}
            />
        {/if}
        {#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}
                            <span
                                class="ms-1 badge text-bg-secondary position-relative"
                                style="top: -5px;"
                            >
                                {grupo.habilitado
                                    ? "Habilitado"
                                    : "Desabilitado"}
                            </span>
                        </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"
                                    onclick={() => setModalEditar(grupo)}
                                    >Editar</button
                                >
                                <button
                                    class="btn"
                                    class:btn-danger={grupo.habilitado}
                                    class:btn-success={!grupo.habilitado}
                                    onclick={() => togglegrupo(grupo)}
                                >
                                    {#if grupo.habilitado}Baja{:else}Alta{/if}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {/each}
        <BotonEsquina handleclick={() => (showmodaladd = true)} />
    {/if}
</div>