home refactoring

components/Event.vue

@@ -7,7 +7,7 @@
         v-card-title.text-h5 {{event.title}}
 
     v-card-text
-      
+
       time.text-h6(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <v-icon>mdi-event</v-icon> {{ event|when }}
       v-btn.d-block.text-h6(text color='primary' big @click="$emit('placeclick', event.place.id)") <v-icon>mdi-map-marker</v-icon> {{event.place.name}}
 

components/Home.vue

@@ -7,11 +7,12 @@
     #calbar.row.mb-2
       .col-xl-5.col-lg-5.col-sm-5.col-xs-12
 
-        //- this is needed as v-calendar does not support SSR
+        v-date-picker(
-        //- https://github.com/nathanreyes/v-calendar/issues/336
+          @update:picker-date='monthChange'
-        client-only
+          :locale='settings.locale'
-          Calendar(@dayclick='dayClick' 
+          :events='calendarEvents'
-            @monthchange='monthChange' :events='events')
+          v-model='date'
+          landscape)
 
       .col
         Search(
@@ -19,10 +20,10 @@
           @update='updateFilters'
         )
 
-    .text-h3.text-center(v-if='selectedDay') {{selectedDay|day}}
+    v-chip.text-h3.text-center(v-if='selectedDay' close) {{selectedDay|day}}
     #events
       Event(v-for='event in events'
-        :key='event.id' :event='event' 
+        :key='event.id' :event='event'
           @tagclick='tagClick' @placeclick='placeClick')
 
 </template>
@@ -37,27 +38,42 @@ import Search from '@/components/Search'
 
 export default {
   name: 'Home',
+  components: { Calendar, Event, Search, Announcement },
+  async asyncData ({ params }) {
+    const events = await this.$api.getEvents({
+      start: this.start,
+      end: this.end,
+      places: this.filters.places,
+      tags: this.filters.tags
+    })
+    return { events }
+  },
   data () {
     return {
+      date: dayjs().format('YYYY-MM-DD'),
       events: [],
-      start: null,
+      start: dayjs().format('YYYY-MM-DD'),
       end: null,
-      filters: { tags: [], places: []},
+      filters: { tags: [], places: [] },
       selectedDay: null
     }
   },
-  components: { Calendar, Event, Search, Announcement },
   computed: {
-    ...mapState(['settings', 'announcements'])
+    ...mapState(['settings', 'announcements']),
+    calendarEvents () {
+      return this.events.map(e => dayjs.unix(e.start_datetime).format('YYYY-MM-DD'))
+    }
   },
   methods: {
     ...mapActions(['setFilters']),
     async updateEvents () {
       this.events = await this.$api.getEvents({
-        start: this.start, end: this.end,
+        start: this.start,
-        places: this.filters.places, tags: this.filters.tags
+        end: this.end,
+        places: this.filters.places,
+        tags: this.filters.tags
       })
-      this.setFilters(this.filters)
+      // this.setFilters(this.filters)
     },
     placeClick (place_id) {
       if (this.filters.places.includes(place_id)) {
@@ -79,10 +95,12 @@ export default {
       this.filters = filters
       this.updateEvents()
     },
-    monthChange (page) {
+    monthChange (monthYear) {
-      this.start = dayjs().year(page.year).month(page.month - 1).startOf('month').startOf('week').unix()
+      // return
-      this.end = dayjs().year(page.year).month(page.month - 1).endOf('month').endOf('week').unix()
+      const [year, month] = monthYear.split('-')
-      this.updateEvents ()
+      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.updateEvents()
     },
     async dayClick (day) {
       const datetime = day.dateTime / 1000
@@ -94,7 +112,7 @@ export default {
       this.selectedDay = datetime
       this.events = await this.$api.getEvents({
         start: this.selectedDay,
-        end: this.selectedDay+24*60*60
+        end: this.selectedDay + 24 * 60 * 60
       })
     }
   },