Created
May 21, 2018 11:57
-
-
Save luxu/b87bc4ee98d0f4def82149a8a7a40366 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> | |
<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 = ["${", "}"]; | |
var artigos_view = new Vue({ | |
el: '#starting', | |
delimiters: ['${', '}'], | |
data: { | |
gastos: [], | |
loading: false, | |
currentGasto: {}, | |
message: null, | |
newGasto: {'name':null, 'datagasto': null, 'valor': null, 'slug': null, 'comercio': null}, | |
comercios: [], | |
search_term: '', | |
tipoComercio: '', | |
}, | |
mounted: function () { | |
this.getGastos(); | |
this.getComercios(); | |
}, | |
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.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); | |
}) | |
} | |
} | |
}); | |
</script> | |
{% endblock %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment