Movimientos filtrados y editables

This commit is contained in:
Juan Pablo Vial
2024-05-13 16:54:59 -04:00
parent 71bbe7f2d7
commit a5125aff74
7 changed files with 456 additions and 160 deletions

View File

@ -1,160 +1,389 @@
@extends('layout.base')
@section('page_content')
<div class="ui container">
<h1 class="ui header">Movimientos Contables</h1>
</div>
<table id="tabla_movimientos" class="ui table">
<thead>
<tr>
<th>Sociedad</th>
<th>Banco - Cuenta</th>
<th>Fecha</th>
<th>ISO Fecha</th>
<th class="right aligned">Valor</th>
<th>Valor</th>
<th>Centro de Costo</th>
<th>Glosa</th>
<th>Detalle</th>
</tr>
</thead>
<tbody id="movimientos"></tbody>
</table>
@endsection
@include('layout.head.styles.datatables')
@include('layout.head.styles.datatables.searchbuilder')
@include('layout.head.styles.datatables.buttons')
@push('page_styles')
<style>
#table_container {
margin-left: 1rem;
margin-right: 1rem;
}
</style>
@endpush
@section('page_content')
<div class="ui container">
<h1 class="ui header">Movimientos Contables</h1>
<form class="ui form" id="movimientos_form">
<div class="fields">
<div class="six wide field">
<label for="sociedad">Sociedad</label>
<div class="ui selection search multiple dropdown" id="sociedades">
<input type="hidden" name="sociedad[]"/>
<i class="dropdown icon"></i>
<div class="default text">Sociedad</div>
<div class="menu">
@foreach($sociedades as $sociedad)
<div class="item" data-value="{{$sociedad->rut}}">{{$sociedad->razon}}</div>
@endforeach
</div>
</div>
</div>
<div class="three wide field">
<label for="mes">Mes</label>
<div class="ui calendar" id="mes">
<div class="ui right icon input">
<input type="month" name="mes"/>
<i class="calendar icon"></i>
</div>
</div>
</div>
<div class="field">
<label></label>
<button class="ui circular icon button">
<i class="sync alternate icon"></i>
</button>
</div>
</div>
</form>
</div>
<div id="table_container">
<table id="tabla_movimientos" class="ui table">
<thead>
<tr>
<th>Sigla</th>
<th>Banco</th>
<th>Cuenta</th>
<th>Fecha</th>
<th>ISO Fecha</th>
<th>Mes</th>
<th>Año</th>
<th class="right aligned">Valor</th>
<th>Valor</th>
<th>Centro de Costo</th>
<th>Glosa</th>
<th>Detalle</th>
<th>Editar</th>
</tr>
</thead>
<tbody id="movimientos"></tbody>
</table>
</div>
<div class="ui modal" id="movimientos_modal">
<div class="content">
<h3 class="header">
Editar Movimiento
</h3>
<div class="ui grid">
<div class="five columns row">
<div class="column sociedad"></div>
<div class="column banco"></div>
<div class="column cuenta"></div>
<div class="column fecha"></div>
<div class="column valor"></div>
</div>
<div class="one columns row">
<div class="column glosa"></div>
</div>
</div>
<div class="ui divider"></div>
<form class="ui form" id="movimientos_edit">
<input type="hidden" name="index"/>
<input type="hidden" name="id"/>
<div class="field">
<label for="centro_costo">Centro de Costo</label>
<div class="ui selection search dropdown" id="centro_costo">
<input type="hidden" name="centro_id"/>
<i class="dropdown icon"></i>
<div class="default text">Centro de Costo</div>
<div class="menu">
@foreach($centros as $centroCosto)
<div class="item" data-value="{{$centroCosto->id}}">{{$centroCosto->id}} - {{$centroCosto->descripcion}}</div>
@endforeach
</div>
</div>
</div>
<div class="field">
<label for="detalle">Detalle</label>
<div class="ui input">
<textarea id="detalle" name="detalle"></textarea>
</div>
</div>
</form>
</div>
<div class="actions">
<div class="ui cancel button">Cancelar</div>
<div class="ui approve success button">Guardar</div>
</div>
</div>
@endsection
@include('layout.body.scripts.datatables')
@include('layout.body.scripts.datatables.searchbuilder')
@include('layout.body.scripts.datatables.buttons')
@push('page_scripts')
<script>
function getData(table_id, from, amount) {
const url = '{{$urls->api}}/contabilidad/movimientos'
const movimientos = []
return fetchAPI(url).then(response => {
if (!response) {
return
}
response.json().then(json => {
if (json.movimientos.length === 0) {
return
const movimientos = {
ids: {
form: {
id: '',
sociedades: '',
mes: '',
},
table: '',
},
movimientos: [],
table: null,
amount: null,
get() {
return {
movimientos: () => {
const sociedades_ruts = $(this.ids.forms.search.sociedades).dropdown('get values')
const mes = $(this.ids.forms.search.mes).calendar('get date')
const url = '{{$urls->api}}/contabilidad/movimientos/sociedad/mes'
const method = 'post'
const body = new FormData()
sociedades_ruts.forEach(sociedad_rut => {
body.append('sociedades_ruts[]', sociedad_rut)
})
body.set('mes', [mes.getFullYear(), mes.getMonth() + 1, mes.getDate()].join('-'))
if (this.amount !== null) {
body.set('amount', this.amount)
}
this.movimientos = []
return fetchAPI(url, {method, body}).then(response => {
$(this.ids.forms.search.id).removeClass('loading')
if (!response) {
return
}
response.json().then(json => {
this.add().movimientos(json.movimientos)
}).then(() => {
this.draw().table()
})
})
}
const formatter = new Intl.NumberFormat('es-CL')
const dateFormatter = new Intl.DateTimeFormat('es-CL', {day: '2-digit', month: '2-digit', year: 'numeric'})
json.movimientos.forEach(movimiento => {
const fecha = new Date(movimiento.fecha)
}
},
add() {
return {
movimientos: data => {
if (data.length === 0) {
return
}
const formatter = new Intl.NumberFormat('es-CL')
const dateFormatter = new Intl.DateTimeFormat('es-CL', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
})
const tz = ((new Date()).getTimezoneOffset()) / -60
data.forEach((movimiento, index) => {
const fecha = new Date(movimiento.fecha + 'Z' + tz)
const valor = movimiento.abono - movimiento.cargo
this.movimientos.push([
movimiento.cuenta.inmobiliaria.sigla,//0
movimiento.cuenta.banco.nombre,//1
movimiento.cuenta.cuenta,//2
dateFormatter.format(fecha),//3
[fecha.getFullYear(), fecha.getMonth() + 1, fecha.getDate()].join('-'),//4
fecha.getMonth() + 1,//5
fecha.getFullYear(),//6
formatter.format(valor),//7
valor,//8
(movimiento.detalles) ? movimiento.detalles.centro_costo.id : '',//9
movimiento.glosa,//10
(movimiento.detalles) ? movimiento.detalles.detalle : '',//11
'<button class="ui icon button edit_button" data-id="' + movimiento.id + '" data-index="' + index + '"><i class="edit icon"></i></button>',//12
])
})
}
}
},
update() {
return {
movimiento: ({index, movimiento}) => {
const formatter = new Intl.NumberFormat('es-CL')
const dateFormatter = new Intl.DateTimeFormat('es-CL', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
})
const tz = ((new Date()).getTimezoneOffset()) / -60
const fecha = new Date(movimiento.fecha + 'Z' + tz)
const valor = movimiento.abono - movimiento.cargo
movimientos.push([
movimiento.cuenta.inmobiliaria.razon,
movimiento.cuenta.banco.nombre + ' - ' + movimiento.cuenta.cuenta,
dateFormatter.format(fecha),
fecha.toISOString(),
formatter.format(valor),
valor,
(movimiento.detalles) ? movimiento.detalles.centro_costo.id + ' - ' + movimiento.detalles.centro_costo.descripcion : '',
movimiento.glosa,
(movimiento.detalles) ? movimiento.detalles.detalle : ''
])
})
}).then(() => {
const table = new DataTable(table_id, {
columnDefs: [
{targets: 3, visible: false},
{targets: 4, className: 'dt-right'},
{targets: 5, visible: false}
],
order: [[3, 'asc']],
language: {
info: 'Mostrando página _PAGE_ de _PAGES_',
infoEmpty: 'No hay cuotas ingresadas',
infoFiltered: '(filtrado de _MAX_ cuotas)',
lengthMenu: 'Mostrando de a _MENU_ cuotas',
zeroRecords: 'No se encotró cuotas con ese criterio',
search: 'Buscar: ',
searchBuilder: {
add: 'Filtrar',
condition: 'Comparador',
clearAll: 'Resetear',
delete: 'Eliminar',
deleteTitle: 'Eliminar Titulo',
data: 'Columna',
left: 'Izquierda',
leftTitle: 'Titulo Izquierdo',
logicAnd: 'Y',
logicOr: 'O',
right: 'Derecha',
rightTitle: 'Titulo Derecho',
title: {
0: 'Filtros',
_: 'Filtros (%d)'
},
value: 'Opciones',
valueJoiner: 'y'
}
},
layout: {
top1: {
searchBuilder: {
columns: [0, 1, 2, 4, 6, 7, 8]
}
},
top1End: {
buttons: [
{
extend: 'excelHtml5',
className: 'green',
text: 'Exportar a Excel <i class="file excel icon"></i>',
title: 'Movimientos Contables',
download: 'open',
exportOptions: {
columns: [0, 1, 2, 5, 6, 7, 8]
}
}
]
}
},
data: movimientos,
})
})
})
}
function updateTable(table, from, amount) {
const url = '{{$urls->api}}/contabilidad/movimientos'
return fetchAPI(url).then(response => {
if (!response) {
return
this.movimientos[index] = [
movimiento.cuenta.inmobiliaria.sigla,//0
movimiento.cuenta.banco.nombre,//1
movimiento.cuenta.cuenta,//2
dateFormatter.format(fecha),//3
[fecha.getFullYear(), fecha.getMonth() + 1, fecha.getDate()].join('-'),//4
fecha.getMonth() + 1,//5
fecha.getFullYear(),//6
formatter.format(valor),//7
valor,//8
movimiento.detalles.centro_costo.id,//9
movimiento.glosa,//10
movimiento.detalles.detalle,//11
'<button class="ui icon button edit_button" data-id="' + movimiento.id + '" data-index="' + index + '"><i class="edit icon"></i></button>',//12
]
this.draw().table()
}
}
response.json().then(json => {
if (json.movimientos.length === 0) {
},
draw() {
return {
table: () => {
this.table.clear().rows.add(this.movimientos).draw()
$(this.ids.buttons.edit).click(clickEvent => {
const id = $(clickEvent.currentTarget).data('id')
const index = $(clickEvent.currentTarget).data('index')
this.draw().edit({id, index})
})
},
edit: ({id, index}) => {
const form = $('#' + this.ids.forms.edit.id)
form.find("[name='id']").val(id)
form.find("[name='index']").val(index)
$(this.ids.modals.edit).find('.sociedad').text('Sociedad: ' + this.movimientos[index][0])
$(this.ids.modals.edit).find('.banco').text('Banco: ' + this.movimientos[index][1])
$(this.ids.modals.edit).find('.cuenta').text('Cuenta: ' + this.movimientos[index][2])
$(this.ids.modals.edit).find('.fecha').text('Fecha: ' + this.movimientos[index][3])
$(this.ids.modals.edit).find('.valor').text('Valor: ' + this.movimientos[index][7])
$(this.ids.modals.edit).find('.glosa').text('Glosa: ' + this.movimientos[index][10])
form.find("[name='centro_costo']").dropdown('set selected', this.movimientos[index][9])
form.find("[name='detalle']").val(this.movimientos[index][11])
$(this.ids.modals.edit).modal('show')
}
}
},
submit(submitEvent) {
submitEvent.preventDefault()
$(submitEvent.currentTarget).addClass('loading')
movimientos.get().movimientos()
return false
},
edit() {
const body = new FormData(document.getElementById('movimientos_edit'))
const id = body.get('id')
const index = body.get('index')
body.delete('id')
body.delete('index')
const url = '{{$urls->api}}/contabilidad/movimiento/' + id + '/detalles'
const method = 'post'
return fetchAPI(url, {method, body}).then(response => {
if (!response) {
return
}
table.clear()
const formatter = new Intl.NumberFormat('es-CL')
const dateFormatter = new Intl.DateTimeFormat('es-CL', {day: '2-digit', month: '2-digit', year: 'numeric'})
json.movimientos.forEach(movimiento => {
const fecha = new Date(movimiento.fecha)
table.row.add([
movimiento.cuenta.inmobiliaria.razon,
movimiento.cuenta.banco.nombre + ' - ' + movimiento.cuenta.cuenta,
dateFormatter.format(fecha),
fecha.toISOString(),
formatter.format(movimiento.abono - movimiento.cargo),
(movimiento.detalles) ? movimiento.detalles.centro_costo.id + ' - ' + movimiento.detalles.centro_costo.descripcion : '',
movimiento.glosa,
(movimiento.detalles) ? movimiento.detalles.detalle : ''
])
return response.json().then(json => {
this.update().movimiento({index, movimiento: json.movimiento})
})
}).then(() => {
table.draw()
})
})
},
setup(ids) {
this.ids = ids
$(this.ids.forms.search.sociedades).dropdown()
const cdo = structuredClone(calendar_date_options)
cdo['type'] = 'month'
cdo['maxDate'] = new Date()
$(this.ids.forms.search.mes).calendar(cdo)
$(this.ids.forms.search.id).submit(this.submit)
let dtD = structuredClone(datatables_defaults)
dtD = Object.assign(dtD, {
columnDefs: [
{targets: [0, 5, 9, 12], width: '5%', type: 'string'},
{targets: [1, 2, 3, 6, 10], width: '10%', type: 'string'},
{targets: [11], width: '20%', type: 'string'},
{targets: 4, visible: false},
{targets: 7, className: 'dt-right', width: '10%'},
{targets: 8, visible: false, type: 'num'}
],
order: [[4, 'asc']],
language: Object.assign(dtD.language, {
searchBuilder: {
add: 'Filtrar',
condition: 'Comparador',
clearAll: 'Resetear',
delete: 'Eliminar',
deleteTitle: 'Eliminar Titulo',
data: 'Columna',
left: 'Izquierda',
leftTitle: 'Titulo Izquierdo',
logicAnd: 'Y',
logicOr: 'O',
right: 'Derecha',
rightTitle: 'Titulo Derecho',
title: {
0: 'Filtros',
_: 'Filtros (%d)'
},
value: 'Opciones',
valueJoiner: 'y'
}
}),
layout: {
top1: {
searchBuilder: {
columns: [0, 1, 2, 4, 6, 7, 8]
}
},
top1End: {
buttons: [
{
extend: 'excelHtml5',
className: 'green',
text: 'Exportar a Excel <i class="file excel icon"></i>',
title: 'Movimientos Contables',
download: 'open',
exportOptions: {
columns: [0, 1, 2, 5, 6, 7, 8]
}
}
]
}
},
data: this.movimientos,
})
this.table = new DataTable(this.ids.table, dtD)
$(this.ids.modals.edit).modal({
onApprove: $element => {
this.edit()
}
})
$('#' + this.ids.forms.edit.id).find('#centro_costo').dropdown()
}
}
$(document).ready(() => {
getData('#tabla_movimientos', 0, 100)
movimientos.setup({
forms: {
search: {
id: '#movimientos_form',
sociedades: '#sociedades',
mes: '#mes',
},
edit: {
id: 'movimientos_edit',
}
},
table: '#tabla_movimientos',
modals: {
edit: '#movimientos_modal'
},
buttons: {
edit: '.edit_button'
}
})
})
</script>
@endpush

View File

@ -21,6 +21,28 @@
console.error(error)
})
}
const datatables_defaults = {
language: {
emptyTable: 'No hay datos disponibles',
info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
infoEmpty: 'Mostrando desde 0 a 0 de 0 registros',
infoFiltered: '(filtrado de _MAX_ registros totales)',
lengthMenu: 'Mostrar _MENU_ registros',
loadingRecords: 'Cargando...',
search: 'Buscar:',
zeroRecords: 'No se encontraron registros',
paginate: {
first: 'Primero',
last: 'Último',
next: 'Siguiente',
previous: 'Anterior',
},
aria: {
orderable: 'Ordenar por esta columna',
orderableReverse: 'Ordenar por esta columna en orden inverso',
}
}
}
const calendar_date_options = {
type: 'date',
firstDayOfWeek: 1,
@ -28,9 +50,12 @@
monthFirst: false,
text: {
days: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
today: 'Hoy'
today: 'Hoy',
now: 'Ahora',
},
formatter: {
date: 'DD-MM-YYYY'