SPIP/gamutable
SPIP/gamutable
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

filtrage par col, petit bug dans la deslection

Browse source
This commit is contained in:
Christophe 2020-11-09 15:15:40 +01:00
parent 3e33eba61c
commit 5637211547
2 changed files with 114 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
js/gamutable.es6.js
View file

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

55
js/gamutable.js
View file

@ -235,6 +235,10 @@ var monTableau = {
header: [], header: [],
crayons: [], crayons: [],
classes: [], classes: [],
filtreCol: [],
filtreColSelected: [],
filtreColModif: 0,
filtreColVal: {},
search: '', search: '',
page: 1, page: 1,
parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0], parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
@ -267,14 +271,31 @@ var monTableau = {
tableau: function tableau() { tableau: function tableau() {
var _this2 = this; 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);
} }
return this.pagination(this.table.filter(function (ligne) { 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 = [{ $table = [{
header: this.header, header: this.header,
crayons: this.crayons, crayons: this.crayons,
classes: this.classes classes: this.classes,
filtreCol: this.filtreCol
}].concat(_toConsumableArray(this.table)); }].concat(_toConsumableArray(this.table));
localStorage.setItem(this.nameLocalStorage, JSON.stringify($table)); localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
} }
}, },
methods: { methods: {
selectValCol: function selectValCol(val) {
this.filtreColModif++; //} else {
//this.filtreColModif = false;
//}
},
calculer_nameLocalStorage: function calculer_nameLocalStorage() { calculer_nameLocalStorage: function calculer_nameLocalStorage() {
if (this.apiuri) { if (this.apiuri) {
return this.apiuri.match(/.*page=(.*)/)[1]; 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 () { Vue.nextTick(function () {
_this3.chargement = false; _this3.chargement = false;
@ -488,7 +533,7 @@ var monTableau = {
this.quelleVue = vue; 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 = { var gamuTable = {
components: { components: {