Refresh and edit transacciones

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

@@ -50,7 +50,7 @@ class Transaccion {
     ).append(
       $('<td></td>').attr('class', 'right aligned').html(format.format(saldo))
     ).append(
-      $('<td></td>').attr('class', 'right aligned')/*.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) => {
@@ -58,7 +58,7 @@ class Transaccion {
           this.edit()
           return false
         })
-      )*/.append(
+      ).append(
         $('<button></button>').attr('class', 'ui tiny circular red icon button').append(
           $('<i></i>').attr('class', 'remove icon')
         ).click((e) => {
@@ -71,7 +71,15 @@ class Transaccion {
   }
   edit() {
     const form = this.modal.find('form')
-    form.find("[name='fecha']")
+    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(() => {
@@ -90,6 +98,7 @@ const transacciones = {
   get: function() {
     return {
       transacciones: () => {
+        this.draw().loading()
         let promises = []
         sendGet(_urls.api + '/cuenta/' + this.cuenta_id + '/transacciones/amount').then((data) => {
           if (data.cuenta === null) {
@@ -128,10 +137,10 @@ const transacciones = {
                   return (new Date(b.fecha)) - (new Date(a.fecha))
                 })
               }).then(() => {
-                this.draw()
+                this.draw().table()
               })
             } else {
-              this.draw()
+              this.draw().table()
             }
           })
         })
@@ -161,13 +170,30 @@ const transacciones = {
     }
   },
   draw: function() {
-    const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: this.cuenta.moneda.codigo})
+    return {
-    const parent = $(this.id)
+      loading: () => {
-    parent.html('')
+        const parent = $(this.id)
-    $.each(this.transacciones, (i, el) => {
+        parent.html('')
-      parent.append(el.draw({saldo: this.saldo, format: format}))
+        parent.append(
-      this.saldo = this.saldo + parseInt(el.valor.valor) * ((el.isIncrement()) ? 1 : -1)
+            $('<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 format = Intl.NumberFormat('es-CL', {style: 'currency', currency: this.cuenta.moneda.codigo})
+        const parent = $(this.id)
+        parent.html('')
+        $.each(this.transacciones, (i, el) => {
+          parent.append(el.draw({saldo: this.saldo, format: format}))
+          this.saldo = this.saldo + parseInt(el.valor.valor) * ((el.isIncrement()) ? 1 : -1)
+        })
+      }
+    }
   },
   add: function() {
     return {
@@ -202,6 +228,27 @@ const transacciones = {
       }
     }
   },
+  edit: function() {
+    const id = $("[name='id']").val()
+    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,
+      glosa,
+      detalle,
+      valor: (valor < 0) ? -valor : valor
+    })
+    return sendPut(_urls.api + '/transaccion/' + id + '/edit', data).then(() => {
+      this.modal.modal('hide')
+      this.get().transacciones()
+    })
+  },
+  refresh: function () {
+    this.get().transacciones()
+  },
   build: function() {
     return {
       modal: () => {
@@ -212,7 +259,12 @@ const transacciones = {
         })
         this.modal.find('form').submit((e) => {
           e.preventDefault()
-          this.add().exec()
+          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({
@@ -234,7 +286,10 @@ const transacciones = {
   },
   setup: function() {
     this.build().modal()
-    $(this.id).parent().find('.ui.button').click(() => {
+    $(this.id).parent().find('#refresh').click(() => {
+      this.refresh()
+    })
+    $(this.id).parent().find('#add').click(() => {
       this.add().show()
     })
     this.get().transacciones()

ui/resources/views/cuentas/show.blade.php

@@ -27,23 +27,16 @@
           Saldo
         </th>
         <th class="right aligned">
-          <button class="ui tiny green circular icon button">
+          <button class="ui tiny blue circular icon button" id="refresh">
+            <i class="refresh icon"></i>
+          </button>
+          <button class="ui tiny green circular icon button" id="add">
             <i class="plus icon"></i>
           </button>
         </th>
       </tr>
     </thead>
-    <tbody id="transacciones">
+    <tbody id="transacciones"></tbody>
-      <tr>
-        <td colspan="7">
-          <div class="ui active dimmer">
-            <div class="ui indeterminate elastic text loader">
-              Buscando los datos
-            </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
   </table>
 
   <div class="ui modal">