466 lines
15 KiB
JavaScript
466 lines
15 KiB
JavaScript
class Transaccion {
|
|
constructor({id, debito_id, credito_id, fecha, glosa, detalle, valor, debito, credito, fechaFormateada, valorFormateado, format, moneda_id}) {
|
|
this.id = id
|
|
this.debito_id = debito_id
|
|
this.credito_id = credito_id
|
|
this.fecha = {
|
|
fecha,
|
|
formateada: fechaFormateada
|
|
}
|
|
this.glosa = glosa
|
|
this.detalle = detalle
|
|
this.valor = {
|
|
valor,
|
|
formateado: valorFormateado
|
|
}
|
|
this.format_array = format
|
|
this.debito = debito
|
|
this.credito = credito
|
|
this.modal = null
|
|
}
|
|
setCuenta(cuenta) {
|
|
this.cuenta = cuenta
|
|
}
|
|
setModal(modal) {
|
|
this.modal = modal
|
|
}
|
|
isDebito() {
|
|
return this.debito.id === this.cuenta.id;
|
|
}
|
|
isIncrement() {
|
|
const debits = ['Activo', 'Perdida']
|
|
if (debits.indexOf(this.cuenta.tipo.descripcion)) {
|
|
return this.isDebito()
|
|
}
|
|
return !this.isDebito()
|
|
}
|
|
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)
|
|
).append(
|
|
$('<td></td>').append(
|
|
$('<a></a>').attr('href', _urls.base + 'cuenta/' + fuente.id).html(fuente.nombre + ' (' + fuente.categoria.nombre + ')')
|
|
)
|
|
).append(
|
|
$('<td></td>').html(this.glosa + '<br />' + this.detalle)
|
|
).append(
|
|
$('<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_call({value: -this.valor.valor, format, format_array}) : '')
|
|
).append(
|
|
$('<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(
|
|
$('<i></i>').attr('class', 'edit icon')
|
|
).click((e) => {
|
|
e.preventDefault()
|
|
this.edit()
|
|
return false
|
|
})
|
|
).append(
|
|
$('<button></button>').attr('class', 'ui tiny circular red icon button').append(
|
|
$('<i></i>').attr('class', 'remove icon')
|
|
).click((e) => {
|
|
e.preventDefault()
|
|
this.remove()
|
|
return false
|
|
})
|
|
)
|
|
)
|
|
}
|
|
edit() {
|
|
const form = this.modal.find('form')
|
|
form.trigger('reset')
|
|
form.find("[name='id']").val(this.id)
|
|
form.find(".ui.calendar").calendar('set date', new Date(this.fecha.fecha))
|
|
form.find("[name='cuenta']").dropdown('set selected', (this.isDebito()) ? this.credito_id : this.credito_id)
|
|
form.find("[name='glosa']").val(this.glosa)
|
|
form.find("[name='detalle']").val(this.detalle)
|
|
form.find("[name='valor']").val(((this.isDebito()) ? -1 : 1) * this.valor.valor)
|
|
modalToEdit(this.modal)
|
|
this.modal.modal('show')
|
|
}
|
|
remove() {
|
|
sendDelete(_urls.api + '/transaccion/' + this.id + '/delete').then(() => {
|
|
transacciones.get().transacciones()
|
|
})
|
|
}
|
|
}
|
|
|
|
const transacciones = {
|
|
id: '#transacciones',
|
|
mes: '#mes',
|
|
buttons: {
|
|
prev: '#prev_button',
|
|
left: '#left_button',
|
|
today: '#today_button',
|
|
right: '#right_button',
|
|
next: '#next_button'
|
|
},
|
|
cuenta_id: 0,
|
|
cuenta: null,
|
|
transacciones: [],
|
|
cuentas: [],
|
|
monedas: [],
|
|
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: () => {
|
|
this.draw().loading()
|
|
let promises = []
|
|
sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/amount').then((data) => {
|
|
if (data.cuenta === null) {
|
|
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(() => {
|
|
$('#cuenta').html(this.cuenta.nombre + ' (' + this.cuenta.categoria.nombre + ')').append(
|
|
$('<i></i>').attr('class', 'square full icon').css('color', '#' + this.cuenta.tipo.color)
|
|
)
|
|
promises = this.get().transaccionesMes(this.date)
|
|
if (promises.length > 0) {
|
|
Promise.all(promises).then((data_arr) => {
|
|
this.transacciones = []
|
|
data_arr.forEach(data => {
|
|
if (data.transacciones === null || data.transacciones.length === 0) {
|
|
return
|
|
}
|
|
$.each(data.transacciones, (i, el) => {
|
|
const tr = new Transaccion(el)
|
|
tr.setCuenta(this.cuenta)
|
|
tr.setModal(this.modal)
|
|
this.transacciones.push(tr)
|
|
})
|
|
})
|
|
this.transacciones.sort((a, b) => {
|
|
return (new Date(b.fecha)) - (new Date(a.fecha))
|
|
})
|
|
}).then(() => {
|
|
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()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
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) {
|
|
return
|
|
}
|
|
this.cuentas = data.cuentas
|
|
}).then(() => {
|
|
const select = this.modal.find("[name='cuenta']")
|
|
$.each(this.cuentas, (i, el) => {
|
|
this.get().categoria(i).then(() => {
|
|
select.append(
|
|
$('<option></option>').attr('value', el.id).html(el.nombre + ' (' + el.categoria.nombre + ')')
|
|
)
|
|
select.dropdown()
|
|
})
|
|
})
|
|
this.get().monedas().then(() => {
|
|
const select = this.modal.find("[name='moneda']")
|
|
$.each(this.monedas, (i, el) => {
|
|
const option = $('<option></option>').attr('value', el.id).html(el.denominacion)
|
|
if (el.id === '1') {
|
|
option.attr('selected', 'selected')
|
|
}
|
|
select.append(option)
|
|
})
|
|
})
|
|
})
|
|
},
|
|
categoria: (idx) => {
|
|
return sendGet(_urls.api + '/cuenta/' + this.cuentas[idx].id + '/categoria').then((data) => {
|
|
this.cuentas[idx].categoria = data.categoria
|
|
})
|
|
},
|
|
monedas: () => {
|
|
return sendGet(_urls.api + '/monedas').then((response) => {
|
|
this.monedas = response.monedas
|
|
})
|
|
}
|
|
}
|
|
},
|
|
draw: function() {
|
|
return {
|
|
loading: () => {
|
|
const parent = $(this.id)
|
|
parent.html('')
|
|
parent.append(
|
|
$('<tr></tr>').append(
|
|
$('<td></td>').attr('colspan', 7).append(
|
|
$('<div></div>').attr('class', 'ui active dimmer').append(
|
|
$('<div></div>').attr('class', 'ui indeterminate elastic text loader').html('Buscando los datos')
|
|
)
|
|
)
|
|
)
|
|
)
|
|
},
|
|
table: () => {
|
|
const parent = $(this.id)
|
|
parent.html('')
|
|
$.each(this.transacciones, (i, el) => {
|
|
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('')
|
|
)
|
|
)
|
|
}
|
|
}
|
|
},
|
|
add: function() {
|
|
return {
|
|
show: () => {
|
|
this.modal.find('form').trigger('reset')
|
|
modalToAdd(this.modal)
|
|
this.modal.modal('show')
|
|
},
|
|
exec: () => {
|
|
const fecha = $("[name='fecha']").val()
|
|
|
|
const valor = $("[name='valor']").val()
|
|
const cuenta = $("[name='cuenta']").val()
|
|
const data = JSON.stringify({
|
|
debito_id: (valor < 0) ? this.cuenta_id : cuenta,
|
|
credito_id: (valor < 0) ? cuenta : this.cuenta_id,
|
|
fecha: fecha,
|
|
glosa: $("[name='glosa']").val(),
|
|
detalle: $("[name='detalle']").val(),
|
|
valor: (valor < 0) ? -valor : valor,
|
|
moneda_id: $("[name='moneda']").val()
|
|
})
|
|
return sendPost(_urls.api + '/transacciones/add', data).then(() => {
|
|
this.modal.modal('hide')
|
|
this.get().transacciones()
|
|
})
|
|
}
|
|
}
|
|
},
|
|
edit: function() {
|
|
const id = $("[name='id']").val()
|
|
const fecha = $("[name='fecha']").val()
|
|
const cuenta = $("[name='cuenta']").val()
|
|
const glosa = $("[name='glosa']").val()
|
|
const detalle = $("[name='detalle']").val()
|
|
const valor = $("[name='valor']").val()
|
|
const moneda_id = $("[name='moneda']").val()
|
|
const data = JSON.stringify({
|
|
debito_id: (valor < 0) ? this.cuenta_id : cuenta,
|
|
credito_id: (valor < 0) ? cuenta : this.cuenta_id,
|
|
fecha,
|
|
glosa,
|
|
detalle,
|
|
valor: (valor < 0) ? -valor : valor,
|
|
moneda_id
|
|
})
|
|
return sendPut(_urls.api + '/transaccion/' + id + '/edit', data).then(() => {
|
|
this.modal.modal('hide')
|
|
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)
|
|
},
|
|
today: function() {
|
|
this.date = new Date()
|
|
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.toDateString() === f.toDateString()) {
|
|
$(this.buttons.today).addClass('disabled')
|
|
} else {
|
|
$(this.buttons.today).removeClass('disabled')
|
|
}
|
|
if (this.date.getFullYear() === f.getFullYear()) {
|
|
$(this.buttons.next).addClass('disabled')
|
|
} else {
|
|
$(this.buttons.next).removeClass('disabled')
|
|
}
|
|
},
|
|
refresh: function () {
|
|
this.get().transacciones()
|
|
this.checkButtons()
|
|
},
|
|
build: function() {
|
|
return {
|
|
modal: () => {
|
|
this.modal = $('.ui.modal')
|
|
this.modal.modal()
|
|
this.modal.find('.close.icon').click(() => {
|
|
this.modal.modal('hide')
|
|
})
|
|
this.modal.find('form').submit((e) => {
|
|
e.preventDefault()
|
|
const add = $(e.currentTarget).find('.plus.icon')
|
|
if (add.length > 0) {
|
|
this.add().exec()
|
|
} else {
|
|
this.edit()
|
|
}
|
|
return false
|
|
})
|
|
this.modal.find('.ui.calendar').calendar({
|
|
type: 'date',
|
|
formatter: {
|
|
date: function(date, settings) {
|
|
if (!date) return ''
|
|
let day = ('00' + date.getDate()).slice(-2)
|
|
let month = ('00' + (date.getMonth() + 1)).slice(-2)
|
|
let year = date.getFullYear()
|
|
return year + '/' + month + '/' + day
|
|
}
|
|
},
|
|
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.today).click((e) => {
|
|
this.today()
|
|
})
|
|
$(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()
|
|
})
|
|
$(this.id).parent().find('#add').click(() => {
|
|
this.add().show()
|
|
})
|
|
this.get().transacciones()
|
|
}
|
|
}
|