show events by default viewing past months

components/Calendar.vue

@@ -40,9 +40,9 @@ export default {
   },
   computed: {
     ...mapGetters(['filteredEventsWithPast']),
-    ...mapState(['tags', 'filters']),
+    ...mapState(['tags', 'filters', 'in_past']),
 
-    // TODO: should be better
+    // TODO: could be better
     attributes () {
       const colors = ['green', 'orange', 'yellow', 'teal', 'indigo', 'blue', 'red', 'purple', 'pink', 'grey']
       const tags = take(this.tags, 10).map(t => t.tag)
@@ -51,7 +51,7 @@ export default {
 
       const that = this
       function getColor (event) {
-        const color = { class: event.past && !that.filters.show_past_events ? 'past-event vc-rounded-full' : 'vc-rounded-full', color: 'blue' }
+        const color = { class: event.past && !that.filters.show_past_events && !that.in_past ? 'past-event vc-rounded-full' : 'vc-rounded-full', color: 'blue' }
         const tag = get(event, 'tags[0]')
         if (!tag) { return color }
         const idx = tags.indexOf(tag)

components/Home.vue

@@ -9,7 +9,7 @@
       Calendar
     .row.m-0
 
-      .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in filteredEvents')
+      .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in events')
         a(:id='event.newDay' v-if='event.newDay')
           .d-block.d-sm-none
             el-divider {{event.start_datetime|day}}
@@ -46,12 +46,12 @@ export default {
     }
   },
   components: { Calendar, Event },
-  data () {
-    return { }
-  },
   computed: {
-    ...mapGetters(['filteredEvents']),
-    ...mapState(['events', 'settings'])
+    events () {
+      return this.in_past ? this.filteredEventsWithPast : this.filteredEvents
+    },
+    ...mapGetters(['filteredEvents', 'filteredEventsWithPast']),
+    ...mapState(['events', 'settings', 'in_past'])
   }
 }
 </script>

store/index.js

@@ -15,6 +15,7 @@ export const state = () => ({
     recurrent_event_visible: false,
     enable_federation: false
   },
+  in_past: false,
   filters: {
     tags: [],
     places: [],
@@ -135,6 +136,9 @@ export const mutations = {
   },
   setUserLocale (state, user_locale) {
     state.user_locale = user_locale
+  },
+  setPast (state, in_past) {
+    state.in_past = in_past
   }
 }
 
@@ -151,6 +155,9 @@ export const actions = {
     commit('showRecurrentEvents', settings.allow_recurrent_event && settings.recurrent_event_visible)
   },
   async updateEvents ({ commit }, page) {
+    const month = moment().month()
+    const year = moment().year()
+    commit('setPast', page.year<year || page.year===year && page.month<=month )
     const events = await this.$axios.$get(`/event/${page.month - 1}/${page.year}`)
     commit('setEvents', events)
   },