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

on ajoute dans le select une option select multi, par defaut select simple

Browse source
This commit is contained in:
Christophe 2020-11-10 11:23:54 +01:00
parent e287386eac
commit bc2556cbd7
3 changed files with 105 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
inclure/gamutable.html
View file

@ -14,6 +14,7 @@
urlvuebloc="[(#ENV{urlvuebloc})]" urlvuebloc="[(#ENV{urlvuebloc})]"
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}" url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}" url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
filtrecolmulti="#ENV{filtrecolmulti,non}"
ref="montableau" ref="montableau"
></mon-tableau> ></mon-tableau>
</div> </div>
@ -32,6 +33,7 @@
urlvuebloc="[(#ENV{urlvuebloc_deux})]" urlvuebloc="[(#ENV{urlvuebloc_deux})]"
url_sort_asc="[(#ENV{sort_asc,#GET{sort_asc}})]" url_sort_asc="[(#ENV{sort_asc,#GET{sort_asc}})]"
url_sort_desc="[(#ENV{sort_desc,#GET{sort_desc}})]" url_sort_desc="[(#ENV{sort_desc,#GET{sort_desc}})]"
filtrecolmulti="[(#ENV{filtrecolmulti,non})]"
ref="montableau" ref="montableau"
></mon-tableau> ></mon-tableau>
</div> </div>

58
js/gamutable.es6.js
View file

@ -179,6 +179,9 @@ let monTableau = {
type: String, type: String,
default: 'tableau', default: 'tableau',
}, },
filtrecolmulti: {
type: String,
},
}, },
data: function () { data: function () {
return { return {
@ -236,8 +239,11 @@ let monTableau = {
Object.keys(this.filtreColSelected).forEach((colName) => { Object.keys(this.filtreColSelected).forEach((colName) => {
if (rsearch) { if (rsearch) {
let colValue = this.filtreColSelected[colName]; let colValue = this.filtreColSelected[colName];
if (colValue) { if (!Array.isArray(colValue)) {
if (ligne.search[colName] !== colValue) { colValue = [colValue];
}
if (colValue.filter((w) => w.length > 0).length) {
if (colValue.filter((w) => w.length > 0).indexOf(ligne.search[colName]) === -1) {
rsearch = false; rsearch = false;
} }
} }
@ -273,21 +279,26 @@ let monTableau = {
localStorage.setItem(this.nameLocalStorage, JSON.stringify($table)); localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
}, },
tableau() { tableau() {
this.filtreCol.forEach((col) => { // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
let Tval = ['']; // Si on veut filtrer la liste des options dynamique en fonction
this.tableau.forEach((t) => { // du tri du tableau
let valCol = t.search[col]; // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
if (Tval.indexOf(valCol) === -1) { //this.filtreCol.forEach((col) => {
Tval.push(valCol); //let Tval = [''];
this.filtreColValOk = true; //this.tableau.forEach((t) => {
} //let valCol = t.search[col];
}); //if (Tval.indexOf(valCol) === -1) {
this.filtreColVal[col] = Tval; //Tval.push(valCol);
}); //this.filtreColValOk = true;
//}
//});
//this.filtreColVal[col] = Tval;
//});
}, },
}, },
methods: { methods: {
selectValCol() { selectValCol() {
//console.log(this.filtreColSelected);
this.filtreColModif++; this.filtreColModif++;
}, },
calculer_nameLocalStorage() { calculer_nameLocalStorage() {
@ -346,6 +357,16 @@ let monTableau = {
} }
if (config.filtreCol !== undefined) { if (config.filtreCol !== undefined) {
this.filtreCol = config.filtreCol; this.filtreCol = config.filtreCol;
this.filtreCol.forEach((col) => {
let Tval = [''];
this.table.forEach((t) => {
let valCol = t.search[col];
if (Tval.indexOf(valCol) === -1) {
Tval.push(valCol);
}
});
this.filtreColVal[col] = Tval;
});
} }
Vue.nextTick(() => { Vue.nextTick(() => {
this.chargement = false; this.chargement = false;
@ -512,7 +533,16 @@ let monTableau = {
<tr v-if="filtreCol.length" class="filtreColonne"> <tr v-if="filtreCol.length" class="filtreColonne">
<th v-for="(label,head,i) in header" :key="'filtreCol_'+i"> <th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head"> <div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head">
<select class="filtrerCol" v-model="filtreColSelected[head]"> <select class="filtrerCol" v-model="filtreColSelected[head]" v-if="filtrecolmulti !== 'non'" multiple>
<option
v-for="(option,j) in filtreColVal[head]"
:value="option"
@click="selectValCol"
>
{{j === 0 ? "Tous" : option}}
</option>
</select>
<select class="filtrerCol" v-model="filtreColSelected[head]" v-else>
<option <option
v-for="(option,j) in filtreColVal[head]" v-for="(option,j) in filtreColVal[head]"
:value="option" :value="option"

94
js/gamutable.js
View file

File diff suppressed because one or more lines are too long