ProVM/contabilidad
2
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Show one month at a time, and change month with calendar and buttons

Browse Source
This commit is contained in:
Aldarien
2022-03-18 17:50:21 -03:00
parent e5cf3cfa07
commit 2b3b475d91
8 changed files with 309 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/common/Controller/Cuentas.php
View File

@ -10,7 +10,8 @@ class Cuentas {
return $view->render($response, 'cuentas.list');
}
public function show(Request $request, Response $response, View $view, $cuenta_id): Response {
return $view->render($response, 'cuentas.show', compact('cuenta_id'));
$max_transacciones = 100;
return $view->render($response, 'cuentas.show', compact('cuenta_id', 'max_transacciones'));
}
public function add(Request $request, Response $response, View $view): Response {
return $view->render($response, 'cuentas.add');

170
ui/public/assets/scripts/cuentas.show.js
View File

@ -1,5 +1,5 @@
class Transaccion {
constructor({id, debito_id, credito_id, fecha, glosa, detalle, valor, debito, credito, fechaFormateada, valorFormateado}) {
constructor({id, debito_id, credito_id, fecha, glosa, detalle, valor, debito, credito, fechaFormateada, valorFormateado, format}) {
this.id = id
this.debito_id = debito_id
this.credito_id = credito_id
@ -13,6 +13,7 @@ class Transaccion {
valor,
formateado: valorFormateado
}
this.format_array = format
this.debito = debito
this.credito = credito
this.modal = null
@ -33,7 +34,7 @@ class Transaccion {
}
return !this.isDebito()
}
draw({saldo, format}) {
draw({saldo, format, format_array, format_call}) {
const fuente = (this.isDebito()) ? this.credito : this.debito
return $('<tr></tr>').append(
$('<td></td>').html(this.fecha.formateada)
@ -44,11 +45,11 @@ class Transaccion {
).append(
$('<td></td>').html(this.glosa + '<br />' + this.detalle)
).append(
$('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? '' : format.format(this.valor.valor))
$('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? '' : format_call({value: this.valor.valor, format, format_array}))
).append(
$('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? format.format(this.valor.valor) : '')
$('<td></td>').attr('class', 'right aligned').html((this.isIncrement()) ? format_call({value: this.valor.valor, format, format_array}) : '')
).append(
$('<td></td>').attr('class', 'right aligned').html(format.format(saldo))
$('<td></td>').attr('class', 'right aligned').html(format_call({value: saldo, format_array, format}))
).append(
$('<td></td>').attr('class', 'right aligned').append(
$('<button></button>').attr('class', 'ui tiny circular icon button').append(
@ -90,11 +91,33 @@ class Transaccion {
const transacciones = {
id: '#transacciones',
mes: '#mes',
buttons: {
prev: '#prev_button',
left: '#left_button',
right: '#right_button',
next: '#next_button'
},
cuenta_id: 0,
cuenta: null,
transacciones: [],
cuentas: [],
date: new Date(),
saldo: 0,
acumulation: 0,
intl_format: null,
max: null,
format: ({format_array, format, value}) => {
let output = []
if (format_array.prefijo !== '') {
output.push(format_array.prefijo)
}
output.push(format.format(Math.round(value * Math.pow(10, format_array.decimales)) / Math.pow(10, format_array.decimales)))
if (format_array.sufijo !== '') {
output.push(format_array.sufijo)
}
return output.join('')
},
get: function() {
return {
transacciones: () => {
@ -105,20 +128,15 @@ const transacciones = {
return
}
this.cuenta = data.cuenta
this.intl_format = Intl.NumberFormat('es-CL')
sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/categoria').then((resp) => {
this.cuenta.categoria = resp.categoria
}).then(() => {
this.saldo = this.cuenta.saldo
//this.saldo = this.cuenta.saldo
$('#cuenta').html(this.cuenta.nombre + ' (' + this.cuenta.categoria.nombre + ')').append(
$('<i></i>').attr('class', 'square full icon').css('color', '#' + this.cuenta.tipo.color)
)
const amount = data.transacciones
const step = 50
for (let i = 0; i < amount; i += step) {
promises.push(
sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/' + step + '/' + i)
)
}
promises = this.get().transaccionesMes(this.date)
if (promises.length > 0) {
Promise.all(promises).then((data_arr) => {
this.transacciones = []
@ -137,7 +155,13 @@ const transacciones = {
return (new Date(b.fecha)) - (new Date(a.fecha))
})
}).then(() => {
this.draw().table()
this.get().transaccionesAcumulacion(this.date).then((response) => {
this.acumulation = response.acumulation
this.saldo = response.acumulation
}).then(() => {
this.draw().table()
this.draw().acumulation()
})
})
} else {
this.draw().table()
@ -145,6 +169,32 @@ const transacciones = {
})
})
},
transaccionesLimit: () => {
let promises = []
const amount = data.transacciones
let step = 50
let start = 0
if (this.max !== null) {
step = Math.min(50, this.max)
start = Math.max(0, amount - this.max)
}
for (let i = start; i <= amount; i += step) {
promises.push(
sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/' + step + '/' + i)
)
}
return promises
},
transaccionesMes: (mes) => {
let promises = []
promises.push(
sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/month/' + [mes.getFullYear(), mes.getMonth() + 1, '1'].join('-'))
)
return promises
},
transaccionesAcumulacion: (mes) => {
return sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/acum/' + [mes.getFullYear(), mes.getMonth() + 1, '1'].join('-'))
},
cuentas: () => {
return sendGet(_urls.api + '/cuentas').then((data) => {
if (data.cuentas === null || data.cuentas.length === 0) {
@ -185,13 +235,36 @@ const transacciones = {
)
},
table: () => {
const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: this.cuenta.moneda.codigo})
const parent = $(this.id)
parent.html('')
$.each(this.transacciones, (i, el) => {
parent.append(el.draw({saldo: this.saldo, format: format}))
this.saldo = this.saldo + parseInt(el.valor.valor) * ((el.isIncrement()) ? 1 : -1)
parent.append(el.draw({saldo: this.saldo, format: this.intl_format, format_array: this.cuenta.moneda.format, format_call: this.format}))
})
},
acumulation: () => {
const parent = $(this.id)
parent.prepend(
$('<tr></tr>').append(
$('<td></td>').html('')
).append(
$('<td></td>').html('')
).append(
$('<td></td>').html('Acumulacion Anterior')
).append(
$('<td></td>').attr('class', 'right aligned').html('')
).append(
$('<td></td>').attr('class', 'right aligned').html('')
).append(
$('<td></td>').attr('class', 'right aligned').html(this.format({
format_array: this.cuenta.moneda.format,
format: this.intl_format,
value: this.acumulation
}))
).append(
$('<td></td>').attr('class', 'right aligned').html('')
)
)
}
}
},
@ -248,6 +321,33 @@ const transacciones = {
this.get().transacciones()
})
},
changeMonth: function(dif) {
let d = this.date
d.setMonth(this.date.getMonth() + dif)
this.date = d
this.checkButtons()
$(this.mes).calendar('set date', this.date)
},
changeYear: function(dif) {
let d = this.date
d.setFullYear(this.date.getFullYear() + dif)
this.date = d
this.checkButtons()
$(this.mes).calendar('set date', this.date)
},
checkButtons: function() {
let f = new Date()
if (this.date.getMonth() === f.getMonth() && this.date.getFullYear() === f.getFullYear()) {
$(this.buttons.right).addClass('disabled')
} else {
$(this.buttons.right).removeClass('disabled')
}
if (this.date.getFullYear() === f.getFullYear()) {
$(this.buttons.next).addClass('disabled')
} else {
$(this.buttons.next).removeClass('disabled')
}
},
refresh: function () {
this.get().transacciones()
},
@ -283,11 +383,49 @@ const transacciones = {
maxDate: new Date()
})
this.get().cuentas()
},
mes: () => {
const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Dicembre']
$(this.mes).calendar({
type: 'month',
initialDate: this.date,
maxDate: new Date(),
text: {
months: meses,
monthsShort: meses.map((item) => {item.slice(0, 3)})
},
formatter: {
date: function (date, settings) {
if (!date) return '';
return meses[date.getMonth()] + ', ' + date.getFullYear()
}
},
onChange: (date) => {
this.date = date
this.refresh()
}
})
},
buttons: () => {
$(this.buttons.right).click((e) => {
this.changeMonth(1)
})
$(this.buttons.left).click((e) => {
this.changeMonth(-1)
})
$(this.buttons.next).click(() => {
this.changeYear(1)
})
$(this.buttons.prev).click(() => {
this.changeYear(-1)
})
}
}
},
setup: function() {
this.build().modal()
this.build().mes()
this.build().buttons()
$(this.id).parent().find('#refresh').click(() => {
this.refresh()
})

21
ui/resources/views/cuentas/show.blade.php
View File

@ -5,6 +5,26 @@
@endsection
@section('cuentas_content')
<div class="ui right aligned header">
<div class="ui calendar" id="mes">
<div class="ui input right icon">
<input type="text" placeholder="Mes" />
<i class="calendar icon"></i>
</div>
</div>
<div class="ui icon button" id="prev_button">
<i class="double left angle icon"></i>
</div>
<div class="ui icon button" id="left_button">
<i class="left angle icon"></i>
</div>
<div class="ui icon disabled button" id="right_button">
<i class="right angle icon"></i>
</div>
<div class="ui icon disabled button" id="next_button">
<i class="double right angle icon"></i>
</div>
</div>
<table class="ui striped table">
<thead>
<tr>
@ -82,6 +102,7 @@
<script type="text/javascript">
$(document).ready(() => {
transacciones.cuenta_id = {{$cuenta_id}}
transacciones.max = {{$max_transacciones ?? 100}}
transacciones.setup()
})
</script>

3
ui/setup/settings/03_web.php
View File

@ -22,5 +22,6 @@ return [
]);
$arr['api'] = $_ENV['API_URL'] ?? 'http://localhost:9001';
return (object) $arr;
}
},
'max_transacciones' => 100
];