Script structure and searchable cuentas
This commit is contained in:
251
ui/public/assets/scripts/cuentas/list.js
Normal file
251
ui/public/assets/scripts/cuentas/list.js
Normal 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()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user