manage date filter in home
This commit is contained in:
parent
b77339cbf1
commit
fc02be7db5
2 changed files with 34 additions and 24 deletions
|
@ -4,23 +4,22 @@
|
||||||
//- Announcements
|
//- Announcements
|
||||||
Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
|
Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
|
||||||
|
|
||||||
#calbar.row.mb-2
|
v-row#calbarmb-2
|
||||||
.col-xl-5.col-lg-5.col-sm-5.col-xs-12
|
.col-xl-5.col-lg-5.col-md-6.col-sm-12.col-xs-12
|
||||||
|
|
||||||
v-date-picker(
|
v-date-picker(
|
||||||
@update:picker-date='monthChange'
|
@update:picker-date='monthChange'
|
||||||
|
@click:date='dayChange'
|
||||||
:locale='settings.locale'
|
:locale='settings.locale'
|
||||||
:events='calendarEvents'
|
:events='calendarEvents'
|
||||||
v-model='date'
|
:value='date'
|
||||||
landscape)
|
landscape)
|
||||||
|
|
||||||
.col
|
.col
|
||||||
Search(
|
Search(
|
||||||
:filters='filters'
|
:filters='filters'
|
||||||
@update='updateFilters'
|
@update='updateFilters')
|
||||||
)
|
v-chip(v-if='selectedDay' close @click:close='dayChange(selectedDay)') {{selectedDay}}
|
||||||
|
|
||||||
v-chip.text-h3.text-center(v-if='selectedDay' close) {{selectedDay|day}}
|
|
||||||
#events
|
#events
|
||||||
Event(v-for='event in events'
|
Event(v-for='event in events'
|
||||||
:key='event.id' :event='event'
|
:key='event.id' :event='event'
|
||||||
|
@ -41,7 +40,7 @@ export default {
|
||||||
components: { Calendar, Event, Search, Announcement },
|
components: { Calendar, Event, Search, Announcement },
|
||||||
async asyncData ({ params }) {
|
async asyncData ({ params }) {
|
||||||
const events = await this.$api.getEvents({
|
const events = await this.$api.getEvents({
|
||||||
start: this.start,
|
start: dayjs().unix(),
|
||||||
end: this.end,
|
end: this.end,
|
||||||
places: this.filters.places,
|
places: this.filters.places,
|
||||||
tags: this.filters.tags
|
tags: this.filters.tags
|
||||||
|
@ -52,7 +51,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
date: dayjs().format('YYYY-MM-DD'),
|
date: dayjs().format('YYYY-MM-DD'),
|
||||||
events: [],
|
events: [],
|
||||||
start: dayjs().format('YYYY-MM-DD'),
|
start: dayjs().unix(),
|
||||||
end: null,
|
end: null,
|
||||||
filters: { tags: [], places: [] },
|
filters: { tags: [], places: [] },
|
||||||
selectedDay: null
|
selectedDay: null
|
||||||
|
@ -96,24 +95,35 @@ export default {
|
||||||
this.updateEvents()
|
this.updateEvents()
|
||||||
},
|
},
|
||||||
monthChange (monthYear) {
|
monthChange (monthYear) {
|
||||||
// return
|
this.selectedDay = null
|
||||||
const [year, month] = monthYear.split('-')
|
const [year, month] = monthYear.split('-')
|
||||||
|
|
||||||
|
// check if current month is selected
|
||||||
|
if (month - 1 === dayjs().month()) {
|
||||||
|
this.start = dayjs().unix()
|
||||||
|
this.date = dayjs().format('YYYY-MM-DD')
|
||||||
|
} else {
|
||||||
|
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 - 1).endOf('month').unix() // .endOf('week').unix()
|
}
|
||||||
|
// this.end = dayjs().year(year).month(month - 1).endOf('month').unix() // .endOf('week').unix()
|
||||||
|
this.end = null
|
||||||
this.updateEvents()
|
this.updateEvents()
|
||||||
},
|
},
|
||||||
async dayClick (day) {
|
dayChange (day) {
|
||||||
const datetime = day.dateTime / 1000
|
if (this.selectedDay === day) {
|
||||||
if (this.selectedDay === datetime) {
|
|
||||||
this.selectedDay = null
|
this.selectedDay = null
|
||||||
|
this.date = dayjs().format('YYYY-MM-DD')
|
||||||
|
this.start = dayjs().unix() // .startOf('week').unix()
|
||||||
|
this.end = null
|
||||||
this.updateEvents()
|
this.updateEvents()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.selectedDay = datetime
|
this.start = dayjs(day).unix()
|
||||||
this.events = await this.$api.getEvents({
|
this.end = dayjs(day).endOf('day').unix()
|
||||||
start: this.selectedDay,
|
this.date = dayjs(day).format('YYYY-MM-DD')
|
||||||
end: this.selectedDay + 24 * 60 * 60
|
this.selectedDay = day
|
||||||
})
|
this.updateEvents()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
head () {
|
head () {
|
||||||
|
|
|
@ -421,8 +421,8 @@ const eventController = {
|
||||||
async _select ({ start, end, tags, places }) {
|
async _select ({ start, end, tags, places }) {
|
||||||
debug('_select start: %s, end: %s, tags: %s', dayjs.unix(start), end, tags)
|
debug('_select start: %s, end: %s, tags: %s', dayjs.unix(start), end, tags)
|
||||||
const where = {
|
const where = {
|
||||||
// confirmed event only
|
|
||||||
recurrent: null,
|
recurrent: null,
|
||||||
|
// confirmed event only
|
||||||
is_visible: true,
|
is_visible: true,
|
||||||
[Op.or]: {
|
[Op.or]: {
|
||||||
start_datetime: { [Op.gt]: start },
|
start_datetime: { [Op.gt]: start },
|
||||||
|
@ -430,9 +430,9 @@ const eventController = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (end) {
|
if (end) {
|
||||||
// where.end_datetime = { [Op.lt]: end }
|
where.start_datetime = { [Op.lt]: end }
|
||||||
// }
|
}
|
||||||
|
|
||||||
if (places) {
|
if (places) {
|
||||||
where.placeId = places.split(',')
|
where.placeId = places.split(',')
|
||||||
|
|
Loading…
Reference in a new issue