WIP: Vue components

assets/js/index.js

@@ -1,7 +1,30 @@
-// TODO ref components tables
+Vue.component('results', {
+  template: '#results-template',
+  props: ['results', 'cols'],
+  methods: {
+    sortBy: function(col) {
+    }
+  }
+});
+Vue.component('paginate', {
+  template: '#paginate-template',
+  props: ['page'],
+  methods: {
+    prevPage: function() {
+    },
+    nextPage: function() {
+    }
+  }
+});
 var index = new Vue({
   el: '#index',
   data: {
+    page: 1,
+    perpage: 20,
+    sort_by: null,
+    order_desc: false,
+    cols: [{name:'test'}, {name:'test2'}],
+    results: [{}]
   },
   methods: {
     showSeries: function() {
@@ -14,83 +37,4 @@ var index = new Vue({
       console.log("Books");
     }
   }
-})
-var books = new Vue({
-  el: '#books',
-  data: {
-    page: 1,
-    perpage: 20,
-    sort_by: null,
-    order_desc: false,
-    books: [ {
-      id: 456,
-      title: "Test title",
-      authors: [ {
-        id: 123,
-        name: "Test author"
-      } ],
-      series: {
-        id: 789,
-        name: "Test series",
-        idx: 1
-      }
-    } ]
-  },
-  methods: {
-    sortBy: function(sort) {
-      console.log("Sort by" + sort);
-    },
-    loadBooks: function() {
-      this.sendQuery(this.params('/books/'), this.stdError, this.booksSuccess);
-    },
-    booksSuccess: function(resp) {
-      this.books = resp.books;
-    },
-    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)));
-    },
-    sendQuery: function(url, error, success) {
-      var xmh = new XMLHttpRequest();
-      var v;
-      xmh.onreadystatechange = function() {
-        v = xmh.responseText;
-        if (xmh.readyState === 4 && xmh.status === 200) {
-          var res;
-          try  {
-            res = JSON.parse(v);
-          } catch (err) {
-            if (null !== error)
-              error(err.name, err.message);
-          }
-          if (null !== success)
-            success(res);
-        } else if (xmh.readyState === 4) {
-          if (null !== error)
-            error(xmh.status, v);
-        }
-      };
-      xmh.open('GET', url, true);
-      xmh.setRequestHeader('Accept','application/json');
-      xmh.send(null);
-    },
-    stdError: function(code, resp) {
-      console.log('ERROR ' + code + ': ' + resp);
-    }
-  },
-  mounted: function() {
-    this.loadBooks();
-  }
-})
+});

templates/index.html

@@ -1,6 +1,6 @@
 {{ template "header.html" . }}
-<div class="container">
-  <div class="jumbotron" id="index">
+<div class="container" id="index">
+  <div class="jumbotron">
     <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="showBooks">Livres</button>
@@ -8,11 +8,33 @@
     <button class="btn btn-primary" type="button" @click="showSeries">Series</button>
   </div>
   <div class="table-responsive">
-    {{ template "index_paginate.html"  }}
-    {{/* template "index_series.html" */}}
-    {{/* template "index_authors.html" */}}
-    {{ template "index_books.html" }}
-    {{ template "index_paginate.html"  }}
+    <paginate :page="page"></paginate>
+    <results :results="results" :cols="cols"></results>
+    <paginate :page="page"></paginate>
   </div>
 </div>
+<script type="text/x-template" id="results-template">
+  <table class="table table-striped" v-if="results.length > 0">
+    <tr>
+      <th v-for="col in cols">
+        <template v-if="col.sortable">
+        <a href="#" @click="sortBy(col.id)">{{ "{{" }}col.name{{ "}}" }}</a>
+        <span v-if="sort_by == col.id" :class="['glyphicon',  { 'glyphicon-chevron-up': order_desc , 'glyphicon-chevron-down': !order_desc}]"></span>
+        </template>
+        <template v-else>{{ "{{" }}col.name{{ "}}" }}</template>
+      </th>
+    </tr>
+    <tr v-for="item in results">
+      <td v-for="col in cols">test</td>
+    </tr>
+  </table>
+</script>
+<script type="text/x-template" id="paginate-template">
+<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>
+</script>
 {{ template "footer.html" . }}