Movimientos filtrados y editables
This commit is contained in:
Juan Pablo Vial
@ -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
|
||||
|
||||
@ -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'
|
||||
|
||||
Reference in New Issue
Block a user