Show one month at a time, and change month with calendar and buttons
This commit is contained in:
@ -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()
|
||||
})
|
||||
|
Reference in New Issue
Block a user