Vue components books list

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'}],
+    cols: [],
-    results: [{}]
+    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);
     }
   }
 });

bouquins/bouquins.go

@@ -148,9 +148,6 @@ 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"`
 }
 
 // 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,6 +237,7 @@ 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) {
@@ -242,6 +253,7 @@ func (app *Bouquins) IndexPage(res http.ResponseWriter, req *http.Request) {
 			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
+			books, err := app.BooksAdv(10, 0, "", "")
-			var err error
+			if err != nil {
-			model.Books, err = app.BooksAdv(10, 0, "", "") // FIXME params
+				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)

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">
+    <tbody>
       <tr>
         <th v-for="col in cols">
           <template v-if="col.sortable">
-        <a href="#" @click="sortBy(col.id)">{{ "{{" }}col.name{{ "}}" }}</a>
+          <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 v-for="col in cols">test</td>
+        <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>