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

amelioration de l'organisation des div, ajout des class manquantes, css minimale

Browse source
This commit is contained in:
Christophe 2020-03-12 22:45:47 +01:00
parent 5e2e11f643
commit e772eb9260
3 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/gamutable.css
View file

@ -1,3 +1,7 @@
.gamutable--sousTable {
display: flex;
justify-content: space-between;
}
.gamutable--pagination {
display: flex;
}

11
js/gamutable.es6.js
View file

@ -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,14 +208,13 @@ let monTableau = {
}
},
template: `
<div>
<div class="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 type="text" v-model="search" placeholder="Rechercher">
<button class="btn" type="button" @click.stop="resetTri()">Réinitialiser les tris des colonnes</button>
<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>
@ -235,8 +235,9 @@ let monTableau = {
</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>

3
js/gamutable.js
View file

@ -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',