filtrage par col, petit bug dans la deslection
This commit is contained in:
parent
3e33eba61c
commit
5637211547
2 changed files with 114 additions and 14 deletions
|
|
@ -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) =>
|
||||
Object.values(ligne[this.champ_search])
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.indexOf(this.search.toLowerCase()) < 0
|
||||
? false
|
||||
: true
|
||||
)
|
||||
this.table.filter((ligne) => {
|
||||
let rsearch =
|
||||
Object.values(ligne[this.champ_search])
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.indexOf(this.search.toLowerCase()) < 0
|
||||
? 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' : ''" >
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue