ilab_transporte_frontend/src/pages/roles/ModalRol.svelte

<script>
    import Modal from "$/components/Modal.svelte";
    import { getAplicaciones } from "$/services/aplicaciones";
    import { createRol, getRol, updateRol } from "$/services/roles";
    import { createRolyaplicacion, deleteRolyaplicacion, getRolesyaplicaciones, updateRolyaplicacion } from "$/services/roles_aplicaciones";
    import { createRolLinea, deleteRolLinea, getRolLineas } from '$/services/roles_lineas';
    import { createEventDispatcher } from "svelte";
    import TabForm from "./TabForm.svelte";
    import TabAplicaciones from "./TabAplicaciones.svelte";
    import TabLineas from "./TabLineas.svelte";
    import "./modal.css"
    import { getLineas } from "$/services/lineas";
    const dispatch = createEventDispatcher()

    export let rol = {};
    export let escritura = false;
    let loading = false
    let form = {}
    let permisos_app = []
    let permisos_lineas = []
    let tab = 0

    async function fetchRol({ id_rol = null }) {
        try {
            if (!id_rol) return;
            form = await getRol(id_rol) || {}
            await fetchPermisosAplicaciones(id_rol)
            await fetchPermisosLineas(id_rol)
        } catch (error) {
            alert(error)
        }
    }

    async function fetchPermisosAplicaciones(id_rol) {
        try {
            const aplicaciones = await getAplicaciones({ ordering: 'nombre_app' })
            const rol_aplicaciones = await getRolesyaplicaciones(id_rol)

            permisos_app = aplicaciones.map(app => {
                const item = rol_aplicaciones.find(el => el.id_aplicacion === app.id_aplicacion)
                const acceso = !!item
                const { id_rol_app = null, solo_visualizar = false} = item || {}

                return { ...app, id_rol_app, acceso, solo_visualizar, modificado: false }
            })
        } catch (error) {
            alert(error)
        }
    }

    async function fetchPermisosLineas(id_rol) {
        try {
            const lineas = await getLineas()
            const rol_lineas = await getRolLineas({ id_rol })

            permisos_lineas = lineas.map(linea => {
                const item = rol_lineas.find(el => el.id_linea === linea.id_linea)
                const acceso = !!item;
                return { ...linea, id_rol_linea: item?.id_rol_linea || null, acceso, modificado: false }
            })
        } catch (error) {
            alert(error)
        }
    }

    async function onSaveRol() {
        try {
            if (rol.id_rol) {
                form = await updateRol(form)
            } else {
                form = await createRol(form)
                await fetchPermisosAplicaciones(form.id_rol)
                await fetchPermisosLineas(form.id_rol)
            }
            dispatch('refresh')
            alert('Propiedades del Rol guardadas.')
        } catch (error) {
            alert(error)
        }
    }

    async function onDeleteRol() {
        try {
            
        } catch (error) {
            alert(error)
        }
    }

    async function onSavePermisos() {
        try {
            const modificados = permisos_app.filter(el => el.modificado)
            const { id_rol } = rol;
            for (let permiso of modificados) {
                if (!permiso.acceso && permiso.id_rol_app) {
                    await deleteRolyaplicacion(permiso.id_rol_app)
                }
                if (permiso.acceso && !permiso.id_rol_app) {
                    const { id_aplicacion, solo_visualizar = false } = permiso;
                    await createRolyaplicacion({ id_rol, id_aplicacion, solo_visualizar })
                }
                if (permiso.acceso && permiso.id_rol_app) {
                    const { id_rol_app, solo_visualizar = false } = permiso;
                    await updateRolyaplicacion({ id_rol_app, solo_visualizar })
                }
            }
            alert('Permisos de aplicaciones guardadas')
        } catch (error) {
            alert(error)
        }
    }

    async function onSaveLineas() {
        try {
            const modificados = permisos_lineas.filter(el => el.modificado)
            const { id_rol } = rol;

            for (let permiso of modificados) {
                if (!permiso.acceso && permiso.id_rol_linea) {
                    await deleteRolLinea(permiso.id_rol_linea)
                }
                if (permiso.acceso && !permiso.id_rol_linea) {
                    const { id_linea } = permiso;
                    await createRolLinea({ id_rol, id_linea })
                }
            }
            alert('Permisos de lineas guardadas')

        } catch (error) {
            alert(error)
        }
    }

    $: fetchRol(rol)
</script>

<form action="" on:submit|preventDefault={onSaveRol}>
    <Modal classBody="mymodal" title={"rol #" + (rol.id_rol || "Nuevo")} size="lg" on:close={() => dispatch("close")}>
        <ul class="nav nav-tabs">
            <li class="nav-item">
              <a class={"nav-link" + (tab === 0 ? ' active' : '')} href={"#"} on:click|preventDefault={() => tab = 0}>Propiedades</a>
            </li>
            <li class={"nav-item" + (form.id_rol ? '' : ' disabled')}>
              <a class={"nav-link" + (tab === 1 ? ' active' : '')} href={"#"} on:click|preventDefault={() => tab = 1}>Aplicaciones</a>
            </li>
            <li class={"nav-item" + (form.id_rol ? '' : ' disabled')}>
              <a class={"nav-link" + (tab === 2 ? ' active' : '')} href={"#"} on:click|preventDefault={() => tab = 2}>Lineas</a>
            </li>
        </ul>

        <div class="p-3 bg-white">
            {#if tab === 0}
                <TabForm bind:form={form} {escritura} />
            {/if}
    
            {#if tab === 1}
                <TabAplicaciones bind:permisos={permisos_app} />
            {/if}
    
            {#if tab === 2}
                <TabLineas bind:permisos={permisos_lineas} />
            {/if}
        </div>


        <svelte:fragment slot="buttons">
            {#if escritura}
                {#if tab === 0}
                    <button class="btn btn-primary" type="submit" disabled={loading}>
                        <i class="bi bi-save"></i> Guardar
                    </button>

                    {#if rol.id_rol}
                        <button class="btn btn-danger" on:click|preventDefault={onDeleteRol} disabled={loading}>
                            <i class="bi bi-trash"></i> Eliminar
                        </button>
                    {/if}
                {/if}

                {#if tab === 1}
                    <button class="btn btn-primary" type="button" disabled={loading} on:click|preventDefault={onSavePermisos}>
                        <i class="bi bi-save"></i> Guardar Permisos Aplicaciones
                    </button>
                {/if}

                {#if tab === 2}
                    <button class="btn btn-primary" type="button" disabled={loading} on:click|preventDefault={onSaveLineas}>
                        <i class="bi bi-save"></i> Guardar Permisos Lineas
                    </button>
                {/if}
            {/if}
        </svelte:fragment>
    </Modal>
</form>