From 6726ab666d69b2a6dce724d6ce776a858d7834ef Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Fri, 3 Jul 2020 09:35:31 +0200
Subject: [PATCH] Recuperation du json et d'un modele html pour afficher en
 bloc (div) au lieu d'un table

---
 js/gamutable.es6.js | 28 +++++++++++++++++++++++++
 js/gamutable.js     | 51 ++++++++++++++++++++++++++++++++-------------
 2 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index 1c80ec8..489c379 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -167,10 +167,20 @@ let monTableau = {
 			selectTr: [],
 			champ_search: 'html',
 			chargement: true,
+			vuebloc: '',
 		};
 	},
 	mounted() {
 		this.chargerJson();
+
+		let url = 'spip.php?page=vuebloc';
+		fetch(url)
+			.then((response) => response.text())
+			.then((data) => {
+				if (data) {
+					this.vuebloc = data;
+				}
+			});
 	},
 	computed: {
 		tableau: function () {
@@ -329,6 +339,16 @@ 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]);
+			});
+			//console.log(html);
+			//console.log('coucou');
+			return html;
+		},
 	},
 	template: `
 	<div class="gamutable">
@@ -352,6 +372,14 @@ let monTableau = {
 				Base de données synchronisée
 			</span>
 		</div>
+		<div class="vueBlocs">
+			<div class="toto"
+			v-for="(ligne) in tableau"
+			:key=ligne.id
+			v-html=replaceBloc(ligne.html)
+			>
+			</div>
+		</div>
 		<table class="table table--zebra">
 			<thead>
 				<tr>
diff --git a/js/gamutable.js b/js/gamutable.js
index 3703aa8..3c2a9cc 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -211,15 +211,26 @@ var monTableau = {
       triProps: [],
       selectTr: [],
       champ_search: 'html',
-      chargement: true
+      chargement: true,
+      vuebloc: ''
     };
   },
   mounted: function mounted() {
+    var _this = this;
+
     this.chargerJson();
+    var url = 'spip.php?page=vuebloc';
+    fetch(url).then(function (response) {
+      return response.text();
+    }).then(function (data) {
+      if (data) {
+        _this.vuebloc = data;
+      }
+    });
   },
   computed: {
     tableau: function tableau() {
-      var _this = this;
+      var _this2 = this;
 
       this.setPages();
 
@@ -228,7 +239,7 @@ var monTableau = {
       }
 
       return this.pagination(this.table.filter(function (ligne) {
-        return Object.values(ligne[_this.champ_search]).toString().toLowerCase().indexOf(_this.search.toLowerCase()) < 0 ? false : true;
+        return Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;
       }));
     }
   },
@@ -252,7 +263,7 @@ var monTableau = {
   },
   methods: {
     chargerJson: function chargerJson(id) {
-      var _this2 = this;
+      var _this3 = this;
 
       var url = this.apiuri;
 
@@ -288,32 +299,32 @@ var monTableau = {
         return response.json();
       }).then(function (data) {
         var config = data.shift();
-        _this2.header = config.header;
+        _this3.header = config.header;
 
         if (config.crayons !== undefined) {
-          _this2.crayons = config.crayons;
+          _this3.crayons = config.crayons;
         }
 
         if (config.classes !== undefined) {
-          _this2.classes = config.classes;
+          _this3.classes = config.classes;
         }
 
         if (parseInt(id) > 0) {
-          var i = _this2.table.findIndex(function (ligne) {
+          var i = _this3.table.findIndex(function (ligne) {
             return ligne.html.id === parseInt(id);
           });
 
-          Vue.set(_this2.table, i, data[0]);
+          Vue.set(_this3.table, i, data[0]);
         } else {
-          _this2.table = data;
+          _this3.table = data;
 
           if (data[0] && data[0].search) {
-            _this2.champ_search = 'search';
+            _this3.champ_search = 'search';
           }
         }
 
         Vue.nextTick(function () {
-          _this2.chargement = false;
+          _this3.chargement = false;
           console.timeEnd('Chargement de VueJs APRES Ajax');
         });
       }).catch(function (error) {
@@ -378,7 +389,7 @@ var monTableau = {
       }
     },
     exportCSV: function exportCSV() {
-      var _this3 = this;
+      var _this4 = this;
 
       var $csv = [];
       var $header = [];
@@ -388,16 +399,26 @@ var monTableau = {
       });
       $tableau = this.tableau.reduce(function (acc, ligne) {
         var $uneLigne = [];
-        Object.values(ligne[_this3.champcsv]).forEach(function (l) {
+        Object.values(ligne[_this4.champcsv]).forEach(function (l) {
           return $uneLigne.push(l);
         });
         return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
       }, []);
       $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]);
+      }); //console.log(html);
+      //console.log('coucou');
+
+      return html;
     }
   },
-  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<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>"
+  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<div class=\"vueBlocs\">\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\">\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 app = new Vue({
   el: '#app',