From 68dd0f1e04f798dafd93354ee3a0b6f9d26c45c2 Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Wed, 11 Mar 2020 10:35:18 +0100
Subject: [PATCH] header sous la forme : "champ":"label"

---
 js/gamutable.es6.js      |  4 ++--
 js/gamutable.js          |  2 +-
 json_gamutable.json.html | 35 +++++++++++++++++------------------
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index 76f458a..b16dce5 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -186,8 +186,8 @@ let monTableau = {
 			<table class="table table--zebra">
 				<thead>
 					<tr>
-						<th v-for="(head,i) in header" :key="'head_'+i" :class="head">
-							{{head}}
+						<th v-for="(label,head,i) in header" :key="'head_'+i" :class="head">
+							{{label}}
 							<span class="iconeTri">
 								<i class="fa fa-sort-asc" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
 								<i class="fa fa-sort-desc":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
diff --git a/js/gamutable.js b/js/gamutable.js
index cf36773..7e97b48 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -199,7 +199,7 @@ var monTableau = {
       this.triProps = [];
     }
   },
-  template: "\n\t<div>\n\t\t<h3> {{ message }}</h3>\n\t\t<div class=\"table\">\n\t\t\t<div class=\"gamutable--surTable\">\n\t\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t\t</select>\n\t\t\t\t<input type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t</div>\n\t\t\t<table class=\"table table--zebra\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th v-for=\"(head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t\t{{head}}\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\" :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\":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</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.id\">\n\t\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\">\n\t\t\t\t\t\t\t{{td}}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div>{{table.length}} \xE9l\xE9ments</div>\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>\n\t\t<h3> {{ message }}</h3>\n\t\t<div class=\"table\">\n\t\t\t<div class=\"gamutable--surTable\">\n\t\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t\t</select>\n\t\t\t\t<input type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t</div>\n\t\t\t<table class=\"table table--zebra\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\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\t{{label}}\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\" :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\":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</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.id\">\n\t\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\">\n\t\t\t\t\t\t\t{{td}}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div>{{table.length}} \xE9l\xE9ments</div>\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 bca0ba2..563fc52 100644
--- a/json_gamutable.json.html
+++ b/json_gamutable.json.html
@@ -1,22 +1,21 @@
 #HTTP_HEADER{Content-Type: application/json; charset=#CHARSET}
-[
-{
-"header":[
-"id",
-"titre",
-"date",
-"statut",
-"genre",
-"nom_souscripteur",
-"prenom",
-"date_naissance",
-"lieu_naissance",
-"representant_legal",
-"type",
-"email",
-"telephone",
-"adresse"
-],
+[{
+"header":{
+"id": "_",
+"titre": "titre",
+"date": "date",
+"statut": "statut",
+"genre": "genre",
+"nom_souscripteur": "nom du souscripteur",
+"prenom": "prénom",
+"date_naissance": "ddn",
+"lieu_naissance": "Lieu",
+"representant_legal": "R.Légal",
+"type": "type",
+"email": "email",
+"telephone": "téléphone",
+"adresse": "Adresse"
+},
 "crayons":{
 "titre" : "souscription",
 "prenom" : "souscription"