keep-alive index page

This commit is contained in:
lesion 2023-01-12 11:14:34 +01:00
parent c3741238fc
commit 9dc0d3ce16
No known key found for this signature in database
GPG key ID: 352918250B012177
3 changed files with 41 additions and 39 deletions

View file

@ -4,7 +4,7 @@
<v-main> <v-main>
<Snackbar/> <Snackbar/>
<Confirm/> <Confirm/>
<nuxt :keep-alive='$route.name === "index"'/> <nuxt keep-alive :keep-alive-props="{include: ['Index']}"/>
</v-main> </v-main>
<Footer/> <Footer/>

View file

@ -21,27 +21,35 @@ export default {
name: 'Index', name: 'Index',
components: { Event, Announcement }, components: { Event, Announcement },
middleware: 'setup', middleware: 'setup',
async fetch () { fetch () {
return this.getEvents() return this.getEvents({
start: this.start,
end: this.end
})
}, },
activated() { activated() {
if (this.$fetchState.timestamp <= Date.now() - 60000) { if (!this.isCurrentMonth) {
this.$fetch(); this.start = dayjs().startOf('month').unix()
this.end = null
this.$fetch()
this.isCurrentMonth = true
return
}
if (this.$fetchState.timestamp <= (Date.now() - 60000)) {
this.$fetch()
} }
}, },
data ({ $store }) { data () {
return { return {
mdiMagnify, mdiCloseCircle, mdiMagnify, mdiCloseCircle,
isCurrentMonth: true, isCurrentMonth: true,
now: dayjs().unix(), now: dayjs().unix(),
date: dayjs.tz().format('YYYY-MM-DD'), // date: dayjs.tz().format('YYYY-MM-DD'),
start: dayjs().startOf('month').unix(), start: dayjs().startOf('month').unix(),
end: null, end: null,
searching: false,
tmpEvents: [], tmpEvents: [],
selectedDay: null, selectedDay: null,
storeUnsubscribe: null storeUnsubscribe: null
} }
}, },
head () { head () {
@ -80,7 +88,7 @@ export default {
} }
} }
}, },
mounted () { created () {
this.$root.$on('dayclick', this.dayChange) this.$root.$on('dayclick', this.dayChange)
this.$root.$on('monthchange', this.monthChange) this.$root.$on('monthchange', this.monthChange)
this.storeUnsubscribe = this.$store.subscribeAction( { after: (action, state) => { this.storeUnsubscribe = this.$store.subscribeAction( { after: (action, state) => {
@ -88,7 +96,8 @@ export default {
if (this.filter.query && this.filter.query.length > 2) { if (this.filter.query && this.filter.query.length > 2) {
this.search() this.search()
} else { } else {
this.updateEvents() this.tmpEvents = []
this.$fetch()
} }
} }
}}) }})
@ -109,34 +118,28 @@ export default {
show_multidate: this.filter.show_multidate, show_multidate: this.filter.show_multidate,
query: this.filter.query query: this.filter.query
}) })
}, 100), }, 200),
updateEvents () {
return this.getEvents({
start: this.start,
end: this.end
})
},
async monthChange ({ year, month }) { async monthChange ({ year, month }) {
this.$nuxt.$loading.start() this.$nuxt.$loading.start()
this.$nextTick( async () => { let isCurrentMonth
// unselect current selected day // unselect current selected day
this.selectedDay = null this.selectedDay = null
// check if current month is selected // check if current month is selected
if (month - 1 === dayjs.tz().month() && year === dayjs.tz().year()) { if (month - 1 === dayjs.tz().month() && year === dayjs.tz().year()) {
this.isCurrentMonth = true isCurrentMonth = true
this.start = dayjs().startOf('month').unix() this.start = dayjs().startOf('month').unix()
this.date = dayjs.tz().format('YYYY-MM-DD') // this.date = dayjs.tz().format('YYYY-MM-DD')
} else { } else {
this.isCurrentMonth = false isCurrentMonth = false
this.date = '' // this.date = ''
this.start = dayjs().year(year).month(month - 1).startOf('month').unix() // .startOf('week').unix() this.start = dayjs().year(year).month(month - 1).startOf('month').unix() // .startOf('week').unix()
} }
this.end = dayjs().year(year).month(month).endOf('month').unix() // .endOf('week').unix() this.end = dayjs().year(year).month(month).endOf('month').unix() // .endOf('week').unix()
await this.updateEvents() await this.$fetch()
this.$nuxt.$loading.finish() this.$nuxt.$loading.finish()
}) this.$nextTick( () => this.isCurrentMonth = isCurrentMonth)
}, },
dayChange (day) { dayChange (day) {

View file

@ -26,7 +26,7 @@ export const state = () => ({
filter: { filter: {
query: '', query: '',
show_recurrent: null, show_recurrent: null,
show_multidate: null show_multidate: null,
}, },
announcements: [], announcements: [],
events: [] events: []
@ -43,7 +43,7 @@ export const mutations = {
state.announcements = announcements state.announcements = announcements
}, },
setEvents (state, events) { setEvents (state, events) {
state.events = events state.events = Object.freeze(events)
}, },
setFilter (state, { type, value }) { setFilter (state, { type, value }) {
state.filter[type] = value state.filter[type] = value
@ -84,6 +84,5 @@ export const actions = {
show_multidate: state.filter.show_multidate show_multidate: state.filter.show_multidate
}) })
commit('setEvents', events) commit('setEvents', events)
return events
} }
} }