Skip to content

Instantly share code, notes, and snippets.

@luxu

luxu/gasto_lista.html

Last active May 25, 2018 19:36
Show Gist options
  • Save luxu/42636c9990789e6edd2f02e19859173f to your computer and use it in GitHub Desktop.
Save luxu/42636c9990789e6edd2f02e19859173f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gasto_lista.html
{% 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>
&emsp;
<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">&times;</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="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 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&#8230;</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 GASTOS</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form v-on:submit.prevent="updateGasto()">
<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="currentGasto.name"
required="required" >
</div>
<div class="form-group">
<label for="datagasto">Data Gasto</label>
<input
type="date"
class="form-control"
id="datagasto"
v-model="currentGasto.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="currentGasto.valor"
required="required" />
</div>
<div class="form-group">
<label for="tipo">Tipo Comercio</label>
<select class="form-control" v-model="currentGasto.comercio">
<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 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&#8230;</div>
</div>
<!-- End of edit gasto modal -->
</div>
</div>
<div class="loading" v-if="loading===true">Loading&#8230;</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 = ["${", "}"];
new Vue({
el: '#starting',
delimiters: ['${', '}'],
data: {
gastos: [],
loading: false,
currentGasto: {},
message: null,
newGasto: {},
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 += '?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;
this.newGasto.slug = this.sanitizeTitle(this.newGasto.name)
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;
this.currentGasto.slug = this.sanitizeTitle(this.currentGasto.name)
this.$http.put('/api/gasto/'+this.currentGasto.id+'/',
this.currentGasto)
.then((response) => {
this.loading = false;
this.currentGasto = '';
// 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