From 828c892b032151511d8dc20e689ae3d58cd4be5e Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Thu, 5 Jan 2023 13:54:07 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20pour=20les=20cellules=20o=C3=B9=20les?=
 =?UTF-8?q?=20crayons=20sont=20branch=C3=A9s=20sur=20une=20table=20annexe?=
 =?UTF-8?q?=20(=3D=20diff=C3=A9rente=20de=20la=20table=20principale=20qui?=
 =?UTF-8?q?=20fournit=20l'id=20de=20la=20ligne),=20utiliser=20la=20valeur?=
 =?UTF-8?q?=20du=20champ=20crayons=20pour=20transmettre=20l'id=20de=20la?=
 =?UTF-8?q?=20table=20annexe=20=C3=A0=20=C3=A9diter.=20Ce=20qui=20donne=20?=
 =?UTF-8?q?:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

crayons : { nom_du_champ : id_table_annexe }
---
 js/gamutable.es6.js      |   5 +-
 js/gamutable.js          | 188 ++++++++++++++++++++++++++++++++-------
 json_gamutable.json.html |   9 +-
 3 files changed, 165 insertions(+), 37 deletions(-)

diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index 9af5a5b..69ca2a3 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -675,7 +675,8 @@ let monTableau = {
 			let to = page * parPage;
 			return tableau.slice(from, to);
 		},
-		afficher_crayons(name, id) {
+		afficher_crayons(name, l) {
+			let id = l.crayons !== undefined && l.crayons[name] !== undefined ? l.crayons[name] : l.html.id;
 			if (Object.keys(this.crayons).indexOf(name) !== -1) {
 				return `crayon ${this.crayons[name]}-${name}-${id}`;
 			}
@@ -969,7 +970,7 @@ let monTableau = {
 			</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.crayons !== undefined && l.crayons[name] !== undefined ? l.crayons[name] : l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']"  @click="selectLigne(l.html.id,name)">
+					<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name, l), name, classes[name], l.classes !== undefined ? l.classes[name] : '']"  @click="selectLigne(l.html.id,name)">
 					<div v-if="checkbox[name] !== undefined">
 						<label v-if="td.split('-')[0] === 'dataid'">
 							<input type='checkbox'  v-model='Tcheckbox[name]' :value="td.split('-')[1]">
diff --git a/js/gamutable.js b/js/gamutable.js
index 52dc50d..592e858 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -1,32 +1,46 @@
 "use strict";
 
 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."); }
+
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 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."); }
+
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 jQuery(function () {
   $('#app').on('click', '.url_action', function (e) {
     e.preventDefault();
     e.stopPropagation();
     var confirmation = $(this).data('confirm');
+
     if (confirmation !== undefined) {
       if (!confirm(confirmation)) {
         return;
       }
     }
+
     var url = $(this).attr('href');
-    var id = $(this).data('id');
-    // passer en refresh animé une éventuelle icone
+    var 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>');
     }
+
     var nomBlocAjaxReload = $(this).data('ajaxreload');
     console.time('Chargement de VueJs APRES Ajax');
     $.ajax({
@@ -44,6 +58,7 @@ jQuery(function () {
           app.rechargerJson();
           app.rechargerJson_deux();
         }
+
         if (nomBlocAjaxReload !== undefined) {
           console.log('depart reload: ' + nomBlocAjaxReload);
           ajaxReload(nomBlocAjaxReload, {
@@ -55,58 +70,68 @@ jQuery(function () {
         }
       }
     });
-  });
+  }); // lancement d'une modalbox
 
-  // lancement d'une modalbox
   $('#app').on('click', '.modalbox', function (e) {
     e.stopPropagation();
     e.preventDefault();
     var confirmation = $(this).data('confirm');
+
     if (confirmation !== undefined) {
       if (!confirm(confirmation)) {
         return;
       }
     }
+
     var url = $(this).attr('href');
     url += '&var_zajax=content';
     var data = {};
     var minHeight = $(this).data('minheight');
+
     if (minHeight !== undefined) {
       data.minHeight = minHeight;
     }
+
     var minWidth = $(this).data('minwidth');
+
     if (minWidth !== undefined) {
       data.minWidth = minWidth;
     }
+
     var width = $(this).data('width');
+
     if (width !== undefined) {
       data.width = width;
       var valeur_reduite = $(window).width() * width / 100;
       url += '&largeur=' + valeur_reduite + 'px';
     }
+
     data.onShow = function () {
       if ((typeof charger_require === "undefined" ? "undefined" : _typeof(charger_require)) !== undefined) {
         charger_require();
       }
     };
-    $.modalbox(url, data);
-  });
 
-  // lancement d'une médiabox
+    $.modalbox(url, data);
+  }); // lancement d'une médiabox
+
   $('#app').on('click', '.mediabox', function (e) {
     e.preventDefault();
     var confirmation = $(this).data('confirm');
+
     if (confirmation !== undefined) {
       if (!confirm(confirmation)) {
         return;
       }
     }
+
     var href = $(this).attr('href');
     $.fn.mediabox({
       href: href
     });
   });
 });
+
 function recupJson(d) {
   try {
     return JSON.parse(d);
@@ -115,52 +140,63 @@ function recupJson(d) {
     return false;
   }
 }
+
 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[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
-        p1 = typeof p1 === 'string' ? p1.toLowerCase() : p1;
-        p2 = typeof p2 === 'string' ? p2.toLowerCase() : p2;
+            _ref2 = _slicedToArray(_ref, 2),
+            p1 = _ref2[0],
+            p2 = _ref2[1]; // passe en lowercase les String
 
-        // Gestion du format de date
+
+        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
+
         var re = /^(\d{2})\/(\d{2})\/(\d{2,4})$/;
+
         if (typeof p1 !== 'number') {
           var r1 = p1.match(re);
+
           if (Array.isArray(r1)) {
             p1 = r1[3] + r1[2] + r1[1];
           }
+
           var 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) {
   var csv = '';
+
   if (delimitercsv) {
     csv = Papa.unparse(json, {
       delimiter: delimitercsv
     });
   } else {
     csv = Papa.unparse(json);
-  }
-  //Download the file as CSV
+  } //Download the file as CSV
+
+
   var link = document.createElement('a');
   link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
   link.setAttribute('download', name);
@@ -169,6 +205,7 @@ function exporterCSV(json, delimitercsv, name) {
   link.click();
   document.body.removeChild(link);
 }
+
 function trouver_index(table, id) {
   var i = -1;
   table.forEach(function (ligne, index) {
@@ -178,6 +215,7 @@ function trouver_index(table, id) {
   });
   return i;
 }
+
 var monTableau = {
   props: {
     tparpage: {
@@ -284,8 +322,10 @@ var monTableau = {
   },
   mounted: function mounted() {
     var _this = this;
+
     localforage.setDriver(localforage[this.stockage.toUpperCase()]);
     this.chargerJson();
+
     if (this.urlvuebloc) {
       fetch(this.urlvuebloc).then(function (response) {
         return response.text();
@@ -319,31 +359,40 @@ var monTableau = {
     // },
     tableau: function tableau() {
       var _this2 = this;
+
       this.setPages();
+
       if (!this.search && !this.filtreColModif) {
         return this.pagination(this.table);
       }
+
       return this.pagination(this.table.filter(function (ligne) {
         var rsearch = Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;
+
         if (!rsearch) {
           return false;
         }
+
         Object.keys(_this2.filtreColSelected).forEach(function (colName) {
           if (rsearch) {
             var colValue = _this2.filtreColSelected[colName];
+
             if (colValue !== null) {
               if (!Array.isArray(colValue)) {
                 colValue = [colValue];
               }
+
               var TcolValue = [];
               colValue.forEach(function (s) {
                 if (Number.isInteger(s)) {
                   TcolValue.push(s);
                 }
+
                 if (s.length > 0) {
                   TcolValue.push(s.toLowerCase());
                 }
               });
+
               if (TcolValue.length) {
                 if (_this2.filtreColType[colName] === 'select') {
                   var Trsearch = TcolValue.some(function (uneValeur) {
@@ -357,6 +406,7 @@ var monTableau = {
                       }
                     }
                   });
+
                   if (!Trsearch) {
                     rsearch = false;
                   }
@@ -380,6 +430,7 @@ var monTableau = {
       } else {
         this.parPage = e;
       }
+
       console.log(this.parPage);
       sessionStorage.setItem('nbItems', this.parPage);
       sessionStorage.setItem('nbItemsChaine', this.parPageSelect);
@@ -392,6 +443,7 @@ var monTableau = {
     },
     tableau: function tableau() {
       var _this3 = this;
+
       // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       // Si on veut filtrer la liste des options dynamique en fonction
       // du tri du tableau
@@ -400,13 +452,16 @@ var monTableau = {
         this.filtreCol.forEach(function (col) {
           // let Tval = [''];
           var Tval = [];
+
           _this3.tableau.forEach(function (t) {
             var valCol = t[_this3.champ_search][col];
+
             if (Tval.indexOf(valCol) === -1) {
               Tval.push(valCol);
               _this3.filtreColValOk = true;
             }
           });
+
           _this3.filtreColVal[col] = Tval;
         });
       }
@@ -415,20 +470,24 @@ var monTableau = {
       handler: function handler() {
         if (!this.loadingVueSelect) {
           var ObfiltreSelect = [];
+
           if (this.filtreColSelected) {
             Object.entries(this.filtreColSelected).forEach(function (_ref3) {
               var _ref4 = _slicedToArray(_ref3, 2),
-                champ = _ref4[0],
-                valeurs = _ref4[1];
+                  champ = _ref4[0],
+                  valeurs = _ref4[1];
+
               if (!Array.isArray(valeurs)) {
                 valeurs = [valeurs];
               }
+
               ObfiltreSelect.push({
                 champ: champ,
                 valeurs: valeurs
               });
             });
           }
+
           if (!this.ajaxCrayons) {
             localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(ObfiltreSelect));
           }
@@ -445,10 +504,10 @@ var monTableau = {
         classes: this.classes,
         filtreCol: this.filtreColType,
         ordreCol: this.ordreCol
-      };
-      // if (!localStorage.getItem('header_' + this.nameLocalStorage)) {
+      }; // if (!localStorage.getItem('header_' + this.nameLocalStorage)) {
       // localStorage.setItem('headerJson_' + this.nameLocalStorage, JSON.stringify($header));
       // }
+
       localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
     },
     deleteInputSearch: function deleteInputSearch(head) {
@@ -471,64 +530,81 @@ var monTableau = {
       if (this.apiuri) {
         return this.apiuri.match(/.*page=(.*)/)[1];
       }
+
       return '';
     },
     chargerJson: function chargerJson(id) {
       var _this4 = this;
+
       this.chargement = true;
       var url = this.apiuri;
+
       if (parseInt(id) > 0) {
         url += '&id=' + id;
       } else {
         var 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.checkbox !== undefined) {
             this.checkbox = config.checkbox;
             Object.keys(this.checkbox).forEach(function (head) {
               _this4.Tcheckbox[head] = [];
             });
           }
+
           if (config.ordreCol !== undefined) {
             this.ordreCol = config.ordreCol;
           }
+
           var filtreCol = [];
+
           if (config.filtreCol !== undefined) {
             filtreCol = config.filtreCol;
           }
+
           var 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(function (col) {
-                  var Tval = [];
-                  // let Tval = [''];
+                  var Tval = []; // let Tval = [''];
+
                   that.table.forEach(function (t) {
                     var valCol = t[that.champ_search][col];
+
                     if (Tval.indexOf(valCol) === -1) {
                       Tval.push(valCol);
                     }
-                  });
-                  // that.filtreCol.push(col);
+                  }); // that.filtreCol.push(col);
+
                   that.filtreColVal[col] = Tval;
                   that.filtreColSelected[col] = [];
                 });
               }
+
               console.log('fin chargement local forage ');
             }
+
             if (that.nomblocajaxreload) {
               ajaxReload(that.nomblocajaxreload);
             }
@@ -537,89 +613,108 @@ var monTableau = {
           });
         }
       }
+
       fetch(url).then(function (response) {
         return response.json();
       }).then(function (data) {
         var config = data.shift();
         _this4.header = config.header;
+
         if (config.crayons !== undefined) {
           _this4.crayons = config.crayons;
         } else {
           _this4.crayons = [];
         }
+
         if (config.classes !== undefined) {
           _this4.classes = config.classes;
         } else {
           _this4.classes = [];
         }
+
         if (config.checkbox !== undefined) {
           _this4.checkbox = config.checkbox;
           Object.keys(_this4.checkbox).forEach(function (head) {
             _this4.Tcheckbox[head] = [];
           });
         }
+
         if (config.ordreCol !== undefined) {
           _this4.ordreCol = config.ordreCol;
         } else {
           _this4.ordreCol = [];
         }
+
         if (parseInt(id) > 0) {
           if (data.length > 0) {
             var i = trouver_index(_this4.table, id);
             _this4.table[i] = data[0];
           } else {
             var _i2 = trouver_index(_this4.table, id);
+
             _this4.table.splice(_i2, 1);
           }
+
           localforage.setItem(_this4.nameLocalStorage, JSON.stringify(_this4.table));
         } else {
           _this4.table = data;
+
           if (data[0] && data[0].search) {
             _this4.champ_search = 'search';
           }
         }
+
         if (config.filtreCol !== undefined) {
           _this4.filtreColType = config.filtreCol;
           _this4.filtreCol = [];
           Object.keys(_this4.filtreColType).forEach(function (col) {
             var Tval = [];
+
             _this4.table.forEach(function (t) {
               var valCol = t[_this4.champ_search][col];
+
               if (valCol) {
                 if (Tval.indexOf(valCol) === -1) {
                   Tval.push(valCol);
                 }
               }
             });
+
             _this4.filtreCol.push(col);
+
             _this4.filtreColVal[col] = Tval;
             _this4.filtreColSelected[col] = [];
           });
         }
+
         Vue.nextTick(function () {
           _this4.chargement = false;
           var filtreselect = localStorage.getItem('filtreselect_' + _this4.nameLocalStorage);
-          var Tfiltres = [];
-          // if (filtreselect) {
+          var 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 (_this4.filtreselect) {
             Tfiltres = recupJson(decodeURIComponent(_this4.filtreselect));
             localStorage.setItem('filtreselect_' + _this4.nameLocalStorage, JSON.stringify(Tfiltres));
           } else if (filtreselect) {
             Tfiltres = JSON.parse(filtreselect);
           }
+
           Tfiltres.forEach(function (col) {
             _this4.filtreColSelected[col.champ] = [].concat(_toConsumableArray(_this4.filtreColSelected[col.champ]), _toConsumableArray(col.valeurs));
           });
           _this4.filtreColModif++;
           _this4.ajaxCrayons = false;
+
           if (parseInt(_this4._id) > 0) {
             var _id = parseInt(_this4._id);
+
             var parPage = parseInt(_this4.parPage);
+
             if (parseInt(parPage)) {
               var ordre = 0;
               Object.values(_this4.table).forEach(function (d, i) {
@@ -627,28 +722,33 @@ var monTableau = {
                   ordre = i + 1;
                 }
               });
+
               if (ordre > parPage) {
                 var numPage = parseInt(ordre / parPage) + 1;
                 _this4.page = numPage;
               }
             }
-            _this4.selectLigne(_id, 'id');
-            // let url = new URL(window.location);
+
+            _this4.selectLigne(_id, 'id'); // let url = new URL(window.location);
             // url = url.href.replace('&_id=' + _id, '');
             // history.pushState({}, null, url);
+
           }
 
           if (_this4.nomblocajaxreload) {
             ajaxReload(_this4.nomblocajaxreload);
           }
+
           if (_this4.ordreCol) {
             Object.entries(_this4.ordreCol).forEach(function (_ref5) {
               var _ref6 = _slicedToArray(_ref5, 2),
-                col = _ref6[0],
-                sens = _ref6[1];
+                  col = _ref6[0],
+                  sens = _ref6[1];
+
               _this4.tri(col, sens);
             });
           }
+
           $('td.crayon-init').removeClass('crayon-init');
           console.timeEnd('Chargement de VueJs APRES Ajax');
         });
@@ -659,6 +759,7 @@ var monTableau = {
     setPages: function setPages() {
       var nombreDePages = Math.ceil(this.table.length / this.parPage);
       this.pages = [];
+
       for (var index = 1; index <= nombreDePages; index++) {
         this.pages.push(index);
       }
@@ -670,7 +771,9 @@ var monTableau = {
       var to = page * parPage;
       return tableau.slice(from, to);
     },
-    afficher_crayons: function afficher_crayons(name, id) {
+    afficher_crayons: function afficher_crayons(name, l) {
+      var id = l.crayons !== undefined && l.crayons[name] !== undefined ? l.crayons[name] : l.html.id;
+
       if (Object.keys(this.crayons).indexOf(name) !== -1) {
         return "crayon ".concat(this.crayons[name], "-").concat(name, "-").concat(id);
       }
@@ -678,27 +781,33 @@ var monTableau = {
     tri: function tri(col) {
       var sens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var 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: function ordreActif(col, sens) {
       var i = this.triProps.indexOf(col);
+
       if (i !== -1) {
         if (this.triOrders[i] === sens) {
           return 'active';
@@ -707,6 +816,7 @@ var monTableau = {
     },
     resetTri: function resetTri() {
       var _this5 = this;
+
       this.loadingVueSelect = false;
       this.table = orderBy(this.table, ['id'], '', this.champ_search);
       this.triOrders = [];
@@ -719,6 +829,7 @@ var monTableau = {
     selectLigne: function selectLigne(id, col) {
       if (col === 'id' && parseInt(id)) {
         var i = this.selectTr.indexOf(id);
+
         if (i !== -1) {
           this.selectTr.splice(i, 1);
         } else {
@@ -755,13 +866,16 @@ var monTableau = {
     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;
+
       var quoi = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'tableau';
       var $csv = [];
       var $header = [];
@@ -796,18 +910,23 @@ var monTableau = {
       } else {
         var x = toString(a).toLowerCase();
         var y = toString(b).toLowerCase();
+
         if (x < y) {
           return -1;
         }
+
         if (x > y) {
           return 1;
         }
+
         return 0;
       }
     },
     validerCheckboxCol: function validerCheckboxCol(head) {
       var _this7 = this;
+
       var tableau = this.tableau;
+
       if (this.Tcheckbox[head] !== undefined && this.Tcheckbox[head].length) {
         this.Tcheckbox[head] = [];
       } else {
@@ -830,7 +949,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\" 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 affich\xE9\"\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<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\n\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"genererPDF('table')\"\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=\"far fa-file-pdf rouge\" aria-hidden=\"true\" alt=\"pdf\"></i>\n\t\t\t</button>\n\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=\"checkbox[head] !== undefined\" :id=\"'filtreCol_'+head\" :class=\"classes[head]\">\n\t\t\t\t\t\t<input type=\"checkbox\" @click.stop=\"validerCheckboxCol(head)\" >\n\t\t\t\t\t\t<button @click.stop=\"checkboxValider(head, checkbox[head])\">Valider</button>\n\t\t\t\t\t\t</div>\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\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.crayons !== undefined && l.crayons[name] !== undefined ? l.crayons[name] : l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']\"  @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t<div v-if=\"checkbox[name] !== undefined\">\n\t\t\t\t\t\t<label v-if=\"td.split('-')[0] === 'dataid'\">\n\t\t\t\t\t\t\t<input type='checkbox'  v-model='Tcheckbox[name]' :value=\"td.split('-')[1]\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<div v-else v-html=\"td\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div v-else v-html=\"td\"></div>\n\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\" 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 affich\xE9\"\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<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\n\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"genererPDF('table')\"\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=\"far fa-file-pdf rouge\" aria-hidden=\"true\" alt=\"pdf\"></i>\n\t\t\t</button>\n\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=\"checkbox[head] !== undefined\" :id=\"'filtreCol_'+head\" :class=\"classes[head]\">\n\t\t\t\t\t\t<input type=\"checkbox\" @click.stop=\"validerCheckboxCol(head)\" >\n\t\t\t\t\t\t<button @click.stop=\"checkboxValider(head, checkbox[head])\">Valider</button>\n\t\t\t\t\t\t</div>\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\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), name, classes[name], l.classes !== undefined ? l.classes[name] : '']\"  @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t<div v-if=\"checkbox[name] !== undefined\">\n\t\t\t\t\t\t<label v-if=\"td.split('-')[0] === 'dataid'\">\n\t\t\t\t\t\t\t<input type='checkbox'  v-model='Tcheckbox[name]' :value=\"td.split('-')[1]\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<div v-else v-html=\"td\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div v-else v-html=\"td\"></div>\n\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: {
@@ -844,6 +963,7 @@ var gamuTable = {
     },
     rechargerJson_deux: function rechargerJson_deux(id) {
       var ajaxCrayons = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
       if (this.$refs.montableau_deux) {
         this.$refs.montableau_deux.ajaxCrayons = ajaxCrayons;
         this.$refs.montableau_deux.chargerJson(id);
diff --git a/json_gamutable.json.html b/json_gamutable.json.html
index 9fd23fe..7a24785 100644
--- a/json_gamutable.json.html
+++ b/json_gamutable.json.html
@@ -4,12 +4,14 @@
 "header":{
 "id": "_",
 "titre": "titre",
+"nom": "Auteur",
 "texte": "texte",
 "date": "date",
 "statut": "statut"
 },
 "crayons":{
-"titre" : "article"
+	"titre" : "article",
+	"nom": "auteur"
 },
 "ordreCol" : {
 	"titre" : "desc",
@@ -40,6 +42,7 @@
 "html": {
 	"id": #ID_ARTICLE,
 	"titre" : [(#TITRE|json_encode)],
+	"nom" : [(#NOM|json_encode)],
 	"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
 	"texte": [(#VAL{<a class="modalbox" title="Détail" href="[(#URL_PAGE{gamutable_texte}|parametre_url{id_article,#ID_ARTICLE})]">[(#TEXTE|couper{10})]</a>}|json_encode)],
 	"statut" : [(#GET{statut}|json_encode)]
@@ -47,9 +50,13 @@
 "classes": {
 	"texte": [(#STATUT|concat{-}|concat{#ID_ARTICLE}|json_encode)]
 },
+"crayons": {
+	"nom": #ID_AUTEUR
+},
 "search": {
 	"id": #ID_ARTICLE,
 	"titre" : [(#TITRE|json_encode)],
+	"nom" : [(#NOM|json_encode)],
 	"date" : [(#DATE|affdate{U}|json_encode)],
 	"texte": [(#TEXTE|couper{10}|json_encode)],
 	"statut" : [(#STATUT|json_encode)]