From 8ba264d69ba67ca70165abfebb05947f5dd8e5b7 Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Tue, 27 Sep 2022 15:01:52 +0200
Subject: [PATCH] =?UTF-8?q?pour=20les=20pdfs,=20on=20passe=20par=20une=20a?=
 =?UTF-8?q?ction=20afin=20de=20pouvoir=20avoir=20tous=20les=20cas=20possib?=
 =?UTF-8?q?les.=20Le=20gros=20probl=C3=A8me=20a=20=C3=A9t=C3=A9=20de=20g?=
 =?UTF-8?q?=C3=A9rer=20la=20g=C3=A9n=C3=A9ration=20du=20pdf=20et=20surtout?=
 =?UTF-8?q?=20son=20telechargement.=20la=20solution=20:=20-=20le=20fichier?=
 =?UTF-8?q?=20action=20cree=20le=20pdf=20et=20le=20place=20dans=20=20=20IM?=
 =?UTF-8?q?G/gamutable=5Fpdf/xxxxxxxxxx.mdf=20(nom=20du=20fichier=20hash?=
 =?UTF-8?q?=C3=A9)=20-=20on=20ajoute=20un=20cron=20dans=2020=20secondes=20?=
 =?UTF-8?q?pour=20supprimer=20ce=20fichier=20-=20TODO,=20mainteannt=20joue?=
 =?UTF-8?q?r=20avec=20l'action=20!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 action/pdf_gamutable.php    |  52 +++++++++++++++++
 gamutable_autorisations.php |   5 +-
 gamutable_fonctions.php     |   1 +
 inc/gamutable_clean_pdf.php |   9 +++
 inc/toto.txt                |   0
 inclure/gamutable.html      |   8 ++-
 js/gamutable.es6.js         |  40 +++++++++++--
 js/gamutable.js             | 111 ++++++++++++++++++++++--------------
 8 files changed, 172 insertions(+), 54 deletions(-)
 create mode 100644 action/pdf_gamutable.php
 create mode 100644 inc/gamutable_clean_pdf.php
 create mode 100755 inc/toto.txt

diff --git a/action/pdf_gamutable.php b/action/pdf_gamutable.php
new file mode 100644
index 0000000..03997be
--- /dev/null
+++ b/action/pdf_gamutable.php
@@ -0,0 +1,52 @@
+<?php
+if (!defined('_ECRIRE_INC_VERSION')) {
+	return;
+}
+
+function action_pdf_gamutable_dist() {
+
+	include_spip('inc/autoriser');
+	if (! autoriser('generer', 'gamutablepdf')) {
+		return false;
+	}
+
+	$fichierpdf = _request('fichierpdf') ?? '';
+	$namepdf = _request('namepdf') ?? $fichierpdf;
+	$header = _request('header') ?? [];
+	$Tdata = _request('data') ?? [];
+
+	if (empty($header) or empty($fichierpdf)) {
+		exit;
+	}
+	$header = array_values($header);
+	$Tcles = [];
+	if (!empty($Tdata)) {
+		foreach ($Tdata as $d) {
+			$Tcles[] = $d['html']['id'];
+		}
+	}
+
+	if (empty($Tcles)) {
+		$fond = recuperer_fond('gamutable_pdf/' . $fichierpdf);
+	} else {
+		$fond = recuperer_fond('gamutable_pdf/' . $fichierpdf,['ids' => implode(',', $Tcles)]);
+	}
+
+	include_spip('spipdf_options');
+	include_spip('inc/spipdf');
+
+	$a = spipdf_html2pdf($fond);
+	$dir = sous_repertoire(_DIR_IMG . 'pdfgamutable');
+	$chemin = $dir . md5($namepdf) . '.pdf' ;
+	file_put_contents($chemin, $a);
+
+	$id_job = job_queue_add(
+		'gamutable_clean_pdf',
+		'Gamutable nettoyer pdf',
+		[$chemin],
+		'inc/gamutable_clean_pdf',
+		false,
+		time() + 20
+	);
+	echo url_absolue($chemin);
+}
diff --git a/gamutable_autorisations.php b/gamutable_autorisations.php
index 59d67cf..1c3b6df 100644
--- a/gamutable_autorisations.php
+++ b/gamutable_autorisations.php
@@ -24,7 +24,10 @@ function autoriser_gamutable_purger_dist($faire, $type, $id, $qui, $opt) {
 	return autoriser('webmestre');
 }
 
+function autoriser_gamutablepdf_generer_dist($faire, $type, $id, $qui, $opt) {
+	return intval($qui['id_auteur']);
+}
+
 function autoriser_gamutable_modifier_dist($faire, $type, $id, $qui, $opt) {
 	return true;
 }
-
diff --git a/gamutable_fonctions.php b/gamutable_fonctions.php
index 1091d8e..cd4952f 100644
--- a/gamutable_fonctions.php
+++ b/gamutable_fonctions.php
@@ -13,6 +13,7 @@ if (!defined('_ECRIRE_INC_VERSION')) {
 	return;
 }
 
+
 function gamutable_fermer_modalbox($id_objet = 9999999999){
 	$html = <<<EOJS
 		<script type="text/javascript">
diff --git a/inc/gamutable_clean_pdf.php b/inc/gamutable_clean_pdf.php
new file mode 100644
index 0000000..3f22956
--- /dev/null
+++ b/inc/gamutable_clean_pdf.php
@@ -0,0 +1,9 @@
+<?php
+if (!defined('_ECRIRE_INC_VERSION')) {
+	return;
+}
+
+function gamutable_clean_pdf($fichier) {
+	unlink(_DIR_RACINE . $fichier);
+}
+
diff --git a/inc/toto.txt b/inc/toto.txt
new file mode 100755
index 0000000..e69de29
diff --git a/inclure/gamutable.html b/inclure/gamutable.html
index 4f1818d..e678957 100644
--- a/inclure/gamutable.html
+++ b/inclure/gamutable.html
@@ -2,6 +2,7 @@
 <link rel="stylesheet" href="[(#CHEMIN{css/vue-next-select.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
 [(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})]
 [(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
+[(#SET{pdfuri,#VAL{pdf_gamutable}|generer_url_action{"", 1}})]
 <span class="crayon gamutable-yyyy-nn"></span>
 <div id="app">
 	<div class="container_un">
@@ -11,12 +12,13 @@
 			[<span class="titre titreGamutableUn">(#ENV{titreGamutableUn})</span>]
 			<mon-tableau
 				apiuri="[(#ENV{apiuri,spip.php?page=json_gamutable.json})]"
-				pdfuri="[(#ENV{pdfuri})]"
+				pdfuri="#GET{pdfuri}"
 				:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
 				champcsv="#ENV{champcsv,html}"
 				delimitercsv="#ENV{delimitercsv,','}"
 				namecsv="#ENV{namecsv}"
 				namepdf="#ENV{namepdf}"
+				fichierpdf="#ENV{fichierpdf}"
 				urlvuebloc="[(#ENV{urlvuebloc})]"
 				url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
 				url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
@@ -40,12 +42,12 @@
 				[<span class="titre titreGamutableDeux">(#ENV{titreGamutableDeux})</span>]
 				<mon-tableau
 					apiuri="[(#ENV{apiuri_deux})]"
-					pdfuri="[(#ENV{pdfuri_deux})]"
+					pdfuri="#GET{pdfuri}"
 					:tparpage="#ENV{tparpage_deux, [10, 20, 50, 'Tous']}"
 					champcsv="[(#ENV{champcsv_deux, #ENV{champcsv,html}})]"
 					delimitercsv="[(#ENV{delimitercsv_deux, #ENV{delimitercsv,','}})]"
 					namecsv="[(#ENV{namecsv_deux, #ENV{namecsv}})]"
-					namepdf="[(#ENV{namepdf_deux, #ENV{namepdf}})]"
+					namepdf="#ENV{namepdf_deux}"
 					fichierpdf="[(#ENV{fichierpdf_deux, #ENV{fichierpdf}})]"
 					urlvuebloc="[(#ENV{urlvuebloc_deux})]"
 					url_sort_asc="[(#ENV{sort_asc_deux, #ENV{sort_asc,#GET{sort_asc}}})]"
diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index 6d762a1..f1f053a 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -179,6 +179,12 @@ let monTableau = {
 		pdfuri: {
 			type: String,
 		},
+		namepdf: {
+			type: String,
+		},
+		fichierpdf: {
+			type: String,
+		},
 		champcsv: {
 			type: String,
 		},
@@ -191,9 +197,6 @@ let monTableau = {
 		namepdf: {
 			type: String,
 		},
-		fichierpdf: {
-			type: String,
-		},
 		url_sort_asc: {
 			type: String,
 		},
@@ -703,8 +706,33 @@ let monTableau = {
 				}
 			}
 		},
-		genererPDF() {
-			window.location.assign(this.pdfuri);
+		genererPDF(quoi = 'tableau') {
+			const data = {
+				fichierpdf: this.fichierpdf,
+				namepdf: this.namepdf,
+				header: this.header,
+				data: this[quoi],
+			};
+			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 = [];
@@ -790,7 +818,7 @@ let monTableau = {
 				<i class="fas fas fa-file-excel" aria-hidden="true" alt="csv"></i>
 			</button>
 			<button class="btn" type="button" @click.stop="genererPDF()"
-				v-show="this.pdfuri"
+				v-show="this.fichierpdf"
 				title="Générer le PDF du tableau complet"
 			>
 				<i class="fas fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
diff --git a/js/gamutable.js b/js/gamutable.js
index fdc37ab..eaf0f21 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -1,5 +1,7 @@
 "use strict";
 
+var _props;
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -8,6 +10,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -217,7 +221,7 @@ function trouver_index(table, id) {
 }
 
 var monTableau = {
-  props: {
+  props: (_props = {
     tparpage: {
       type: Array,
       default: function _default() {
@@ -231,6 +235,12 @@ var monTableau = {
     pdfuri: {
       type: String
     },
+    namepdf: {
+      type: String
+    },
+    fichierpdf: {
+      type: String
+    },
     champcsv: {
       type: String
     },
@@ -239,48 +249,33 @@ var monTableau = {
     },
     namecsv: {
       type: String
-    },
-    namepdf: {
-      type: String
-    },
-    fichierpdf: {
-      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
     }
-  },
+  }, _defineProperty(_props, "namepdf", {
+    type: String
+  }), _defineProperty(_props, "url_sort_asc", {
+    type: String
+  }), _defineProperty(_props, "url_sort_desc", {
+    type: String
+  }), _defineProperty(_props, "urlvuebloc", {
+    type: String
+  }), _defineProperty(_props, "vueblocdefaut", {
+    type: String,
+    default: 'tableau'
+  }), _defineProperty(_props, "filtrecolmulti", {
+    type: String
+  }), _defineProperty(_props, "nomblocajaxreload", {
+    type: String
+  }), _defineProperty(_props, "stockage", {
+    type: String
+  }), _defineProperty(_props, "includespip", {
+    type: String
+  }), _defineProperty(_props, "filtrer", {
+    type: String
+  }), _defineProperty(_props, "_id", {
+    type: String
+  }), _defineProperty(_props, "filtreselect", {
+    type: String
+  }), _props),
   data: function data() {
     return {
       table: [],
@@ -809,7 +804,35 @@ var monTableau = {
       }
     },
     genererPDF: function genererPDF() {
-      window.location.assign(this.pdfuri);
+      var quoi = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'tableau';
+      var data = {
+        fichierpdf: this.fichierpdf,
+        namepdf: this.namepdf,
+        header: this.header,
+        data: this[quoi]
+      };
+      var req = $.ajax({
+        url: this.pdfuri,
+        type: 'POST',
+        dataType: 'text',
+        data: data
+      });
+      var that = this;
+      req.done(function (urlpdf) {
+        if (urlpdf) {
+          that.navigate(urlpdf, true);
+        }
+      });
+    },
+    navigate: function navigate(href, newTab) {
+      var a = document.createElement('a');
+      a.href = href;
+
+      if (newTab) {
+        a.setAttribute('target', '_blank');
+      }
+
+      a.click();
     },
     exportCSV: function exportCSV() {
       var _this6 = this;
@@ -861,7 +884,7 @@ var monTableau = {
       }
     }
   },
-  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 fas fa-eraser rouge\"></i>\n\t\t\t\t<i class=\"fa fa-filter fas\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"btn var_gamutable\" type=\"button\" @click.stop=\"chargerJson()\"\n\t\t\t\ttitle=\"Forcer le rechargement\">\n\t\t\t\t<i class=\"fa fa-refresh fas fa-sync\"></i>\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\"></i>\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\"></i>\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<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV('table')\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau complet en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fas fas fa-file-excel\" aria-hidden=\"true\" alt=\"csv\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"genererPDF()\"\n\t\t\t\tv-show=\"this.pdfuri\"\n\t\t\t\ttitle=\"G\xE9n\xE9rer le PDF du tableau complet\"\n\t\t\t>\n\t\t\t\t<i class=\"fas fa-file-pdf rouge\" aria-hidden=\"true\" alt=\"pdf\"></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\t<span class=\"gamutable-nbrMax\" :data-nbrmax=\"table.length\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</span>\n\t\t\t<span class=\"includespip\" v-html=\"this.includespip\"> </span>\n\t\t</div>\n\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 class=\"gt_labels\">\n\t\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\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\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\t</span>\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=\"filtreCol.length\" class=\"filtreColonne\">\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\" :class=\"classes[head]\">\n\t\t\t\t\t\t\t<vue-select\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'select'\"\n\t\t\t\t\t\t\t\tv-model=\"filtreColSelected[head]\"\n\t\t\t\t\t\t\t\t:options=\"filtreColVal[head].sort(ordonnerSelect)\"\n\t\t\t\t\t\t\t\t:visible-options=\"filtreColVal_visible[head]\"\n\t\t\t\t\t\t\t\thide-selected\n\t\t\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t\t\ttaggable\n\t\t\t\t\t\t\t\tclose-on-select\n\t\t\t\t\t\t\t\tclear-on-close\n\t\t\t\t\t\t\t\tsearchable\n\t\t\t\t\t\t\t\t@selected=\"selectValCol\"\n\t\t\t\t\t\t\t\t@search:focus=\"endLoadingVueSelect\"\n\t\t\t\t\t\t\t\t@removed=\"endLoadingVueSelect\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<template #tag=\"{ option, remove }\">\n\t\t\t\t\t\t\t\t\t<div class=\"tag--un\">\n\t\t\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t\t\t\t\t<span class=\"tag--remove pointer\" title=\"Cliquer pour supprimer \"@click.stop=\"remove\">x</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</vue-select>\n\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'input'\"\n\t\t\t\t\t\t\t\tclass=\"gamutable__input--filtrer\"\n\t\t\t\t\t\t\t\tv-model=\"filtreColSelected[head]\"\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tplaceholder=\"Rechercher\"\n\t\t\t\t\t\t\t\t@keydown=\"endLoadingVueSelect\"\n\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'input' && filtreColSelected[head].length !== 0\"\n\t\t\t\t\t\t\t\t@click.stop=\"deleteInputSearch(head)\"\n\t\t\t\t\t\t\t\ttitle=\"Vider ce champ\"\n\t\t\t\t\t\t\t\tclass=\"gamutable__input--filtrer\"\n\t\t\t\t\t\t\t>X</button>\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], l.classes !== undefined ? l.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\"> Premier </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Pr\xE9c\xE9dent </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\" :class=\"{'on':pageNumber===page}\" v-for=\"pageNumber in pages.slice(page-4 < 0 ? 0 : page-4, page+3)\" @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\"> Suivant </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Dernier </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<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 fas fa-eraser rouge\"></i>\n\t\t\t\t<i class=\"fa fa-filter fas\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"btn var_gamutable\" type=\"button\" @click.stop=\"chargerJson()\"\n\t\t\t\ttitle=\"Forcer le rechargement\">\n\t\t\t\t<i class=\"fa fa-refresh fas fa-sync\"></i>\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\"></i>\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\"></i>\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<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV('table')\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau complet en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fas fas fa-file-excel\" aria-hidden=\"true\" alt=\"csv\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"genererPDF()\"\n\t\t\t\tv-show=\"this.fichierpdf\"\n\t\t\t\ttitle=\"G\xE9n\xE9rer le PDF du tableau complet\"\n\t\t\t>\n\t\t\t\t<i class=\"fas fa-file-pdf rouge\" aria-hidden=\"true\" alt=\"pdf\"></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\t<span class=\"gamutable-nbrMax\" :data-nbrmax=\"table.length\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</span>\n\t\t\t<span class=\"includespip\" v-html=\"this.includespip\"> </span>\n\t\t</div>\n\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 class=\"gt_labels\">\n\t\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\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\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\t</span>\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=\"filtreCol.length\" class=\"filtreColonne\">\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\" :class=\"classes[head]\">\n\t\t\t\t\t\t\t<vue-select\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'select'\"\n\t\t\t\t\t\t\t\tv-model=\"filtreColSelected[head]\"\n\t\t\t\t\t\t\t\t:options=\"filtreColVal[head].sort(ordonnerSelect)\"\n\t\t\t\t\t\t\t\t:visible-options=\"filtreColVal_visible[head]\"\n\t\t\t\t\t\t\t\thide-selected\n\t\t\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t\t\ttaggable\n\t\t\t\t\t\t\t\tclose-on-select\n\t\t\t\t\t\t\t\tclear-on-close\n\t\t\t\t\t\t\t\tsearchable\n\t\t\t\t\t\t\t\t@selected=\"selectValCol\"\n\t\t\t\t\t\t\t\t@search:focus=\"endLoadingVueSelect\"\n\t\t\t\t\t\t\t\t@removed=\"endLoadingVueSelect\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<template #tag=\"{ option, remove }\">\n\t\t\t\t\t\t\t\t\t<div class=\"tag--un\">\n\t\t\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t\t\t\t\t<span class=\"tag--remove pointer\" title=\"Cliquer pour supprimer \"@click.stop=\"remove\">x</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</vue-select>\n\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'input'\"\n\t\t\t\t\t\t\t\tclass=\"gamutable__input--filtrer\"\n\t\t\t\t\t\t\t\tv-model=\"filtreColSelected[head]\"\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tplaceholder=\"Rechercher\"\n\t\t\t\t\t\t\t\t@keydown=\"endLoadingVueSelect\"\n\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tv-if=\"filtreColType[head] === 'input' && filtreColSelected[head].length !== 0\"\n\t\t\t\t\t\t\t\t@click.stop=\"deleteInputSearch(head)\"\n\t\t\t\t\t\t\t\ttitle=\"Vider ce champ\"\n\t\t\t\t\t\t\t\tclass=\"gamutable__input--filtrer\"\n\t\t\t\t\t\t\t>X</button>\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], l.classes !== undefined ? l.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\"> Premier </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Pr\xE9c\xE9dent </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\" :class=\"{'on':pageNumber===page}\" v-for=\"pageNumber in pages.slice(page-4 < 0 ? 0 : page-4, page+3)\" @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\"> Suivant </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Dernier </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
 };
 var gamuTable = {
   components: {