AlquilaFacil/Front/src/paginas/AdminUsuarios.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import type { Cliente, Grupo, GrupoDto, UpdateCliente } 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";
    import ModalModificarPropietarios from "../Componentes/ModalModificarPropietarios.svelte";
    import { CardLink, Modal } from "@sveltestrap/sveltestrap";
    import ModalRestablecerContra from "../Componentes/ModalRestablecerContra.svelte";

    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(null);

    let gruposopt: GrupoDto[] = $state([]);

    onMount(() => {
        cargaUsuarios();
        ObtenerGrupos();
    });

    async function ObtenerGrupos() {
        try {
            const ret = await fetch($urlG + "/api/admin/grupos", {
                method: "GET",
                headers: {
                    Auth: token || "",
                },
            });
            if (!ret.ok) {
                modaldata = "Fallo Al intentar hacer la request";
                return;
            }
            gruposopt = await ret.json();
        } catch {
            modaldata = "Fallo Al intentar hacer la request";
        }
    }

    async function cargaUsuarios() {
        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) {
        event.stopPropagation();
        try {
            const response = await fetch(
                $urlG + "/api/admin/cliente?Dni=" + cli.dni,
                {
                    method: "DELETE",
                    headers: {
                        Auth: String(token),
                    },
                },
            );
            let data = await response.json();
            modaldata = data.message;
            if (response.ok) {
                cli.habilitado = !cli.habilitado;
                cargaUsuarios();
            }
        } catch {
            modaldata = "Fallo al hacer la request";
        }
    }
    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";
        }
    }

    let showModificarCliente: boolean = $state(false);
    let datoscli: UpdateCliente = $state({
        dni: 0,
        apellido: "",
        celular: "",
        domicilio: "",
        nombre: "",
    });

    async function abrirModalModificarCliente(e: Event, cli: Cliente) {
        e.stopPropagation();
        try {
            const r = await fetch($urlG + "/api/admin/cliente?dni=" + cli.dni, {
                method: "GET",
                headers: {
                    Auth: token || "",
                },
            });
            let data = await r.json();
            if (r.ok) {
                datoscli = data;
                datoscli.dni = cli.dni;
                showModificarCliente = true;
                return;
            }
            modaldata = data.message;
        } catch {
            modaldata = "Falla la conexion al servidor";
        }
    }

    async function patchCliente(a: UpdateCliente) {
        if (
            a.apellido == "" ||
            a.celular == "" ||
            a.domicilio == "" ||
            a.nombre == ""
        ) {
            modaldata = "Hay campos vacios";
            return;
        }
        let dto = {
            apellido: a.apellido,
            celular: a.celular,
            domicilio: a.domicilio,
            nombre: a.nombre,
        };
        try {
            const r = await fetch($urlG + "/api/admin/cliente?dni=" + a.dni, {
                method: "PATCH",
                headers: {
                    Auth: token || "",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(dto),
            });
            let data = await r.json();
            modaldata = data.message;
            if (r.ok) cargaUsuarios();
        } catch {
            modaldata = "Falla la conexion al servidor";
        }
    }

    let restablecercontracli: Cliente | null = $state(null);
    let showmodalrestablecercontra: boolean = $state(false);
    async function handleRestablecerContraseña(e: Event, pass: string) {
        e.preventDefault();
        try {
            const req = await fetch($urlG + "/api/admin/contraseña", {
                method: "PATCH",
                headers: {
                    Auth: token || "",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    Dni: restablecercontracli?.dni,
                    contraseña: pass,
                }),
            });
            const js = await req.json();
            showmodalrestablecercontra = false;
            restablecercontracli = null;
            modaldata = js.message;
        } catch {
            modaldata = "Falla la conexion al servidor";
        }
    }

    function triggermodalcontra(cli: Cliente) {
        restablecercontracli = cli;
        showmodalrestablecercontra = true;
    }
</script>

<NavBarAutocompletable />

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

{#if showModificarCliente}
    <ModalModificarPropietarios
        datos={datoscli}
        onCancel={() => !!(showModificarCliente = false)}
        onConfirm={patchCliente}
    />
{/if}

{#if showmodalrestablecercontra}
    <ModalRestablecerContra
        close={() => (showmodalrestablecercontra = false)}
        submit={handleRestablecerContraseña}
    />
{/if}

<div class="content-fluid align-items-start">
    <div class="row">
        <div class="col ms-2">
            <BarraHorizontalConTexto text="Clientes" />

            <div style="height:85vh; overflow-y: auto; max-width: 100%">
                <table
                    class="table table-responsive 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-warning"
                                            onclick={(e) => bajaCliente(e, cli)}
                                        >
                                            Baja
                                        </button>
                                    {:else}
                                        <button
                                            class="btn btn-success"
                                            onclick={(e) => bajaCliente(e, cli)}
                                        >
                                            Alta
                                        </button>
                                    {/if}
                                    <button
                                        class="btn btn-secondary"
                                        onclick={(e) =>
                                            abrirModalModificarCliente(e, cli)}
                                    >
                                        <img src="/edit.svg" alt="Editar" />
                                    </button>
                                    <button
                                        class="btn btn-info"
                                        onclick={() => triggermodalcontra(cli)}
                                        ><img
                                            src="/key.svg"
                                            alt="RestablecerContraseña"
                                        />
                                    </button>
                                </td>
                            </tr>
                        {/each}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col me-2 ps-0">
            <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="3">Este Cliente no tiene Grupos</td>
                        </tr>
                    {:else}
                        <tr>
                            <td colspan="3"
                                >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}
                            >
                                {#each gruposopt as g}
                                    <option value={g.nombre}>{g.nombre}</option>
                                {/each}
                            </select>
                        </div>
                        <button class="btn btn-primary" type="submit"
                            >Añadir</button
                        >
                    </form>
                </div>
            {/if}
        </div>
    </div>
</div>