Sort tables

index.html

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

index.js

@@ -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,19 +54,21 @@ var app = new Vue({
     seriesSuccess: function(resp) {
       this.series = resp;
     },
-    prevPage: function() {
+    sortBy: function(col) {
-      if (this.page > 1) {
+      if (this.sort_by == col) {
-        this.page--;
+        if (this.order_desc) {
-        if (this.books.length > 0)
+          this.order_desc = false;
-          this.loadBooks();
+          this.sort_by = null;
-        if (this.authors.length > 0)
+        } else {
-          this.loadAuthors();
+          this.order_desc = true;
-        if (this.series.length > 0)
+        }
-          this.loadSeries();
+      } else {
+        this.order_desc = false;
+        this.sort_by = col;
       }
+      this.reload();
     },
-    nextPage: function() {
+    reload: function() {
-      this.page++;
       if (this.books.length > 0)
         this.loadBooks();
       if (this.authors.length > 0)
@@ -72,23 +76,48 @@ var app = new Vue({
       if (this.series.length > 0)
         this.loadSeries();
     },
+    prevPage: function() {
+      if (this.page > 1) {
+        this.page--;
+        this.reload();
+      }
+    },
+    nextPage: function() {
+      this.page++;
+      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.sendQuery(this.params('cgi-bin/bouquins/authors'), this.stdError, this.authorsSuccess);
-        this.stdError, this.authorsSuccess);
     },
     loadBooks: function() {
-      this.sendQuery('cgi-bin/bouquins/books?page=' + this.page + '&perpage=' + this.perpage,
+      this.sendQuery(this.params('cgi-bin/bouquins/books'), this.stdError, this.booksSuccess);
-        this.stdError, this.booksSuccess);
     },
     loadSeries: function() {
-      this.sendQuery('cgi-bin/bouquins/series?page=' + this.page + '&perpage=' + this.perpage,
+      this.sendQuery(this.params('cgi-bin/bouquins/series'), this.stdError, this.seriesSuccess);
-        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();
     }
   },