meutel/bouquins-bchs
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sort tables

Browse Source
This commit is contained in:
Meutel 2017-01-13 21:17:07 +01:00
parent d23aa7f0ec
commit 188eadc4c1
2 changed files with 63 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -28,7 +28,10 @@
</nav>
<table class="table table-striped" v-if="series.length > 0">
<tr>
<th>Nom</th>
<th>
<a href="#" @click="sortBy('name')">Nom</a>
<span v-if="sort_by == 'name'" :class="['glyphicon', { 'glyphicon-chevron-up': order_desc , 'glyphicon-chevron-down': !order_desc}]"></span>
</th>
<th>Livre(s)</th>
<th>Auteur(s)</th>
</tr>
@ -48,7 +51,10 @@
</table>
<table class="table table-striped" v-if="authors.length > 0">
<tr>
<th>Nom</th>
<th>
<a href="#" @click="sortBy('name')">Nom</a>
<span v-if="sort_by == 'name'" :class="['glyphicon', { 'glyphicon-chevron-up': order_desc , 'glyphicon-chevron-down': !order_desc}]"></span>
</th>
<th>Livre(s)</th>
</tr>
<tr v-for="author in authors">
@ -61,7 +67,10 @@
</table>
<table class="table table-striped" v-if="books.length > 0">
<tr>
<th>Titre</th>
<th>
<a href="#" @click="sortBy('title')">Nom</a>
<span v-if="sort_by == 'title'" :class="['glyphicon', { 'glyphicon-chevron-up': order_desc , 'glyphicon-chevron-down': !order_desc}]"></span>
</th>
<th>Auteur(s)</th>
<th>Serie</th>
</tr>

65
index.js
View File

@ -6,7 +6,9 @@ var app = new Vue({
series: [],
booksCount: 0,
page: 1,
perpage: 20
perpage: 20,
sort_by: null,
order_desc: false
},
methods: {
sendQuery: function(url, error, success) {
@ -52,43 +54,70 @@ var app = new Vue({
seriesSuccess: function(resp) {
this.series = resp;
},
prevPage: function() {
if (this.page > 1) {
this.page--;
sortBy: function(col) {
if (this.sort_by == col) {
if (this.order_desc) {
this.order_desc = false;
this.sort_by = null;
} else {
this.order_desc = true;
}
} else {
this.order_desc = false;
this.sort_by = col;
}
this.reload();
},
reload: function() {
if (this.books.length > 0)
this.loadBooks();
if (this.authors.length > 0)
this.loadAuthors();
if (this.series.length > 0)
this.loadSeries();
},
prevPage: function() {
if (this.page > 1) {
this.page--;
this.reload();
}
},
nextPage: function() {
this.page++;
if (this.books.length > 0)
this.loadBooks();
if (this.authors.length > 0)
this.loadAuthors();
if (this.series.length > 0)
this.loadSeries();
this.reload();
},
order: function(query) {
if (this.order_desc)
return query + '&order=desc';
return query;
},
sort: function(query) {
if (this.sort_by)
return query + '&sort=' + this.sort_by;
return query;
},
paginate: function(query) {
return query + '?page=' + this.page + '&perpage=' + this.perpage;
},
params: function(url) {
return this.order(this.sort(this.paginate(url)));
},
loadAuthors: function() {
this.sendQuery('cgi-bin/bouquins/authors?page=' + this.page + '&perpage=' + this.perpage,
this.stdError, this.authorsSuccess);
this.sendQuery(this.params('cgi-bin/bouquins/authors'), this.stdError, this.authorsSuccess);
},
loadBooks: function() {
this.sendQuery('cgi-bin/bouquins/books?page=' + this.page + '&perpage=' + this.perpage,
this.stdError, this.booksSuccess);
this.sendQuery(this.params('cgi-bin/bouquins/books'), this.stdError, this.booksSuccess);
},
loadSeries: function() {
this.sendQuery('cgi-bin/bouquins/series?page=' + this.page + '&perpage=' + this.perpage,
this.stdError, this.seriesSuccess);
this.sendQuery(this.params('cgi-bin/bouquins/series'), this.stdError, this.seriesSuccess);
},
showSeries: function() {
this.books = [];
this.authors = [];
this.page = 1;
this.perpage = 20;
this.order_desc = false;
this.sort_by = null;
this.loadSeries();
},
showAuthors: function() {
@ -96,6 +125,8 @@ var app = new Vue({
this.series = [];
this.page = 1;
this.perpage = 20;
this.order_desc = false;
this.sort_by = null;
this.loadAuthors();
},
showBooks: function() {
@ -103,6 +134,8 @@ var app = new Vue({
this.series = [];
this.page = 1;
this.perpage = 20;
this.order_desc = false;
this.sort_by = null;
this.loadBooks();
}
},