Display authors list

index.html

@@ -16,15 +16,26 @@
         <h1>Bouquins</h1>
         <p>Cette bibliothèque contient actuellement <strong>{{ booksCount }}</strong> livres et BD en format papier ou électronique.</p>
         <button class="btn btn-primary" type="button" @click="loadBooks">Livres</button>
+        <button class="btn btn-primary" type="button" @click="loadAuthors">Authors</button>
       </div>
-      <div class="table-responsive" v-if="books.length > 0">
+      <div class="table-responsive" v-if="books.length > 0 || authors.length > 0">
         <nav aria-label="Pages">
           <ul class="pager">
             <li class="previous" v-bind:class="{ disabled: page <= 1 }"><a href="#" @click="prevPage"><span aria-hidden="true">&larr;</span> Précédents</a></li>
             <li class="next"><a href="#" @click="nextPage">Suivants <span aria-hidden="true">&rarr;</span></a></li>
           </ul>
         </nav>
-        <table class="table table-striped">
+        <table class="table table-striped" v-if="authors.length > 0">
+          <tr>
+            <th>Id</th>
+            <th>Nom</th>
+          </tr>
+          <tr v-for="author in authors">
+            <td>{{ author.id }}</td>
+            <td>{{ author.name }}</td>
+          </tr>
+        </table>
+        <table class="table table-striped" v-if="books.length > 0">
           <tr>
             <th>Titre</th>
             <th>Auteur(s)</th>

index.js

@@ -2,6 +2,7 @@ var app = new Vue({
   el: '#app',
   data: {
     books: [],
+    authors: [],
     booksCount: 0,
     page: 1,
     perpage: 20
@@ -41,7 +42,12 @@ var app = new Vue({
     loadIndex: function() {
       this.sendQuery('cgi-bin/bouquins/index', this.stdError, this.indexSuccess);
     },
+    authorsSuccess: function(resp) {
+      this.books = [];
+      this.authors = resp;
+    },
     booksSuccess: function(resp) {
+      this.authors = []
       this.books = resp;
     },
     prevPage: function() {
@@ -54,6 +60,10 @@ var app = new Vue({
       this.page++;
       this.loadBooks();
     },
+    loadAuthors: function() {
+      this.sendQuery('cgi-bin/bouquins/authors?page=' + this.page + '&perpage=' + this.perpage,
+        this.stdError, this.authorsSuccess);
+    },
     loadBooks: function() {
       this.sendQuery('cgi-bin/bouquins/books?page=' + this.page + '&perpage=' + this.perpage,
         this.stdError, this.booksSuccess);