Created
May 21, 2018 13:22
-
-
Save luxu/a42bba697e74bc92db166d47d6adc583 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% extends "core/base.html" %} | |
{% block container %} | |
<div id="starting"> | |
<div class="container"> | |
<div class="row"> | |
<h3>Lista dos Gastos | |
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addGastoModal">Add Gastos</button> | |
</h3> | |
  | |
<div class="form-inline my-2 my-lg-0" style="margin-left: 40%;"> | |
<input class="form-control mr-sm-2" type="text" placeholder="Search" v-model="search_term" aria-label="Search"> | |
<button class="btn btn-outline-success my-2 my-sm-0" v-on:click.prevent="getGastos()">Search</button> | |
</div> | |
<table class="table"> | |
<thead> | |
<tr> | |
<th scope="col">#</th> | |
<th scope="col">Local</th> | |
<th scope="col">Data</th> | |
<th scope="col">Valor</th> | |
<th scope="col">Tipo</th> | |
<th scope="col">Action</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr v-for="gasto in gastos"> | |
<th scope="row">${gasto.id}</th> | |
<td>${gasto.name}</td> | |
<td>${gasto.datagasto}</td> | |
<td>${gasto.valor}</td> | |
<td>${gasto.comercio}</td> | |
<td> | |
<button class="btn btn-info" | |
v-on:click="getGasto(gasto.id)">Edit</button> | |
<button class="btn btn-danger" v-on:click="deleteGasto(gasto.id)">Delete</button> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
<!-- Add Gasto Modal --> | |
<div class="modal fade" id="addGastoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> | |
<div class="modal-dialog" role="document"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 class="modal-title" id="exampleModalLongTitle">ADD GASTOS</h5> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
<span aria-hidden="true">×</span> | |
</button> | |
</div> | |
<form v-on:submit.prevent="addGasto()"> | |
<div class="modal-body"> | |
<div class="form-group"> | |
<label for="local">Local</label> | |
<input | |
type="text" | |
class="form-control" | |
id="local" | |
placeholder="Enter Local" | |
v-model="newGasto.name" | |
required="required" > | |
</div> | |
<div class="form-group"> | |
<label for="slug">Slug</label> | |
<p><span>${ slug }</span></p> | |
<input | |
type="text" | |
class="form-control" | |
id="slug" | |
placeholder="Enter Local" | |
v-model="newGasto.slug" | |
required="required" > | |
</div> | |
<div class="form-group"> | |
<label for="datagasto">Data Gasto</label> | |
<input | |
type="date" | |
class="form-control" | |
id="datagasto" | |
v-model="newGasto.datagasto" | |
required="required"/> | |
</div> | |
<div class="form-group"> | |
<label for="valor">Valor</label> | |
<input | |
type="decimal" | |
class="form-control" | |
id="valor" | |
placeholder="Enter Valor R$" | |
v-model="newGasto.valor" | |
required="required" /> | |
</div> | |
<div class="form-group"> | |
<label for="tipo">Tipo Comercio</label> | |
<select class="form-control" v-model="newGasto.comercio"> | |
{# <option disabled value="">Selecione um Tipo Comércio</option> #} | |
<option v-for="comercio in comercios" :value="comercio.id">${comercio.name}</option> | |
</select> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
<button type="submit" class="btn btn-primary">Save changes</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
<div class="loading" v-if="loading===true">Loading…</div> | |
</div> | |
<!-- End of add gasto modal --> | |
<!-- Edit Gasto Modal --> | |
<div class="modal fade" id="editGastoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> | |
<div class="modal-dialog" role="document"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 class="modal-title" id="exampleModalLongTitle">EDIT ARTICLE</h5> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
<span aria-hidden="true">×</span> | |
</button> | |
</div> | |
<form v-on:submit.prevent="updateGasto()"> | |
<div class="modal-body"> | |
<div class="form-group"> | |
<label for="gasto_heading">Gasto Heading</label> | |
<input | |
type="text" | |
class="form-control" | |
id="gasto_heading" | |
v-model="currentGasto.gasto_heading" | |
required="required" > | |
</div> | |
<div class="form-group"> | |
<label for="gasto_body">Gasto Body</label> | |
<textarea | |
class="form-control" | |
id="gasto_body" | |
v-model="currentGasto.gasto_body" | |
required="required" | |
rows="3"></textarea> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-secondary m-progress" data-dismiss="modal">Close</button> | |
<button type="submit" class="btn btn-primary">Save changes</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
<div class="loading" v-if="loading===true">Loading…</div> | |
</div> | |
<!-- End of edit gasto modal --> | |
</div> | |
</div> | |
<div class="loading" v-if="loading===true">Loading…</div> | |
</div> | |
{# bootrtap js files #} | |
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
{# vue.js files #} | |
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script> | |
<script type="text/javascript"> | |
Vue.config.delimiters = ["${", "}"]; | |
let artigos_view = new Vue({ | |
el: '#starting', | |
delimiters: ['${', '}'], | |
data: { | |
gastos: [], | |
loading: false, | |
currentGasto: {}, | |
message: null, | |
newGasto: {'name':'', 'datagasto': null, 'valor': null, 'slug': null, 'comercio': null}, | |
comercios: [], | |
search_term: '', | |
tipoComercio: '', | |
}, | |
mounted: function () { | |
this.getGastos(); | |
this.getComercios(); | |
}, | |
computed: { | |
slug: function() { | |
let slug = this.sanitizeTitle(this.newGasto.name); | |
return slug; | |
} | |
}, | |
methods: { | |
getGastos: function () { | |
this.loading = true; | |
let api_url = '/api/gasto/'; | |
if(this.search_term!==''||this.search_term!==null) { | |
api_url = '/api/gasto/?search='+this.search_term | |
} | |
this.$http.get(api_url) | |
.then((response) => { | |
this.gastos = response.data; | |
this.loading = false; | |
}) | |
.catch((err) => { | |
this.loading = false; | |
console.log(err); | |
}) | |
}, | |
getComercios: function () { | |
this.loading = true; | |
let api_url = '/api/comercio/'; | |
this.$http.get(api_url) | |
.then((response) => { | |
this.comercios = response.data; | |
console.log(this.comercios); | |
this.loading = false; | |
}) | |
.catch((err) => { | |
this.loading = false; | |
console.log(err); | |
}) | |
}, | |
getGasto: function(id) { | |
this.loading = true; | |
let api_url = '/api/gasto/'+id+'/'; | |
this.$http.get(api_url) | |
.then((response) => { | |
this.currentGasto = response.data; | |
console.log(this.currentGasto); | |
$("#editGastoModal").modal('show'); | |
this.loading = false; | |
}) | |
.catch((err) => { | |
this.loading = false; | |
console.log(err); | |
}) | |
}, | |
addGasto: function() { | |
this.loading = true; | |
console.log(this.newGasto) | |
this.$http.post('/api/gasto/',this.newGasto) | |
.then((response) => { | |
this.loading = false; | |
this.newGasto = ''; | |
this.getGastos(); | |
}) | |
.catch((err) => { | |
this.loading = false; | |
console.log(err); | |
}) | |
}, | |
updateGasto: function() { | |
this.loading = true; | |
console.log(this.currentGasto); | |
this.$http.put('/api/gasto/'+this.currentGasto.id+'/', | |
this.currentGasto) | |
.then((response) => { | |
this.loading = false; | |
this.currentGasto = response.data; | |
this.getGastos(); | |
}) | |
.catch((err) => { | |
this.loading = false; | |
console.log(err); | |
}) | |
}, | |
deleteGasto: function(id) { | |
this.loading = true; | |
this.$http.delete('/api/gasto/'+id+'/') | |
.then((response) => { | |
console.log(response); | |
this.loading = false; | |
this.getGastos(); | |
}) | |
.catch((err) => { | |
this.loading = false; | |
console.log(err); | |
}) | |
}, | |
sanitizeTitle: function(title) { | |
let slug = ""; | |
// Change to lower case | |
let titleLower = title.toLowerCase(); | |
// Letter "e" | |
slug = titleLower.replace(/e|é|è|ẽ|ẻ|ẹ|ê|ế|ề|ễ|ể|ệ/gi, 'e'); | |
// Letter "a" | |
slug = slug.replace(/a|á|à|ã|ả|ạ|ă|ắ|ằ|ẵ|ẳ|ặ|â|ấ|ầ|ẫ|ẩ|ậ/gi, 'a'); | |
// Letter "o" | |
slug = slug.replace(/o|ó|ò|õ|ỏ|ọ|ô|ố|ồ|ỗ|ổ|ộ|ơ|ớ|ờ|ỡ|ở|ợ/gi, 'o'); | |
// Letter "u" | |
slug = slug.replace(/u|ú|ù|ũ|ủ|ụ|ư|ứ|ừ|ữ|ử|ự/gi, 'u'); | |
// Letter "d" | |
slug = slug.replace(/đ/gi, 'd'); | |
// Trim the last whitespace | |
slug = slug.replace(/\s*$/g, ''); | |
// Change whitespace to "-" | |
slug = slug.replace(/\s+/g, '-'); | |
return slug; | |
} | |
} | |
}); | |
</script> | |
{% endblock %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment