From 60483a2f848f2f33d6fad26406e377003203814e Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Fri, 8 May 2020 14:46:07 +0200
Subject: [PATCH] =?UTF-8?q?Apres=20pas=20mal=20de=20tests,=20l'utilisation?=
 =?UTF-8?q?=20de=20regex=20pour=20r=C3=A9cup=C3=A9rer=20un=20data-search?=
 =?UTF-8?q?=3D"toto"=20n'est=20pas=20jouable,=20gros=20pb=20de=20performan?=
 =?UTF-8?q?ce=20sur=20un=20gros=20tableau.=20les=20regex=20OUI=20mais=20si?=
 =?UTF-8?q?=20pas=20beaucoup=20;-)=20Il=20semble=20indispensable=20de=20po?=
 =?UTF-8?q?uvoir=20gerer=20finemement=20les=20elements=20que=20l'on=20veut?=
 =?UTF-8?q?=20rechercher,=20dans=20etre=20polu=C3=A9=20par=20les=20balises?=
 =?UTF-8?q?=20html.=20Notre=20json,=20pour=20la=20partie=20corps=20du=20ta?=
 =?UTF-8?q?bleau,=20on=20ajoute=20un=20subdivision=20:=20"html"=20:=20{=20?=
 =?UTF-8?q?mes=20champs},=20comme=20cela,=20on=20peut=20ajouter=20une=20no?=
 =?UTF-8?q?uvelle=20cle=20:=20"search"=20:=20{la=20valeur=20des=20champs?=
 =?UTF-8?q?=20qui=20seront=20recherch=C3=A9s=20et=20filtr=C3=A9s}.=20Cela?=
 =?UTF-8?q?=20alourdit=20un=20peu=20le=20html,=20et=20seulement=20son=20po?=
 =?UTF-8?q?ids.=20La=20partie=20html/js=20est=20toujours=20aussi=20rapide,?=
 =?UTF-8?q?=20et=20meme=20plus=20si=20on=20utilise=20cette=20nouvelle=20cl?=
 =?UTF-8?q?e.=20ATTENTION=20:=20cela=20casse=20la=20compatibilit=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/gamutable.es6.js      | 26 ++++++++++++++------
 js/gamutable.js          | 19 +++++++++------
 json_gamutable.json.html | 52 +++++++++++++++++++++++++++-------------
 paquet.xml               |  6 ++---
 4 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index 5fcc38b..0495776 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -37,11 +37,14 @@ function recupJson(d) {
 		return [];
 	}
 }
-const orderBy = (arr, props, orders) =>
+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[prop], a[prop]] : [a[prop], b[prop]];
+				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;
@@ -102,6 +105,7 @@ let monTableau = {
 			triOrders: [],
 			triProps: [],
 			selectTr: [],
+			champ_search: 'html',
 		};
 	},
 	mounted() {
@@ -114,7 +118,12 @@ let monTableau = {
 			}
 			return this.pagination(
 				this.table.filter((ligne) =>
-					Object.values(ligne).toString().toLowerCase().indexOf(this.search.toLowerCase()) < 0 ? false : true
+					Object.values(ligne[this.champ_search])
+						.toString()
+						.toLowerCase()
+						.indexOf(this.search.toLowerCase()) < 0
+						? false
+						: true
 				)
 			);
 		},
