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

ajout de selecteur input, todo : maj du readme

Browse source
This commit is contained in:
Christophe 2021-01-25 20:14:43 +01:00
parent bd8b4a4887
commit 299e863120
2 changed files with 107 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
js/gamutable.es6.js
View file

@ -190,7 +190,9 @@ let monTableau = {
crayons: [], crayons: [],
classes: [], classes: [],
filtreCol: [], filtreCol: [],
filtreColSelected: { gestionnaire: [] }, filtreColExist: false,
filtreColType: [],
filtreColSelected: {},
filtreColModif: 0, filtreColModif: 0,
filtreColVal: {}, filtreColVal: {},
search: '', search: '',
@ -238,10 +240,11 @@ let monTableau = {
if (!rsearch) { if (!rsearch) {
return false; return false;
} }
Object.keys(this.filtreColSelected).forEach((colName) => { Object.keys(this.filtreColSelected).forEach((colName) => {
console.log('coucou');
if (rsearch) { if (rsearch) {
let colValue = this.filtreColSelected[colName]; let colValue = this.filtreColSelected[colName];
if (colValue !== null) {
if (!Array.isArray(colValue)) { if (!Array.isArray(colValue)) {
colValue = [colValue]; colValue = [colValue];
} }
@ -251,14 +254,30 @@ let monTableau = {
TcolValue.push(s); TcolValue.push(s);
} }
if (s.length > 0) { if (s.length > 0) {
TcolValue.push(s); TcolValue.push(s.toLowerCase());
} }
}); });
if (TcolValue.length) { if (TcolValue.length) {
if (TcolValue.indexOf(ligne.html[colName]) === -1) { if (this.filtreColType[colName] === 'select') {
if (
TcolValue.toString().indexOf(
ligne[this.champ_search][colName].toString().toLowerCase()
) === -1
) {
rsearch = false; rsearch = false;
} }
} else {
if (
ligne[this.champ_search][colName]
.toString()
.toLowerCase()
.indexOf(TcolValue.toString()) === -1
) {
rsearch = false;
}
}
}
} }
} }
}); });
@ -313,7 +332,6 @@ let monTableau = {
}, },
methods: { methods: {
selectValCol() { selectValCol() {
//console.log(this.filtreColSelected);
this.filtreColModif++; this.filtreColModif++;
}, },
calculer_nameLocalStorage() { calculer_nameLocalStorage() {
@ -342,20 +360,20 @@ let monTableau = {
if (config.classes !== undefined) { if (config.classes !== undefined) {
this.classes = config.classes; this.classes = config.classes;
} }
if (config.filtreCol !== undefined) { // if (config.filtreCol !== undefined) {
this.filtreCol = config.filtreCol; // this.filtreCol = config.filtreCol;
this.filtreCol.forEach((col) => { // this.filtreCol.forEach((col) => {
let Tval = ['']; // let Tval = [''];
this.table.forEach((t) => { // this.table.forEach((t) => {
let valCol = t.html[col]; // let valCol = t.html[col];
if (Tval.indexOf(valCol) === -1) { // if (Tval.indexOf(valCol) === -1) {
Tval.push(valCol); // Tval.push(valCol);
} // }
}); // });
this.filtreColVal[col] = Tval; // this.filtreColVal[col] = Tval;
this.filtreColSelected[col] = []; // this.filtreColSelected[col] = [];
}); // });
} // }
this.table = data; this.table = data;
if (data.length && data[0].search) { if (data.length && data[0].search) {
this.champ_search = 'search'; this.champ_search = 'search';
@ -389,8 +407,8 @@ let monTableau = {
} }
} }
if (config.filtreCol !== undefined) { if (config.filtreCol !== undefined) {
this.filtreCol = config.filtreCol; this.filtreColType = config.filtreCol;
this.filtreCol.forEach((col) => { Object.keys(this.filtreColType).forEach((col) => {
let Tval = ['']; let Tval = [''];
this.table.forEach((t) => { this.table.forEach((t) => {
let valCol = t.html[col]; let valCol = t.html[col];
@ -398,6 +416,7 @@ let monTableau = {
Tval.push(valCol); Tval.push(valCol);
} }
}); });
this.filtreCol.push(col);
this.filtreColVal[col] = Tval; this.filtreColVal[col] = Tval;
this.filtreColSelected[col] = []; this.filtreColSelected[col] = [];
}); });
@ -568,6 +587,7 @@ let monTableau = {
<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">
<vue-select <vue-select
v-if="filtreColType[head] === 'select'"
v-model="filtreColSelected[head]" v-model="filtreColSelected[head]"
:options="filtreColVal[head]" :options="filtreColVal[head]"
hide-selected hide-selected
@ -576,6 +596,15 @@ let monTableau = {
close-on-select close-on-select
@selected="selectValCol" @selected="selectValCol"
></vue-select> ></vue-select>
<input
v-if="filtreColType[head] === 'input'"
class="gamutable--rechercher"
v-model="filtreColSelected[head]"
type="text"
placeholder="Rechercher"
@keyup="selectValCol"
>
</div> </div>
</th> </th>
</tr> </tr>
@ -615,8 +644,6 @@ const gamuTable = {
}, },
}; };
console.log(window.VueNextSelect);
let app = Vue.createApp(gamuTable); let app = Vue.createApp(gamuTable);
app.component('vue-select', window.VueNextSelect); app.component('vue-select', window.VueNextSelect);
app.mount('#app'); app.mount('#app');

63
js/gamutable.js
View file

File diff suppressed because one or more lines are too long