ilab_transporte_frontend/src/pages/roles/ModalRol.svelte

<script>
    import Modal from "../../components/Modal.svelte";
    import { getRol, createRol, updateRol, deleteRol } from "$/services/roles";
    import { getAplicaciones } from "$/services/aplicaciones";
    import {  getRolesyaplicaciones , createRolyaplicacion , updateRolyaplicacion , deleteRolyaplicacion } from "$/services/rolesyaplicaciones";
    import { createEventDispatcher } from "svelte";
    import { getRolesaplicaciones } from "../../services/rolesyaplicaciones";
    
    const dispatch = createEventDispatcher();
   

    export let rol = {}
    let form = {}
    let loading = false;
    let form2 = []
    let form3 = []
    let rolaplicaciones = []
    let form_inicio = []
   

    $: begin(rol.id_rol)
    $: begin2(rol.id_rol)

    

    async function begin(id) {
        try {
            if (!id) return;
            form = await getRol(id) || {}
        } catch (error) {
            alert(error.detail || error)
        }
    }

    async function begin2(id) {
        try {
            form2 = await getAplicaciones() || []
            if (!id) {
                rolaplicaciones = []
            }
            else{
               rolaplicaciones = await getRolesyaplicaciones(id)
              
            }
            form3 = combinarArreglos(form2,rolaplicaciones)

            
            
            for(const obj1 of form3){
                const nuevoItem = {
                id_rol_app: obj1.id_rol_app,    
                id_aplicacion: obj1.id_aplicacion,
                nombre_app: obj1.nombre_app,
                vigente: obj1.vigente,
                id_rol:obj1.id_rol,
                solo_visualizar:obj1.solo_visualizar,
                acceso:obj1.acceso
                };
                form_inicio.push(nuevoItem)

            }
            
            
        } catch (error) {
            alert(error.detail || error)
        }
    }

    async function onSave() {
        try {
            loading = true;
            
            if (rol.id_rol) {
                form = await updateRol(form)
                form3 = CrearEditarEliminar(rol.id_rol,form_inicio,form3)
                
                for(const obj1 of form3){
                    if (obj1.opcion == "Crear"){
                        await createRolyaplicacion(obj1)
                    }
                    else if (obj1.opcion == "Editar"){
                        await updateRolyaplicacion(obj1)
                    }
                    else if (obj1.opcion == "Eliminar"){
                        await deleteRolyaplicacion(obj1.id_rol_app)
                    }
                }
                
            } else {
                form = await createRol(form)
                form3 = Arreglo_crear(form3,form.id_rol)
                for(const obj1 of form3){
                    await createRolyaplicacion(obj1)
                }
            }
            alert('Se ha guardado la aplicación')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            if (error.detail) {
                alert(error.detail)
            } else {
                alert(JSON.stringify(error))
            }
        } finally {
            loading = false;
        }
    }

    async function onDelete() {
        try {
            if (!confirm('Eliminará el registro?')) return;
            loading = true;
            for(const obj1 of form_inicio){             
                if (obj1.id_rol_app != false){
                    if(obj1.acceso = true)
                        await deleteRolyaplicacion(obj1.id_rol_app)
                    }                    
            }
            await deleteRol(form.id_rol)
            alert('Se ha eliminado la aplicación')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            alert(error.detail || error)
        } finally {
            loading = false;
        }
    }
    function combinarArreglos(arreglo1, arreglo2) {
    const resultado = [];

    for (const obj1 of arreglo1) {
      const objResultado = { ...obj1 };
      
      const obj2 = arreglo2.find(item => item.id_aplicacion === obj1.id_aplicacion);

      if (obj2) {
        objResultado.id_rol = obj2.id_rol !== undefined ? obj2.id_rol : null;
        objResultado.solo_visualizar = obj2.solo_visualizar !== undefined ? obj2.solo_visualizar : null;
        objResultado.id_rol_app = obj2.id_rol_app !== undefined ? obj2.id_rol_app : null;
        objResultado.acceso = true;
      } else {
        objResultado.id_rol = null;
        objResultado.solo_visualizar = null;
        objResultado.acceso = false;
        objResultado.id_rol_app = false;
      }

      resultado.push(objResultado);
    }

    return resultado;
  }

  function Arreglo_crear(input_data,id) {
    const result = [];
    for (const item of input_data) {
        if (item.acceso) {
            result.push({
                "id_aplicacion": item.id_aplicacion,
                "id_rol": id,
                "solo_visualizar": item.solo_visualizar
            });
        }
    }

    return result;
}

function CrearEditarEliminar(id, arregloInicial, arregloFinal) {
  const resultado = [];

  for (let i = 0; i < arregloInicial.length; i++) {
    const inicio = arregloInicial[i];
    const fin = arregloFinal[i];

    const nuevoItem = {
      id_aplicacion: inicio.id_aplicacion,
      id_rol: id,
      solo_visualizar: fin.solo_visualizar,
    };

    if (inicio.acceso !== fin.acceso) {
      nuevoItem.opcion = inicio.acceso ? "Eliminar" : "Crear";
      if(inicio.acceso == true){
        nuevoItem.id_rol_app = inicio.id_rol_app
      }
    } else if (inicio.solo_visualizar !== fin.solo_visualizar) {
      nuevoItem.opcion = "Editar";
      nuevoItem.id_rol_app = inicio.id_rol_app
    } else {
      nuevoItem.opcion = null;
    }

    resultado.push(nuevoItem);
  }

  return resultado;
}


</script>

<form action="" on:submit|preventDefault={onSave}>
    <Modal title={'rol #' + (rol.id_rol || 'Nuevo')}
        size="lg"
        on:close={() => dispatch('close')}>
        <div class="form">
            <div class="row mb-3">
                <div class="col-md-3">Rol ID</div>
                <div class="col-md">
                    {#if rol.id_rol}
                        <input type="number" value={form.id_rol}  disabled class="form-control">
                    {:else}
                        <input type="number" bind:value={form.id_rol} required class="form-control">
                    {/if}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">Nombre Rol</div>
                <div class="col-md">
                    <input type="text" bind:value={form.nombre_rol} required class="form-control">
                </div>
            </div>

            <div class="card">
                <div class="card-header bg-secondary text-light">Permiso a Aplicaciones</div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                  
                                    <th>Aplicaciones</th>
                                    <th>Acceso</th>
                                    <th>Solo visualizar</th>
                                </tr>
                            </thead>
                            <tbody>
                                {#each form3 as aplicacion}
                                <tr>
                                   
                                    <td>{aplicacion.nombre_app}</td>
                                    <td><input type="checkbox" bind:checked={aplicacion.acceso}  ></td>
                                    
                                    <td><input type="checkbox" bind:checked={aplicacion.solo_visualizar} disabled = {!aplicacion.acceso} ></td>
                                    
                                </tr>
                                {/each}
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <svelte:fragment slot="buttons">
            <button class="btn btn-primary"type="submit" disabled={loading}>Guardar</button>
            <button class="btn btn-danger" on:click|preventDefault={onDelete} disabled={loading}>Eliminar</button>
        </svelte:fragment>
    </Modal>
</form>