Skip to content

Instantly share code, notes, and snippets.

@ppsirg

ppsirg/query_filters.html

Created May 30, 2018 22:53
Show Gist options
  • Save ppsirg/7427c36ef9bcea5061d50784b37ebc29 to your computer and use it in GitHub Desktop.
Save ppsirg/7427c36ef9bcea5061d50784b37ebc29 to your computer and use it in GitHub Desktop.
Download ZIP
vue components for filtering
Raw
query_filters.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hi there</title>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="vue-app">
<custom-filter></custom-filter>
</div>
<script type="text/javascript">
Vue.component('custom-filter',{
delimiters: ['[[', ']]'],
data: function(){
return {
roles:[
{'label':'Todos', 'value': 'all'},
{'label':'Director', 'value': 'director'},
{'label':'Lider Senior', 'value': 'senior'},
{'label':'Lider Junior', 'value': 'junior'},
{'label':'Promotor', 'value': 'salesman'}
],
estados: [
{'label':'Todos', 'value': 'all'},
{'label':'Pre-registro', 'value': 'pre-register'},
{'label':'Registro', 'value': 'register'},
{'label':'Activos', 'value': 'active'},
{'label':'Cancelados', 'value': 'cancelled'},
],
vendedores: [
{'label':'Todos', 'value': 'all'},
{'label':'pedro', 'value': 'me'}
],
tipos_venta: [
{'label':'Todos', 'value': 'all'},
{'label':'Ventas directas', 'value': 'direct'}
],
profile: 'all',
vendor: 'all',
state: 'all',
type: 'all',
vendor_visibility: false,
}
},
methods: {
profileChange: function (e){
this.profile = e.target.value;
var filter_url = 'http://localhost:8000/custom_admin/salesman-by-profile/'+this.profile;
console.log(filter_url)
if (this.profile == 'salesman' || this.profile == 'all'){
this.vendor_visibility = false;
} else {
this.vendor_visibility = true;
}
},
findUsers: function(e){
switch(e.target.id){
case 'filter-state':
this.state = e.target.value;
break;
case 'filter-select':
this.vendor = e.target.value;
break;
case 'filter-vd':
this.type = e.target.value;
break;
}
var filter_url = 'http://localhost:8000/custom-admin/get-users/'+this.vendor+'/'+this.state+'/'+this.type;
console.log(filter_url);
},
},
template: `
<div class="">
<form class="" method="post">
<label for="filter-profile">Perfil</label>
<select id="filter-profile" v-on:change="profileChange">
<option v-for="rol in roles" :value="rol.value">[[rol.label]]</option>
</select>
<label for="filter-select">Nombre</label>
<select id="filter-select" v-on:change="findUsers">
<option v-for="vendedor in vendedores" :value="vendedor.value">[[vendedor.label]]</option>
</select>
<label for="filter-state">Estado</label>
<select id="filter-state" v-on:change="findUsers">
<option v-for="estado in estados" :value="estado.value">[[estado.label]]</option>
</select>
<label for="filter-vd" v-if="vendor_visibility">Tipo de venta</label>
<select id="filter-vd" v-if="vendor_visibility" v-on:change="findUsers">
<option v-for="tipo in tipos_venta" :value="tipo.value">[[tipo.label]]</option>
</select>
</form>
</div>
`
}
)
new Vue({
el: '#vue-app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment