Files
money/ui/resources/views/currencies/list.blade.php
2021-03-19 22:48:24 -03:00

131 lines
3.6 KiB
PHP

@extends('currencies.base')
@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
@push('scripts')
<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() {
let url = '{{$urls->api}}/currencies'
return $.getJSON(url, (data) => {
this.items = data.currencies
})
},
build: function() {
$(this.id).html('')
$.each(this.items, (i, el) => {
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(() => {
currencies.setup()
})
</script>
@endpush