UI

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

@@ -1,8 +1,11 @@
-@extends('layout.base')
+@extends('currencies.base')
 
-@section('page_content')
-  <h2 class="ui header">Moneda - <span class="name"></span></h2>
-  <h3 class="ui header" class="code"></h3>
+@section('title')
+  Moneda - <span class="c_name"></span>
+@endsection
+
+@section('content')
+  <h3 class="ui header c_code"></h3>
   <table class="ui table">
     <thead>
       <tr>
@@ -17,7 +20,7 @@
   </table>
   <div class="ui modal" id="add_modal">
     <div class="header">
-      Agregar Valor para <span class="name"></span>
+      Agregar Valor para <span class="c_name"></span>
     </div>
     <div class="content">
       <form class="ui form">
@@ -53,12 +56,6 @@
 
 @push('scripts')
   <script type="text/javascript">
-    function formatDate(date) {
-      return (new Intl.DateTimeFormat('es-CL', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'})).format(date)
-    }
-    function formatValue(value, base) {
-      return (new Intl.NumberFormat('es-CL', {style: 'currency', currency: base, minimumSignificantDigits: 2})).format(value)
-    }
     let currency = {
       id: {{$currency_id}},
       data: {
@@ -67,33 +64,36 @@
         code: ''
       },
       map: {
-        name: '.name',
-        code: '.code'
+        name: '.c_name',
+        code: '.c_code'
       },
       values_id: '#values',
       values: [],
       add_button: '#add_value',
-      modal: '#add_modal',
+      add_modal: '#add_modal',
+      loading: '#loading',
       setup: function() {
-        $(this.values_id).parent().hide()
+        $(this.values_id).hide()
         this.buildModal()
         $(this.add_button).css('cursor', 'pointer').click((e) => {
           this.addValue()
         })
         this.getData().then(() => {
-          this.getValues()
+          this.getValues().then(() => {
+            $(this.loading).modal('hide')
+          })
         })
       },
       buildModal: function() {
         this.getCurrencies()
-        $(this.modal).modal()
-        $(this.modal).find('.ui.calendar').calendar()
-        $(this.modal).find('form').submit((e) => {
+        $(this.add_modal).modal()
+        $(this.add_modal).find('.ui.calendar').calendar()
+        $(this.add_modal).find('form').submit((e) => {
           e.preventDefault()
           this.doAddValue()
           return false
         })
-        $(this.modal).find('.ui.dropdown').dropdown()
+        $(this.add_modal).find('.ui.dropdown').dropdown()
       },
       getData: function() {
         let url = '{{$urls->api}}/currency/' + this.id
@@ -119,20 +119,24 @@
         $(this.values_id).html('')
         $.each(this.values, (i, el) => {
           let row = $('<tr></tr>').append(
-            $('<td></td>').html(formatDate(el.fecha))
+            $('<td></td>').html(formatDate(new Date(el.date_time)))
           ).append(
             $('<td></td>').html(formatValue(el.value, el.base.code))
           ).append(
-            $('<td></td>')
+            $('<td></td>').attr('class', 'remove_value').attr('data-base', el.base.id).attr('data-date_time', el.date_time).append(
+              $('<i></i>').attr('class', 'minus icon')
+            ).css('cursor', 'pointer').click((e) => {
+              this.removeValue($(e.currentTarget).attr('data-base'), $(e.currentTarget).attr('data-date_time'))
+            })
           )
           $(this.values_id).append(row)
         })
-        $(this.values_id).parent().show()
+        $(this.values_id).show()
       },
       getCurrencies: function() {
         let url = '{{$urls->api}}/currencies'
         $.getJSON(url, (data) => {
-          let dp = $(this.modal).find('.ui.dropdown')
+          let dp = $(this.add_modal).find('.ui.dropdown')
           values = []
           $.each(data.currencies, (i, el) => {
             values.push({name: el.name, value: el.id, text: el.name})
@@ -141,25 +145,42 @@
         })
       },
       addValue: function() {
-        $(this.modal).find('form').trigger('reset')
-        $(this.modal).modal('show')
+        $(this.add_modal).find('form').trigger('reset')
+        $(this.add_modal).modal('show')
       },
       doAddValue: function() {
-        let form = $(this.modal).find('form')
-        info = {
-          date_time: (new Date(form.find('.ui.calendar').calendar('get date'))),
+        let form = $(this.add_modal).find('form')
+        let info = {
+          date_time: readyDate(new Date(form.find('.ui.calendar').calendar('get date'))),
           value: form.find("[name='valor']").val(),
           base_id: form.find('.ui.dropdown').dropdown('get value')
         }
         let url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
-        $.post(url, info, (data) => {
-          console.debug(data)
+        $(this.add_modal).modal('hide')
+        $(this.loading).modal('show')
+        $.post(url, JSON.stringify(info), (data) => {
           if (data.values[0].created) {
-            window.location.reload()
-            return false
+            this.getValues()
+          }
+        }, 'json').then(() => {
+          $(this.loading).modal('hide')
+        })
+      },
+      removeValue: function(base_id, date_time) {
+        let url = '{{$urls->api}}/value/' + this.data.id + '/' + base_id + '/' + encodeURI(date_time) + '/delete'
+        $(this.loading).modal('show')
+        $.ajax({
+          url: url,
+          method: 'DELETE',
+          dataType: 'json',
+          success: (data) => {
+            if (data.deleted) {
+              this.getValues().then(() => {
+                $(this.loading).modal('hide')
+              })
+            }
           }
         })
-        $(this.modal).modal('hide')
       }
     }
     $(document).ready(() => {