From 2f1e2a70fd08da3bae644c1bef3b66653b89eb00 Mon Sep 17 00:00:00 2001
From: Meutel <meutel@meutel.net>
Date: Sat, 5 Aug 2017 16:44:05 +0200
Subject: [PATCH] Vue components books list

---
 assets/js/index.js   | 119 +++++++++++++++++++++++++++++++++++++++++--
 bouquins/bouquins.go |  66 +++++++++++++++---------
 templates/index.html |  30 ++++++-----
 3 files changed, 171 insertions(+), 44 deletions(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index bfbd0b4..c21301e 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,11 +1,62 @@
 Vue.component('results', {
   template: '#results-template',
-  props: ['results', 'cols'],
+  props: ['results', 'cols','sort_by','order_desc'],
   methods: {
     sortBy: function(col) {
     }
   }
 });
+Vue.component('result-cell', {
+  render: function(h) {
+    return h('td', this.cellContent(h));
+  },
+  props: ['item', 'col'],
+  methods: {
+    bookUrl: function(id) {
+      return '/books/' + id;
+    },
+    authorUrl: function(id) {
+      return '/authors/' + id;
+    },
+    seriesUrl: function(id) {
+      return '/series/' + id;
+    },
+    link: function(h, icon, text, url) {
+      return [
+        h('span',{ attrs: { class: 'glyphicon glyphicon-'+icon } },''),
+        ' ',
+        h('a', { attrs: { href: url } }, text)
+      ];
+    },
+    badge: function(h, num) {
+      return h('span', { attrs: { class: 'badge' } }, num);
+    },
+    cellContent: function(h) {
+      switch (this.col.id) {
+      case 'title':
+        return this.link(h, 'book', this.item.title, this.bookUrl(this.item.id));
+      case 'authors':
+        var elts = [];
+        var authors = this.item.authors;
+        for (i=0;i<authors.length;i++) {
+          elts[i] = this.link(h, 'user', authors[i].name, this.authorUrl(authors[i].id));
+        }
+        return elts;
+      case 'series':
+        var series = this.item.series;
+        if (series) {
+          return [
+            this.link(h, 'list', series.name, this.seriesUrl(series.id)),
+            h('span', { attrs: { class: 'badge' } }, this.item.series_idx)
+          ];
+        }
+        return '';
+      default:
+        return '';
+      }
+    }
+  }
+});
 Vue.component('paginate', {
   template: '#paginate-template',
   props: ['page'],
@@ -19,12 +70,12 @@ Vue.component('paginate', {
 var index = new Vue({
   el: '#index',
   data: {
-    page: 1,
+    page: 0,
     perpage: 20,
     sort_by: null,
     order_desc: false,
-    cols: [{name:'test'}, {name:'test2'}],
-    results: [{}]
+    cols: [],
+    results: []
   },
   methods: {
     showSeries: function() {
@@ -34,7 +85,65 @@ var index = new Vue({
       console.log("Authors");
     },
     showBooks: function() {
-      console.log("Books");
+      this.sendQuery('/books/', this.stdError, this.loadResults);
+    },
+    loadCols: function(type) {
+      switch (type) {
+      case 'books':
+        this.cols = [
+          { id: 'title', name: 'Titre', sortable: true },
+          { id: 'authors', name: 'Auteur(s)' },
+          { id: 'series', name: 'Serie' }
+        ];
+      break;
+      case 'series':
+        this.cols = [
+          { name: 'Nom', sortId: 'name' },
+          { name: 'Livre(s)' },
+          { name: 'Auteur(s)' }
+        ];
+      break;
+      case 'authors':
+        this.cols = [
+          { name: 'Nom', sortId: 'name' },
+          { name: 'Livre(s)' }
+        ];
+      break;
+      }
+    },
+    loadResults(resp) {
+      this.results = [];
+      this.page = 1;
+      this.loadCols(resp.type);
+      if (resp.results)
+        this.results = resp.results;
+    },
+    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);
     }
   }
 });
diff --git a/bouquins/bouquins.go b/bouquins/bouquins.go
index 0a80c5f..a6b7e89 100644
--- a/bouquins/bouquins.go
+++ b/bouquins/bouquins.go
@@ -147,10 +147,7 @@ func NewBouquinsModelJs(title, js string) *BouquinsModel {
 
 type IndexModel struct {
 	BouquinsModel
-	BooksCount int64        `json:"count"`
-	Books      []*BookAdv   `json:"books,omitempty"`
-	Series     []*SeriesAdv `json:"series,omitempty"`
-	Authors    []*AuthorAdv `json:"authors,omitempty"`
+	BooksCount int64 `json:"count"`
 }
 
 // Constructor IndexModel
@@ -158,12 +155,25 @@ func NewIndexModel(title, js string, count int64) *IndexModel {
 	return &IndexModel{
 		*NewBouquinsModelJs(title, js),
 		count,
-		nil,
-		nil,
-		nil,
 	}
 }
 
+type BooksResultsModel struct {
+	Results []*BookAdv `json:"results,omitempty"`
+	Type    string     `json:"type,omitempty"`
+}
+
+func NewBooksResultsModel(books []*BookAdv) *BooksResultsModel {
+	return &BooksResultsModel{
+		books,
+		"books",
+	}
+}
+
+//	Books      []*BookAdv   `json:"books,omitempty"`
+//	Series     []*SeriesAdv `json:"series,omitempty"`
+//	Authors    []*AuthorAdv `json:"authors,omitempty"`
+
 type BookModel struct {
 	BouquinsModel
 	*BookFull
@@ -227,21 +237,23 @@ func (app *Bouquins) IndexPage(res http.ResponseWriter, req *http.Request) {
 		log.Print(err)
 	}
 	model := NewIndexModel("", "index.js", count)
-	order, sort := paramOrder(req), req.URL.Query().Get(PARAM_SORT)
-	limit, offset := paramInt(PARAM_LIMIT, req), paramInt(PARAM_OFFSET, req)
-	switch req.URL.Query().Get(PARAM_LIST) {
-	case LIST_AUTHORS:
-		model.Authors, err = app.AuthorsAdv(limit, offset, sort, order)
-	case LIST_SERIES:
-		model.Series, err = app.SeriesAdv(limit, offset, sort, order)
-	case LIST_BOOKS:
-		fallthrough
-	default:
-		model.Books, err = app.BooksAdv(limit, offset, sort, order)
-	}
-	if err != nil {
-		log.Print(err)
-	}
+	/*
+		order, sort := paramOrder(req), req.URL.Query().Get(PARAM_SORT)
+		limit, offset := paramInt(PARAM_LIMIT, req), paramInt(PARAM_OFFSET, req)
+			switch req.URL.Query().Get(PARAM_LIST) {
+			case LIST_AUTHORS:
+				model.Authors, err = app.AuthorsAdv(limit, offset, sort, order)
+			case LIST_SERIES:
+				model.Series, err = app.SeriesAdv(limit, offset, sort, order)
+			case LIST_BOOKS:
+				fallthrough
+			default:
+				model.Books, err = app.BooksAdv(limit, offset, sort, order)
+			}
+			if err != nil {
+				log.Print(err)
+			}
+	*/
 	if req.Header.Get("Accept") == "application/json" {
 		res.Header().Set("Content-Type", "application/json")
 		enc := json.NewEncoder(res)
@@ -263,9 +275,13 @@ func (app *Bouquins) BooksPage(res http.ResponseWriter, req *http.Request) {
 	if len(idParam) == 0 {
 		// books list
 		if req.Header.Get("Accept") == "application/json" {
-			model := NewIndexModel("", "", 0) // FIXME model books/paginate
-			var err error
-			model.Books, err = app.BooksAdv(10, 0, "", "") // FIXME params
+			books, err := app.BooksAdv(10, 0, "", "")
+			if err != nil {
+				log.Println(err)
+				http.Error(res, err.Error(), 500)
+			}
+			model := NewBooksResultsModel(books)
+			// FIXME params
 			res.Header().Set("Content-Type", "application/json")
 			enc := json.NewEncoder(res)
 			err = enc.Encode(model)
diff --git a/templates/index.html b/templates/index.html
index ff47d2e..aa517cd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,28 +9,30 @@
   </div>
   <div class="table-responsive">
     <paginate :page="page"></paginate>
-    <results :results="results" :cols="cols"></results>
+    <results :results="results" :cols="cols" :sort_by="sort_by" :order_desc="order_desc"></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>
+    <tbody>
+      <tr>
+        <th v-for="col in cols">
+          <template v-if="col.sortable">
+          <a href="#" @click="sortBy(col.sortId)">{{ "{{" }}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 is="result-cell" :col="col" :item="item" v-for="col in cols"></td>
+      </tr>
+    </tbody>
   </table>
 </script>
 <script type="text/x-template" id="paginate-template">
-<nav aria-label="Pages">
+  <nav aria-label="Pages" v-if="page > 0">
   <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>