gamutable/js/gamutable.es6.js

jQuery(function () {
	$('#app').on('click', '.url_action', function (e) {
		e.preventDefault();
		e.stopPropagation();
		let confirmation = $(this).data('confirm');
		if (confirmation !== undefined) {
			if (!confirm(confirmation)) {
				return;
			}
		}
		let url = $(this).attr('href');
		let id = $(this).data('id');
		// passer en refresh animé une éventuelle icone
		if ($(this).has('i.icon, i.fa')) {
			$(this).find('i.icon, i.fa').eq(0).replaceWith('<i class="fa fa-refresh fa-spin"></i>');
		}
		let nomBlocAjaxReload = $(this).data('ajaxreload');
		console.time('Chargement de VueJs APRES Ajax');
		$.ajax({
			url: url,
			dataType: 'json',
			async: true,
		}).done(function (retour) {
			if (!$.isEmptyObject(retour) && !$.isEmptyObject(retour.message_erreur)) {
				alert(retour.message_erreur);
			} else {
				if (parseInt(id) > 0) {
					app.rechargerJson(id);
					app.rechargerJson_deux(id);
				} else {
					app.rechargerJson();
					app.rechargerJson_deux();
				}
				if (nomBlocAjaxReload !== undefined) {
					console.log('depart reload: ' + nomBlocAjaxReload);
					ajaxReload(nomBlocAjaxReload, {
						args: { id },
						callback: function () {},
					});
				}
			}
		});
	});

	// lancement d'une modalbox
	$('#app').on('click', '.modalbox', function (e) {
		e.stopPropagation();
		e.preventDefault();
		let confirmation = $(this).data('confirm');
		if (confirmation !== undefined) {
			if (!confirm(confirmation)) {
				return;
			}
		}
		let url = $(this).attr('href');
		url += '&var_zajax=content';
		let data = {};
		let minHeight = $(this).data('minheight');
		if (minHeight !== undefined) {
			data.minHeight = minHeight;
		}
		let minWidth = $(this).data('minwidth');
		if (minWidth !== undefined) {
			data.minWidth = minWidth;
		}
		let width = $(this).data('width');
		if (width !== undefined) {
			data.width = width;
			let valeur_reduite = ($(window).width() * width) / 100;
			url += '&largeur=' + valeur_reduite + 'px';
		}
		data.onShow = () => {
			if (typeof charger_require !== undefined) {
				charger_require();
			}
		};
		$.modalbox(url, data);
	});

	// lancement d'une médiabox
	$('#app').on('click', '.mediabox', function (e) {
		e.preventDefault();
		let confirmation = $(this).data('confirm');
		if (confirmation !== undefined) {
			if (!confirm(confirmation)) {
				return;
			}
		}
		let href = $(this).attr('href');
		$.fn.mediabox({ href });
	});
});
function recupJson(d) {
	try {
		return JSON.parse(d);
	} catch (e) {
		console.log('erreur recupJson ', e);
		return false;
	}
}
const orderBy = (arr, props, orders, champ) =>
	arr.sort((a, b) =>
		props.reduce((acc, prop, i) => {
			if (acc === 0) {
				let [p1, p2] =
					orders && orders[i] === 'desc'
						? [b[champ][prop], a[champ][prop]]
						: [a[champ][prop], b[champ][prop]];
				// passe en lowercase les String
				p1 = typeof p1 === 'string' ? p1.toLowerCase() : p1;
				p2 = typeof p2 === 'string' ? p2.toLowerCase() : p2;

				// Gestion du format de date
				// transforme 03/11/2000 en 20001103
				let re = /^(\d{2})\/(\d{2})\/(\d{2,4})$/;

				if (typeof p1 !== 'number') {
					let r1 = p1.match(re);
					if (Array.isArray(r1)) {
						p1 = r1[3] + r1[2] + r1[1];
					}

					let r2 = p2.match(re);
					if (Array.isArray(r2)) {
						p2 = r2[3] + r2[2] + r2[1];
					}
				}

				acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
			}
			return acc;
		}, 0)
	);
