From e772eb926027b10db32068ed3e3aafc15c89da4d Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Thu, 12 Mar 2020 22:45:47 +0100
Subject: [PATCH] amelioration de l'organisation des div, ajout des class
 manquantes, css minimale

---
 css/gamutable.css   |  4 +++
 js/gamutable.es6.js | 59 +++++++++++++++++++++++----------------------
 js/gamutable.js     |  3 ++-
 3 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/css/gamutable.css b/css/gamutable.css
index 5dc17e0..aafc9c5 100644
--- a/css/gamutable.css
+++ b/css/gamutable.css
@@ -1,3 +1,7 @@
+.gamutable--sousTable {
+	display: flex;
+	justify-content: space-between;
+}
 .gamutable--pagination {
 	display: flex;
 }
diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index 7e06599..dcbcf97 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -150,6 +150,7 @@ let monTableau = {
 					this.crayons = config.crayons;
 					if (parseInt(id) > 0) {
 						let i = this.table.findIndex(ligne => ligne.id === parseInt(id));
+						console.log(data[0]);
 						Vue.set(this.table, i, data[0]);
 					} else {
 						this.table = data;
@@ -207,36 +208,36 @@ let monTableau = {
 		}
 	},
 	template: `
-	<div>
-		<div class="table">
-			<div class="gamutable--surTable">
-				<select id="parPage" v-model="parPageSelect">
-					<option v-for="v in tparpage" :key="v">{{v}}</option>
-				</select>
-				<input type="text" v-model="search" placeholder="Rechercher">
-				<button class="btn" type="button" @click.stop="resetTri()">Réinitialiser les tris des colonnes</button>
-			</div>
-			<table class="table table--zebra">
-				<thead>
-					<tr>
-						<th v-for="(label,head,i) in header" :key="'head_'+i" :class="head">
-							<span v-html="label"></span>
-							<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>
-							</span>
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="l in tableau" :key="l.id">
-						<td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td">
-						</td>
-					</tr>
-				</tbody>
-			</table>
+	<div class="gamutable">
+		<div class="gamutable--surTable">
+			<select id="parPage" v-model="parPageSelect">
+				<option v-for="v in tparpage" :key="v">{{v}}</option>
+			</select>
+			<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher">
+			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()">Réinitialiser les tris des colonnes</button>
+		</div>
+		<table class="table table--zebra">
+			<thead>
+				<tr>
+					<th v-for="(label,head,i) in header" :key="'head_'+i" :class="head">
+						<span v-html="label"></span>
+						<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>
+						</span>
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="l in tableau" :key="l.id">
+					<td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td">
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<div class="gamutable--sousTable">
+			<div class="gamutable-nbrMax">{{table.length}} éléments</div>
 			<div class="gamutable--pagination">
-				<div>{{table.length}} éléments</div>
 				<div class="page-item">
 					<button type="button" class="page-link" v-if="page != 1" @click="page=1"> Start </button>
 					<button type="button" class="page-link" v-if="page != 1" @click="page--"> Previous </button>
diff --git a/js/gamutable.js b/js/gamutable.js
index 58ebf0e..bde4557 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -179,6 +179,7 @@ var monTableau = {
             return ligne.id === parseInt(id);
           });
 
+          console.log(data[0]);
           Vue.set(_this2.table, i, data[0]);
         } else {
           _this2.table = data;
@@ -241,7 +242,7 @@ var monTableau = {
       this.triProps = [];
     }
   },
-  template: "\n\t<div>\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<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\" :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</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 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\">\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\">\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',