Cartola Diaria

This commit is contained in:
Juan Pablo Vial
2024-02-19 22:39:22 -03:00
parent 51cabee824
commit 879b612493
8 changed files with 529 additions and 249 deletions

View File

@ -5,8 +5,17 @@
<h1 class="ui header">
Cartola Diaria
</h1>
<div class="ui grid">
<div class="right aligned sixteen wide column">
<button class="ui green icon button" id="add_button">
Agregar
<i class="plus icon"></i>
</button>
</div>
</div>
<form class="ui form" id="cartola_form">
<div class="fields">
<input type="hidden" id="fields" name="fields" value="0" />
{{--<div class="fields">
<div class="six wide field">
<label for="inmobiliaria">Sociedad</label>
<div class="ui search selection dropdown" id="inmobiliaria">
@ -46,7 +55,7 @@
Cargar
</label>
</div>
</div>
</div>--}}
</form>
<div class="ui two columns grid">
<div class="column">
@ -62,6 +71,8 @@
<table class="ui table" id="diferencia">
<thead>
<tr>
<th>Sociedad</th>
<th>Banco - Cuenta</th>
<th>Hoy</th>
<th>Último Saldo</th>
<th>Saldo Actual</th>
@ -75,9 +86,10 @@
<table class="ui table" id="tabla_movimientos">
<thead>
<tr>
<th>Sociedad</th>
<th>Banco - Cuenta</th>
<th>Fecha</th>
<th>Glosa</th>
<th>Documento</th>
<th class="right aligned">Cargo</th>
<th class="right aligned">Abono</th>
<th class="right aligned">Saldo</th>
@ -94,122 +106,293 @@
@push('page_scripts')
<script>
const diaria = {
ids: {},
data: {
inmobiliaria: {
rut: 0,
razon: ''
},
banco: {
id: 0,
nombre: ''
},
fecha: '',
movimientos: [],
saldo: 0,
ayer: 0
},
dataTableConfig: {
order: [[6, 'asc']],
columnDefs: [
{
targets: [0, 2, 3, 4, 5],
width: '10%'
},
{
targets: [1],
width: '20%'
},
{
targets: [6],
visible: false
}
],
},
class Cartola {
idx
inmobiliaria = {
rut: 0,
razon: ''
}
cuenta = {
id: 0,
descripcion: ''
}
fecha = ''
bancos = []
movimientos = []
saldo = 0
ayer = 0
constructor(idx) {
this.idx = idx
}
get() {
return {
bancos: inmobiliaria_rut => {
const url = '{{$urls->api}}/inmobiliaria/' + inmobiliaria_rut + '/cuentas'
$(this.ids.loader).show()
bancos: () => {
const url = '{{$urls->api}}/inmobiliaria/' + this.inmobiliaria.rut + '/cuentas'
diaria.loader().show()
return fetchAPI(url).then(response => {
$(this.ids.loader).hide()
diaria.loader().hide()
if (!response) {
this.bancos = []
return
}
return response.json().then(json => {
if (json.cuentas.length === 0) {
this.bancos = []
return
}
$(this.ids.form.banco).dropdown('change values', json.cuentas.map(cuenta => {
this.bancos = json.cuentas.map(cuenta => {
return {
value: cuenta.banco.id,
text: cuenta.banco.nombre,
name: cuenta.banco.nombre
value: cuenta.id,
text: cuenta.banco.nombre + ' - ' + cuenta.cuenta,
name: cuenta.banco.nombre + ' - ' + cuenta.cuenta
}
})).dropdown('refresh')
})
})
})
},
ayer: (inmobiliaria_rut, banco_id, fecha) => {
ayer: (fecha) => {
const url = '{{$urls->api}}/contabilidad/cartola/diaria/ayer'
const body = new FormData()
body.set('inmobiliaria_rut', inmobiliaria_rut)
body.set('banco_id', banco_id)
body.set('cuenta_id', this.cuenta.id)
body.set('fecha', fecha.toISOString())
return fetchAPI(url, {method: 'post', body}).then(response => {
if (!response) {
return
}
return response.json().then(json => {
this.data.ayer = json.cartola.saldo
if (json.cartola.length === 0) {
return
}
this.ayer = json.cartola.saldo
})
})
}
}
},
parse() {
}
draw() {
return {
cartola: event => {
event.preventDefault()
const body = new FormData(document.getElementById('cartola_form'))
const fecha = $('#fecha').calendar('get date')
body.set('fecha', [fecha.getFullYear(), fecha.getMonth()+1, fecha.getDate()].join('-'))
const url = '{{$urls->api}}/contabilidad/cartola/diaria/procesar'
$(this.ids.loader).show()
fetchAPI(url, {method: 'post', body}).then(response => {
$(this.ids.loader).hide()
if (!response) {
return
}
return response.json().then(json => {
if (json.cartola.movimientos.length === 0) {
return
}
this.data.movimientos = []
json.cartola.movimientos.forEach((row, idx) => {
const fecha = new Date(row.fecha)
fecha.setDate(fecha.getDate() + 1)
this.data.movimientos[idx] = {
fecha: fecha,
glosa: row.glosa,
documento: row.documento,
cargo: row.cargo,
abono: row.abono,
saldo: row.saldo
}
})
this.data.saldo = json.cartola.cartola.saldo
const ayer = new Date()
ayer.setDate(fecha.getDate() - 1)
this.get().ayer(body.get('inmobiliaria_rut'), body.get('banco_id'), ayer)
.then(() => {
this.draw().diferencia()
this.draw().cartola()
})
})
form: (form, inmobiliarias, first = false) => {
const fields = $('<div></div>').addClass('fields cartola').attr('data-cartola', this.idx)
const inmobiliarias_menu = $('<div></div>').addClass('menu')
inmobiliarias.forEach(inmobiliaria => {
inmobiliarias_menu.append(
$('<div></div>').addClass('item').attr('data-value', inmobiliaria.rut).html(inmobiliaria.razon)
)
})
return false
const inmobiliarias_dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('id', 'inmobiliaria' + this.idx).append(
$('<input />').attr('type', 'hidden')//.attr('name', 'inmobiliaria_rut' + this.idx)
).append(
$('<i></i>').addClass('dropdown icon')
).append(
$('<div></div>').addClass('default text').html('Inmobiliaria')
).append(inmobiliarias_menu)
fields.append(
$('<div></div>').addClass('six wide field').append(
$('<label></label>').attr('for', 'inmobiliaria' + this.idx).html('Sociedad')
).append(inmobiliarias_dropdown)
)
const cuentas_dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('id', 'cuenta' + this.idx).append(
$('<input />').attr('type', 'hidden').attr('name', 'cuenta_id' + this.idx)
).append(
$('<i></i>').addClass('dropdown icon')
).append(
$('<div></div>').addClass('default text').html('Banco - Cuenta')
).append(
$('<div></div>').addClass('menu')
)
fields.append(
$('<div></div>').addClass('four wide field').append(
$('<label></label>').html('Banco - Cuenta')
).append(cuentas_dropdown)
)
const fecha_calendar = $('<div></div>').addClass('ui calendar').attr('id', 'fecha' + this.idx).append(
$('<div></div>').addClass('ui left icon input').append(
$('<i></i>').addClass('calendar icon')
).append(
$('<input />').attr('type', 'text')
)
)
fields.append(
$('<div></div>').addClass('three wide field').append(
$('<label></label>').attr('for', 'fecha' + this.idx).html('Fecha')
).append(fecha_calendar)
)
const file_field = $('<div></div>').addClass('field').append(
$('<label></label>').attr('for', 'file' + this.idx).html('Cartola')
).append(
$('<input />').addClass('ui invisible file input').attr('type', 'file').attr('name', 'file' + this.idx).attr('id', 'file' + this.idx)
).append(
$('<label></label>').addClass('ui icon button').attr('for', 'file' + this.idx).append(
$('<i></i>').addClass('file icon')
).append('Cargar')
)
fields.append(file_field)
if (!first) {
fields.append(
$('<div></div>').addClass('field').append(
$('<label></label>').html('Eliminar')
).append(
$('<button></button>').addClass('ui red icon button').attr('data-cartola', this.idx).append(
$('<i></i>').addClass('remove icon')
).click(event => {
const idx = $(event.currentTarget).data('cartola')
diaria.cartolas().remove(idx)
})
)
)
}
form.append(fields)
inmobiliarias_dropdown.dropdown({
fireOnInit: true,
onChange: (value, text, $choice) => {
this.inmobiliaria.rut = value
this.inmobiliaria.razon = text
this.get().bancos(value).then(() => {
cuentas_dropdown.dropdown('change values', this.bancos)
})
},
})
cuentas_dropdown.dropdown({
fireOnInit: true,
onChange: (value, text, $choice) => {
this.cuenta.id = value
this.cuenta.descripcion = text
}
})
const cdo = JSON.parse(JSON.stringify(calendar_date_options))
cdo['initialDate'] = new Date()
cdo['maxDate'] = cdo['initialDate']
cdo['onChange'] = (date, text, mode) => {
this.fecha = date
}
this.fecha = cdo['initialDate']
fecha_calendar.calendar(cdo)
},
diferencia: (tbody, dateFormatter, numberFormatter) => {
tbody.append(
$('<tr></tr>').append(
$('<td></td>').html(this.inmobiliaria.razon)
).append(
$('<td></td>').html(this.cuenta.descripcion)
).append(
$('<td></td>').html(dateFormatter.format(this.fecha))
).append(
$('<td></td>').html(numberFormatter.format(this.ayer))
).append(
$('<td></td>').html(numberFormatter.format(this.saldo))
).append(
$('<td></td>').html(numberFormatter.format(this.saldo - this.ayer))
)
)
},
cartola: (tbody, dateFormatter, numberFormatter) => {
this.movimientos.forEach((row, idx) => {
tbody.append(
$('<tr></tr>').append(
$('<td></td>').html(this.inmobiliaria.razon)
).append(
$('<td></td>').html(this.cuenta.descripcion)
).append(
$('<td></td>').html(dateFormatter.format(row.fecha))
).append(
$('<td></td>').html(row.glosa)
).append(
$('<td></td>').addClass('right aligned').html(row.cargo === 0 ? '' : numberFormatter.format(row.cargo))
).append(
$('<td></td>').addClass('right aligned').html(row.abono === 0 ? '' : numberFormatter.format(row.abono))
).append(
$('<td></td>').addClass('right aligned').html(row.saldo === 0 ? '' : numberFormatter.format(row.saldo))
).append(
$('<td></td>').html(idx + 1)
)
)
})
},
}
}
}
@php
$columns = [
'sociedad',
'cuenta',
'fecha',
'glosa',
'cargo',
'abono',
'saldo',
'orden'
];
@endphp
const diaria = {
ids: {},
data: {
inmobiliarias: JSON.parse('{!! json_encode($inmobiliarias) !!}'),
cartolasIdx: [],
cartolas: [],
},
dataTableConfig: {
order: [[{{array_search('orden', $columns)}}, 'asc']],
columnDefs: [
{
targets: [{{implode(',', array_keys(array_filter($columns, function($column) {return in_array($column, ['fecha', 'cargo', 'abono', 'saldo']);})))}}],
width: '{{round((1/(count($columns) + 3 - 1)) * 100,2)}}%'
},
{
targets: [{{implode(',', array_keys(array_filter($columns, function($column) {return in_array($column, ['sociedad', 'cuenta', 'glosa']);})))}}],
width: '{{round((1/(count($columns) + 3 - 1)) * 2 * 100, 2)}}%'
},
{
targets: [{{array_search('orden', $columns)}}],
visible: false
}
],
},
loaderStatus: true,
loader() {
return {
show: () => {
if (!this.loaderStatus) {
$(this.ids.loader).show()
this.loaderStatus = true
}
},
hide: () => {
if (this.loaderStatus) {
$(this.ids.loader).hide()
this.loaderStatus = false
}
}
}
},
cartolas() {
return {
add: () => {
let first = false
if (this.data.cartolas.length === 0) {
first = true
}
const idx = this.data.cartolas.reduce((prev, cartola) => Math.max(prev, cartola.idx), 0) + 1
const cartola = new Cartola(idx)
this.data.cartolas.push(cartola)
this.data.cartolasIdx.push(idx)
const form = $(this.ids.form)
cartola.draw().form(form, this.data.inmobiliarias, first)
$(this.ids.fields).attr('value', JSON.stringify(this.data.cartolasIdx))
},
remove: idx => {
if (this.data.cartolas.length === 1) {
return
}
const i = this.data.cartolasIdx.findIndex(value => value === idx)
const cartolaIdx = this.data.cartolas.findIndex(cartola => cartola.idx === idx)
$("div.cartola[data-cartola='" + idx + "']").remove()
this.data.cartolasIdx.splice(i,1)
this.data.cartolas.splice(cartolaIdx,1)
$(this.ids.fields).attr('value', JSON.stringify(this.data.cartolasIdx))
}
}
},
@ -225,17 +408,9 @@
day: 'numeric'
})
const numberFormatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
tbody.append(
$('<tr></tr>').append(
$('<td></td>').html(dateFormatter.format(this.data.fecha))
).append(
$('<td></td>').html(numberFormatter.format(this.data.ayer))
).append(
$('<td></td>').html(numberFormatter.format(this.data.saldo))
).append(
$('<td></td>').html(numberFormatter.format(this.data.saldo - this.data.ayer))
)
)
this.data.cartolas.forEach(cartola => {
cartola.draw().diferencia(tbody, dateFormatter, numberFormatter)
})
},
cartola: () => {
const table = $(this.ids.table.base)
@ -249,57 +424,74 @@
day: 'numeric'
})
const numberFormatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
this.data.movimientos.forEach((row, idx) => {
tbody.append(
$('<tr></tr>').append(
$('<td></td>').html(dateFormatter.format(row.fecha))
).append(
$('<td></td>').html(row.glosa)
).append(
$('<td></td>').html(row.documento)
).append(
$('<td></td>').addClass('right aligned').html(row.cargo === 0 ? '' : numberFormatter.format(row.cargo))
).append(
$('<td></td>').addClass('right aligned').html(row.abono === 0 ? '' : numberFormatter.format(row.abono))
).append(
$('<td></td>').addClass('right aligned').html(row.saldo === 0 ? '' : numberFormatter.format(row.saldo))
).append(
$('<td></td>').html(idx + 1)
)
)
this.data.cartolas.forEach(cartola => {
cartola.draw().cartola(tbody, dateFormatter, numberFormatter)
})
table.DataTable(this.dataTableConfig)
},
}
},
parse() {
return {
cartola: event => {
const body = new FormData($(this.ids.form)[0])
this.data.cartolas.forEach(cartola => {
body.set('fecha' + cartola.idx, [cartola.fecha.getFullYear(), cartola.fecha.getMonth()+1, cartola.fecha.getDate()].join('-'))
})
const url = '{{$urls->api}}/contabilidad/cartola/diaria/procesar'
diaria.loader().show()
fetchAPI(url, {method: 'post', body}).then(response => {
diaria.loader().hide()
if (!response) {
return
}
return response.json().then(json => {
if (json.cartolas.length === 0) {
return
}
Object.entries(json.cartolas).forEach(entry => {
const cartolaIdx = this.data.cartolas.findIndex(cartola => cartola.idx === parseInt(entry[0]))
entry[1].movimientos.forEach((row, idx) => {
const fecha = new Date(row.fecha)
fecha.setDate(fecha.getDate() + 1)
this.data.cartolas[cartolaIdx].movimientos[idx] = {
fecha: fecha,
glosa: row.glosa,
documento: row.documento,
cargo: row.cargo,
abono: row.abono,
saldo: row.saldo
}
})
const ayer = new Date(this.data.cartolas[cartolaIdx].fecha.timestamp)
ayer.setDate(this.data.cartolas[cartolaIdx].fecha.getDate() - 1)
this.data.cartolas[cartolaIdx].saldo = entry[1].cartola.saldo
this.data.cartolas[cartolaIdx].get().ayer(ayer)
})
this.draw().diferencia()
this.draw().cartola()
})
})
return false
}
}
},
setup(ids) {
this.ids = ids
$(this.ids.form.inmobiliaria).dropdown({
fireOnInit: true,
onChange: (value, text, $choice) => {
this.data.inmobiliaria.rut = value
this.data.inmobiliaria.razon = text
this.get().bancos(value)
},
})
$(this.ids.form.banco).dropdown({
fireOnInit: true,
onChange: (value, text, $choice) => {
this.data.banco.id = value
this.data.banco.nombre = text
}
})
$(this.ids.loader).hide()
calendar_date_options['initialDate'] = new Date()
calendar_date_options['maxDate'] = calendar_date_options['initialDate']
calendar_date_options['onChange'] = (date, text, mode) => {
this.data.fecha = date
}
$(this.ids.form.fecha).calendar(calendar_date_options)
$(this.ids.form.base).submit(this.parse().cartola)
$(this.ids.button).click(this.parse().cartola)
this.loader().hide()
$(this.ids.form).submit(event => {
event.preventDefault()
return false
})
$(this.ids.buttons.add).click(event => {
this.cartolas().add()
})
$(this.ids.buttons.process).click(this.parse().cartola)
$(this.ids.table.base).DataTable(this.dataTableConfig)
this.cartolas().add()
}
}
$(document).ready(() => {
@ -309,13 +501,12 @@
body: '#movimientos',
diferencia: '#diferencia'
},
form: {
base: '#cartola_form',
inmobiliaria: '#inmobiliaria',
banco: '#banco',
fecha: '#fecha'
form: '#cartola_form',
fields: '#fields',
buttons: {
add: '#add_button',
process: '#process_button'
},
button: '#process_button',
loader: '#loader'
})
})