2017-08-05 10:16:28 +00:00
|
|
|
Vue.component('results', {
|
|
|
|
template: '#results-template',
|
2017-08-05 14:44:05 +00:00
|
|
|
props: ['results', 'cols','sort_by','order_desc'],
|
2017-08-05 09:16:19 +00:00
|
|
|
methods: {
|
2017-08-05 10:16:28 +00:00
|
|
|
sortBy: function(col) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2017-08-05 14:44:05 +00:00
|
|
|
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) {
|
2017-08-05 16:24:57 +00:00
|
|
|
case 'author_name':
|
2017-08-05 15:48:06 +00:00
|
|
|
return this.link(h, 'user', this.item.name, this.authorUrl(this.item.id));
|
2017-08-05 16:24:57 +00:00
|
|
|
case 'serie_name':
|
|
|
|
return this.link(h, 'list', this.item.name, this.authorUrl(this.item.id));
|
2017-08-05 15:48:06 +00:00
|
|
|
case 'count':
|
|
|
|
return this.item.count;
|
2017-08-05 14:44:05 +00:00
|
|
|
case 'title':
|
|
|
|
return this.link(h, 'book', this.item.title, this.bookUrl(this.item.id));
|
|
|
|
case 'authors':
|
|
|
|
var elts = [];
|
|
|
|
var authors = this.item.authors;
|
2017-08-05 16:24:57 +00:00
|
|
|
if (authors) {
|
|
|
|
for (i=0;i<authors.length;i++) {
|
|
|
|
elts[i] = this.link(h, 'user', authors[i].name, this.authorUrl(authors[i].id));
|
|
|
|
}
|
2017-08-05 14:44:05 +00:00
|
|
|
}
|
|
|
|
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:
|
2017-08-05 15:48:06 +00:00
|
|
|
console.log('ERROR unknown col: ' + this.col.id)
|
2017-08-05 14:44:05 +00:00
|
|
|
return '';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2017-08-05 10:16:28 +00:00
|
|
|
Vue.component('paginate', {
|
|
|
|
template: '#paginate-template',
|
2017-08-05 17:40:58 +00:00
|
|
|
props: ['page','more'],
|
2017-08-05 10:16:28 +00:00
|
|
|
methods: {
|
|
|
|
prevPage: function() {
|
2017-08-05 17:40:58 +00:00
|
|
|
if (this.page > 1) this.$emit('prev');
|
2017-08-05 09:16:19 +00:00
|
|
|
},
|
2017-08-05 10:16:28 +00:00
|
|
|
nextPage: function() {
|
2017-08-05 17:40:58 +00:00
|
|
|
if (this.more) this.$emit('next');
|
2017-08-05 09:16:19 +00:00
|
|
|
}
|
|
|
|
}
|
2017-08-05 10:16:28 +00:00
|
|
|
});
|
|
|
|
var index = new Vue({
|
|
|
|
el: '#index',
|
2017-07-30 13:39:20 +00:00
|
|
|
data: {
|
2017-08-05 17:40:58 +00:00
|
|
|
url: '',
|
2017-08-05 14:44:05 +00:00
|
|
|
page: 0,
|
2017-07-30 13:39:20 +00:00
|
|
|
perpage: 20,
|
2017-08-05 17:40:58 +00:00
|
|
|
more: false,
|
2017-07-30 13:39:20 +00:00
|
|
|
sort_by: null,
|
2017-08-05 09:16:19 +00:00
|
|
|
order_desc: false,
|
2017-08-05 14:44:05 +00:00
|
|
|
cols: [],
|
|
|
|
results: []
|
2017-07-30 13:39:20 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2017-08-05 17:40:58 +00:00
|
|
|
updatePage: function(p) {
|
|
|
|
this.page += p;
|
|
|
|
this.updateResults();
|
|
|
|
},
|
|
|
|
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)));
|
|
|
|
},
|
|
|
|
updateResults: function() {
|
|
|
|
this.sendQuery(this.params(this.url), this.stdError, this.loadResults);
|
|
|
|
},
|
2017-08-05 10:16:28 +00:00
|
|
|
showSeries: function() {
|
2017-08-05 17:40:58 +00:00
|
|
|
this.url = '/series/';
|
|
|
|
this.updateResults();
|
2017-08-05 09:16:19 +00:00
|
|
|
},
|
2017-08-05 10:16:28 +00:00
|
|
|
showAuthors: function() {
|
2017-08-05 17:40:58 +00:00
|
|
|
this.url = '/authors/';
|
|
|
|
this.updateResults();
|
2017-07-30 13:39:20 +00:00
|
|
|
},
|
2017-08-05 10:16:28 +00:00
|
|
|
showBooks: function() {
|
2017-08-05 17:40:58 +00:00
|
|
|
this.url = '/books/';
|
|
|
|
this.updateResults();
|
2017-08-05 14:44:05 +00:00
|
|
|
},
|
|
|
|
loadCols: function(type) {
|
|
|
|
switch (type) {
|
|
|
|
case 'books':
|
|
|
|
this.cols = [
|
2017-08-05 16:24:57 +00:00
|
|
|
{ id: 'title', name: 'Titre', sortable: true },
|
2017-08-05 14:44:05 +00:00
|
|
|
{ id: 'authors', name: 'Auteur(s)' },
|
2017-08-05 16:24:57 +00:00
|
|
|
{ id: 'series', name: 'Serie' }
|
2017-08-05 14:44:05 +00:00
|
|
|
];
|
|
|
|
break;
|
|
|
|
case 'series':
|
|
|
|
this.cols = [
|
2017-08-05 16:24:57 +00:00
|
|
|
{ id: 'serie_name', name: 'Nom', sortable: true },
|
|
|
|
{ id: 'count', name: 'Livre(s)' },
|
|
|
|
{ id: 'authors', name: 'Auteur(s)' }
|
2017-08-05 14:44:05 +00:00
|
|
|
];
|
|
|
|
break;
|
|
|
|
case 'authors':
|
|
|
|
this.cols = [
|
2017-08-05 16:24:57 +00:00
|
|
|
{ id: 'author_name', name: 'Nom', sortable: true },
|
|
|
|
{ id: 'count', name: 'Livre(s)' }
|
2017-08-05 14:44:05 +00:00
|
|
|
];
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
loadResults(resp) {
|
|
|
|
this.results = [];
|
2017-08-05 17:40:58 +00:00
|
|
|
this.more = resp.more;
|
2017-08-05 14:44:05 +00:00
|
|
|
this.loadCols(resp.type);
|
2017-08-05 17:40:58 +00:00
|
|
|
if (resp.results) {
|
2017-08-05 14:44:05 +00:00
|
|
|
this.results = resp.results;
|
2017-08-05 17:40:58 +00:00
|
|
|
if (this.page == 0) this.page = 1;
|
|
|
|
} else {
|
|
|
|
this.page = 0;
|
|
|
|
}
|
2017-08-05 14:44:05 +00:00
|
|
|
},
|
|
|
|
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);
|
2017-07-30 13:39:20 +00:00
|
|
|
}
|
|
|
|
}
|
2017-08-05 10:16:28 +00:00
|
|
|
});
|