@@ -148,6 +157,9 @@ let monTableau = {
 						Vue.set(this.table, i, data[0]);
 					} else {
 						this.table = data;
+						if (data[0].search) {
+							this.champ_search = 'search';
+						}
 					}
 					Vue.nextTick(function () {
 						console.timeEnd('Chargement de VueJs APRES Ajax');
@@ -182,7 +194,7 @@ let monTableau = {
 				this.triProps.push(col);
 				this.triOrders.push(sens);
 			}
-			this.table = orderBy(this.table, this.triProps, this.triOrders);
+			this.table = orderBy(this.table, this.triProps, this.triOrders, this.champ_search);
 		},
 		ordreActif(col, sens) {
 			const i = this.triProps.indexOf(col);
@@ -193,7 +205,7 @@ let monTableau = {
 			}
 		},
 		resetTri() {
-			this.table = orderBy(this.table, ['id']);
+			this.table = orderBy(this.table, ['id'], '', this.champ_search);
 			this.triOrders = [];
 			this.triProps = [];
 		},
@@ -230,8 +242,8 @@ let monTableau = {
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="l in tableau" :key="l.id" :class="selectTr.indexOf(l.id) !== -1 ? 'select' : ''" >
-					<td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td" @click="selectLigne(l.id,name)">
+				<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]" v-html="td" @click="selectLigne(l.html.id,name)">
 					</td>
 				</tr>
 			</tbody>
diff --git a/js/gamutable.js b/js/gamutable.js
index 8f48909..77e38d1 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -49,11 +49,11 @@ function recupJson(d) {
   }
 }
 
