recup de la partie bloc de la vue en bloc

inclure/gamutable.html

@@ -9,6 +9,7 @@
 		champcsv="#ENV{champcsv,html}"
 		delimitercsv="#ENV{delimitercsv,','}"
 		namecsv="#ENV{namecsv,export.csv}"
+		vuebloc="#ENV{vuebloc}"
 		url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
 		url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
 		ref="montableau"

js/gamutable.es6.js

@@ -174,6 +174,10 @@ let monTableau = {
 		url_sort_desc: {
 			type: String,
 		},
+		vueblocdefaut: {
+			type: String,
+			default: 'tableau',
+		},
 	},
 	data: function () {
 		return {
@@ -192,6 +196,7 @@ let monTableau = {
 			champ_search: 'html',
 			chargement: true,
 			nameLocalStorage: this.calculer_nameLocalStorage(),
+			quelleVue: this.vueblocdefaut,
 		};
 	},
 	mounted() {
@@ -380,6 +385,17 @@ let monTableau = {
 			$csv = [[...$header], ...$tableau];
 			exporterCSV($csv, this.delimitercsv, this.namecsv);
 		},
+		replaceBloc(ligne) {
+			let html = this.vuebloc;
+			console.log(ligne);
+			Object.keys(ligne).forEach((key) => {
+				html = html.replace(`@@${key}@@`, ligne[key]);
+			});
+			return html;
+		},
+		changerVue(vue) {
+			this.quelleVue = vue;
+		},
 	},
 	template: `
 	<div class="gamutable">
@@ -388,7 +404,23 @@ let monTableau = {
 				<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>
+
+			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
+				title="Réinitialiser les tris des colonnes">
+				<i class="fa fa-repeat fas fa-redo">
+			</button>
+
+			<button class="btn gamutable--vueTable" title="Switcher en Vue tableau"
+				@click.stop="changerVue('tableau')"
+				v-show="this.quelleVue === 'bloc'">
+				<i class="fas fa fa-table">
+			</button>
+
+			<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc"
+				@click.stop="changerVue('bloc')"
+				v-show="this.quelleVue === 'tableau'">
+				<i class="fas fa fa-th-large">
+			</button>
 			<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV()"
 				title="Exporter le tableau affiché en csv"
 			>
@@ -396,43 +428,45 @@ let monTableau = {
 			</button>
 			<span v-show="chargement" class="rouge">
 				<i class="fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin"></i>
+				<span class="texteMajBDD">
 					Mise à jour de la base de donnée
 				</span>
-			<span v-show="!chargement" class="verte">
+			</span>
-				<i class="fa fa-check"></i>
+			<span v-show="!chargement" class="btn verte" style="cursor:auto;"
-				Base de données synchronisée
+				title="Base de donnée synchronisée !"
+			>
+				<i class="fa fas fa-database"></i>
 			</span>
 		</div>
-		<table class="table table--zebra">
+		<div class="vueBlocs" v-if="quelleVue === 'bloc'">
+			<div class="toto"
+			v-for="(ligne) in tableau"
+			:key=ligne.id
+			v-html=replaceBloc(ligne.html)
+			>
+			</div>
+		</div>
+		<table class="table table--zebra" v-if="quelleVue === 'tableau'">
 			<thead>
 				<tr>
 					<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
-						<div>
+						<span v-html="label"></span>
-							<div class="label_tete_colonne" v-html="label" @click.stop="tri(head)"></div>
+						<span class="iconeTri">
-							<div class="iconeTri">
+							<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
-								<svg class="tri_col" :class="ordreActif(head, 'asc')" width="1rem" height="1rem"  @click.stop="tri(head,'asc')">
+							<i class="fa fa-sort-desc fa-sort-down":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
-									<title></title>
+						</span>
-									<use :xlink:href="url_sort_asc" />
-								</svg>
-
-								<svg class="tri_col" :class="ordreActif(head, 'desc')" width="1rem" height="1rem"  @click.stop="tri(head,'desc')">
-									<title></title>
-									<use :xlink:href="url_sort_desc" />
-								</svg>
-							</div>
-						</div>
 					</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="l in tableau" :key="l.html.id" :id="'id_'+l.html.id" :data-id="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
+				<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, classes[name], l.classes !== undefined ? l.classes[name] : '']" v-html="td" @click="selectLigne(l.html.id,name)">
+					<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name, classes[name]]" v-html="td" @click="selectLigne(l.html.id,name)">
 					</td>
 				</tr>
 			</tbody>
 		</table>
 		<div class="gamutable--sousTable">
-			<div class="gamutable-nbrMax">{{tableau.length}} / {{table.length}} éléments</div>
+			<div class="gamutable-nbrMax">{{tableau.length}} éléments</div>
 			<div class="gamutable--pagination">
 				<div class="page-item">
 					<button type="button" class="page-link" v-if="page != 1" @click="page=1"> Start </button>

js/gamutable.js

@@ -221,6 +221,10 @@ var monTableau = {
     },
     url_sort_desc: {
       type: String
+    },
+    vueblocdefaut: {
+      type: String,
+      default: 'tableau'
     }
   },
   data: function data() {
@@ -239,7 +243,8 @@ var monTableau = {
       selectTr: [],
       champ_search: 'html',
       chargement: true,
-      nameLocalStorage: this.calculer_nameLocalStorage()
+      nameLocalStorage: this.calculer_nameLocalStorage(),
+      quelleVue: this.vueblocdefaut
     };
   },
   mounted: function mounted() {
@@ -456,9 +461,20 @@ var monTableau = {
       }, []);
       $csv = [[].concat($header)].concat(_toConsumableArray($tableau));
       exporterCSV($csv, this.delimitercsv, this.namecsv);
+    },
+    replaceBloc: function replaceBloc(ligne) {
+      var html = this.vuebloc;
+      console.log(ligne);
+      Object.keys(ligne).forEach(function (key) {
+        html = html.replace("@@".concat(key, "@@"), ligne[key]);
+      });
+      return html;
+    },
+    changerVue: function changerVue(vue) {
+      this.quelleVue = vue;
     }
   },
-  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\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\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<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\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\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,classes[head]]\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<div class=\"label_tete_colonne\" v-html=\"label\" @click.stop=\"tri(head)\"></div>\n\t\t\t\t\t\t\t<div class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'asc')\" width=\"1rem\" height=\"1rem\"  @click.stop=\"tri(head,'asc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_asc\" />\n\t\t\t\t\t\t\t\t</svg>\n\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'desc')\" width=\"1rem\" height=\"1rem\"  @click.stop=\"tri(head,'desc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_desc\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\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\" :id=\"'id_'+l.html.id\" :data-id=\"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\"> 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\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 fa-repeat fas fa-redo\">\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-show=\"this.quelleVue === 'bloc'\">\n\t\t\t\t<i class=\"fas fa fa-table\">\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-show=\"this.quelleVue === 'tableau'\">\n\t\t\t\t<i class=\"fas fa fa-th-large\">\n\t\t\t</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\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<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</div>\n\t\t<div class=\"vueBlocs\" v-if=\"quelleVue === 'bloc'\">\n\t\t\t<div class=\"toto\"\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 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 fa-sort-up\" :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 fa-sort-down\":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, 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}} \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 gamuTable = {
   components: {