UI incompleto

ui/public/assets/scripts/categorias.list.js

@@ -0,0 +1,91 @@
+const categorias = {
+  id: '#categorias',
+  categorias: [],
+  modal: null,
+  getCategorias: function() {
+    return $.ajax({
+      url: _urls.api + '/categorias',
+      method: 'GET',
+      dataType: 'json'
+    }).then((data) => {
+      if (data.categorias === null || data.categorias.length == 0) {
+        return
+      }
+      this.categorias = data.categorias
+    }).then(() => {
+      this.draw()
+    })
+  },
+  getParent: function() {
+    let parent = $(this.id).find('tbody')
+    if (parent.length == 0) {
+      const table = $('<table></table>').attr('class', 'ui table').append(
+        $('<thead></thead>').append(
+          $('<tr></tr>').append(
+            $('<th></th>').html('Categoría')
+          ).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)
+      $(this.id).append(table)
+    }
+    return parent
+  },
+  draw: function() {
+    const parent = this.getParent()
+    parent.html('')
+    $.each(this.categorias, (i, el) => {
+      parent.append(
+        $('<tr></tr>').append(
+          $('<td></td>').html(el.nombre)
+        )
+      )
+    })
+  },
+  add: function() {
+    this.modal.find('form').trigger('reset')
+    this.modal.modal('show')
+  },
+  doAdd: function() {
+    const data = JSON.stringify({
+      nombre: $("[name='nombre']").val()
+    })
+    return $.ajax({
+      url: _urls.api + '/categorias/add',
+      method: 'POST',
+      data: data,
+      dataType: 'json'
+    }).then((data) => {
+      this.modal.modal('hide')
+      this.getCategorias()
+    })
+  },
+  setupModal: function() {
+    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()
+      this.doAdd()
+      return false
+    })
+  },
+  setup: function() {
+    this.setupModal()
+    this.getCategorias()
+  }
+}

ui/public/assets/scripts/cuentas.list.js

@@ -0,0 +1,125 @@
+const cuentas = {
+  id: '#cuentas',
+  cuentas: [],
+  categorias: [],
+  getCuentas: function() {
+    return $.ajax({
+      url: _urls.api + '/cuentas',
+      method: 'GET',
+      dataType: 'json'
+    }).then((data) => {
+      if (data.cuentas === null || data.cuentas.length == 0) {
+        return
+      }
+      this.cuentas = data.cuentas
+    }).then(() => {
+      this.draw()
+    })
+  },
+  getCategorias: function() {
+    return $.ajax({
+      url: _urls.api + '/categorias',
+      method: 'GET',
+      dataType: 'json'
+    }).then((data) => {
+      if (data.categorias === null || data.categorias.length == 0) {
+        return
+      }
+      this.categorias = data.categorias
+    }).then(() => {
+      this.drawCategorias()
+    })
+  },
+  drawCategorias: function() {
+    const select = $("[name='categoria']")
+    $.each(this.categorias, (i, el) => {
+      select.append(
+        $('<option></option>').attr('value', el.id).html(el.nombre)
+      )
+    })
+  },
+  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>').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.cuentas, (i, el) => {
+      parent.append(
+        $('<tr></tr>').append(
+          $('<td></td>').html(el.nombre)
+        ).append(
+          $('<td></td>').html(el.categoria.nombre)
+        )
+      )
+    })
+  },
+  add: function() {
+    this.modal.find('form').trigger('reset')
+    this.modal.modal('show')
+  },
+  doAdd: function() {
+    const data = JSON.stringify({
+      categoria_id: $("[name='categoria']").val(),
+      nombre: $("[name='nombre']").val()
+    })
+    return $.ajax({
+      url: _urls.api + '/cuentas/add',
+      method: 'POST',
+      data: data,
+      dataType: 'json'
+    }).then((data) => {
+      this.modal.modal('hide')
+      this.getCuentas()
+    })
+  },
+  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()
+      this.doAdd()
+      return false
+    })
+  },
+  setup: function() {
+    this.setupModal()
+    this.getCuentas().then(() => {
+      this.getCategorias()
+    })
+  }
+}

