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

Script structure and searchable cuentas

Browse Source
This commit is contained in:
Aldarien
2022-03-25 20:54:02 -03:00
parent 8009433958
commit d94f076946
12 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
ui/public/assets/scripts/cuentas/list.js Normal file
View File

@ -0,0 +1,251 @@
class Cuenta {
constructor({id, nombre, categoria_id, tipo_id, moneda_id, categoria, tipo, moneda, saldo, saldoFormateado}) {
this.id = id
this.nombre = nombre
this.categoria_id = categoria_id
this.tipo_id = tipo_id
this.moneda_id = moneda_id
this.categoria = categoria
this.tipo = tipo
this.moneda = moneda
this.modal = null
}
setModal(modal) {
this.modal = modal
}
draw() {
return $('<tr></tr>').append(
$('<td></td>').html(this.nombre)
).append(
$('<td></td>').html(this.categoria.nombre + ' - ' + this.categoria.tipo.descripcion)
).append(
$('<td></td>').css('color', '#' + this.tipo.color).html(this.tipo.descripcion)
).append(
$('<td></td>').html(this.moneda.codigo)
).append(
$('<td></td>').attr('class', 'right aligned').append(
$('<button></button>').attr('class', 'ui tiny circular icon button').attr('data-id', this.id).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').attr('data-id', this.id).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("[name='nombre']").val(this.nombre)
form.find("[name='categoria']").dropdown('set selected', this.categoria.id)
form.find("[name='tipo']").dropdown('set selected', this.tipo.id)
form.find("[name='moneda']").dropdown('set selected', this.moneda.id)
modalToEdit(this.modal)
this.modal.modal('show')
}
remove() {
sendDelete(_urls.api + '/cuenta/' + this.id + '/delete').then(() => {
cuentas.get().cuentas()
})
}
}
const cuentas = {
id: '#cuentas',
cuentas: [],
categorias: [],
tipos: [],
get: function() {
return {
cuentas: () => {
this.cuentas = []
return sendGet(_urls.api + '/cuentas').then((data) => {
if (data.cuentas === null || data.cuentas.length === 0) {
return
}
$.each(data.cuentas, (i, el) => {
const cuenta = new Cuenta(el)
cuenta.setModal(this.modal)
this.cuentas.push(cuenta)
})
}).then(() => {
this.draw().cuentas()
})
},
categorias: () => {
return sendGet(_urls.api + '/categorias').then((data) => {
if (data.categorias === null || data.categorias.length === 0) {
return
}
this.categorias = data.categorias
}).then(() => {
this.draw().categorias()
})
},
tipos: () => {
return sendGet(_urls.api + '/tipos/cuentas').then((data) => {
if (data.tipos === null || data.tipos.length === 0) {
return
}
this.tipos = data.tipos
}).then(() => {
this.draw().tipos()
})
},
monedas: () => {
return sendGet(_urls.api + '/monedas').then((data) => {
if (data.monedas === null || data.monedas.length === 0) {
return
}
this.monedas = data.monedas
}).then(() => {
this.draw().monedas()
})
},
parent: () => {
const segment = $(this.id)
let parent = segment.find('tbody')
if (parent.length === 0) {
parent = this.buildParent(segment)
}
return parent
}
}
},
buildParent: function(segment) {
const table = $('<table></table>').attr('class', 'ui table').append(
$('<thead></thead>').append(
$('<tr></tr>').append(
$('<th></th>').html('Cuenta')
).append(
$('<th></th>').html('Categoría')
).append(
$('<th></th>').html('Tipo')
).append(
$('<th></th>').html('Moneda')
).append(
$('<th></th>').attr('class', 'right aligned').append(
$('<button></button>').attr('class', 'ui tiny green circular icon button').append(
$('<i></i>').attr('class', 'plus icon')
)
)
)
)
)
table.find('.ui.button').click((e) => {
e.preventDefault()
this.add()
return false
})
parent = $('<tbody></tbody>')
table.append(parent)
segment.append(table)
return parent
},
draw: function() {
return {
cuentas: () => {
const parent = this.get().parent()
parent.html('')
$.each(this.cuentas, (i, el) => {
parent.append(el.draw())
})
},
categorias: () => {
const select = $("[name='categoria']")
$.each(this.categorias, (i, el) => {
select.append(
$('<option></option>').attr('value', el.id).html(el.nombre + ' - ' + el.tipo.descripcion)
)
})
},
tipos: () => {
const select = $("[name='tipo']")
$.each(this.tipos, (i, el) => {
select.append($('<option></option>').attr('value', el.id).html(el.descripcion))
})
},
monedas: () => {
const select = $("[name='moneda']")
$.each(this.monedas, (i, el) => {
const opt = $('<option></option>').attr('value', el.id).html(el.denominacion)
if (el.codigo === 'CLP') {
opt.attr('selected', 'selected')
}
select.append(opt)
})
}
}
},
add: function() {
this.modal.find('form').trigger('reset')
modalToAdd(this.modal)
this.modal.modal('show')
},
doAdd: function() {
const data = JSON.stringify({
categoria_id: $("[name='categoria']").val(),
nombre: $("[name='nombre']").val(),
tipo_id: $("[name='tipo']").val(),
moneda_id: $("[name='moneda']").val()
})
return sendPost(
_urls.api + '/cuentas/add',
data
).then((data) => {
this.modal.modal('hide')
this.get().cuentas()
})
},
doEdit: function() {
form = this.modal.find('form')
const id = form.find("[name='id']").val()
const data = JSON.stringify({
nombre: form.find("[name='nombre']").val(),
categoria_id: form.find("[name='categoria']").val(),
tipo_id: form.find("[name='tipo']").val(),
moneda_id: form.find("[name='moneda']").val()
})
sendPut(_urls.api + '/cuenta/' + id + '/edit', data).then(() => {
this.modal.modal('hide')
this.get().cuentas()
})
},
setupModal: function() {
this.modal = $('.ui.modal')
this.modal.modal()
this.modal.find('.close.icon').css('cursor', 'pointer').click(() => {
this.modal.modal('hide')
})
this.modal.find('form').submit((e) => {
e.preventDefault()
const add = $(e.currentTarget).find('.ui.button').find('.plus.icon')
if (add.length > 0) {
this.doAdd()
} else {
this.doEdit()
}
return false
})
},
setup: function() {
this.setupModal()
this.get().cuentas().then(() => {
this.get().categorias().then(() => {
this.get().tipos().then(() => {
this.get().monedas()
})
})
})
}
}

451
ui/public/assets/scripts/cuentas/show.js Normal file
View File

@ -0,0 +1,451 @@
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',
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(() => {
//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)
)
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')
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)
},
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()
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.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()
}
}

