manage date filter in home

This commit is contained in:
les 2020-10-28 01:28:21 +01:00
parent b77339cbf1
commit fc02be7db5
2 changed files with 34 additions and 24 deletions

View file

@ -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('-')
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() // 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.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 () {

View file

@ -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(',')