ui/public/assets/scripts/fuentes.show.js

@@ -0,0 +1,121 @@
+const entradas = {
+  id: '#entradas',
+  modal: null,
+  fuente: null,
+  entradas: [],
+  getEntradas: function() {
+    return $.ajax({
+      url: _urls.api + '/fuente/' + this.fuente + '/entradas',
+      method: 'GET',
+      dataType: 'json'
+    }).then((data) => {
+      if (data.fuente === null) {
+        return
+      }
+      $('#fuente').html(data.fuente.tipo.descripcion + ' - ' + data.fuente.banco.nombre + ' (' + data.fuente.saldoFormateado + ')')
+      if (data.entradas == null || data.entradas.length == 0) {
+        return
+      }
+      this.entradas = data.entradas
+    }).then(() => {
+      this.draw()
+    })
+  },
+  draw: function() {
+    const table = $(this.id)
+    table.html('')
+    $.each(this.entradas, (i, el) => {
+      table.append(
+        $('<tr></tr>').append(
+          $('<td></td>').html(el.fechaFormateada)
+        ).append(
+          $('<td></td>').html(el.cuenta.nombre + ' (' + el.cuenta.categoria.nombre + ')')
+        ).append(
+          $('<td></td>').html(el.glosa)
+        ).append(
+          $('<td></td>').html(el.detalle)
+        ).append(
+          $('<td></td>').attr('class', 'right aligned').html(el.valorFormateado)
+        )
+      )
+    })
+  },
+  getCuentas: function() {
+    return $.ajax({
+      url: _urls.api + '/cuentas',
+      method: 'GET',
+      dataType: 'json'
+    }).then((data) => {
+      if (data.cuentas === null || data.cuentas.length == 0) {
+        return
+      }
+      this.cuentas = data.cuentas
+    }).then(() => {
+      const select = $("select[name='cuenta']")
+      $.each(this.cuentas, (i, el) => {
+        select.append(
+          $('<option></option>').attr('value', el.id).html(el.nombre + ' (' + el.categoria.nombre + ')')
+        )
+      })
+    })
+  },
+  add: function() {
+    this.modal.find('form').trigger('reset')
+    this.modal.modal('show')
+  },
+  doAdd: function() {
+    const data = JSON.stringify({
+      fecha: $("[name='fecha']").val(),
+      fuente_id: this.fuente,
+      glosa: $("[name='glosa']").val(),
+      detalle: $("[name='detalle']").val(),
+      cuenta_id: $("[name='cuenta']").val(),
+      valor: $("[name='valor']").val()
+    })
+    return $.ajax({
+      url: _urls.api + '/entradas/add',
+      method: 'POST',
+      data: data,
+      dataType: 'json'
+    }).then((data) => {
+      this.modal.modal('hide')
+      this.getEntradas()
+    })
+  },
+  setupModal: function() {
+    this.modal = $('.ui.modal')
+    this.modal.modal()
+    this.modal.find('.ui.calendar').calendar({
+      type: 'date',
+      formatter: {
+        date: function(date, settings) {
+          if (!date) return ''
+          let day = date.getDate()
+          let month = ('00' + (date.getMonth() + 1)).slice(-2)
+          let year = date.getFullYear()
+          return year + '/' + month + '/' + day
+        }
+      },
+      maxDate: new Date()
+    })
+    this.modal.find('.close.icon').css('cursor', 'pointer').click(() => {
+      this.modal.modal('hide')
+    })
+    this.modal.find('form').submit((e) => {
+      e.preventDefault()
+      this.doAdd()
+      return false
+    })
+  },
+  setup: function() {
+    this.setupModal()
+    this.getEntradas().then(() => {
+      this.getCuentas()
+    })
+    $(this.id).parent().find('.ui.button').click((e) => {
+      e.preventDefault()
+      this.add()
+      return false
+    })
+  }
+}

