kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
Persist activator page and filter
rodzic
9d87296913
commit
1a415a4235
|
@ -35,7 +35,8 @@ const store = new Vuex.Store({
|
||||||
myActivatedSummitsThisYear: null,
|
myActivatedSummitsThisYear: null,
|
||||||
homeQth: null,
|
homeQth: null,
|
||||||
spotPage: 1,
|
spotPage: 1,
|
||||||
alertPage: 1
|
alertPage: 1,
|
||||||
|
activatorPage: 1
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
SOCKET_ONOPEN (state, event) {
|
SOCKET_ONOPEN (state, event) {
|
||||||
|
@ -108,6 +109,9 @@ const store = new Vuex.Store({
|
||||||
},
|
},
|
||||||
setAlertPage (state, newAlertPage) {
|
setAlertPage (state, newAlertPage) {
|
||||||
state.alertPage = newAlertPage
|
state.alertPage = newAlertPage
|
||||||
|
},
|
||||||
|
setActivatorPage (state, newActivatorPage) {
|
||||||
|
state.activatorPage = newActivatorPage
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<FilterInput v-model="filter" ref="filter" v-debounce:500ms="onFilterChanged" />
|
<FilterInput v-model="filter" ref="filter" v-debounce:500ms="onFilterChanged" />
|
||||||
</b-field>
|
</b-field>
|
||||||
|
|
||||||
<b-table class="auto-width" :narrowed="true" :striped="true" :data="activators" :loading="loading" paginated backend-pagination :total="total" :per-page="perPage" @page-change="onPageChange" backend-sorting :default-sort="[sortField, sortDirection]" @sort="onSort" :mobile-cards="false">
|
<b-table class="auto-width" :narrowed="true" :striped="true" :data="activators" :loading="loading" paginated backend-pagination :total="total" :per-page="perPage" :current-page.sync="curPage" backend-sorting :default-sort="[sortField, sortDirection]" @sort="onSort" :mobile-cards="false">
|
||||||
<template slot-scope="props">
|
<template slot-scope="props">
|
||||||
<b-table-column field="callsign" label="Callsign" class="nowrap" sortable>
|
<b-table-column field="callsign" label="Callsign" class="nowrap" sortable>
|
||||||
<CountryFlag :country="country(props.row.callsign)" class="flag" />
|
<CountryFlag :country="country(props.row.callsign)" class="flag" />
|
||||||
|
@ -58,22 +58,18 @@ export default {
|
||||||
mixins: [utils, prefs],
|
mixins: [utils, prefs],
|
||||||
prefs: {
|
prefs: {
|
||||||
key: 'activatorsPrefs',
|
key: 'activatorsPrefs',
|
||||||
props: ['perPage']
|
props: ['perPage', 'filter']
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadData () {
|
loadData () {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
axios.get('https://api.sotl.as/activators/search', { params: { q: this.filter, skip: (this.page - 1) * this.perPage, limit: this.perPage, sort: this.sortField, sortDirection: this.sortDirection } })
|
axios.get('https://api.sotl.as/activators/search', { params: { q: this.filter, skip: (this.curPage - 1) * this.perPage, limit: this.perPage, sort: this.sortField, sortDirection: this.sortDirection } })
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.activators = response.data.activators
|
this.activators = response.data.activators
|
||||||
this.total = response.data.total
|
this.total = response.data.total
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onPageChange (page) {
|
|
||||||
this.page = page
|
|
||||||
this.loadData()
|
|
||||||
},
|
|
||||||
onSort (field, direction) {
|
onSort (field, direction) {
|
||||||
this.sortField = field
|
this.sortField = field
|
||||||
this.sortDirection = direction
|
this.sortDirection = direction
|
||||||
|
@ -91,6 +87,17 @@ export default {
|
||||||
this.loadData()
|
this.loadData()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
curPage: {
|
||||||
|
get () {
|
||||||
|
return this.$store.state.activatorPage
|
||||||
|
},
|
||||||
|
set (val) {
|
||||||
|
this.$store.commit('setActivatorPage', val)
|
||||||
|
this.loadData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
document.title = 'Activators - SOTLAS'
|
document.title = 'Activators - SOTLAS'
|
||||||
this.loadData()
|
this.loadData()
|
||||||
|
@ -99,7 +106,6 @@ export default {
|
||||||
return {
|
return {
|
||||||
activators: [],
|
activators: [],
|
||||||
filter: '',
|
filter: '',
|
||||||
page: 1,
|
|
||||||
perPage: 15,
|
perPage: 15,
|
||||||
perPageOptions: [10, 15, 20, 30, 50, 100],
|
perPageOptions: [10, 15, 20, 30, 50, 100],
|
||||||
loading: false,
|
loading: false,
|
||||||
|
|
Ładowanie…
Reference in New Issue