ppsirg · May 30, 2018 22:53
diff --git a/query_filters.html b/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>
	<!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>