390 lines
17 KiB
PHP
390 lines
17 KiB
PHP
@extends('layout.base')
|
|
|
|
@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>
|
|
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()
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
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
|
|
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()
|
|
}
|
|
}
|
|
},
|
|
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
|
|
}
|
|
return response.json().then(json => {
|
|
this.update().movimiento({index, movimiento: json.movimiento})
|
|
})
|
|
})
|
|
},
|
|
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, 3, 5, 6, 8, 9, 10, 11]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
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(() => {
|
|
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
|