Simplificacion a contabilidad clasica

ui/common/Controller/Bancos.php

@@ -1,12 +0,0 @@
-<?php
-namespace Contabilidad\Common\Controller;
-
-use Psr\Http\Message\ServerRequestInterface as Request;
-use Psr\Http\Message\ResponseInterface as Response;
-use Slim\Views\Blade as View;
-
-class Bancos {
-  public function add(Request $request, Response $response, View $view): Response {
-    return $view->render($response, 'bancos.add');
-  }
-}

ui/common/Controller/Cuentas.php

@@ -9,6 +9,9 @@ class Cuentas {
   public function __invoke(Request $request, Response $response, View $view): Response {
     return $view->render($response, 'cuentas.list');
   }
+  public function show(Request $request, Response $response, View $view, $cuenta_id): Response {
+    return $view->render($response, 'cuentas.show', compact('cuenta_id'));
+  }
   public function add(Request $request, Response $response, View $view): Response {
     return $view->render($response, 'cuentas.add');
   }

ui/common/Controller/Fuentes.php

@@ -1,12 +0,0 @@
-<?php
-namespace Contabilidad\Common\Controller;
-
-use Psr\Http\Message\ServerRequestInterface as Request;
-use Psr\Http\Message\ResponseInterface as Response;
-use Slim\Views\Blade as View;
-
-class Fuentes {
-  public function show(Request $request, Response $response, View $view, $fuente_id): Response {
-    return $view->render($response, 'fuentes.show', compact('fuente_id'));
-  }
-}

ui/common/Controller/TiposFuentes.php

@@ -1,12 +0,0 @@
-<?php
-namespace Contabilidad\Common\Controller;
-
-use Psr\Http\Message\ServerRequestInterface as Request;
-use Psr\Http\Message\ResponseInterface as Response;
-use Slim\Views\Blade as View;
-
-class TiposFuentes {
-  public function add(Request $request, Response $response, View $view): Response {
-    return $view->render($response, 'tipos_fuentes.add');
-  }
-}

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

@@ -0,0 +1,143 @@
+const transacciones = {
+  id: '#transacciones',
+  cuenta_id: 0,
+  cuenta: null,
+  transacciones: [],
+  cuentas: [],
+  saldo: 0,
+  get: function() {
+    return {
+      transacciones: () => {
+        return $.ajax({
+          url: _urls.api + '/cuenta/' + this.cuenta_id + '/transacciones',
+          method: 'GET',
+          dataType: 'json'
+        }).then((data) => {
+          if (data.cuenta === null) {
+            return
+          }
+          this.cuenta = data.cuenta
+          this.saldo = this.cuenta.saldo
+          $('#cuenta').html(this.cuenta.nombre + ' (' + this.cuenta.categoria.nombre + ')')
+          if (data.transacciones === null || data.transacciones.length == 0) {
+            return
+          }
+          this.transacciones = data.transacciones
+        }).then(() => {
+          this.draw()
+        })
+      },
+      cuentas: () => {
+        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 = this.modal.find("[name='cuenta']")
+          $.each(this.cuentas, (i, el) => {
+            select.append(
+              $('<option></option>').attr('value', el.id).html(el.nombre + ' (' + el.categoria.nombre + ')')
+            )
+          })
+        })
+      }
+    }
+  },
+  draw: function() {
+    const format = Intl.NumberFormat('es-CL', {style: 'currency', currency: 'CLP'})
+    const parent = $(this.id)
+    parent.html('')
+    $.each(this.transacciones, (i, el) => {
+      const fuente = (el.valor < 0) ? el.desde : el.hasta
+      parent.append(
+        $('<tr></tr>').append(
+          $('<td></td>').html(el.fechaFormateada)
+        ).append(
+          $('<td></td>').append(
+            $('<a></a>').attr('href', _urls.base + 'cuenta/' + fuente.id).html(fuente.nombre + ' (' + fuente.categoria.nombre + ')')
+          )
+        ).append(
+          $('<td></td>').html(el.glosa + '<br />' + el.detalle)
+        ).append(
+          $('<td></td>').attr('class', 'right aligned').html((el.valor < 0) ? el.valorFormateado.replace('-', '') : '')
+        ).append(
+          $('<td></td>').attr('class', 'right aligned').html((el.valor < 0) ? '' : el.valorFormateado)
+        ).append(
+          $('<td></td>').attr('class', 'right aligned').html(format.format(this.saldo))
+        )
+      )
+      this.saldo -= parseInt(el.valor)
+    })
+  },
+  add: function() {
+    return {
+      show: () => {
+        this.modal.find('form').trigger('reset')
+        this.modal.modal('show')
+      },
+      exec: () => {
+        const valor = $("[name='valor']").val()
+        const cuenta = $("[name='cuenta']").val()
+        const data = JSON.stringify({
+          desde_id: (valor < 0) ? this.cuenta_id : cuenta,
+          hasta_id: (valor < 0) ? cuenta : this.cuenta_id,
+          fecha: $("[name='fecha']").val(),
+          glosa: $("[name='glosa']").val(),
+          detalle: $("[name='detalle']").val(),
+          valor: (valor < 0) ? -valor : valor
+        })
+        return $.ajax({
+          url: _urls.api + '/transacciones/add',
+          method: 'POST',
+          data: data,
+          dataType: 'json'
+        }).then(() => {
+          this.modal.modal('hide')
+          this.get().transacciones()
+        })
+      }
+    }
+  },
+  build: function() {
+    return {
+      modal: () => {
+        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.add().exec()
+          return false
+        })
+        this.modal.find('.ui.calendar').calendar({
+          type: 'date',
+          formatter: {
+            date: function(date, settings) {
+              if (!date) return ''
+              let day = ('00' + date.getDate()).slice(-2)
+              let month = ('00' + (date.getMonth() + 1)).slice(-2)
+              let year = date.getFullYear()
+              return year + '/' + month + '/' + day
+            }
+          },
+          maxDate: new Date()
+        })
+        this.get().cuentas()
+      }
+    }
+  },
+  setup: function() {
+    this.build().modal()
+    $(this.id).parent().find('.ui.button').click(() => {
+      this.add().show()
+    })
+    this.get().transacciones()
+  }
+}

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

