Sort cols, improved events

README.md

@@ -4,7 +4,6 @@ Bouquins in Go
 
 ## TODO
 
-* paginate index
 * search
 * About
 * translations

assets/js/index.js

@@ -1,8 +1,10 @@
+var bus = new Vue();
 Vue.component('results', {
   template: '#results-template',
   props: ['results', 'cols','sort_by','order_desc'],
   methods: {
     sortBy: function(col) {
+      bus.$emit('sort-on', col);
     }
   }
 });
@@ -71,10 +73,10 @@ Vue.component('paginate', {
   props: ['page','more'],
   methods: {
     prevPage: function() {
-      if (this.page > 1) this.$emit('prev');
+      if (this.page > 1) bus.$emit('update-page', -1);
     },
     nextPage: function() {
-      if (this.more) this.$emit('next');
+      if (this.more) bus.$emit('update-page', 1);
     }
   }
 });
@@ -91,6 +93,20 @@ var index = new Vue({
     results: []
   },
   methods: {
+    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.updateResults();
+    },
     updatePage: function(p) {
       this.page += p;
       this.updateResults();
@@ -188,5 +204,9 @@ var index = new Vue({
     stdError: function(code, resp) {
       console.log('ERROR ' + code + ': ' + resp);
     }
+  },
+  mounted: function() {
+    bus.$on('sort-on', this.sortBy);
+    bus.$on('update-page', this.updatePage);
   }
 });

templates/index.html

@@ -8,9 +8,9 @@
     <button class="btn btn-primary" type="button" @click="showSeries">Series</button>
   </div>
   <div class="table-responsive">
-    <paginate v-on:next="updatePage(1)" v-on:prev="updatePage(-1)" :page="page" :more="more"></paginate>
+    <paginate :page="page" :more="more"></paginate>
     <results :results="results" :cols="cols" :sort_by="sort_by" :order_desc="order_desc"></results>
-    <paginate :page="page"></paginate>
+    <paginate :page="page" :more="more"></paginate>
   </div>
 </div>
 <script type="text/x-template" id="results-template">
@@ -19,7 +19,7 @@
       <tr>
         <th v-for="col in cols">
           <template v-if="col.sortable">
-          <a href="#" @click="sortBy(col.sortId)">{{ "{{" }}col.name{{ "}}" }}</a>
+          <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>