UI
This commit is contained in:
@ -1,19 +1,234 @@
|
||||
const down_icon = 'right chevron'
|
||||
const up_icon = 'down chevron'
|
||||
|
||||
class Cuenta {
|
||||
constructor({id, nombre, tipo_id, categoria_id, tipo, saldo, saldoFormateado}) {
|
||||
this.id = id
|
||||
this.nombre = nombre
|
||||
this.tipo_id = tipo_id
|
||||
this.categoria_id = categoria_id
|
||||
this.tipo = tipo
|
||||
this.saldo = {
|
||||
saldo,
|
||||
formateado: saldoFormateado
|
||||
}
|
||||
}
|
||||
setTipos(tipos) {
|
||||
this.tipos = tipos
|
||||
}
|
||||
draw() {
|
||||
const tr = $('<tr></tr>').attr('data-id', this.id).attr('data-class', 'cuenta').append(
|
||||
$('<td></td>').append(
|
||||
$('<i></i>').attr('class', 'angle right icon')
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').append(
|
||||
$('<i></i>').attr('class', 'angle right icon')
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').append(
|
||||
$('<a></a>').attr('href', _urls.base + 'cuenta/' + this.id).append(
|
||||
$('<i></i>').attr('class', 'square full icon').css('color', '#' + this.tipo.color)
|
||||
).append(this.nombre)
|
||||
)
|
||||
)
|
||||
$.each(this.tipos, (i, m) => {
|
||||
const td = $('<td></td>').attr('class', 'right aligned')
|
||||
if (m.descripcion === this.tipo.descripcion) {
|
||||
td.html(this.saldo.formateado)
|
||||
}
|
||||
tr.append(td)
|
||||
})
|
||||
$("[data-id='" + this.categoria_id + "'][data-class='categoria']").after(tr)
|
||||
}
|
||||
remove() {
|
||||
$("[data-id='" + this.id + "'][data-class='cuenta']").remove()
|
||||
}
|
||||
}
|
||||
class Categoria {
|
||||
constructor({id, nombre, tipo_id, tipo, activos, pasivos, ganancias, perdidas}) {
|
||||
this.id = id
|
||||
this.nombre = nombre
|
||||
this.tipo_id = tipo_id
|
||||
this.tipo = tipo
|
||||
this.activos = activos
|
||||
this.pasivos = pasivos
|
||||
this.ganancias = ganancias
|
||||
this.perdidas = perdidas
|
||||
this.is_open = false
|
||||
this.cuentas = []
|
||||
}
|
||||
setTipos(tipos) {
|
||||
this.tipos = tipos
|
||||
}
|
||||
draw({format}) {
|
||||
const button = $('<button></button>').attr('class', 'ui mini compact icon button').append(
|
||||
$('<i></i>').attr('class', down_icon + ' icon')
|
||||
).click((e) => {
|
||||
const plus = button.find('.' + down_icon.replace(' ', '.') + '.icon')
|
||||
if (plus.length > 0) {
|
||||
this.loadCuentas()
|
||||
button.find('i.icon').removeClass(down_icon).addClass(up_icon)
|
||||
this.is_open = true
|
||||
} else {
|
||||
this.removeCuentas()
|
||||
button.find('i.icon').removeClass(up_icon).addClass(down_icon)
|
||||
this.is_open = false
|
||||
}
|
||||
})
|
||||
const tr = $('<tr></tr>').attr('data-id', this.id).attr('data-class', 'categoria').append(
|
||||
$('<td></td>').append($('<span></span>').html('<i class="angle right icon"></i>'))
|
||||
).append(
|
||||
$('<td></td>').attr('colspan', 2).append(
|
||||
$('<div></div>').append(button).append(this.nombre)
|
||||
)
|
||||
)
|
||||
$.each(this.tipos, (i, el) => {
|
||||
tr.append(
|
||||
$('<td></td>').attr('class', 'right aligned').html(format.format(this[el.descripcion.toLowerCase() + 's']))
|
||||
)
|
||||
})
|
||||
$("[data-id='" + this.tipo_id + "'][data-class='tipo_categoria']").after(tr)
|
||||
if (this.is_open) {
|
||||
button.trigger('click')
|
||||
}
|
||||
}
|
||||
remove() {
|
||||
this.removeCuentas()
|
||||
$("[data-id='" + this.id + "'][data-class='categoria']").remove()
|
||||
}
|
||||
loadCuentas() {
|
||||
if (this.cuentas.length === 0) {
|
||||
sendGet(_urls.api + '/categoria/' + this.id + '/cuentas').then((data) => {
|
||||
if (data.cuentas === null || data.cuentas.length === 0) {
|
||||
return
|
||||
}
|
||||
$.each(data.cuentas, (i, el) => {
|
||||
const cuenta = new Cuenta(el)
|
||||
cuenta.setTipos(this.tipos)
|
||||
this.cuentas.push(cuenta)
|
||||
})
|
||||
}).then(() => {
|
||||
this.drawCuentas()
|
||||
})
|
||||
return
|
||||
}
|
||||
this.drawCuentas()
|
||||
}
|
||||
drawCuentas() {
|
||||
if (this.cuentas.length === 0) {
|
||||
$("[data-id='"+this.id+"'][data-class='categoria']").after(
|
||||
$('<tr></tr>').attr('data-class', 'cuenta').attr('data-id', 'vacio').append(
|
||||
$('<td></td>')
|
||||
).append(
|
||||
$('<td></td>')
|
||||
).append(
|
||||
$('<td></td>').attr('colspan', 5).html('No hay cuentas.')
|
||||
)
|
||||
)
|
||||
return
|
||||
}
|
||||
$.each(this.cuentas, (i, el) => {
|
||||
el.draw()
|
||||
})
|
||||
}
|
||||
removeCuentas() {
|
||||
if (this.cuentas.length === 0) {
|
||||
$("tr[data-class='cuenta'][data-id='vacio']").remove()
|
||||
return
|
||||
}
|
||||
$.each(this.cuentas, (i, el) => {
|
||||
el.remove()
|
||||
})
|
||||
}
|
||||
}
|
||||
class TipoCategoria {
|
||||
constructor({id, descripcion, activo, activos, pasivos, ganancias, perdidas}) {
|
||||
this.id = id
|
||||
this.descripcion = descripcion
|
||||
this.activo = activo
|
||||
this.activos = activos
|
||||
this.pasivos = pasivos
|
||||
this.ganancias = ganancias
|
||||
this.perdidas = perdidas
|
||||
this.categorias = []
|
||||
}
|
||||
setTipos(tipos) {
|
||||
this.tipos = tipos
|
||||
}
|
||||
draw({format}) {
|
||||
const button = $('<button></button>').attr('class', 'ui mini compact icon button').append(
|
||||
$('<i></i>').attr('class', down_icon + ' icon')
|
||||
).click((e) => {
|
||||
const plus = button.find('.' + down_icon.replace(' ', '.') + '.icon')
|
||||
if (plus.length > 0) {
|
||||
this.loadCategorias()
|
||||
button.find('i.icon').removeClass(down_icon).addClass(up_icon)
|
||||
} else {
|
||||
this.removeCategorias()
|
||||
button.find('i.icon').removeClass(up_icon).addClass(down_icon)
|
||||
}
|
||||
})
|
||||
const tr = $('<tr></tr>').attr('data-id', this.id).attr('data-class', 'tipo_categoria').append(
|
||||
$('<td></td>').attr('colspan', 3).append(
|
||||
$('<div></div>').append(button).append(this.descripcion)
|
||||
)
|
||||
)
|
||||
$.each(this.tipos, (i, el) => {
|
||||
tr.append($('<td></td>').attr('class', 'right aligned').html(format.format(this[el.descripcion.toLowerCase() + 's'])))
|
||||
})
|
||||
return tr
|
||||
}
|
||||
loadCategorias() {
|
||||
if (this.categorias.length === 0) {
|
||||
sendGet(_urls.api + '/tipos/categoria/' + this.id + '/categorias').then((data) => {
|
||||
if (data.categorias === null || data.categorias.length === 0) {
|
||||
return
|
||||
}
|
||||
$.each(data.categorias, (i, el) => {
|
||||
const cat = new Categoria(el)
|
||||
cat.setTipos(this.tipos)
|
||||
this.categorias.push(cat)
|
||||
})
|
||||
}).then(() => {
|
||||
this.drawCategorias()
|
||||
})
|
||||
return
|
||||
}
|
||||
this.drawCategorias()
|
||||
}
|
||||
drawCategorias() {
|
||||
const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
|
||||
$.each(this.categorias, (i, el) => {
|
||||
el.draw({format})
|
||||
})
|
||||
}
|
||||
removeCategorias() {
|
||||
$.each(this.categorias, (i, el) => {
|
||||
el.remove()
|
||||
})
|
||||
}
|
||||
}
|
||||
const cuentas = {
|
||||
id: '#cuentas',
|
||||
categorias: [],
|
||||
id: 'cuentas',
|
||||
balance: 0,
|
||||
tipos: [],
|
||||
tipos_categorias: [],
|
||||
get: function() {
|
||||
return {
|
||||
parent: () => {
|
||||
let parent = $(this.id)
|
||||
let parent = $('#' + this.id)
|
||||
if (parent.length === 0) {
|
||||
const table = $('<table></table>').attr('class', 'ui striped table').append(
|
||||
$('<thead></thead>').append(
|
||||
$('<tr></tr>').append(
|
||||
$('<th></th>').html('Cuenta')
|
||||
).append(
|
||||
$('<th></th>').attr('class', 'right aligned').html('Saldo')
|
||||
)
|
||||
const tr = $('<tr></tr>').append(
|
||||
$('<th></th>').attr('colspan', 3).html('Cuenta')
|
||||
)
|
||||
$.each(this.tipos, (i, el) => {
|
||||
tr.append(
|
||||
$('<th></th>').attr('class', 'right aligned').css('color', '#' + el.color).html(el.descripcion)
|
||||
)
|
||||
})
|
||||
const table = $('<table></table>').attr('class', 'ui striped table').append(
|
||||
$('<thead></thead>').append(tr)
|
||||
)
|
||||
parent = $('<tbody></tbody>').attr('id', this.id)
|
||||
table.append(parent)
|
||||
@ -21,107 +236,74 @@ const cuentas = {
|
||||
}
|
||||
return parent
|
||||
},
|
||||
categorias: () => {
|
||||
return $.ajax({
|
||||
url: _urls.api + '/categorias',
|
||||
method: 'GET',
|
||||
dataType: 'json'
|
||||
}).then((data) => {
|
||||
if (data.categorias === null || data.categorias.length == 0) {
|
||||
tipos_cuentas: () => {
|
||||
return sendGet(_urls.api + '/tipos/cuentas').then((data) => {
|
||||
if (data.tipos === null || data.tipos.length === 0) {
|
||||
return
|
||||
}
|
||||
this.categorias = data.categorias
|
||||
}).then(() => {
|
||||
this.draw().categorias()
|
||||
this.tipos = data.tipos
|
||||
})
|
||||
},
|
||||
cuentas: (categoria_id) => {
|
||||
return $.ajax({
|
||||
url: _urls.api + '/categoria/' + categoria_id + '/cuentas',
|
||||
method: 'GET',
|
||||
dataType: 'json'
|
||||
}).then((data) => {
|
||||
if (data.cuentas === null || data.cuentas.length == 0) {
|
||||
tipos_categorias: () => {
|
||||
return sendGet(_urls.api + '/tipos/categorias').then((data) => {
|
||||
if (data.tipos === null || data.tipos.length === 0) {
|
||||
return
|
||||
}
|
||||
const idx = this.categorias.findIndex(el => {
|
||||
if (el.id == categoria_id) {
|
||||
return true
|
||||
}
|
||||
$.each(data.tipos, (i, el) => {
|
||||
tipo = new TipoCategoria(el)
|
||||
tipo.setTipos(this.tipos)
|
||||
this.tipos_categorias.push(tipo)
|
||||
})
|
||||
this.categorias[idx].cuentas = data.cuentas
|
||||
}).then(() => {
|
||||
this.draw().cuentas(categoria_id)
|
||||
this.draw().tipos_categorias()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
remove: function() {
|
||||
return {
|
||||
cuentas: (categoria_id) => {
|
||||
const idx = this.categorias.findIndex(el => {
|
||||
if (el.id == categoria_id) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
balance: () => {
|
||||
sendGet(_urls.api + '/balance').then((data) => {
|
||||
this.balance = data
|
||||
}).then(() => {
|
||||
this.draw().balance()
|
||||
})
|
||||
const parent = $("[data-id='" + categoria_id + "']")
|
||||
for (let i = 0; i < this.categorias[idx].cuentas.length; i ++) {
|
||||
parent.next().remove()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
draw: function() {
|
||||
return {
|
||||
categorias: () => {
|
||||
tipos_categorias: () => {
|
||||
const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
|
||||
const parent = this.get().parent()
|
||||
$.each(this.categorias, (i, el) => {
|
||||
const button = $('<button></button>').attr('class', 'ui mini compact icon button').append(
|
||||
$('<i></i>').attr('class', 'plus icon')
|
||||
).click((e) => {
|
||||
const plus = button.find('.plus')
|
||||
if (plus.length == 0) {
|
||||
console.debug(e.target)
|
||||
this.remove().cuentas(el.id)
|
||||
button.find('i.icon').removeClass('minus').addClass('plus')
|
||||
} else {
|
||||
console.debug(e.target)
|
||||
this.get().cuentas(el.id)
|
||||
button.find('i.icon').removeClass('plus').addClass('minus')
|
||||
}
|
||||
})
|
||||
const f = $('<tr></tr>').attr('data-id', el.id).append(
|
||||
$('<td></td>').append(
|
||||
$('<div></div>').append(button).append(el.nombre)
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'right aligned').html(el.saldoFormateado)
|
||||
)
|
||||
parent.append(f)
|
||||
$.each(this.tipos_categorias, (i, el) => {
|
||||
parent.append(el.draw({format, tipos: this.tipos}))
|
||||
})
|
||||
this.get().balance()
|
||||
},
|
||||
cuentas: (categoria_id) => {
|
||||
const idx = this.categorias.findIndex(el => {
|
||||
if (el.id == categoria_id) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
const parent = $("[data-id='" + categoria_id + "']")
|
||||
$.each(this.categorias[idx].cuentas, (i, el) => {
|
||||
parent.after(
|
||||
$('<tr></tr>').attr('class', 'item').append(
|
||||
$('<td></td>').append(
|
||||
$('<a></a>').attr('href', _urls.base + 'cuenta/' + el.id).html(el.nombre)
|
||||
balance: () => {
|
||||
const parent = this.get().parent().parent()
|
||||
if (parent.find('tfoot').length === 0) {
|
||||
parent.append(
|
||||
$('<tfoot></tfoot>')
|
||||
)
|
||||
}
|
||||
const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
|
||||
const foot = parent.find('tfoot')
|
||||
foot.html('')
|
||||
const tr = $('<tr></tr>').append(
|
||||
$('<th></th>').attr('colspan', 3).html('<b>Total</b>')
|
||||
)
|
||||
$.each(this.tipos, (i, el) => {
|
||||
tr.append(
|
||||
$('<th></th>').attr('class', 'right aligned').append(
|
||||
$('<b></b>').html(format.format(this.balance[el.descripcion.toLowerCase() + 's']))
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'right aligned').html(el.saldoFormateado)
|
||||
)
|
||||
)
|
||||
})
|
||||
foot.append(tr)
|
||||
}
|
||||
}
|
||||
},
|
||||
setup: async function() {
|
||||
this.get().categorias()
|
||||
this.get().tipos_cuentas().then(() => {
|
||||
this.get().tipos_categorias()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user