SPIP/gamutable
SPIP/gamutable
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Recuperation du json et d'un modele html pour afficher en bloc (div) au lieu d'un table

Browse source
This commit is contained in:
Christophe 2020-07-03 09:35:31 +02:00
parent 447f5b549e
commit 6726ab666d
2 changed files with 64 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
js/gamutable.es6.js
View file

@ -167,10 +167,20 @@ let monTableau = {
selectTr: [], selectTr: [],
champ_search: 'html', champ_search: 'html',
chargement: true, chargement: true,
vuebloc: '',
}; };
}, },
mounted() { mounted() {
this.chargerJson(); this.chargerJson();
let url = 'spip.php?page=vuebloc';
fetch(url)
.then((response) => response.text())
.then((data) => {
if (data) {
this.vuebloc = data;
}
});
}, },
computed: { computed: {
tableau: function () { tableau: function () {
@ -329,6 +339,16 @@ let monTableau = {
$csv = [[...$header], ...$tableau]; $csv = [[...$header], ...$tableau];
exporterCSV($csv, this.delimitercsv, this.namecsv); 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: ` template: `
<div class="gamutable"> <div class="gamutable">
@ -352,6 +372,14 @@ let monTableau = {
Base de données synchronisée Base de données synchronisée
</span> </span>
</div> </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"> <table class="table table--zebra">
<thead> <thead>
<tr> <tr>

51
js/gamutable.js
View file

@ -211,15 +211,26 @@ var monTableau = {
triProps: [], triProps: [],
selectTr: [], selectTr: [],
champ_search: 'html', champ_search: 'html',
chargement: true chargement: true,
vuebloc: ''
}; };
}, },
mounted: function mounted() { mounted: function mounted() {
var _this = this;
this.chargerJson(); 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: { computed: {
tableau: function tableau() { tableau: function tableau() {
var _this = this; var _this2 = this;
this.setPages(); this.setPages();
@ -228,7 +239,7 @@ var monTableau = {
} }
return this.pagination(this.table.filter(function (ligne) { 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: { methods: {
chargerJson: function chargerJson(id) { chargerJson: function chargerJson(id) {
var _this2 = this; var _this3 = this;
var url = this.apiuri; var url = this.apiuri;
@ -288,32 +299,32 @@ var monTableau = {
return response.json(); return response.json();
}).then(function (data) { }).then(function (data) {
var config = data.shift(); var config = data.shift();
_this2.header = config.header; _this3.header = config.header;
if (config.crayons !== undefined) { if (config.crayons !== undefined) {
_this2.crayons = config.crayons; _this3.crayons = config.crayons;
} }
if (config.classes !== undefined) { if (config.classes !== undefined) {
_this2.classes = config.classes; _this3.classes = config.classes;
} }
if (parseInt(id) > 0) { if (parseInt(id) > 0) {
var i = _this2.table.findIndex(function (ligne) { var i = _this3.table.findIndex(function (ligne) {
return ligne.html.id === parseInt(id); return ligne.html.id === parseInt(id);
}); });
Vue.set(_this2.table, i, data[0]); Vue.set(_this3.table, i, data[0]);
} else { } else {
_this2.table = data; _this3.table = data;
if (data[0] && data[0].search) { if (data[0] && data[0].search) {
_this2.champ_search = 'search'; _this3.champ_search = 'search';
} }
} }
Vue.nextTick(function () { Vue.nextTick(function () {
_this2.chargement = false; _this3.chargement = false;
console.timeEnd('Chargement de VueJs APRES Ajax'); console.timeEnd('Chargement de VueJs APRES Ajax');
}); });
}).catch(function (error) { }).catch(function (error) {
@ -378,7 +389,7 @@ var monTableau = {
} }
}, },
exportCSV: function exportCSV() { exportCSV: function exportCSV() {
var _this3 = this; var _this4 = this;
var $csv = []; var $csv = [];
var $header = []; var $header = [];
@ -388,16 +399,26 @@ var monTableau = {
}); });
$tableau = this.tableau.reduce(function (acc, ligne) { $tableau = this.tableau.reduce(function (acc, ligne) {
var $uneLigne = []; var $uneLigne = [];
Object.values(ligne[_this3.champcsv]).forEach(function (l) { Object.values(ligne[_this4.champcsv]).forEach(function (l) {
return $uneLigne.push(l); return $uneLigne.push(l);
}); });
return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]); return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
}, []); }, []);
$csv = [[].concat($header)].concat(_toConsumableArray($tableau)); $csv = [[].concat($header)].concat(_toConsumableArray($tableau));
exporterCSV($csv, this.delimitercsv, this.namecsv); 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({ var app = new Vue({
el: '#app', el: '#app',