UI incompleto

2021-07-29 22:05:48 -04:00
parent 4374392af1
commit fb18129826
48 changed files with 1063 additions and 0 deletions
--- a/ui/public/assets/scripts/cuentas.list.js
+++ b/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()
+    })
+  }
+}