112 lines
2.1 KiB
Vue
112 lines
2.1 KiB
Vue
<template>
|
|
<table class="spell-list q-table compact striped-odd">
|
|
<thead>
|
|
<tr>
|
|
<td colspan="3">
|
|
<q-pagination
|
|
v-model="page"
|
|
:max="pageMax"
|
|
></q-pagination>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="sort-level">
|
|
<a
|
|
v-on:click="sortBy = 'level'"
|
|
>Level</a>
|
|
</th>
|
|
<th class="sort-name">
|
|
<a
|
|
v-on:click="sortBy = 'name'"
|
|
>Name</a>
|
|
</th>
|
|
<th class="sort-school">
|
|
<a
|
|
v-on:click="sortBy = 'school'"
|
|
>School</a>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
is="spell-item"
|
|
v-for="spell in pagedSpells"
|
|
:spell="spell"
|
|
>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="3">
|
|
<q-pagination
|
|
v-model="page"
|
|
:max="pageMax"
|
|
></q-pagination>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import Query from '../query'
|
|
import SpellItem from './Spellitem'
|
|
|
|
Vue.component('spell-item', SpellItem)
|
|
|
|
export default {
|
|
props: [
|
|
'spells',
|
|
'search'
|
|
],
|
|
data () {
|
|
return {
|
|
perPage: 10,
|
|
page: 1,
|
|
sortBy: 'name'
|
|
}
|
|
},
|
|
watch: {
|
|
pageMax (newPageMax) {
|
|
if (this.page > newPageMax) {
|
|
this.page = newPageMax
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
pageMax () {
|
|
let trueMax = this.filteredSpells.length / this.perPage
|
|
return trueMax < 1 ? 1 : trueMax
|
|
},
|
|
dynamicSortBy () {
|
|
return this.search.length >= 3 ? 'sortScore' : 'name'
|
|
},
|
|
pagedSpells () {
|
|
return new Query(this.filteredSpells)
|
|
.paginate(this.page, this.perPage)
|
|
.results
|
|
},
|
|
filteredSpells () {
|
|
return new Query(this.spells)
|
|
.search('name', this.search, 5)
|
|
.sort(this.dynamicSortBy)
|
|
.results
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="stylus">
|
|
.spell-list
|
|
width: 100%
|
|
th
|
|
a
|
|
display: inline-block
|
|
padding: 1em 0
|
|
&.sort-level
|
|
padding-left: 1em
|
|
width: 5em
|
|
&.sort-name
|
|
padding-left: 1em
|
|
</style>
|