vue bloc OK, chargement ajax du bloc texte html
This commit is contained in:
parent
09db440963
commit
3f98e272d9
6 changed files with 86 additions and 24 deletions
|
|
@ -66,4 +66,18 @@ td.icone i {
|
|||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.vueBlocs {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vueBlocs-unbloc {
|
||||
width: 23%;
|
||||
border: 1px solid #cecece;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=gamutable.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EACC,eAAe;ACEhB;;ADHA;EAGE,oBAAa;EAAb,aAAa;ACIf;;ADPA;EAME,oBAAY;MAAZ,YAAY;ACKd;;ADXA;EASE,YAAY;EACZ,WAAW;ACMb;;ADhBA;EAcE,eAAe;EACf,aAAa;ACMf;;ADrBA;EAkBE,UAAU;ACOZ;;ADJA;EACC,0CAA0C;ACO3C;;ADJA;EACC,eAAe;ACOhB;;ADJA;EACC,WAAW;EACX,kBAAkB;ACOnB;;ADLA;EACC,cAAA;ACQD;;ADLA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACQnB;;ADNA;EACC,iBAAiB;ACSlB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n",".gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table {\n font-size: 1rem;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntd.icone {\n /*padding: 0;*/\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n"]}
|
||||
{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EACC,eAAe;ACEhB;;ADHA;EAGE,oBAAa;EAAb,aAAa;ACIf;;ADPA;EAME,oBAAY;MAAZ,YAAY;ACKd;;ADXA;EASE,YAAY;EACZ,WAAW;ACMb;;ADhBA;EAcE,eAAe;EACf,aAAa;ACMf;;ADrBA;EAkBE,UAAU;ACOZ;;ADJA;EACC,0CAA0C;ACO3C;;ADJA;EACC,eAAe;ACOhB;;ADJA;EACC,WAAW;EACX,kBAAkB;ACOnB;;ADLA;EACC,cAAA;ACQD;;ADLA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACQnB;;ADNA;EACC,iBAAiB;ACSlB;;ADNA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACShB;;ADPA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACUnB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n\n.vueBlocs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n.vueBlocs-unbloc {\n\twidth: 23%;\n\tborder: 1px solid #cecece;\n\tmargin-bottom: 1rem;\n\tmargin-right: 1rem;\n}\n",".gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table {\n font-size: 1rem;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntd.icone {\n /*padding: 0;*/\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n\n.vueBlocs {\n display: flex;\n flex-wrap: wrap;\n}\n\n.vueBlocs-unbloc {\n width: 23%;\n border: 1px solid #cecece;\n margin-bottom: 1rem;\n margin-right: 1rem;\n}\n"]}
|
||||
|
|
@ -52,3 +52,14 @@ td.icone > * {
|
|||
td.icone i {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.vueBlocs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.vueBlocs-unbloc {
|
||||
width: 23%;
|
||||
border: 1px solid #cecece;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
champcsv="#ENV{champcsv,html}"
|
||||
delimitercsv="#ENV{delimitercsv,','}"
|
||||
namecsv="#ENV{namecsv,export.csv}"
|
||||
vuebloc="#ENV{vuebloc}"
|
||||
urlvuebloc="[(#ENV{vuebloc})]"
|
||||
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
|
||||
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
|
||||
ref="montableau"
|
||||
|
|
|
|||
|
|
@ -146,7 +146,11 @@ function trouver_index(table, id) {
|
|||
});
|
||||
return i;
|
||||
}
|
||||
|
||||
String.fromHtmlEntities = function (string) {
|
||||
return (string + '').replace(/&#\d+;/gm, function (s) {
|
||||
return String.fromCharCode(s.match(/\d+/gm)[0]);
|
||||
});
|
||||
};
|
||||
let monTableau = {
|
||||
props: {
|
||||
tparpage: {
|
||||
|
|
@ -174,6 +178,9 @@ let monTableau = {
|
|||
url_sort_desc: {
|
||||
type: String,
|
||||
},
|
||||
urlvuebloc: {
|
||||
type: String,
|
||||
},
|
||||
vueblocdefaut: {
|
||||
type: String,
|
||||
default: 'tableau',
|
||||
|
|
@ -197,10 +204,19 @@ let monTableau = {
|
|||
chargement: true,
|
||||
nameLocalStorage: this.calculer_nameLocalStorage(),
|
||||
quelleVue: this.vueblocdefaut,
|
||||
vuebloc: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.chargerJson();
|
||||
if (this.urlvuebloc) {
|
||||
fetch(this.urlvuebloc)
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
this.vuebloc = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableau: function () {
|
||||
|
|
@ -387,7 +403,6 @@ let monTableau = {
|
|||
},
|
||||
replaceBloc(ligne) {
|
||||
let html = this.vuebloc;
|
||||
console.log(ligne);
|
||||
Object.keys(ligne).forEach((key) => {
|
||||
html = html.replace(`@@${key}@@`, ligne[key]);
|
||||
});
|
||||
|
|
@ -412,12 +427,14 @@ let monTableau = {
|
|||
|
||||
<button class="btn gamutable--vueTable" title="Switcher en Vue tableau"
|
||||
@click.stop="changerVue('tableau')"
|
||||
v-if="this.vuebloc"
|
||||
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-if="this.vuebloc"
|
||||
v-show="this.quelleVue === 'tableau'">
|
||||
<i class="fas fa fa-th-large">
|
||||
</button>
|
||||
|
|
@ -439,7 +456,7 @@ let monTableau = {
|
|||
</span>
|
||||
</div>
|
||||
<div class="vueBlocs" v-if="quelleVue === 'bloc'">
|
||||
<div class="toto"
|
||||
<div class="vueBlocs-unbloc"
|
||||
v-for="(ligne) in tableau"
|
||||
:key=ligne.id
|
||||
v-html=replaceBloc(ligne.html)
|
||||
|
|
|
|||
|
|
@ -195,6 +195,12 @@ function trouver_index(table, id) {
|
|||
return i;
|
||||
}
|
||||
|
||||
String.fromHtmlEntities = function (string) {
|
||||
return (string + '').replace(/&#\d+;/gm, function (s) {
|
||||
return String.fromCharCode(s.match(/\d+/gm)[0]);
|
||||
});
|
||||
};
|
||||
|
||||
var monTableau = {
|
||||
props: {
|
||||
tparpage: {
|
||||
|
|
@ -222,6 +228,9 @@ var monTableau = {
|
|||
url_sort_desc: {
|
||||
type: String
|
||||
},
|
||||
urlvuebloc: {
|
||||
type: String
|
||||
},
|
||||
vueblocdefaut: {
|
||||
type: String,
|
||||
default: 'tableau'
|
||||
|
|
@ -244,15 +253,27 @@ var monTableau = {
|
|||
champ_search: 'html',
|
||||
chargement: true,
|
||||
nameLocalStorage: this.calculer_nameLocalStorage(),
|
||||
quelleVue: this.vueblocdefaut
|
||||
quelleVue: this.vueblocdefaut,
|
||||
vuebloc: ''
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
var _this = this;
|
||||
|
||||
this.chargerJson();
|
||||
|
||||
if (this.urlvuebloc) {
|
||||
fetch(this.urlvuebloc).then(function (response) {
|
||||
return response.text();
|
||||
}).then(function (data) {
|
||||
console.log(data);
|
||||
_this.vuebloc = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableau: function tableau() {
|
||||
var _this = this;
|
||||
var _this2 = this;
|
||||
|
||||
this.setPages();
|
||||
|
||||
|
|
@ -261,7 +282,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;
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
|
@ -290,7 +311,7 @@ var monTableau = {
|
|||
return this.apiuri.match(/.*page=(.*)/)[1];
|
||||
},
|
||||
chargerJson: function chargerJson(id) {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
var url = this.apiuri;
|
||||
|
||||
|
|
@ -326,40 +347,40 @@ 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) {
|
||||
if (data.length > 0) {
|
||||
var i = trouver_index(_this2.table, id);
|
||||
_this2.table[i] = data[0];
|
||||
var i = trouver_index(_this3.table, id);
|
||||
_this3.table[i] = data[0];
|
||||
} else {
|
||||
var _i2 = trouver_index(_this2.table, id);
|
||||
var _i2 = trouver_index(_this3.table, id);
|
||||
|
||||
console.log('index ', _i2);
|
||||
|
||||
_this2.table.splice(_i2, 1);
|
||||
_this3.table.splice(_i2, 1);
|
||||
}
|
||||
} 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;
|
||||
|
||||
if ($_id > 0) {
|
||||
_this2.selectLigne($_id, 'id');
|
||||
_this3.selectLigne($_id, 'id');
|
||||
|
||||
var _url = new URL(window.location);
|
||||
|
||||
|
|
@ -444,7 +465,7 @@ var monTableau = {
|
|||
}
|
||||
},
|
||||
exportCSV: function exportCSV() {
|
||||
var _this3 = this;
|
||||
var _this4 = this;
|
||||
|
||||
var $csv = [];
|
||||
var $header = [];
|
||||
|
|
@ -454,7 +475,7 @@ 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)]);
|
||||
|
|
@ -464,7 +485,6 @@ var monTableau = {
|
|||
},
|
||||
replaceBloc: function replaceBloc(ligne) {
|
||||
var html = this.vuebloc;
|
||||
console.log(ligne);
|
||||
Object.keys(ligne).forEach(function (key) {
|
||||
html = html.replace("@@".concat(key, "@@"), ligne[key]);
|
||||
});
|
||||
|
|
@ -474,7 +494,7 @@ var monTableau = {
|
|||
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\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>"
|
||||
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-if=\"this.vuebloc\"\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-if=\"this.vuebloc\"\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=\"vueBlocs-unbloc\"\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: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue