meutel/go-bouquins
1
0
Fork 0
Code Issues Pull Requests Releases 4 Activity

Sort cols, improved events

Browse Source
This commit is contained in:
Meutel 2017-08-05 20:06:11 +02:00
parent e724ac4e5a
commit 992918a65b
3 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -4,7 +4,6 @@ Bouquins in Go
## TODO ## TODO
* paginate index
* search * search
* About * About
* translations * translations

24
assets/js/index.js
View File

@ -1,8 +1,10 @@
var bus = new Vue();
Vue.component('results', { Vue.component('results', {
template: '#results-template', template: '#results-template',
props: ['results', 'cols','sort_by','order_desc'], props: ['results', 'cols','sort_by','order_desc'],
methods: { methods: {
sortBy: function(col) { sortBy: function(col) {
bus.$emit('sort-on', col);
} }
} }
}); });
@ -71,10 +73,10 @@ Vue.component('paginate', {
props: ['page','more'], props: ['page','more'],
methods: { methods: {
prevPage: function() { prevPage: function() {
if (this.page > 1) this.$emit('prev'); if (this.page > 1) bus.$emit('update-page', -1);
}, },
nextPage: function() { nextPage: function() {
if (this.more) this.$emit('next'); if (this.more) bus.$emit('update-page', 1);
} }
} }
}); });
@ -91,6 +93,20 @@ var index = new Vue({
results: [] results: []
}, },
methods: { methods: {
sortBy: function(col) {
if (this.sort_by == col) {
if (this.order_desc) {
this.order_desc = false;
this.sort_by = null;
} else {
this.order_desc = true;
}
} else {
this.order_desc = false;
this.sort_by = col;
}
this.updateResults();
},
updatePage: function(p) { updatePage: function(p) {
this.page += p; this.page += p;
this.updateResults(); this.updateResults();
@ -188,5 +204,9 @@ var index = new Vue({
stdError: function(code, resp) { stdError: function(code, resp) {
console.log('ERROR ' + code + ': ' + resp); console.log('ERROR ' + code + ': ' + resp);
} }
},
mounted: function() {
bus.$on('sort-on', this.sortBy);
bus.$on('update-page', this.updatePage);
} }
}); });

6
templates/index.html
View File

@ -8,9 +8,9 @@
<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">
<paginate v-on:next="updatePage(1)" v-on:prev="updatePage(-1)" :page="page" :more="more"></paginate> <paginate :page="page" :more="more"></paginate>
<results :results="results" :cols="cols" :sort_by="sort_by" :order_desc="order_desc"></results> <results :results="results" :cols="cols" :sort_by="sort_by" :order_desc="order_desc"></results>
<paginate :page="page"></paginate> <paginate :page="page" :more="more"></paginate>
</div> </div>
</div> </div>
<script type="text/x-template" id="results-template"> <script type="text/x-template" id="results-template">
@ -19,7 +19,7 @@
<tr> <tr>
<th v-for="col in cols"> <th v-for="col in cols">
<template v-if="col.sortable"> <template v-if="col.sortable">
<a href="#" @click="sortBy(col.sortId)">{{ "{{" }}col.name{{ "}}" }}</a> <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> <span v-if="sort_by == col.id" :class="['glyphicon', { 'glyphicon-chevron-up': order_desc , 'glyphicon-chevron-down': !order_desc}]"></span>
</template> </template>
<template v-else>{{ "{{" }}col.name{{ "}}" }}</template> <template v-else>{{ "{{" }}col.name{{ "}}" }}</template>