-var orderBy = function orderBy(arr, props, orders) {
+var orderBy = function orderBy(arr, props, orders, champ) {
   return arr.sort(function (a, b) {
     return props.reduce(function (acc, prop, i) {
       if (acc === 0) {
-        var _ref = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]],
+        var _ref = orders && orders[i] === 'desc' ? [b[champ][prop], a[champ][prop]] : [a[champ][prop], b[champ][prop]],
             _ref2 = _slicedToArray(_ref, 2),
             p1 = _ref2[0],
             p2 = _ref2[1]; // passe en lowercase les String
@@ -120,7 +120,8 @@ var monTableau = {
       pages: [],
       triOrders: [],
       triProps: [],
-      selectTr: []
+      selectTr: [],
+      champ_search: 'html'
     };
   },
   mounted: function mounted() {
@@ -135,7 +136,7 @@ var monTableau = {
       }
 
       return this.pagination(this.table.filter(function (ligne) {
-        return Object.values(ligne).toString().toLowerCase().indexOf(_this.search.toLowerCase()) < 0 ? false : true;
+        return Object.values(ligne[_this.champ_search]).toString().toLowerCase().indexOf(_this.search.toLowerCase()) < 0 ? false : true;
       }));
     }
   },
@@ -176,6 +177,10 @@ var monTableau = {
           Vue.set(_this2.table, i, data[0]);
         } else {
           _this2.table = data;
+
+          if (data[0].search) {
+            _this2.champ_search = 'search';
+          }
         }
 
         Vue.nextTick(function () {
@@ -215,7 +220,7 @@ var monTableau = {
         this.triOrders.push(sens);
       }
 
-      this.table = orderBy(this.table, this.triProps, this.triOrders);
+      this.table = orderBy(this.table, this.triProps, this.triOrders, this.champ_search);
     },
     ordreActif: function ordreActif(col, sens) {
       var i = this.triProps.indexOf(col);
@@ -227,7 +232,7 @@ var monTableau = {
       }
     },
     resetTri: function resetTri() {
-      this.table = orderBy(this.table, ['id']);
+      this.table = orderBy(this.table, ['id'], '', this.champ_search);
       this.triOrders = [];
       this.triProps = [];
     },
@@ -243,7 +248,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\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\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\">\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\" :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\":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.id\" :class=\"selectTr.indexOf(l.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\" @click=\"selectLigne(l.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\">{{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<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\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\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\">\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\" :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\":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]\" 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\">{{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 app = new Vue({
   el: '#app',
diff --git a/json_gamutable.json.html b/json_gamutable.json.html
index de2f3d2..4312454 100644
--- a/json_gamutable.json.html
+++ b/json_gamutable.json.html
@@ -35,22 +35,42 @@
 	</a>
 })]
 {
-"id": #ID_SOUSCRIPTION,
-"modif" : [(#VAL{<a class="modalbox" href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"><i class="fa fa-pencil"></i></a>}|json_encode)],
-"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
-"statut" : [(#GET{statut}|json_encode)],
-"genre" : [(#GENRE|json_encode)],
-"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
-"prenom" : [(#PRENOM|json_encode)],
-"qui": [(#VAL{<a class="mediabox" title="Détail du souscripteur" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,qui})]"><i class="fa fa-address-book"></i></a>}|json_encode)],
-"nbr" : [(#NOMBRE)],
-"montant_part" : [(#MONTANT_PART)],
-"montant" : [(#MONTANT)],
-"prix": [(#VAL{<a class="mediabox" title="Détail de la souscription" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,prix})]"><i class="fa fa-shopping-cart"></i></a>}|json_encode)],
-"type" : [(#TYPE|json_encode)],
-"email" : [(#VAL{<a href="mailto:#EMAIL" target="_blank">#EMAIL</a>}|json_encode)],
-"telephone" : [(#TELEPHONE|json_encode)],
-"ou": [(#VAL{<a class="mediabox" title="Détail des coordonnées" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,adresse})]"><i class="fa fa-address-card"></i></a>}|json_encode)]
+"html": {
+	id": #ID_SOUSCRIPTION,
+	"modif" : [(#VAL{<a class="modalbox" href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"><i class="fa fa-pencil"></i></a>}|json_encode)],
+	"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
+	"statut" : [(#GET{statut}|json_encode)],
+	"genre" : [(#GENRE|json_encode)],
+	"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
+	"prenom" : [(#PRENOM|json_encode)],
+	"qui": [(#VAL{<a class="mediabox" title="Détail du souscripteur" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,qui})]"><i class="fa fa-address-book"></i></a>}|json_encode)],
+	"nbr" : [(#NOMBRE)],
+	"montant_part" : [(#MONTANT_PART)],
+	"montant" : [(#MONTANT)],
+	"prix": [(#VAL{<a class="mediabox" title="Détail de la souscription" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,prix})]"><i class="fa fa-shopping-cart"></i></a>}|json_encode)],
+	"type" : [(#TYPE|json_encode)],
+	"email" : [(#VAL{<a href="mailto:#EMAIL" target="_blank">#EMAIL</a>}|json_encode)],
+	"telephone" : [(#TELEPHONE|json_encode)],
+	"ou": [(#VAL{<a class="mediabox" title="Détail des coordonnées" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,adresse})]"><i class="fa fa-address-card"></i></a>}|json_encode)]
+},
+search: {
+	id": #ID_SOUSCRIPTION,
+	"modif" : "",
+	"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
+	"statut" : [(#GET{statut}|json_encode)],
+	"genre" : [(#GENRE|json_encode)],
+	"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
+	"prenom" : [(#PRENOM|json_encode)],
+	"qui": "",
+	"nbr" : [(#NOMBRE)],
+	"montant_part" : [(#MONTANT_PART)],
+	"montant" : [(#MONTANT)],
+	"prix": "",
+	"type" : [(#TYPE|json_encode)],
+	"email" : [(#EMAIL|json_encode)],
+	"telephone" : [(#TELEPHONE|json_encode)],
+	"ou": ""
+}
 }
 </BOUCLE_souscriptions>
 ]
diff --git a/paquet.xml b/paquet.xml
index fafab3c..37ec1d3 100644
--- a/paquet.xml
+++ b/paquet.xml
@@ -1,7 +1,7 @@
 <paquet
 	prefix="gamutable"
 	categorie="outil"
-	version="1.0.0"
+	version="2.0.0"
 	etat="dev"
 	compatibilite="[3.2.0-dev;3.3.*]"
 	logo="prive/themes/spip/images/gamutable-xx.svg"
@@ -12,13 +12,13 @@
 	-->
 
 	<nom>GamuTable</nom>
-	
+
 
 	<auteur lien='https://gamuza.fr'>tofulm</auteur>
 
 	<licence>GNU/GPL</licence>
 
-	<pipeline nom="autoriser" inclure="gamutable_autorisations.php" /> 
+	<pipeline nom="autoriser" inclure="gamutable_autorisations.php" />
 
 
 </paquet>