console.time('Chargement de VueJS AVANT Ajax');
console.time('Chargement de VueJs APRES Ajax');
Vue.nextTick(function () {
	console.timeEnd('Chargement de VueJS AVANT Ajax');
});

function exporterCSV(json, delimitercsv, name) {
	let csv = '';
	if (delimitercsv) {
		csv = Papa.unparse(json, { delimiter: delimitercsv });
	} else {
		csv = Papa.unparse(json);
	}
	//Download the file as CSV
	let link = document.createElement('a');
	link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
	link.setAttribute('download', name);
	link.style.visibility = 'hidden';
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
}

function trouver_index(table, id) {
	let i = -1;
	table.forEach((ligne, index) => {
		if (ligne.html.id === parseInt(id)) {
			i = index;
		}
	});
	return i;
}

let monTableau = {
	props: {
		tparpage: {
			type: Array,
			default: function () {
				return [10, 20, 50, 'Tous'];
			},
		},
		apiuri: {
			type: String,
			required: true,
		},
		pdfuri: {
			type: String,
		},
		namepdf: {
			type: String,
		},
		fichierpdf: {
			type: String,
		},
		argpdf: {
			type: String,
		},
		champcsv: {
			type: String,
		},
		delimitercsv: {
			type: String,
		},
		namecsv: {
			type: String,
		},
		url_sort_asc: {
			type: String,
		},
		url_sort_desc: {
			type: String,
		},
		urlvuebloc: {
			type: String,
		},
		vueblocdefaut: {
			type: String,
			default: 'tableau',
		},
		filtrecolmulti: {
			type: String,
		},
		nomblocajaxreload: {
			type: String,
		},
		stockage: {
			type: String,
		},
		includespip: {
			type: String,
		},
		filtrer: {
			type: String,
		},
		_id: {
			type: String,
		},
		filtreselect: {
			type: String,
		},
	},
	data: function () {
		return {
			table: [],
			header: [],
			crayons: [],
			classes: [],
			ordreCol: [],
			filtreCol: [],
			filtreColExist: false,
			filtreColType: [],
			filtreColSelected: {},
			filtreColModif: 0,
			filtreColVal: {},
			search: this.filtrer,
			page: 1,
			parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
			parPageSelect: sessionStorage.getItem('nbItemsChaine')
				? sessionStorage.getItem('nbItemsChaine')
				: this.tparpage[0],
			pages: [],
			triOrders: [],
			triProps: [],
			selectTr: [],
			champ_search: 'html',
			chargement: true,
			nameLocalStorage: this.calculer_nameLocalStorage(),
			quelleVue: this.vueblocdefaut,
			vuebloc: '',
			model: [],
			options: [],
			searchInputHead: '',
			searchInputVal: '',
			loadingVueSelect: true,
			ajaxCrayons: false,
		};
	},
	mounted() {
		localforage.setDriver(localforage[this.stockage.toUpperCase()]);
		this.chargerJson();
		if (this.urlvuebloc) {
			fetch(this.urlvuebloc)
				.then((response) => response.text())
				.then((data) => {
					this.vuebloc = data;
				});
		}
	},
	computed: {
		filtreColVal_visible: function () {
			let head = this.searchInputHead;
			let val = this.searchInputVal;
			if (!head) {
				return this.filtreColVal;
			} else {
				let filtreColVal_visible = {};
				filtreColVal_visible[head] = this.filtreColVal[head].filter((v) => {
					return v.toString().toLowerCase().indexOf(val.toLowerCase()) !== -1;
				});
				return filtreColVal_visible;
			}
		},
		tableau: function () {
			this.setPages();
			if (!this.search && !this.filtreColModif) {
				return this.pagination(this.table);
			}
			return this.pagination(
				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) => {
						if (rsearch) {
							let colValue = this.filtreColSelected[colName];
							if (colValue !== null) {
								if (!Array.isArray(colValue)) {
									colValue = [colValue];
								}
								let TcolValue = [];
								colValue.forEach((s) => {
									if (Number.isInteger(s)) {
										TcolValue.push(s);
									}
									if (s.length > 0) {
										TcolValue.push(s.toLowerCase());
									}
								});
								if (TcolValue.length) {
									if (this.filtreColType[colName] === 'select') {
										let Trsearch = TcolValue.some((uneValeur) => {
											if (Number.isInteger(uneValeur)) {
												if (parseInt(ligne[this.champ_search][colName]) === uneValeur) {
													return true;
												}
											} else {
												if (
													!(
														uneValeur.indexOf(
															ligne[this.champ_search][colName]
																.toString()
																.toLowerCase()
																.toString()
														) === -1 ||
														!ligne[this.champ_search][colName].toString().toLowerCase()
													)
												) {
													return true;
												}
											}
										});
										if (!Trsearch) {
											rsearch = false;
										}
									} else {
										if (
											ligne[this.champ_search][colName]
												.toString()
												.toLowerCase()
												.indexOf(TcolValue.toString()) === -1
										) {
											rsearch = false;
										}
									}
								}
							}
						}
					});
					return rsearch;
				})
			);
		},
	},
	watch: {
		parPageSelect(e) {
			if (!parseInt(e)) {
				this.parPage = this.table.length;
			} else {
				this.parPage = e;
			}
			console.log(this.parPage);
			sessionStorage.setItem('nbItems', this.parPage);
			sessionStorage.setItem('nbItemsChaine', this.parPageSelect);
		},
		table() {
			this.saveHeader();
			let $table = [];
			$table = this.table;
			localforage.setItem(this.nameLocalStorage, JSON.stringify($table));
		},
		tableau() {
			// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			// Si on veut filtrer la liste des options dynamique en fonction
			// du tri du tableau
			// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			if (this.filtrecolmulti === 'non') {
				this.filtreCol.forEach((col) => {
					// let Tval = [''];
					let Tval = [];
					this.tableau.forEach((t) => {
						let valCol = t[this.champ_search][col];
						if (Tval.indexOf(valCol) === -1) {
							Tval.push(valCol);
							this.filtreColValOk = true;
						}
					});
					this.filtreColVal[col] = Tval;
				});
			}
		},
		filtreColSelected: {
			handler() {
				if (!this.loadingVueSelect) {
					let ObfiltreSelect = [];
					if (this.filtreColSelected) {
						Object.entries(this.filtreColSelected).forEach(([champ, valeurs]) => {
							if (!Array.isArray(valeurs)) {
								valeurs = [valeurs];
							}
							ObfiltreSelect.push({ champ, valeurs });
						});
					}
					if (!this.ajaxCrayons) {
						localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(ObfiltreSelect));
					}
				}
			},
			deep: true,
		},
	},
	methods: {
		saveHeader() {
			let $header = {
				header: this.header,
				crayons: this.crayons,
				classes: this.classes,
				filtreCol: this.filtreColType,
				ordreCol: this.ordreCol,
			};
			// if (!localStorage.getItem('header_' + this.nameLocalStorage)) {
			// localStorage.setItem('headerJson_' + this.nameLocalStorage, JSON.stringify($header));
			// }
			localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
		},
		deleteInputSearch(head) {
			this.loadingVueSelect = false;
			this.filtreColSelected[head] = [];
		},
		hanldeSearchInput(event, head) {
			this.searchInputHead = head;
			this.searchInputVal = event.target.value;
		},
		selectValCol() {
			this.filtreColModif++;
			this.searchInputVal = '';
			this.searchInputHead = '';
		},
		endLoadingVueSelect() {
			this.loadingVueSelect = false;
		},
		calculer_nameLocalStorage() {
			if (this.apiuri) {
				return this.apiuri.match(/.*page=(.*)/)[1];
			}
			return '';
		},
		chargerJson(id) {
			this.chargement = true;
			let url = this.apiuri;
			if (parseInt(id) > 0) {
				url += '&id=' + id;
			} else {
				let config = localStorage.getItem('header_' + this.nameLocalStorage);
				config = recupJson(config);
				if (config && config.header !== undefined) {
					this.header = config.header;
					if (config.crayons !== undefined) {
						this.crayons = config.crayons;
					}
					if (config.classes !== undefined) {
						this.classes = config.classes;
					}
					if (config.ordreCol !== undefined) {
						this.ordreCol = config.ordreCol;
					}
					let filtreCol = [];
					if (config.filtreCol !== undefined) {
						filtreCol = config.filtreCol;
					}
					let that = this;
					localforage
						.getItem(that.nameLocalStorage)
						.then(function (data) {
							data = recupJson(data);
							if (data && data.length) {
								that.table = data;
								if (data[0].search) {
									that.champ_search = 'search';
								}
								if (filtreCol !== undefined) {
									that.filtreColType = filtreCol;
									Object.keys(that.filtreColType).forEach((col) => {
										let Tval = [];
										// let Tval = [''];
										that.table.forEach((t) => {
											let valCol = t[that.champ_search][col];
											if (Tval.indexOf(valCol) === -1) {
												Tval.push(valCol);
											}
										});
										// that.filtreCol.push(col);
										that.filtreColVal[col] = Tval;
										that.filtreColSelected[col] = [];
									});
								}
								console.log('fin chargement local forage ');
							}
							if (that.nomblocajaxreload) {
								ajaxReload(that.nomblocajaxreload);
							}
						})
						.catch(function (err) {
							console.log(err);
						});
				}
			}
			fetch(url)
				.then((response) => response.json())
				.then((data) => {
					let config = data.shift();
					this.header = config.header;
					if (config.crayons !== undefined) {
						this.crayons = config.crayons;
					} else {
						this.crayons = [];
					}
					if (config.classes !== undefined) {
						this.classes = config.classes;
					} else {
						this.classes = [];
					}
					if (config.ordreCol !== undefined) {
						this.ordreCol = config.ordreCol;
					} else {
						this.ordreCol = [];
					}
					if (parseInt(id) > 0) {
						if (data.length > 0) {
							let i = trouver_index(this.table, id);
							this.table[i] = data[0];
						} else {
							let i = trouver_index(this.table, id);
							this.table.splice(i, 1);
						}
						localforage.setItem(this.nameLocalStorage, JSON.stringify(this.table));
					} else {
						this.table = data;
						if (data[0] && data[0].search) {
							this.champ_search = 'search';
						}
					}
					if (config.filtreCol !== undefined) {
						this.filtreColType = config.filtreCol;
						this.filtreCol = [];
						Object.keys(this.filtreColType).forEach((col) => {
							let Tval = [];
							this.table.forEach((t) => {
								let valCol = t[this.champ_search][col];
								if (valCol) {
									if (Tval.indexOf(valCol) === -1) {
										Tval.push(valCol);
									}
								}
							});
							this.filtreCol.push(col);
							this.filtreColVal[col] = Tval;
							this.filtreColSelected[col] = [];
						});
					}

					Vue.nextTick(() => {
						this.chargement = false;
						let filtreselect = localStorage.getItem('filtreselect_' + this.nameLocalStorage);
						let Tfiltres = [];
						// if (filtreselect) {
						// 	Tfiltres = JSON.parse(filtreselect);
						// } else if (this.filtreselect) {
						// 	Tfiltres = recupJson(decodeURIComponent(this.filtreselect));
						// 	localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(Tfiltres));
						// }
						if (this.filtreselect) {
							Tfiltres = recupJson(decodeURIComponent(this.filtreselect));
							localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(Tfiltres));
						} else if (filtreselect) {
							Tfiltres = JSON.parse(filtreselect);
						}

						Tfiltres.forEach((col) => {
							this.filtreColSelected[col.champ] = [...this.filtreColSelected[col.champ], ...col.valeurs];
						});
						this.filtreColModif++;
						this.ajaxCrayons = false;

						if (parseInt(this._id) > 0) {
							let _id = parseInt(this._id);
							let parPage = parseInt(this.parPage);
							if (parseInt(parPage)) {
								let ordre = 0;
								Object.values(this.table).forEach((d, i) => {
									if (_id === d.html.id) {
										ordre = i + 1;
									}
								});
								if (ordre > parPage) {
									let numPage = parseInt(ordre / parPage) + 1;
									this.page = numPage;
								}
							}
							this.selectLigne(_id, 'id');
							// let url = new URL(window.location);
							// url = url.href.replace('&_id=' + _id, '');
							// history.pushState({}, null, url);
						}

						if (this.nomblocajaxreload) {
							ajaxReload(this.nomblocajaxreload);
						}
						if (this.ordreCol) {
							Object.entries(this.ordreCol).forEach(([col, sens]) => {
								this.tri(col, sens);
							});
						}
						$('td.crayon-init').removeClass('crayon-init');
						console.timeEnd('Chargement de VueJs APRES Ajax');
					});
				})
				.catch((error) => console.log(error));
		},
		setPages() {
			let nombreDePages = Math.ceil(this.table.length / this.parPage);
			this.pages = [];
			for (let index = 1; index <= nombreDePages; index++) {
				this.pages.push(index);
			}
		},
		pagination(tableau) {
			let page = this.page;
			let parPage = this.parPage;
			let from = page * parPage - parPage;
			let to = page * parPage;
			return tableau.slice(from, to);
		},
		afficher_crayons(name, id) {
			if (Object.keys(this.crayons).indexOf(name) !== -1) {
				return `crayon ${this.crayons[name]}-${name}-${id}`;
			}
		},
		tri(col, sens = false) {
			const i = this.triProps.indexOf(col);
			if (i !== -1) {
				if (!sens) {
					sens = 'asc';
					if (this.triOrders[i] === 'asc') {
						sens = 'desc';
					}
				}

				this.triOrders[i] = sens;
			} else {
				if (!sens) {
					sens = 'asc';
				}
				this.triProps.push(col);
				this.triOrders.push(sens);
			}
			this.table = orderBy(this.table, this.triProps, this.triOrders, this.champ_search);
			this.ordreCol[col] = sens;
			this.saveHeader();
		},
		ordreActif(col, sens) {
			const i = this.triProps.indexOf(col);
			if (i !== -1) {
				if (this.triOrders[i] === sens) {
					return 'active';
				}
			}
		},
		resetTri() {
			this.loadingVueSelect = false;
			this.table = orderBy(this.table, ['id'], '', this.champ_search);
			this.triOrders = [];
			this.triProps = [];
			this.ordreCol = [];
			Object.keys(this.filtreColType).forEach((col) => {
				this.filtreColSelected[col] = [];
			});
		},
		selectLigne(id, col) {
			if (col === 'id' && parseInt(id)) {
				let i = this.selectTr.indexOf(id);
				if (i !== -1) {
					this.selectTr.splice(i, 1);
				} else {
					this.selectTr.push(id);
				}
			}
		},
		genererPDF(quoi = 'tableau') {
			let $tableau = [];
			Object.values(this[quoi]).forEach((d) => {
				$tableau.push(d.html);
			});

			const data = {
				fichierpdf: this.fichierpdf,
				namepdf: this.namepdf,
				header: this.header,
				arg: this.argpdf,
				Tdata: $tableau,
			};

			let req = $.ajax({
				url: this.pdfuri,
				type: 'POST',
				dataType: 'text',
				data: data,
			});
			let that = this;
			req.done(function (urlpdf) {
				if (urlpdf) {
					that.navigate(urlpdf, true);
				}
			});
		},
		navigate(href, newTab) {
			var a = document.createElement('a');
			a.href = href;
			if (newTab) {
				a.setAttribute('target', '_blank');
			}
			a.click();
		},
		exportCSV(quoi = 'tableau') {
			let $csv = [];
			let $header = [];
			let $tableau = [];
			Object.keys(this.header).forEach((k) => $header.push(k));
			$tableau = this[quoi].reduce((acc, ligne) => {
				let $uneLigne = [];
				Object.values(ligne[this.champcsv]).forEach((l) => $uneLigne.push(l));
				return [...acc, [...$uneLigne]];
			}, []);
			$csv = [[...$header], ...$tableau];
			exporterCSV($csv, this.delimitercsv, this.namecsv);
		},
		replaceBloc(ligne) {
			let html = this.vuebloc;
			Object.keys(ligne).forEach((key) => {
				html = html.replace(`@@${key}@@`, ligne[key]);
			});
			return html;
		},
		changerVue(vue) {
			this.quelleVue = vue;
		},
		ordonnerSelect(a, b) {
			// attention ! le test d'égalité en == et non pas === est voulu tel quel...
			if ((Number.isInteger(a) || parseInt(a) == a) && (Number.isInteger(b) || parseInt(b) == b)) {
				return parseInt(a) - parseInt(b);
			} else {
				let x = toString(a).toLowerCase();
				let y = toString(b).toLowerCase();
				if (x < y) {
					return -1;
				}
				if (x > y) {
					return 1;
				}
				return 0;
			}
		},
	},
	template: `
	<div class="gamutable">
		<div class="gamutable--surTable">
			<select id="parPage" v-model="parPageSelect">
				<option v-for="v in tparpage" :key="v">{{v}}</option>
			</select>
			<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher">

			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
				title="Réinitialiser les tris des colonnes">
				<i class="fa fas fa-eraser rouge"></i>
				<i class="fa fa-filter fas"></i>
			</button>
			<button class="btn var_gamutable" type="button" @click.stop="chargerJson()"
				title="Forcer le rechargement">
				<i class="fa fa-refresh fas fa-sync"></i>
			</button>

			<button class="btn gamutable--vueTable" title="Switcher en Vue tableau"
				@click.stop="changerVue('tableau')"
				v-if="this.vuebloc"
				v-show="this.quelleVue === 'bloc'">
				<i class="fas fa fa-table"></i>
			</button>

			<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc"
				@click.stop="changerVue('bloc')"
				v-if="this.vuebloc"
				v-show="this.quelleVue === 'tableau'">
				<i class="fas fa fa-th-large"></i>
			</button>
			<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV()"
				v-show="this.namecsv"
				title="Exporter le tableau affiché en csv"
			>
				<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
			</button>
			<button class="btn" type="button" @click.stop="genererPDF()"
				v-show="this.fichierpdf"
				title="Générer le PDF du tableau affiché"
			>
				<i class="fas fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
			</button>
			<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV('table')"
				v-show="this.namecsv"
				title="Exporter le tableau complet en csv"
			>
				<i class="fas fas fa-file-excel" aria-hidden="true" alt="csv"></i>
			</button>

			<button class="btn" type="button" @click.stop="genererPDF('table')"
				v-show="this.fichierpdf"
				title="Générer le PDF du tableau complet"
			>
				<i class="far fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
			</button>

			<span v-show="chargement" class="rouge">
				<i class="fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin"></i>
				<span class="texteMajBDD">
					Mise à jour de la base de donnée
				</span>
			</span>
			<span v-show="!chargement" class="btn verte" style="cursor:auto;"
				title="Base de donnée synchronisée !"
			>
				<i class="fa fas fa-database"></i>
			</span>
			<span class="gamutable-nbrMax" :data-nbrmax="table.length">{{tableau.length}} / {{table.length}} éléments</span>
			<span class="includespip" v-html="this.includespip"> </span>
		</div>

		<div class="vueBlocs" v-if="quelleVue === 'bloc'">
			<div class="vueBlocs-unbloc"
			v-for="(ligne) in tableau"
			:key=ligne.id
			v-html=replaceBloc(ligne.html)
			>
			</div>
		</div>
		<table class="table table--zebra" v-if="quelleVue === 'tableau'">
			<thead>
				<tr>
					<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
						<span class="gt_labels">
							<span v-html="label"></span>
							<span class="iconeTri">
								<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
								<i class="fa fa-sort-desc fa-sort-down" :class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')"></i>
							</span>
						</span>
					</th>
				</tr>
				<tr v-if="filtreCol.length" class="filtreColonne">
					<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
						<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head" :class="classes[head]">
							<vue-select
								v-if="filtreColType[head] === 'select'"
								v-model="filtreColSelected[head]"
								:options="filtreColVal[head].sort(ordonnerSelect)"
								:visible-options="filtreColVal_visible[head]"
								hide-selected
								multiple
								taggable
								close-on-select
								clear-on-close
								searchable
								@selected="selectValCol"
								@search:focus="endLoadingVueSelect"
								@removed="endLoadingVueSelect"
							>
								<template #tag="{ option, remove }">
									<div class="tag--un">
										{{ option }}
										<span class="tag--remove pointer" title="Cliquer pour supprimer "@click.stop="remove">x</span>
									</div>
								</template>
							</vue-select>

							<input
								v-if="filtreColType[head] === 'input'"
								class="gamutable__input--filtrer"
								v-model="filtreColSelected[head]"
								type="text"
								placeholder="Rechercher"
								@keydown="endLoadingVueSelect"

							>
							<button
								v-if="filtreColType[head] === 'input' && filtreColSelected[head].length !== 0"
								@click.stop="deleteInputSearch(head)"
								title="Vider ce champ"
								class="gamutable__input--filtrer"
							>X</button>
						</div>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
					<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']" v-html="td" @click="selectLigne(l.html.id,name)">
					</td>
				</tr>
			</tbody>
		</table>
		<div class="gamutable--sousTable">
			<div class="gamutable-nbrMax">{{tableau.length}} / {{table.length}} éléments</div>
			<div class="gamutable--pagination">
				<div class="page-item">
					<button type="button" class="page-link" v-if="page != 1" @click="page=1"> Premier </button>
					<button type="button" class="page-link" v-if="page != 1" @click="page--"> Précédent </button>
				</div>
				<div class="page-item">
					<button type="button" class="page-link" :class="{'on':pageNumber===page}" v-for="pageNumber in pages.slice(page-4 < 0 ? 0 : page-4, page+3)" @click="page = pageNumber"> {{pageNumber}} </button>
				</div>
				<div class="page-item">
					<button type="button" @click="page++" v-if="page < pages.length" class="page-link"> Suivant </button>
					<button type="button" @click="page=pages.length" v-if="page < pages.length" class="page-link"> Dernier </button>
				</div>
			</div>
		</div>
	</div>`,
};

const gamuTable = {
	components: { monTableau },
	methods: {
		rechargerJson(id, ajaxCrayons = true) {
			this.$refs.montableau.ajaxCrayons = ajaxCrayons;
			this.$refs.montableau.chargerJson(id);
		},
		rechargerJson_deux(id, ajaxCrayons = true) {
			if (this.$refs.montableau_deux) {
				this.$refs.montableau_deux.ajaxCrayons = ajaxCrayons;
				this.$refs.montableau_deux.chargerJson(id);
			}
		},
	},
};

let app = Vue.createApp(gamuTable).component('vue-select', window.VueNextSelect).mount('#app');