WIP: Vue components

This commit is contained in:
Meutel 2017-08-05 12:16:28 +02:00
parent 634d10c63e
commit a76dd7275e
2 changed files with 54 additions and 88 deletions

View File

@ -1,7 +1,30 @@
// TODO ref components tables Vue.component('results', {
template: '#results-template',
props: ['results', 'cols'],
methods: {
sortBy: function(col) {
}
}
});
Vue.component('paginate', {
template: '#paginate-template',
props: ['page'],
methods: {
prevPage: function() {
},
nextPage: function() {
}
}
});
var index = new Vue({ var index = new Vue({
el: '#index', el: '#index',
data: { data: {
page: 1,
perpage: 20,
sort_by: null,
order_desc: false,
cols: [{name:'test'}, {name:'test2'}],
results: [{}]
}, },
methods: { methods: {
showSeries: function() { showSeries: function() {
@ -14,83 +37,4 @@ var index = new Vue({
console.log("Books"); console.log("Books");
} }
} }
}) });
var books = new Vue({
el: '#books',
data: {
page: 1,
perpage: 20,
sort_by: null,
order_desc: false,
books: [ {
id: 456,
title: "Test title",
authors: [ {
id: 123,
name: "Test author"
} ],
series: {
id: 789,
name: "Test series",
idx: 1
}
} ]
},
methods: {
sortBy: function(sort) {
console.log("Sort by" + sort);
},
loadBooks: function() {
this.sendQuery(this.params('/books/'), this.stdError, this.booksSuccess);
},
booksSuccess: function(resp) {
this.books = resp.books;
},
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)));
},
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);
}
},
mounted: function() {
this.loadBooks();
}
})

View File

@ -1,6 +1,6 @@
{{ template "header.html" . }} {{ template "header.html" . }}
<div class="container"> <div class="container" id="index">
<div class="jumbotron" id="index"> <div class="jumbotron">
<h1>Bouquins</h1> <h1>Bouquins</h1>
<p>Cette bibliothèque contient actuellement <strong>{{ .BooksCount }}</strong> livres et BD en format papier ou électronique.</p> <p>Cette bibliothèque contient actuellement <strong>{{ .BooksCount }}</strong> livres et BD en format papier ou électronique.</p>
<button class="btn btn-primary" type="button" @click="showBooks">Livres</button> <button class="btn btn-primary" type="button" @click="showBooks">Livres</button>
@ -8,11 +8,33 @@
<button class="btn btn-primary" type="button" @click="showSeries">Series</button> <button class="btn btn-primary" type="button" @click="showSeries">Series</button>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
{{ template "index_paginate.html" }} <paginate :page="page"></paginate>
{{/* template "index_series.html" */}} <results :results="results" :cols="cols"></results>
{{/* template "index_authors.html" */}} <paginate :page="page"></paginate>
{{ template "index_books.html" }}
{{ template "index_paginate.html" }}
</div> </div>
</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>
</table>
</script>
<script type="text/x-template" id="paginate-template">
<nav aria-label="Pages">
<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>
</ul>
</nav>
</script>
{{ template "footer.html" . }} {{ template "footer.html" . }}