filtrage par col, petit bug dans la deslection

js/gamutable.es6.js

@@ -186,6 +186,10 @@ let monTableau = {
 			header: [],
 			crayons: [],
 			classes: [],
+			filtreCol: [],
+			filtreColSelected: [],
+			filtreColModif: 0,
+			filtreColVal: {},
 			search: '',
 			page: 1,
 			parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
@@ -213,19 +217,35 @@ let monTableau = {
 	},
 	computed: {
 		tableau: function () {
+			console.log('modif ', this.filtreColModif);
+			console.log(this.filtreColSelected);
 			this.setPages();
-			if (!this.search) {
+			//if (!this.search) {
+			if (!this.search && !this.filtreColModif) {
 				return this.pagination(this.table);
 			}
 			return this.pagination(
-				this.table.filter((ligne) =>
+				this.table.filter((ligne) => {
-					Object.values(ligne[this.champ_search])
+					let rsearch =
-						.toString()
+						Object.values(ligne[this.champ_search])
-						.toLowerCase()
+							.toString()
-						.indexOf(this.search.toLowerCase()) < 0
+							.toLowerCase()
-						? false
+							.indexOf(this.search.toLowerCase()) < 0
-						: true
+							? false
-				)
+							: true;
+					if (!rsearch) {
+						return false;
+					}
+					Object.keys(this.filtreColSelected).forEach((colName) => {
+						let colValue = this.filtreColSelected[colName];
+						if (colValue) {
+							if (ligne.html[colName] !== colValue) {
+								rsearch = false;
+							}
+						}
+					});
+					return rsearch;
+				})
 			);
 		},
 	},
@@ -246,6 +266,7 @@ let monTableau = {
 						header: this.header,
 						crayons: this.crayons,
 						classes: this.classes,
+						filtreCol: this.filtreCol,
 					},
 				],
 				...this.table,
@@ -254,6 +275,12 @@ let monTableau = {
 		},
 	},
 	methods: {
+		selectValCol(val) {
+			this.filtreColModif++;
+			//} else {
+			//this.filtreColModif = false;
+			//}
+		},
 		calculer_nameLocalStorage() {
 			if (this.apiuri) {
 				return this.apiuri.match(/.*page=(.*)/)[1];
@@ -308,6 +335,20 @@ let monTableau = {
 							this.champ_search = 'search';
 						}
 					}
+					if (config.filtreCol !== undefined) {
+						this.filtreCol = config.filtreCol;
+						//this.filtreColSelected = config.filtreCol;
+						this.filtreCol.forEach((col) => {
+							let Tval = [''];
+							this.table.forEach((t) => {
+								let valCol = t.html[col];
+								if (Tval.indexOf(valCol) === -1) {
+									Tval.push(valCol);
+								}
+							});
+							this.filtreColVal[col] = Tval;
+						});
+					}
 					Vue.nextTick(() => {
 						this.chargement = false;
 						if ($_id > 0) {
@@ -410,6 +451,7 @@ let monTableau = {
 	template: `
 	<div class="gamutable">
 		<div class="gamutable--surTable">
+			<div class="gamutable-nbrMax">{{tableau.length}} / {{table.length}} éléments</div>
 			<select id="parPage" v-model="parPageSelect">
 				<option v-for="v in tparpage" :key="v">{{v}}</option>
 			</select>
@@ -470,6 +512,19 @@ let monTableau = {
 						</span>
 					</th>
 				</tr>
+				<tr v-if="filtreColVal">
+					<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
+						<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head">
+							<select name="'col_'+head" class="filtrerCol" v-model="filtreColSelected[head]">
+								<option
+								v-for="option in filtreColVal[head]"
+								:value="option"
+								@click="selectValCol(option)"
+								>{{option}}</option>
+							</select>
+						</div>
+					</th>
+				</tr>
 			</thead>
 			<tbody>
 				<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >

js/gamutable.js

@@ -235,6 +235,10 @@ var monTableau = {
       header: [],
       crayons: [],
       classes: [],
+      filtreCol: [],
+      filtreColSelected: [],
+      filtreColModif: 0,
+      filtreColVal: {},
       search: '',
       page: 1,
       parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
@@ -267,14 +271,31 @@ var monTableau = {
     tableau: function tableau() {
       var _this2 = this;
 
-      this.setPages();
+      console.log('modif ', this.filtreColModif);
+      console.log(this.filtreColSelected);
+      this.setPages(); //if (!this.search) {
 
-      if (!this.search) {
+      if (!this.search && !this.filtreColModif) {
         return this.pagination(this.table);
       }
 
       return this.pagination(this.table.filter(function (ligne) {
-        return Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;
+        var rsearch = Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;
+
+        if (!rsearch) {
+          return false;
+        }
+
+        Object.keys(_this2.filtreColSelected).forEach(function (colName) {
+          var colValue = _this2.filtreColSelected[colName];
+
+          if (colValue) {
+            if (ligne.html[colName] !== colValue) {
+              rsearch = false;
+            }
+          }
+        });
+        return rsearch;
       }));
     }
   },
@@ -293,12 +314,18 @@ var monTableau = {
       $table = [{
         header: this.header,
         crayons: this.crayons,
-        classes: this.classes
+        classes: this.classes,
+        filtreCol: this.filtreCol
       }].concat(_toConsumableArray(this.table));
       localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
     }
   },
   methods: {
+    selectValCol: function selectValCol(val) {
+      this.filtreColModif++; //} else {
+      //this.filtreColModif = false;
+      //}
+    },
     calculer_nameLocalStorage: function calculer_nameLocalStorage() {
       if (this.apiuri) {
         return this.apiuri.match(/.*page=(.*)/)[1];
@@ -370,6 +397,24 @@ var monTableau = {
           }
         }
 
+        if (config.filtreCol !== undefined) {
+          _this3.filtreCol = config.filtreCol; //this.filtreColSelected = config.filtreCol;
+
+          _this3.filtreCol.forEach(function (col) {
+            var Tval = [''];
+
+            _this3.table.forEach(function (t) {
+              var valCol = t.html[col];
+
+              if (Tval.indexOf(valCol) === -1) {
+                Tval.push(valCol);
+              }
+            });
+
+            _this3.filtreColVal[col] = Tval;
+          });
+        }
+
         Vue.nextTick(function () {
           _this3.chargement = false;
 
@@ -488,7 +533,7 @@ var monTableau = {
       this.quelleVue = vue;
     }
   },
-  template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\"\n\t\t\t\ttitle=\"R\xE9initialiser les tris des colonnes\">\n\t\t\t\t<i class=\"fa fa-repeat fas fa-redo\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueTable\" title=\"Switcher en Vue tableau\"\n\t\t\t\t@click.stop=\"changerVue('tableau')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'bloc'\">\n\t\t\t\t<i class=\"fas fa fa-table\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueBloc\" title=\"Switcher en Vue Bloc\"\n\t\t\t\t@click.stop=\"changerVue('bloc')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'tableau'\">\n\t\t\t\t<i class=\"fas fa fa-th-large\">\n\t\t\t</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\t<span class=\"texteMajBDD\">\n\t\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"btn verte\" style=\"cursor:auto;\"\n\t\t\t\ttitle=\"Base de donn\xE9e synchronis\xE9e !\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fas fa-database\"></i>\n\t\t\t</span>\n\t\t</div>\n\t\t<div class=\"vueBlocs\" v-if=\"quelleVue === 'bloc'\">\n\t\t\t<div class=\"vueBlocs-unbloc\"\n\t\t\tv-for=\"(ligne) in tableau\"\n\t\t\t:key=ligne.id\n\t\t\tv-html=replaceBloc(ligne.html)\n\t\t\t>\n\t\t\t</div>\n\t\t</div>\n\t\t<table class=\"table table--zebra\" v-if=\"quelleVue === 'tableau'\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name]]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
+  template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\"\n\t\t\t\ttitle=\"R\xE9initialiser les tris des colonnes\">\n\t\t\t\t<i class=\"fa fa-repeat fas fa-redo\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueTable\" title=\"Switcher en Vue tableau\"\n\t\t\t\t@click.stop=\"changerVue('tableau')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'bloc'\">\n\t\t\t\t<i class=\"fas fa fa-table\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueBloc\" title=\"Switcher en Vue Bloc\"\n\t\t\t\t@click.stop=\"changerVue('bloc')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'tableau'\">\n\t\t\t\t<i class=\"fas fa fa-th-large\">\n\t\t\t</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\t<span class=\"texteMajBDD\">\n\t\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"btn verte\" style=\"cursor:auto;\"\n\t\t\t\ttitle=\"Base de donn\xE9e synchronis\xE9e !\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fas fa-database\"></i>\n\t\t\t</span>\n\t\t</div>\n\t\t<div class=\"vueBlocs\" v-if=\"quelleVue === 'bloc'\">\n\t\t\t<div class=\"vueBlocs-unbloc\"\n\t\t\tv-for=\"(ligne) in tableau\"\n\t\t\t:key=ligne.id\n\t\t\tv-html=replaceBloc(ligne.html)\n\t\t\t>\n\t\t\t</div>\n\t\t</div>\n\t\t<table class=\"table table--zebra\" v-if=\"quelleVue === 'tableau'\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t\t<tr v-if=\"filtreColVal\">\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'filtreCol_'+i\">\n\t\t\t\t\t\t<div v-if=\"filtreCol.indexOf(head) !== -1\" :id=\"'filtreCol_'+head\">\n\t\t\t\t\t\t\t<select name=\"'col_'+head\" class=\"filtrerCol\" v-model=\"filtreColSelected[head]\">\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tv-for=\"option in filtreColVal[head]\"\n\t\t\t\t\t\t\t\t:value=\"option\"\n\t\t\t\t\t\t\t\t@click=\"selectValCol(option)\"\n\t\t\t\t\t\t\t\t>{{option}}</option>\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name]]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
 };
 var gamuTable = {
   components: {