AlquilaFacil/Front/src/paginas/ControlUsuarios.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import type { Cliente, Grupo } from "../types";
    import {urlG} from "../stores/urlStore";
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import { fade, fly } from "svelte/transition";

    let Clientes: Cliente[] = $state([]);
    let Grupos:any[] = $state([]);
    let modaldata = $state();
    let token = sessionStorage.getItem("token");
    let showAddmenu: boolean = $state(false);

    let grupo:string = $state("");
    let SelCliente: Cliente = $state();

    onMount(async () => {
        try{
            const response = await fetch($urlG+"/api/admin/clientes", {
                method: "GET",
                headers: {
                    "Auth": String(token),
                }
            })
            if (response.ok) {
                let data: Cliente[] = await response.json();
                Clientes = data;
                return;
            }
            modaldata = "fallo al asignar la lista de clientes";
        } catch {
            modaldata = "fallo al intentar obtener la lista de clientes";
        }

    });

    async function cargaGrupos(cli: Cliente){
        try {
            const response = await fetch($urlG+"/api/admin/clientes/grupo?Dni="+cli.dni, {
                method: "GET",
                headers: {
                    "Auth": String(token),
                },
            });
            if (response.ok){
                let data = await response.json();
                Grupos = data;
                showAddmenu = true;
                SelCliente = cli;
                return;
            }

            modaldata = await response.json();
        } catch {
            modaldata = "no se pudo obtener la lista de grupos";
        }
    }

    async function bajaCliente(event:Event, cli:Cliente) {
        //WIP añadir una flag para que muestre que no se pudo dar se alta/baja
        event.stopPropagation();
        try {
            const response = await fetch($urlG+"/api/admin/cliente?Dni="+cli.dni, {
                method: "DELETE",
                headers: {
                    "Auth": String(token),
                }
            });
            if(response.ok){
                let data = await response.json();
                modaldata = data.message;
                cli.habilitado = !cli.habilitado;
            }
        } catch {
            modaldata = "";

        }
        
    }
    async function añadirGrupo(e:Event, cli: Cliente, grupo:string){
        e.preventDefault();
        if (cli.dni == 0 || cli.email == "" || grupo == ""){
            modaldata = "No se selecciono un cliente o Grupo";
            return;
        }
        const email = cli.email;
        try {
            const response = await fetch($urlG+"/api/admin/cliente/addGrupo", {
                method: "PATCH",
                headers: {
                    "Auth": String(token),
                    'Content-Type' : 'application/json',
                },
                body: JSON.stringify({email, grupo})
            });

            if (response.ok){
                let data = await response.json();
                modaldata = data.message;
                cargaGrupos(cli);
                return;
            }
            let data = await response.json();
            modaldata = data.message;
        } catch {
            modaldata = "Falla la conexion al servidor";
        }
    }
    async function BajaGrupo(e:Event, cli: Cliente, grupo:string){
        e.preventDefault();
        if (cli.dni == 0 || cli.email == "" || grupo == ""){
            modaldata = "No se selecciono un cliente o Grupo";
            return;
        }
        const email = cli.email;
        if (grupo === "Propietario"){
            if (confirm("Sos propietario si te desactivas de ese rol tus propiedades se van a dar de baja, Estas seguro?") == false) return;
        }
        try {
            const response = await fetch($urlG+"/api/admin/cliente/rmGrupo", {
                method: "PATCH",
                headers: {
                    "Auth": String(token),
                    'Content-Type' : 'application/json',
                },
                body: JSON.stringify({email, grupo})
            });

            if (response.ok){
                let data = await response.json();
                modaldata = data.message;
                cargaGrupos(cli);
                return;
            }
            let data = await response.json();
            modaldata = data.message;
        } catch {
            modaldata = "Falla la conexion al servidor";
        }
    }
</script>

<NavBarAutocompletable/>

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

<div class="content-fluid align-items-start">
    <div class="row">
        <div class="col" style="padding-right: 2px;">
            <BarraHorizontalConTexto text="Clientes"/>
            
            <div style="height:70vh; overflow-y: auto; max-width: 100%">
                <table class="table table-responsive table-sm table-striped table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>Dni</th>
                            <th>Nombre/Apellido</th>
                            <th>Email</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {#each Clientes as cli}
                        <tr onclick={() => cargaGrupos(cli)} in:fade>
                            <td>{cli.dni}</td>
                            <td>{cli.nombre}</td>
                            <td>{cli.email}</td>
                            <td>
                                {#if cli.habilitado}
                                <button class="btn btn-outline-warning" onclick={(e) => bajaCliente(e, cli)}>
                                    Baja
                                </button>
                                {:else}
                                <button class="btn btn-outline-success" onclick={(e) => bajaCliente(e, cli)}>
                                    Alta
                                </button>
                                {/if}
                            </td>
                        </tr>
                        {/each}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col"style="padding-left: 2px;">
            <BarraHorizontalConTexto text="Grupos del Cliente Seleccionado"/>
            <table class="table table-striped table-responsive table-sm table-bordered">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Descripcion</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {#if Grupos.length>0}
                        
                    {#each Grupos as g}
                    <tr in:fade>
                        <td>{g.id}</td>
                        <td>{g.descripcion}</td>
                        <td><button class="btn btn-outline-danger" onclick={(e)=>BajaGrupo(e, SelCliente, g.descripcion)}>Baja</button></td>
                    </tr>
                    {/each}
                    {:else if SelCliente != null}
                    <tr>
                        <td colspan="2">Este Cliente no tiene Grupos</td>
                    </tr>
                    {:else}
                    <tr>
                        <td colspan="2">Seleccione un cliente para ver sus grupos</td>
                    </tr>
                    {/if}
                </tbody>
            </table>

            {#if showAddmenu}
            <div in:fade>
                <BarraHorizontalConTexto text="Añadir Grupos al Usuario"/>
                <form class="card card-body" onsubmit={(e) => añadirGrupo(e,SelCliente, grupo)}>
                    <div class="mb-3">
                        <label for="userRole" class="form-label">Seleccionar Grupo</label>
                        <select id="userRole" class="form-select" bind:value={grupo}>
                            <option value="Propietario">Propietario</option>
                            <option value="Inquilino">Inquilino</option>
                            <option value="Admin">Admin</option>
                            <option value="Informes">Informes</option>
                        </select>
                    </div>
                    <button class="btn btn-primary" type="submit">Añadir</button>
                </form>
            </div>
            {/if}
        </div>
    </div>
</div>