UI

ui/resources/views/currencies/list.blade.php

@@ -1,10 +1,34 @@
-@extends('layout.base')
+@extends('currencies.base')
 
-@section('page_content')
-  <h2 class="ui header">
-    Monedas
-  </h2>
-  <div class="ui link list" id="currencies">
+@section('title')
+  Monedas
+@endsection
+
+@section('content')
+  <table class="ui collapsing table">
+    <thead>
+      <tr>
+        <th>C&oacute;digo</td>
+        <th>Moneda</td>
+        <th id="add_currency"><i class="plus icon"></i></td>
+      </tr>
+    </thead>
+    <tbody id="currencies"></tbody>
+  </table>
+  <div class="ui modal" id="add_modal">
+    <div class="content">
+      <form class="ui form">
+        <div class="inline field">
+          <label>C&oacute;digo</label>
+          <input type="text" name="code" />
+        </div>
+        <div class="inline field">
+          <label>Nombre</label>
+          <input type="text" name="name" />
+        </div>
+        <button class="ui button">Agregar</button>
+      </form>
+    </div>
   </div>
 @endsection
 
@@ -12,10 +36,18 @@
   <script type="text/javascript">
     let currencies = {
       id: '#currencies',
+      loading: '#loading',
+      add_button: '#add_currency',
+      add_modal: '#add_modal',
       items: [],
       setup: function() {
+        $(this.add_modal).modal()
+        $(this.add_button).css('cursor', 'pointer').click((e) => {
+          this.add()
+        })
         this.load().then((data) => {
           this.build(data)
+          $(this.loading).modal('hide')
         })
       },
       load: function() {
@@ -27,10 +59,68 @@
       build: function() {
         $(this.id).html('')
         $.each(this.items, (i, el) => {
-          let item = $('<a></a>').attr('class', 'item').attr('href', '{{$urls->base}}/currency/' + el.id)
-            .html(el.name)
+          let item = $('<tr></tr>').append(
+            $('<td></td>').append(
+              $('<a></a>').attr('href', '{{$urls->base}}/currency/' + el.id)
+                .html(el.code)
+            )
+          ).append(
+            $('<td></td>').append(
+              $('<a></a>').attr('href', '{{$urls->base}}/currency/' + el.id)
+                .html(el.name)
+            )
+          ).append(
+            $('<td></td>').attr('class', 'remove_currency').attr('data-id', el.id).append(
+              $('<i></i>').attr('class', 'small minus icon')
+            ).css('cursor', 'pointer').click((e) => {
+              this.remove($(e.currentTarget).attr('data-id'))
+            })
+          )
           $(this.id).append(item)
         })
+      },
+      add: function() {
+        $(this.add_modal).find('form').trigger('reset').submit((e) => {
+          e.preventDefault()
+          this.doAdd()
+          return false
+        })
+        $(this.add_modal).modal('show')
+      },
+      doAdd: function() {
+        let url = '{{$urls->api}}/currencies/add'
+        let form = $(this.add_modal).find('form')
+        let info = {
+          code: form.find("[name='code']").val(),
+          name: form.find("[name='name']").val()
+        }
+        $(this.add_modal).modal('hide')
+        $(this.loading).modal('show')
+        $.post(url, JSON.stringify(info), (data) => {
+          if (data.currencies[0].created) {
+            this.load().then((data) => {
+              this.build(data)
+              $(this.loading).modal('hide')
+            })
+          }
+        }, 'json')
+      },
+      remove: function(currency_id) {
+        let url = '{{$urls->api}}/currency/' + currency_id + '/delete'
+        $(this.loading).modal('show')
+        $.ajax({
+          url: url,
+          method: 'DELETE',
+          dataType: 'json',
+          success: (data) => {
+            if (data.deleted) {
+              this.load().then((data) => {
+                this.build(data)
+                $(this.loading).modal('hide')
+              })
+            }
+          }
+        })
       }
     }
     $(document).ready(() => {