1061 lines
49 KiB
PHP
1061 lines
49 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 fluid 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="fields" id="movimiento_data">
|
|
<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>RUT</label>
|
|
<div class="ui right labeled input">
|
|
<input type="text" name="rut" placeholder="RUT" />
|
|
<div class="ui basic label">-<span id="digito"></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Nombre</label>
|
|
<input type="text" name="nombre" placeholder="Nombre" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Categoría</label>
|
|
<input type="text" name="categoria" placeholder="Categoría" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="detalle">Detalle</label>
|
|
<div class="ui input">
|
|
<textarea id="detalle" name="detalle"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table class="ui table" id="auxiliares">
|
|
<thead>
|
|
<tr>
|
|
<th>Cargo</th>
|
|
<th>Abono</th>
|
|
<th>Centro Costo</th>
|
|
<th>RUT</th>
|
|
<th>Nombre</th>
|
|
<th>Categoría</th>
|
|
<th>Detalle</th>
|
|
<th class="right aligned">
|
|
<button class="ui green icon button" type="button" id="add_auxiliar">
|
|
<i class="plus icon"></i>
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui red cancel button">Cancelar</div>
|
|
<div class="ui green 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')
|
|
@include('layout.body.scripts.rut')
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class CentrosCostos {
|
|
static data = []
|
|
static get() {
|
|
if (this.data.length === 0) {
|
|
this.data = JSON.parse('{!! json_encode($centros) !!}')
|
|
}
|
|
return this.data
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|
|
@push('page_scripts')
|
|
<script>
|
|
class EventHandler {
|
|
props
|
|
constructor({movimientosHandler, modalHandler}) {
|
|
this.props = {
|
|
movimientosHandler,
|
|
modalHandler
|
|
}
|
|
}
|
|
get() {
|
|
return {
|
|
movimientos: submitEvent => {
|
|
submitEvent.preventDefault()
|
|
submitEvent.data.handler.props.movimientosHandler.get().movimientos({
|
|
sociedades_ruts: $(submitEvent.data.sociedades_id).dropdown('get values'),
|
|
mes: $(submitEvent.data.mes_id).calendar('get date')
|
|
}).then(() => {
|
|
app.handlers.table.draw().table(app.handlers.results.props.parsed)
|
|
})
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
edit() {
|
|
return {
|
|
movimiento: clickEvent => {
|
|
const id = $(clickEvent.currentTarget).data('id')
|
|
const index = $(clickEvent.currentTarget).data('index')
|
|
const type = $(clickEvent.currentTarget).data('type')
|
|
const movimiento = this.props.movimientosHandler.find().id(id)
|
|
clickEvent.data.handler.props.modalHandler.show({movimiento, type})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
class LoadingHandler {
|
|
props
|
|
constructor({ids}) {
|
|
this.props = {
|
|
ids
|
|
}
|
|
}
|
|
show() {
|
|
$(this.props.id).addClass('loading')
|
|
}
|
|
hide() {
|
|
$(this.props.id).removeClass('loading')
|
|
}
|
|
}
|
|
class ControlForm {
|
|
props
|
|
constructor({ids,}) {
|
|
this.props = {
|
|
ids,
|
|
}
|
|
}
|
|
setup() {
|
|
$(this.props.ids.sociedades).dropdown()
|
|
|
|
const cdo = structuredClone(calendar_date_options)
|
|
cdo['type'] = 'month'
|
|
cdo['maxDate'] = new Date()
|
|
$(this.props.ids.mes).calendar(cdo)
|
|
|
|
$(this.props.ids.form).on('submit', {
|
|
sociedades_id: this.props.ids.sociedades,
|
|
mes_id: this.props.ids.mes,
|
|
handler: app.handlers.event
|
|
}, app.handlers.event.get().movimientos)
|
|
}
|
|
}
|
|
class MovimientosTable {
|
|
props
|
|
constructor({ids, eventHandler}) {
|
|
this.props = {
|
|
ids,
|
|
eventHandler,
|
|
movimientos: [],
|
|
formatters: {
|
|
number: new Intl.NumberFormat('es-CL'),
|
|
date: new Intl.DateTimeFormat('es-CL', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric'
|
|
}),
|
|
},
|
|
}
|
|
}
|
|
draw() {
|
|
return {
|
|
table: (movimientos) => {
|
|
this.props.table.clear().rows.add(this.draw().movimientos(movimientos)).draw()
|
|
$(this.props.ids.buttons.edit).on('click', {handler: this.props.eventHandler}, this.props.eventHandler.edit().movimiento)
|
|
},
|
|
movimientos: (movimientos) => {
|
|
const output = []
|
|
movimientos.forEach(movimiento => {
|
|
this.draw().movimiento({movimiento, output})
|
|
})
|
|
return output
|
|
},
|
|
movimiento: ({movimiento, output}) => {
|
|
const valor = movimiento.abono - movimiento.cargo
|
|
const fecha = movimiento.fecha
|
|
output.push([
|
|
movimiento.cuenta.inmobiliaria.sigla,//0
|
|
movimiento.cuenta.banco.nombre,//1
|
|
movimiento.cuenta.cuenta,//2
|
|
this.props.formatters.date.format(fecha),//3
|
|
[fecha.getFullYear(), fecha.getMonth() + 1, fecha.getDate()].join('-'),//4
|
|
fecha.getMonth() + 1,//5
|
|
fecha.getFullYear(),//6
|
|
this.props.formatters.number.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="' + movimiento.index + '" data-type="movimiento"><i class="edit icon"></i></button>',//12
|
|
])
|
|
}
|
|
}
|
|
}
|
|
setup() {
|
|
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],
|
|
format: {
|
|
body: (data, row, column, node) => {
|
|
if (column === 3) {
|
|
return data.split('-').reverse().join('-')
|
|
}
|
|
return data
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
data: this.props.movimientos,
|
|
})
|
|
this.props.table = new DataTable(this.props.ids.table, dtD)
|
|
}
|
|
}
|
|
class EditModal {
|
|
props
|
|
constructor({ids, editForm}) {
|
|
this.props = {
|
|
ids,
|
|
editForm,
|
|
movimientos: []
|
|
}
|
|
}
|
|
reset() {
|
|
$(this.props.ids.modal).find('.sociedad').text('')
|
|
$(this.props.ids.modal).find('.banco').text('')
|
|
$(this.props.ids.modal).find('.cuenta').text('')
|
|
$(this.props.ids.modal).find('.fecha').text('')
|
|
$(this.props.ids.modal).find('.valor').text('')
|
|
this.props.editForm.reset()
|
|
}
|
|
show({movimiento, type}) {
|
|
$(this.props.ids.modal).modal('show')
|
|
$(this.props.ids.modal).find('.sociedad').text('Sociedad: ' + movimiento.cuenta.inmobiliaria.sigla)
|
|
$(this.props.ids.modal).find('.banco').text('Banco: ' + movimiento.cuenta.banco.nombre)
|
|
$(this.props.ids.modal).find('.cuenta').text('Cuenta: ' + movimiento.cuenta.cuenta)
|
|
$(this.props.ids.modal).find('.fecha').text('Fecha: ' + movimiento.fecha)
|
|
$(this.props.ids.modal).find('.valor').text('Valor: ' + (movimiento.abono - movimiento.cargo))
|
|
this.props.editForm.show({modal: $(this.props.ids.modal), movimiento, type})
|
|
}
|
|
hide() {
|
|
$(this.props.ids.modal).modal('hide')
|
|
this.reset()
|
|
}
|
|
}
|
|
class EditForm {
|
|
props
|
|
constructor({ids}) {
|
|
this.props = {
|
|
ids,
|
|
movimientos: []
|
|
}
|
|
}
|
|
reset() {
|
|
$(this.props.ids.form).form('reset')
|
|
}
|
|
show({modal, movimiento, type}) {
|
|
if (movimiento.detalles) {
|
|
modal.find('#movimiento_data').show()
|
|
modal.find('#auxiliares').hide()
|
|
modal.find("[name='centro_id']").dropdown('set selected', movimiento.detalles.centro_costo.id)
|
|
modal.find("[name='rut']").val(movimiento.detalles.rut)
|
|
modal.find("#digito").text(Rut.digitoVerificador(movimiento.detalles.rut))
|
|
modal.find("[name='nombre']").val(movimiento.detalles.nombre)
|
|
modal.find("[name='categoria']").val(movimiento.detalles.categoria)
|
|
modal.find("[name='detalle']").val(movimiento.detalles.detalle)
|
|
} else {
|
|
modal.find('#movimiento_data').hide()
|
|
modal.find('#auxiliares').show()
|
|
const tbody = modal.find('#auxiliares tbody')
|
|
tbody.empty()
|
|
movimiento.auxiliares.forEach((auxiliar, i) => {
|
|
tbody.append(`<tr>
|
|
<td><input type="text" name="cargo${i}" value="${auxiliar.cargo}" /></td>
|
|
<td><input type="text" name="abono${i}" value="${auxiliar.abono}" /></td>
|
|
<td>
|
|
<div class="ui selection search dropdown">
|
|
<input type="hidden" name="centro_costo${i}" />
|
|
<i class="dropdown icon"></i>
|
|
<div class="default text">Centro de Costo</div>
|
|
<div class="menu">
|
|
${CentrosCostos.get().map(centroCosto => `<div class="item" data-value="${centroCosto.id}">${centroCosto.id} - ${centroCosto.descripcion}</div>`).join('')}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="ui right labeled input">
|
|
<input type="text" name="rut${i}" value="${auxiliar.detalles.rut}" />
|
|
<div class="ui basic label">-<span class="digito" data-index="${i}">${Rut.digitoVerificador(auxiliar.detalles.rut)}</span></div>
|
|
</div>
|
|
</td>
|
|
<td><input type="text" name="nombre${i}" value="${auxiliar.detalles.nombre}" /></td>
|
|
<td><input type="text" name="categoria${i}" value="${auxiliar.detalles.categoria}" /></td>
|
|
<td><input type="text" name="detalle${i}" value="${auxiliar.detalles.detalle}" /></td>
|
|
<td><button class="ui red icon button" type="button"><i class="trash icon"></i></button></td>
|
|
</tr>`)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
class MovimientosHandler {
|
|
props
|
|
constructor({urls, loadingHandler, resultsHandler}) {
|
|
this.props = {
|
|
urls,
|
|
loadingHandler,
|
|
resultsHandler
|
|
}
|
|
}
|
|
get() {
|
|
return {
|
|
movimientos: ({sociedades_ruts, mes}) => {
|
|
this.props.loadingHandler.show()
|
|
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('-'))
|
|
return APIClient.fetch(this.props.urls.get, {method, body}).then(response => {
|
|
if (!response) {
|
|
throw new Error('No se pudo obtener los movimientos')
|
|
}
|
|
return response.json().then(json => {
|
|
this.movimientos = json.movimientos
|
|
this.props.resultsHandler.props.movimientos = json.movimientos
|
|
this.props.resultsHandler.parse().movimientos()
|
|
return json.movimientos
|
|
})
|
|
}).catch(error => {
|
|
console.error(error)
|
|
}).finally(() => {
|
|
this.props.loadingHandler.hide()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
edit() {
|
|
return {
|
|
movimiento: ({id, index, type, data}) => {
|
|
/*this.props.resultsHandler.parse().movimientos()
|
|
this.props.resultsHandler.props.movimientos.forEach((movimiento, i) => {
|
|
if (movimiento.id === id && movimiento.index === index) {
|
|
this.props.editModal.show({id, index, type})
|
|
}
|
|
})*/
|
|
}
|
|
}
|
|
}
|
|
find() {
|
|
return {
|
|
id: id => {
|
|
return this.props.resultsHandler.props.movimientos.find(movimiento => movimiento.id === id)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
class ResultsHandler {
|
|
props
|
|
constructor() {
|
|
this.props = {
|
|
movimientos: [],
|
|
timezone: ((new Date()).getTimezoneOffset()) / -60
|
|
}
|
|
}
|
|
parse() {
|
|
return {
|
|
movimientos: () => {
|
|
const movimientos = this.props.movimientos
|
|
const data = []
|
|
movimientos.forEach((movimiento, index) => {
|
|
this.parse().movimiento({data, movimiento, index})
|
|
})
|
|
this.props.parsed = data
|
|
},
|
|
movimiento: ({data, movimiento, index}) => {
|
|
const fecha = new Date(movimiento.fecha + 'Z' + this.props.timezone)
|
|
if (movimiento.auxiliares.length > 0) {
|
|
movimiento.auxiliares.forEach((auxiliar, indexAuxiliar) => {
|
|
data.push({
|
|
tipo: 'auxiliar',
|
|
id: auxiliar.id,
|
|
index: index * 100000 + indexAuxiliar,
|
|
cuenta: movimiento.cuenta,
|
|
fecha,
|
|
cargo: auxiliar.cargo,
|
|
abono: auxiliar.abono,
|
|
detalles: auxiliar.detalles,
|
|
glosa: movimiento.glosa,
|
|
})
|
|
})
|
|
return
|
|
}
|
|
data.push({
|
|
tipo: 'movimiento',
|
|
id: movimiento.id,
|
|
index,
|
|
cuenta: movimiento.cuenta,
|
|
fecha,
|
|
cargo: movimiento.cargo,
|
|
abono: movimiento.abono,
|
|
glosa: movimiento.glosa,
|
|
detalles: movimiento.detalles,
|
|
auxiliares: movimiento.auxiliares,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*const editForm = {
|
|
id: '',
|
|
data: {
|
|
index: 0,
|
|
id: 0,
|
|
sociedad: '',
|
|
banco: '',
|
|
fecha: '',
|
|
valor: 0,
|
|
glosa: '',
|
|
},
|
|
fields: {
|
|
centro_costo: '',
|
|
rut: '',
|
|
nombre: '',
|
|
categoria: '',
|
|
detalle: '',
|
|
},
|
|
auxiliares: [],
|
|
show({type, index, id, sociedad, banco, cuenta, fecha, valor, glosa, centro_costo = '', rut = '', nombre = '', categoria = '', detalle = '', auxiliares = []}) {
|
|
this.data = {
|
|
index,
|
|
id,
|
|
sociedad,
|
|
banco,
|
|
cuenta,
|
|
fecha,
|
|
valor,
|
|
glosa,
|
|
}
|
|
this.auxiliares = auxiliares
|
|
$(this.id).find('.sociedad').text('Sociedad: ' + sociedad)
|
|
$(this.id).find('.banco').text('Banco: ' + banco)
|
|
$(this.id).find('.cuenta').text('Cuenta: ' + cuenta)
|
|
$(this.id).find('.fecha').text('Fecha: ' + fecha)
|
|
$(this.id).find('.valor').text('Valor: ' + valor)
|
|
$(this.id).find('.glosa').text('Glosa: ' + glosa)
|
|
if (auxiliares.length > 0) {
|
|
this.auxiliares = auxiliares
|
|
$(this.id).find('#movimiento_data').hide()
|
|
$(this.id).find('#auxiliares').show()
|
|
const tbody = $(this.id).find('#auxiliares tbody')
|
|
tbody.empty()
|
|
auxiliares.forEach((auxiliar, i) => {
|
|
this.draw().auxiliar({auxiliar, i})
|
|
})
|
|
} else {
|
|
$(this.id).find('#movimiento_data').show()
|
|
if (type === 'auxiliar') {
|
|
$(this.id).find('#auxiliares').hide()
|
|
}
|
|
if (centro_costo !== '') {
|
|
$(this.id).find("[name='centro_costo']").dropdown('set selected', centro_costo)
|
|
}
|
|
$(this.id).find("[name='rut']").val(rut)
|
|
$(this.id).find("#digito").text(Rut.digitoVerificador(rut))
|
|
$(this.id).find("[name='nombre']").val(nombre)
|
|
$(this.id).find("[name='categoria']").val(categoria)
|
|
$(this.id).find("[name='detalle']").val(detalle)
|
|
}
|
|
$(this.id).modal('show')
|
|
},
|
|
draw() {
|
|
return {
|
|
auxiliar: ({auxiliar, i}) => {
|
|
const tbody = $(this.id).find('#auxiliares tbody')
|
|
const menu = $('<div></div>').addClass('menu')
|
|
CentrosCostos.get().forEach(centroCosto => {
|
|
menu.append(`<div class="item" data-value="${centroCosto.id}">${centroCosto.id} - ${centroCosto.descripcion}</div>`)
|
|
})
|
|
const tr = $('<tr>')
|
|
if (typeof auxiliar !== 'undefined' && auxiliar.includes('cargo')) {
|
|
tr.append(`<td><input type="text" name="cargo${i}" value="${auxiliar.cargo}" /></td>`)
|
|
} else {
|
|
tr.append(`<td><input type="text" name="cargo${i}" /></td>`)
|
|
}
|
|
if (typeof auxiliar !== 'undefined' && auxiliar.includes('abono')) {
|
|
tr.append(`<td><input type="text" name="abono${i}" value="${auxiliar.abono}" /></td>`)
|
|
} else {
|
|
tr.append(`<td><input type="text" name="abono${i}" /></td>`)
|
|
}
|
|
tr.append(
|
|
$('<td>').append($('<div>').addClass('ui selection search dropdown').attr('data-index', i).append(
|
|
`<input type="hidden" name="centro_costo${i} />`
|
|
).append(
|
|
`<i class="dropdown icon"></i>`
|
|
).append(
|
|
`<div class="default text">Centro de Costo</div>`
|
|
).append(menu)
|
|
)
|
|
)
|
|
if (typeof auxiliar !== 'undefined' && auxiliar.includes('detalles') && auxiliar.detalles.includes('rut')) {
|
|
tr.append(`<td>
|
|
<div class="ui right labeled input">
|
|
<input type="text" name="rut${i}" value="${auxiliar.detalles.rut}" />
|
|
<div class="ui basic label">-<span class="digito" data-index="${i}">${Rut.digitoVerificador(auxiliar.detalles.rut)}</span></div>
|
|
</div>
|
|
</td>`)
|
|
} else {
|
|
tr.append(`<td>
|
|
<div class="ui right labeled input">
|
|
<input type="text" name="rut${i}" />
|
|
<div class="ui basic label">-<span class="digito" data-index="${i}"></span></div>
|
|
</div>
|
|
</td>`)
|
|
}
|
|
if (typeof auxiliar !== 'undefined' && auxiliar.includes('nombre')) {
|
|
tr.append(`<td><input type="text" name="nombre${i}" value="${auxiliar.nombre}" /></td>`)
|
|
} else {
|
|
tr.append(`<td><input type="text" name="nombre${i}" /></td>`)
|
|
}
|
|
if (typeof auxiliar !== 'undefined' && auxiliar.includes('categoria')) {
|
|
tr.append(`<td><input type="text" name="categoria${i}" value="${auxiliar.categoria}" /></td>`)
|
|
} else {
|
|
tr.append(`<td><input type="text" name="categoria${i}" /></td>`)
|
|
}
|
|
if (typeof auxiliar !== 'undefined' && auxiliar.includes('detalle')) {
|
|
tr.append(`<td><input type="text" name="detalle${i}" value="${auxiliar.detalle}" /></td>`)
|
|
} else {
|
|
tr.append(`<td><input type="text" name="detalle${i}" /></td>`)
|
|
}
|
|
tbody.append(tr)
|
|
$(this.id).find(`.dropdown[data-index='${i}']`).dropdown()
|
|
if (typeof auxiliar !== 'undefined' && auxiliar.detalles && auxiliar.detalles.centro_costo && auxiliar.detalles.centro_costo.id) {
|
|
$(this.id).find(`[name='centro_costo${i}']`).val(auxiliar.detalles.centro_costo.id)
|
|
}
|
|
$(this.id).find(`[name='rut${i}']`).on('input', inputEvent => {
|
|
inputEvent.currentTarget.value = Rut.format(inputEvent.currentTarget.value)
|
|
const index = $(inputEvent.currentTarget).data('index')
|
|
$(this.id).find(`.digito[data-index='${index}']`).text(Rut.digitoVerificador($(inputEvent.currentTarget).val()))
|
|
})
|
|
}
|
|
}
|
|
},
|
|
submit() {
|
|
const url = ''
|
|
const method = 'post'
|
|
const body = new FormData()
|
|
const data = this.data
|
|
data.centro_costo = $(this.id).find("[name='centro_costo']").dropdown('get value')
|
|
data.rut = $(this.id).find("[name='rut']").val()
|
|
data.nombre = $(this.id).find("[name='nombre']").val()
|
|
data.categoria = $(this.id).find("[name='categoria']").val()
|
|
data.detalle = $(this.id).find("[name='detalle']").val()
|
|
console.debug(data)
|
|
},
|
|
setup(id) {
|
|
this.id = id
|
|
$(this.id).modal({
|
|
onApprove: $element => {
|
|
this.submit()
|
|
}
|
|
})
|
|
$(this.id).find('#centro_costo').dropdown()
|
|
$(this.id).find("[name='rut']").on('input', inputEvent => {
|
|
$(this.id).find('#digito').text(Rut.digitoVerificador($(inputEvent.currentTarget).val()))
|
|
})
|
|
$(this.id).find('#digito').text(Rut.digitoVerificador($("[name='rut']").val()))
|
|
$(this.id).find('#add_auxiliar').click(clickEvent => {
|
|
const i = this.auxiliares.length + 1
|
|
this.draw().auxiliar({i})
|
|
})
|
|
}
|
|
}*/
|
|
/*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 = '/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 tz = ((new Date()).getTimezoneOffset()) / -60
|
|
data.forEach((movimiento, index) => {
|
|
const fecha = new Date(movimiento.fecha + 'Z' + tz)
|
|
if (movimiento.auxiliares.length > 0) {
|
|
movimiento.auxiliares.forEach((auxiliar, indexAuxiliar) => {
|
|
this.movimientos.push({
|
|
tipo: 'auxiliar',
|
|
id: auxiliar.id,
|
|
index: index * 100 + indexAuxiliar,
|
|
cuenta: movimiento.cuenta,
|
|
fecha,
|
|
cargo: auxiliar.cargo,
|
|
abono: auxiliar.abono,
|
|
detalles: auxiliar.detalles,
|
|
glosa: movimiento.glosa,
|
|
})
|
|
})
|
|
return
|
|
}
|
|
this.movimientos.push({
|
|
tipo: 'movimiento',
|
|
id: movimiento.id,
|
|
index,
|
|
cuenta: movimiento.cuenta,
|
|
fecha,
|
|
cargo: movimiento.cargo,
|
|
abono: movimiento.abono,
|
|
glosa: movimiento.glosa,
|
|
detalles: movimiento.detalles,
|
|
auxiliares: movimiento.auxiliares,
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
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.draw().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})
|
|
})
|
|
},
|
|
movimientos: () => {
|
|
const output = []
|
|
this.movimientos.forEach(movimiento => {
|
|
this.draw().movimiento({movimiento, output})
|
|
})
|
|
return output
|
|
},
|
|
movimiento: ({movimiento, output}) => {
|
|
const formatter = new Intl.NumberFormat('es-CL')
|
|
const dateFormatter = new Intl.DateTimeFormat('es-CL', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric'
|
|
})
|
|
const valor = movimiento.abono - movimiento.cargo
|
|
const fecha = movimiento.fecha
|
|
output.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="' + movimiento.index + '" data-type="movimiento"><i class="edit icon"></i></button>',//12
|
|
])
|
|
},
|
|
edit: ({id, index, type}) => {
|
|
const idx = this.movimientos.findIndex(movimiento => movimiento.index === index)
|
|
editForm.show({
|
|
type,
|
|
id,
|
|
index,
|
|
sociedad: this.movimientos[idx].cuenta.inmobiliaria.sigla,
|
|
banco: this.movimientos[idx].cuenta.banco.nombre,
|
|
cuenta: this.movimientos[idx].cuenta.cuenta,
|
|
fecha: this.movimientos[idx].fecha,
|
|
valor: this.movimientos[idx].abono - this.movimientos[idx].cargo,
|
|
glosa: this.movimientos[idx].glosa,
|
|
centro_costo: (this.movimientos[idx].detalles !== null && typeof this.movimientos[idx].detalles.centro_costo) ? this.movimientos[idx].detalles.centro_costo.id : '',
|
|
rut: (this.movimientos[idx].detalles !== null) ? this.movimientos[idx].detalles.rut : '',
|
|
nombre: (this.movimientos[idx].detalles !== null) ? this.movimientos[idx].detalles.nombre : '',
|
|
categoria: (this.movimientos[idx].detalles !== null) ? this.movimientos[idx].detalles.categoria : '',
|
|
detalle: (this.movimientos[idx].detalles !== null) ? this.movimientos[idx].detalles.detalle : '',
|
|
auxiliares: this.movimientos[idx].auxiliares,
|
|
})
|
|
}
|
|
}
|
|
},
|
|
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 = '/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],
|
|
format: {
|
|
body: (data, row, column, node) => {
|
|
if (column === 3) {
|
|
return data.split('-').reverse().join('-')
|
|
}
|
|
return data
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
data: this.movimientos,
|
|
})
|
|
this.table = new DataTable(this.ids.table, dtD)
|
|
|
|
/!*$(this.ids.modals.edit).modal({
|
|
onApprove: $element => {
|
|
this.edit()
|
|
}
|
|
})*!/
|
|
editForm.setup(this.ids.modals.edit)
|
|
//$('#' + this.ids.forms.edit.id).find('#centro_costo').dropdown()
|
|
}
|
|
}*/
|
|
|
|
const app = {
|
|
handlers: {},
|
|
setup() {
|
|
this.handlers.results = new ResultsHandler()
|
|
this.handlers.loading = new LoadingHandler({id: '#movimientos_form'})
|
|
this.handlers.movimientos = new MovimientosHandler({urls: {get: '{{$urls->api}}/contabilidad/movimientos/sociedad/mes', edit: '{{$urls->api}}/contabilidad/movimientos/edit'}, loadingHandler: this.handlers.loading, resultsHandler: this.handlers.results})
|
|
this.handlers.forms = {}
|
|
this.handlers.forms.edit = new EditForm({ids: {modal: '#movimientos_modal', form: '#movimientos_edit',}})
|
|
this.handlers.modals = {}
|
|
this.handlers.modals.edit = new EditModal({ids: {modal: '#movimientos_modal'}, editForm: this.handlers.forms.edit})
|
|
this.handlers.events = new EventHandler({movimientosHandler: this.handlers.movimientos, modalHandler: this.handlers.modals.edit})
|
|
this.handlers.table = new MovimientosTable({ids: {table: '#tabla_movimientos', buttons: {edit: '.edit_button'}}, eventHandler: this.handlers.events})
|
|
this.handlers.forms.control = new ControlForm({
|
|
ids: {form: '#movimientos_form', sociedades: '#sociedades', mes: '#mes',},
|
|
})
|
|
this.handlers.table.setup()
|
|
this.handlers.forms.control.setup()
|
|
}
|
|
}
|
|
$(document).ready(() => {
|
|
app.setup()
|
|
/*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
|