Actualizar Detalles con JS

 Hoy se realizaron las paginas de ver semanas y meses, además de la configuracion para los detalles, las paginas en general se hicieron muy similar a como funcionaban las tablas en el anterior proyecto, lo difícil aquí fue ir actualizando los detalles de la vista de detalles dinámicamente.

Lo primero que hacemos es renderizar la pagina, y pasar como parámetros las detalles de planillas, los detalles de salario, y las deducciones, luego los datos de salario bruto y deducciones funcionan como botones que invocan a un popout, estos botones tienen un parámetro llamado "data-button" que contienen un array con los datos de salario o deducciones según corresponda.

{% for planilla in planillas %}

<tr>

    <td scope="row">

        <a href="" class="text-dark boton_salario" data-button="{{detalles_salario[planilla[0]]}}" data-toggle="modal"

            data-target="#salarioModal">{{planilla[1]}}</a>

    </td>

    <td scope="row">

        <a href="" class="text-dark boton_deduccion" data-button="{{deducciones[planilla[0]]}}"  data-toggle="modal"

            data-target="#deduccionesModal">{{planilla[2]}}</a>

    </td>

Luego de esto pasamos al JavaScript, en donde vamos a leer cuando damos click a dichos botones y vamos a actualizar los parametros del popout:

//al presionar en unn boton de salario obtenemoos datos y los actualizamos en la pagina

$('.boton_salario').bind('click', function(e) {

    var data = ($(this).attr('data-button'));

    data = data.replace(/'/g, '"');

    data = JSON.parse(data);

    

    tabla = getHTMLTablaSalario(data);

    document.getElementById("tabla_popuot_detalles_salario").innerHTML = tabla;

});

un problema  tenia al principio es que solo se pasaba el primer elemento del array, esto fue solucionado al convertir ese array a string dentro del HTML, el problema de esto fue que ahora tenia que encontrar la forma de convertir un string en un array dentro de JS, una solución que encontré fue usar el método JSON.parse() este metodo me permite convertir el string en un array, pero al principio me dio errores debido a que el array contenía comillas simples, las cuales eran confundidas por JS y todo se desarmaba horrible, la solución fue simplemente cambiar todas las comillas simples por comillas dobles antes de convertirlo a un array, y con esto ya teníamos nuestro array, luego usando la función que cree llamada getHTMLTablaSalario(data), con la que convertimos ese array en código html que luego inyectamos en la pagina

//con esta funcoin convertimos el array en una tabla en html

function getHTMLTablaSalario(data){

    var tabla = ''

    $.each(data, function( index, value ) {

        tabla = tabla + '<tr >'+

        '<th>'+value[0]+'</th>'+

        '<td>'+value[1]+'</td>'+

        '<td>'+value[2]+'</td>'+

        '<td>'+value[3]+'</td>'+

        '<td>'+value[4]+'</td>'+

        '<td>'+value[5]+'</td>'+

        '<td>'+value[6]+'</td>';

        

      });

    return tabla;

};

Finalmente la pagina se ve así: (de momento son datos placeholder)

Además de esto se actualizó la pagina principal de esta forma:

En el panel lateral no todos los botones son funcionales, pero estas ahí como un previsto para la tarea 3 en caso de que se necesiten, la tabla de últimos movimientos aun no se sabe si la vamos a usar o no, pero el plan es tener ahí los ultimos 15 movimientos realizados, el tiempo dirá si esta funcinalidad se mantiene o no

Oswaldo - 6 horas

sd