UI
This commit is contained in:
24
ui/resources/views/currencies/base.blade.php
Normal file
24
ui/resources/views/currencies/base.blade.php
Normal file
@ -0,0 +1,24 @@
|
||||
@extends('layout.base')
|
||||
|
||||
@section('page_content')
|
||||
<h2 class="ui header">
|
||||
@yield('title')
|
||||
</h2>
|
||||
@yield('content')
|
||||
<div class="ui basic modal" id="loading">
|
||||
<div class="ui active dimmer">
|
||||
<div class="ui elastic loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
$(document).ready(() => {
|
||||
$('#loading').modal({
|
||||
blurring: true
|
||||
}).modal('show')
|
||||
.find('.dimmer').css('background-color', 'transparent')
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
@ -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ó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ó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(() => {
|
||||
|
||||
@ -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(() => {
|
||||
|
||||
Reference in New Issue
Block a user