ui/public/assets/scripts/home.js

@@ -0,0 +1,136 @@
+const fuentes = {
+  id: '#fuentes',
+  fuentes: [],
+  tipos: [],
+  bancos: [],
+  modal: null,
+  getParent: function() {
+    let parent = $(this.id)
+    if (parent.length === 0) {
+      const table = $('<table></table>').attr('class', 'ui table').append(
+        $('<thead></thead>').append(
+          $('<tr></tr>').append(
+            $('<th></th>').html('Fuente')
+          ).append(
+            $('<th></th>').html('Saldo')
+          ).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')
+              ).click(() => {
+                this.add()
+              })
+            )
+          )
+        )
+      )
+      parent = $('<tbody></tbody>').attr('id', this.id)
+      table.append(parent)
+      $('h1.header').after(table)
+    }
+    return parent
+  },
+  setup: async function() {
+    this.modal = $('.ui.modal')
+    this.modal.modal()
+    this.modal.find('.close.icon').css('cursor', 'pointer').click(() => {
+      this.modal.modal('hide')
+    })
+    this.getFuentes().then(() => {
+      this.getTipos().then(() => {
+        this.getBancos()
+      })
+    })
+  },
+  add: function() {
+    this.modal.find('form').trigger('reset')
+    this.modal.find('form').submit((e) => {
+      e.preventDefault()
+      this.doAdd()
+      return false
+    })
+    this.modal.modal('show')
+  },
+  doAdd: function() {
+    const data = JSON.stringify({
+      tipo_id: $("select[name='tipo']").val(),
+      banco_id: $("select[name='banco']").val()
+    })
+    $.ajax({
+      url: _urls.api + '/fuentes/add',
+      method: 'POST',
+      data: data,
+      dataType: 'json'
+    }).then((data) => {
+      this.modal.modal('hide')
+      this.getFuentes()
+    })
+  },
+  getFuentes: function() {
+    return $.ajax({
+      url: _urls.api + '/fuentes',
+      method: 'GET',
+      dataType: 'json'
+    }).then((data) => {
+      if (data.fuentes === null || data.fuentes.length == 0) {
+        return
+      }
+      this.fuentes = data.fuentes
+    }).then(() => {
+      this.draw()
+    })
+  },
+  getTipos: function() {
+    return $.ajax({
+      url: _urls.api + '/tipos_fuentes',
+      method: 'GET',
+      dataType: 'json'
+    }).then((data) => {
+      if (data.tipos_fuentes === null || data.tipos_fuentes.length == 0) {
+        return
+      }
+      this.tipos = data.tipos_fuentes
+    }).then(() => {
+      const select = $("select[name='tipo']")
+      select.html('')
+      $.each(this.tipos, (i, el) => {
+        select.append(
+          $('<option></option>').attr('value', el.id).html(el.descripcion)
+        )
+      })
+      select.dropdown()
+    })
+  },
+  getBancos: function() {
+    return $.ajax({
+      url: _urls.api + '/bancos',
+      method: 'GET',
+      dataType: 'json'
+    }).then((data) => {
+      if (data.bancos === null || data.bancos.length == 0) {
+        return
+      }
+      this.bancos = data.bancos
+    }).then(() => {
+      const select = $("select[name='banco']")
+      $.each(this.bancos, (i, el) => {
+        select.append(
+          $('<option></option>').attr('value', el.id).html(el.nombre)
+        )
+      })
+    })
+  },
+  draw: function() {
+    const parent = this.getParent()
+    $.each(this.fuentes, (i, el) => {
+      const f = $('<tr></tr>').append(
+        $('<td></td>').append(
+          $('<a></a>').attr('href', _urls.base + 'fuente/' + el.id).html(el.tipo.descripcion + ' - ' + el.banco.nombre)
+        )
+      ).append(
+        $('<td></td>').html(el.saldoFormateado)
+      )
+      parent.append(f)
+    })
+  }
+}