166
ui/public/assets/scripts/cuentas/tipos/list.js Normal file
View File

@ -0,0 +1,166 @@
class TipoCuenta {
constructor({id, descripcion, color}) {
this.id = id
this.descripcion = descripcion
this.color = color
this.modal = null
}
setModal(modal) {
this.modal = modal
}
setPicker(picker) {
this.picker = picker
}
draw() {
return $('<tr></tr>').append(
$('<td></td>').append(
$('<i></i>').attr('class', 'square full icon').css('color', '#' + this.color)
).append(this.descripcion)
).append(
$('<td></td>').attr('class', 'right aligned').append(
$('<button></button>').attr('class', 'ui tiny circular icon button').attr('data-id', this.id).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').attr('data-id', this.id).append(
$('<i></i>').attr('class', 'remove icon')
).click((e) => {
e.preventDefault()
this.remove()
return false
})
)
)
}
edit() {
const form = this.modal.find('form')
form.find("[name='id']").val(this.id)
form.find("[name='descripcion']").val(this.descripcion)
form.find("[name='color']").val(this.color)
this.picker.setColor(this.color)
modalToEdit(this.modal)
this.modal.modal('show')
}
remove() {
sendDelete(_urls.api + '/tipos/cuenta/' + this.id + '/delete').then(() => {
tipos_cuentas.getTipos()
})
}
}
const tipos_cuentas = {
id: '#tipos_cuentas',
tipos: [],
modal: null,
getTipos: function() {
this.tipos = []
return sendGet(_urls.api + '/tipos/cuentas').then((data) => {
if (data.tipos === null || data.tipos.length === 0) {
return
}
$.each(data.tipos, (i, el) => {
const tipo = new TipoCuenta(el)
tipo.setModal(this.modal)
tipo.setPicker(this.picker)
this.tipos.push(tipo)
})
}).then(() => {
this.draw()
})
},
buildParent: function(segment) {
const table = $('<table></table>').attr('class', 'ui table').append(
$('<thead></thead>').append(
$('<tr></tr>').append(
$('<th></th>').html('Tipo')
).append(
$('<th></th>').attr('class', 'right aligned').append(
$('<button></button>').attr('class', 'ui tiny green circular icon button').append(
$('<i></i>').attr('class', 'plus icon')
)
)
)
)
)
table.find('.ui.button').click((e) => {
e.preventDefault()
this.add()
return false
})
parent = $('<tbody></tbody>')
table.append(parent)
segment.append(table)
return parent
},
getParent: function() {
const segment = $(this.id)
let parent = segment.find('tbody')
if (parent.length === 0) {
parent = this.buildParent(segment)
}
return parent
},
draw: function() {
const parent = this.getParent()
parent.html('')
$.each(this.tipos, (i, el) => {
parent.append(el.draw())
})
},
add: function() {
this.modal.find('form').trigger('reset')
this.picker.setColor('ffffff')
modalToAdd(this.modal)
this.modal.modal('show')
},
doAdd: function() {
const data = JSON.stringify({
descripcion: this.modal.find('form').find("[name='descripcion']").val(),
color: this.modal.find('form').find("[name='color']").val()
})
return sendPost(
_urls.api + '/tipos/cuentas/add',
data
).then((data) => {
this.modal.modal('hide')
this.getCuentas()
})
},
doEdit: function() {
id = this.modal.find('form').find("[name='id']").val()
const data = JSON.stringify({
descripcion: this.modal.find('form').find("[name='descripcion']").val(),
color: this.modal.find('form').find("[name='color']").val()
})
sendPut(_urls.api + '/tipos/cuenta/' + id + '/edit', data).then((data) => {
this.modal.modal('hide')
this.getTipos()
})
},
setupModal: function() {
this.modal = $('.ui.modal')
this.modal.modal()
this.modal.find('.close.icon').css('cursor', 'pointer').click(() => {
this.modal.modal('hide')
})
this.picker = new ColorPicker(this.modal.find("[name='color']"))
this.modal.find('form').submit((e) => {
e.preventDefault()
const add = $(e.currentTarget).find('.add.icon')
if (add.length > 0) {
this.doAdd()
} else {
this.doEdit()
}
return false
})
},
setup: function() {
this.setupModal()
this.getTipos()
}
}