Vue components books list
This commit is contained in:
parent
a76dd7275e
commit
2f1e2a70fd
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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">←</span> Précédents</a></li>
|
||||
<li class="next"><a href="#" @click="nextPage">Suivants <span aria-hidden="true">→</span></a></li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user