@@ -1,121 +0,0 @@
-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

@@ -1,136 +1,127 @@
-const fuentes = {
+const cuentas = {
-  id: '#fuentes',
+  id: '#cuentas',
-  fuentes: [],
+  categorias: [],
-  tipos: [],
+  get: function() {
-  bancos: [],
+    return {
-  modal: null,
+      parent: () => {
-  getParent: function() {
+        let parent = $(this.id)
-    let parent = $(this.id)
+        if (parent.length === 0) {
-    if (parent.length === 0) {
+          const table = $('<table></table>').attr('class', 'ui table').append(
-      const table = $('<table></table>').attr('class', 'ui table').append(
+            $('<thead></thead>').append(
-        $('<thead></thead>').append(
+              $('<tr></tr>').append(
-          $('<tr></tr>').append(
+                $('<th></th>').html('Cuenta')
-            $('<th></th>').html('Fuente')
+              ).append(
-          ).append(
+                $('<th></th>').attr('class', 'right aligned').html('Saldo')
-            $('<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)
-      parent = $('<tbody></tbody>').attr('id', this.id)
+          $('h1.header').after(table)
-      table.append(parent)
+        }
-      $('h1.header').after(table)
+        return parent
+      },
+      categorias: () => {
+        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().categorias()
+        })
+      },
+      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) {
+            return
+          }
+          const idx = this.categorias.findIndex(el => {
+            if (el.id == categoria_id) {
+              return true
+            }
+          })
+          this.categorias[idx].cuentas = data.cuentas
+        }).then(() => {
+          this.draw().cuentas(categoria_id)
+        })
+      }
     }
-    return parent
   },
-  setup: async function() {
+  remove: function() {
-    this.modal = $('.ui.modal')
+    return {
-    this.modal.modal()
+      cuentas: (categoria_id) => {
-    this.modal.find('.close.icon').css('cursor', 'pointer').click(() => {
+        const idx = this.categorias.findIndex(el => {
-      this.modal.modal('hide')
+          if (el.id == categoria_id) {
-    })
+            return true
-    this.getFuentes().then(() => {
+          }
-      this.getTipos().then(() => {
+        })
-        this.getBancos()
+        const parent = $("[data-id='" + categoria_id + "']")
-      })
+        for (let i = 0; i < this.categorias[idx].cuentas.length; i ++) {
-    })
+          parent.next().remove()
-  },
+        }
-  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()
+    return {
-    $.each(this.fuentes, (i, el) => {
+      categorias: () => {
-      const f = $('<tr></tr>').append(
+        const parent = this.get().parent()
-        $('<td></td>').append(
+        $.each(this.categorias, (i, el) => {
-          $('<a></a>').attr('href', _urls.base + 'fuente/' + el.id).html(el.tipo.descripcion + ' - ' + el.banco.nombre)
+          const button = $('<button></button>').attr('class', 'ui mini compact icon button').append(
-        )
+            $('<i></i>').attr('class', 'plus icon')
-      ).append(
+          ).click((e) => {
-        $('<td></td>').html(el.saldoFormateado)
+            const plus = button.find('.plus')
-      )
+            if (plus.length == 0) {
-      parent.append(f)
+              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)
+        })
+      },
+      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)
+              )
+            ).append(
+              $('<td></td>').attr('class', 'right aligned').html(el.saldoFormateado)
+            )
+          )
+        })
+      }
+    }
+  },
+  setup: async function() {
+    this.get().categorias()
   }
 }

ui/resources/routes/bancos.php

@@ -1,4 +0,0 @@
-<?php
-use Contabilidad\Common\Controller\Bancos;
-
-$app->get('/bancos/add', [Bancos::class, 'add']);

ui/resources/routes/cuentas.php

@@ -2,3 +2,4 @@
 use Contabilidad\Common\Controller\Cuentas;
 
 $app->get('/cuentas', Cuentas::class);
+$app->get('/cuenta/{cuenta_id}', [Cuentas::class, 'show']);

ui/resources/routes/fuentes.php

@@ -1,4 +0,0 @@
-<?php
-use Contabilidad\Common\Controller\Fuentes;
-
-$app->get('/fuente/{fuente_id}', [Fuentes::class, 'show']);

ui/resources/routes/tipos_fuentes.php

@@ -1,4 +0,0 @@
-<?php
-use Contabilidad\Common\Controller\TiposFuentes;
-
-$app->get('/tipos_fuentes/add', [TiposFuentes::class, 'add']);

ui/resources/views/bancos/base.blade.php

@@ -1,14 +0,0 @@
-@extends('layout.base')
-
-@section('page_content')
-  <h1 class="ui header">
-    @hasSection('bancos_title')
-      Banco @yield('bancos_title')
-    @else
-      Bancos
-    @endif
-  </h1>
-  <div class="ui segment">
-    @yield('bancos_content')
-  </div>
-@endsection

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

@@ -1,27 +1,30 @@
-@extends('fuentes.base')
+@extends('cuentas.base')
 
-@section('fuentes_title')
+@section('cuentas_title')
-  <span id="fuente"></span>
+  <span id="cuenta"></span>
 @endsection
 
-@section('fuentes_content')
+@section('cuentas_content')
-  <table class="ui table">
+  <table class="ui striped table">
     <thead>
       <tr>
         <th>
           Fecha
         </th>
         <th>
-          Cuenta
+          Categoría
-        </th>
-        <th>
-          Glosa
         </th>
         <th>
           Detalle
         </th>
         <th class="right aligned">
-          Valor
+          Debe
+        </th>
+        <th class="right aligned">
+          Haber
+        </th>
+        <th class="right aligned">
+          Saldo
         </th>
         <th class="right aligned">
           <button class="ui tiny green circular icon button">
@@ -30,9 +33,10 @@
         </th>
       </tr>
     </thead>
-    <tbody id="entradas">
+    <tbody id="transacciones">
     </tbody>
   </table>
+
   <div class="ui modal">
     <i class="close icon"></i>
     <div class="content">
@@ -71,11 +75,11 @@
 @endsection
 
 @push('scripts')
-  <script type="text/javascript" src="{{$urls->scripts}}/fuentes.show.js"></script>
+  <script type="text/javascript" src="{{$urls->scripts}}/cuentas.show.js"></script>
   <script type="text/javascript">
     $(document).ready(() => {
-      entradas.fuente = {{$fuente_id}}
+      transacciones.cuenta_id = {{$cuenta_id}}
-      entradas.setup()
+      transacciones.setup()
     })
   </script>
 @endpush

ui/resources/views/fuentes/base.blade.php

@@ -1,14 +0,0 @@
-@extends('layout.base')
-
-@section('page_content')
-  <h1 class="ui header">
-    @hasSection('fuentes_title')
-      Fuente @yield('fuentes_title')
-    @else
-      Fuentes
-    @endif
-  </h1>
-  <div class="ui segment">
-    @yield('fuentes_content')
-  </div>
-@endsection

ui/resources/views/home.blade.php

@@ -4,31 +4,13 @@
   <h1 class="ui header">
     Contabilidad
   </h1>
-  <div class="ui modal">
-    <i class="close icon"></i>
-    <div class="content">
-      <form class="ui form">
-        <div class="field">
-          <label>Tipo</label>
-          <select name="tipo"></select>
-        </div>
-        <div class="field">
-          <label>Banco</label>
-          <select name="banco"></select>
-        </div>
-        <button class="ui icon button">
-          <i class="plus icon"></i>
-        </button>
-      </form>
-    </div>
-  </div>
 @endsection
 
 @push('scripts')
   <script type="text/javascript" src="{{$urls->scripts}}/home.js"></script>
   <script type="text/javascript">
     $(document).ready(() => {
-      fuentes.setup()
+      cuentas.setup()
     })
   </script>
 @endpush

ui/resources/views/layout/body.blade.php

@@ -1,5 +1,7 @@
 <body>
   @include('layout.body.header')
-  @yield('page_content')
+  <div class="ui bottom attached segment">
+    @yield('page_content')
+  </div>
   @include('layout.body.footer')
 </body>

ui/resources/views/layout/body/menu.blade.php

@@ -1,4 +1,4 @@
-<nav class="ui menu">
+<nav class="ui top attached menu">
   <a class="item" href="{{$urls->base}}">Inicio</a>
   @include('layout.body.menu.cuentas')
   @include('layout.body.menu.categorias')

ui/resources/views/tipos_fuentes/base.blade.php

@@ -1,14 +0,0 @@
-@extends('layout.base')
-
-@section('page_content')
-  <h1 class="ui header">
-    @hasSection('tipos_fuentes_title')
-      Tipo Fuente @yield('tipos_fuentes_title')
-    @else
-      Tipos Fuentes
-    @endif
-  </h1>
-  <div class="ui segment">
-    @yield('tipos_fuentes_content')
-  </div>
-@endsection