remove v-calendar deps and makes Home a page not a component

components/Calendar.vue

@@ -1,96 +0,0 @@
-<template lang="pug">
-  #calendar
-    v-calendar(
-      title-position='left'
-      :is-dark="settings['theme.is_dark']"
-      @update:from-page='updatePage'
-      :locale='$i18n.locale'
-      :attributes='attributes'
-      transition='fade'
-      is-expanded
-      is-inline
-      @dayclick='click')
-
-</template>
-<script>
-import { mapState, mapActions, mapGetters } from 'vuex'
-import dayjs from 'dayjs'
-import { take, get } from 'lodash'
-
-export default {
-  name: 'Calendar',
-  props: {
-    events: { type: Array, default: [] }
-  },
-  data () {
-    const month = dayjs().month() + 1
-    const year = dayjs().year()
-    return {
-      page: { month, year }
-    }
-  },
-  computed: {
-    ...mapState(['tags', 'filters', 'in_past', 'settings']),
-
-    // TODO: could be better
-    attributes () {
-      const colors = ['green', 'orange', 'yellow', 'teal', 'indigo', 'blue', 'red', 'purple', 'pink', 'gray']
-      const tags = take(this.tags, 10).map(t => t.tag)
-      let attributes = []
-      attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'green' } })
-
-      const that = this
-      function getColor (event) {
-        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)
-        if (idx < 0) { return color }
-        color.color = colors[idx]
-        return color
-      }
-
-      attributes = attributes.concat(this.events
-        .filter(e => !e.multidate)
-        .map(e => {
-          return {
-            key: e.id,
-            dot: getColor(e),
-            dates: new Date(e.start_datetime * 1000)
-          }
-        }))
-
-      attributes = attributes.concat(this.events
-        .filter(e => e.multidate)
-        .map(e => ({
-          key: e.id,
-          highlight: getColor(e),
-          dates: { start: new Date(e.start_datetime * 1000), end: new Date(e.end_datetime * 1000) }
-        })))
-
-      return attributes
-    }
-  },
-  methods: {
-    ...mapActions(['updateEvents', 'showPastEvents']),
-    updatePage (page) {
-      this.$emit('monthchange', page)
-    },
-    click (day) {
-      this.$emit('dayclick', day)
-      // const element = document.getElementById(day.day)
-      // if (element) { element.scrollIntoView() } // Even IE6 supports this
-    }
-  }
-}
-</script>
-
-<style>
-.vc-opacity-0 {
-  opacity: 0.3 !important;
-}
-
-.past-event {
-  opacity: 0.3;
-}
-</style>

components/Home.vue

@@ -1,159 +0,0 @@
-<template lang="pug">
-  v-container#home(fluid)
-
-    //- Announcements
-    Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
-
-    v-row#calbarmb-2
-      .col-xl-5.col-lg-5.col-md-6.col-sm-12.col-xs-12
-        v-date-picker(
-          @update:picker-date='monthChange'
-          @click:date='dayChange'
-          :locale='settings.locale'
-          :events='calendarEvents'
-          :value='date'
-          landscape)
-
-      .col
-        Search(
-          :filters='filters'
-          @update='updateFilters')
-        v-chip(v-if='selectedDay' close @click:close='dayChange(selectedDay)') {{selectedDay}}
-
-    #events
-      Event(v-for='event in events'
-        :key='event.id' :event='event'
-          @tagclick='tagClick' @placeclick='placeClick')
-
-</template>
-
-<script>
-import { mapState, mapActions } from 'vuex'
-import dayjs from 'dayjs'
-import Event from '@/components/Event'
-import Announcement from '@/components/Announcement'
-import Calendar from '@/components/Calendar'
-import Search from '@/components/Search'
-
-export default {
-  name: 'Home',
-  components: { Calendar, Event, Search, Announcement },
-  async asyncData ({ params }) {
-    const events = await this.$api.getEvents({
-      start: dayjs().unix(),
-      end: this.end,
-      places: this.filters.places,
-      tags: this.filters.tags
-    })
-    return { events }
-  },
-  data () {
-    return {
-      date: dayjs().format('YYYY-MM-DD'),
-      events: [],
-      start: dayjs().unix(),
-      end: null,
-      filters: { tags: [], places: [] },
-      selectedDay: null
-    }
-  },
-  computed: {
-    ...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,
-        places: this.filters.places,
-        tags: this.filters.tags
-      })
-      // this.setFilters(this.filters)
-    },
-    placeClick (place_id) {
-      if (this.filters.places.includes(place_id)) {
-        this.filters.places = this.filters.places.filter(p_id => p_id !== place_id)
-      } else {
-        this.filters.places.push(place_id)
-      }
-      this.updateEvents()
-    },
-    tagClick (tag) {
-      if (this.filters.tags.includes(tag)) {
-        this.filters.tags = this.filters.tags.filter(t => t !== tag)
-      } else {
-        this.filters.tags.push(tag)
-      }
-      this.updateEvents()
-    },
-    updateFilters (filters) {
-      this.filters = filters
-      this.updateEvents()
-    },
-    monthChange (monthYear) {
-      this.selectedDay = null
-      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.end = dayjs().year(year).month(month - 1).endOf('month').unix() // .endOf('week').unix()
-      this.end = null
-      this.updateEvents()
-    },
-    dayChange (day) {
-      if (this.selectedDay === day) {
-        this.selectedDay = null
-        this.date = dayjs().format('YYYY-MM-DD')
-        this.start = dayjs().unix() // .startOf('week').unix()
-        this.end = null
-        this.updateEvents()
-        return
-      }
-      this.start = dayjs(day).unix()
-      this.end = dayjs(day).endOf('day').unix()
-      this.date = dayjs(day).format('YYYY-MM-DD')
-      this.selectedDay = day
-      this.updateEvents()
-    }
-  },
-  head () {
-    return {
-      title: this.settings.title,
-      meta: [
-        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
-        { hid: 'description', name: 'description', content: this.settings.description },
-        { hid: 'og-description', name: 'og:description', content: this.settings.description },
-        { hid: 'og-title', property: 'og:title', content: this.settings.title },
-        { hid: 'og-url', property: 'og:url', content: this.settings.baseurl },
-        { property: 'og:image', content: this.settings.baseurl + '/favicon.ico' }
-      ],
-      link: [
-        { rel: 'alternate', type: 'application/rss+xml', title: this.settings.title, href: this.settings.baseurl + '/feed/rss' }
-      ]
-    }
-  }
-}
-</script>
-<style lang='less'>
-#home {
-  max-width: 1400px;
-}
-
-#events {
-  margin: 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-</style>

nuxt.config.js

@@ -42,7 +42,6 @@ module.exports = {
     '@/plugins/axios', // axios baseurl configuration
     '@/plugins/validators', // inject validators
     '@/plugins/api' // api helpers
-    // { src: '@/plugins/v-calendar', ssr: false } // calendar, fix ssr
   ],
 
   render: {

pages/event/eventAdmin.vue

@@ -16,7 +16,6 @@ div
     v-btn(text color='primary' @click='remove(true)') {{$t('common.remove')}}
 </template>
 <script>
-import { mapActions } from 'vuex'
 
 export default {
   name: 'EventAdmin',
@@ -27,13 +26,11 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['delEvent']),
     async remove (parent = false) {
       const ret = await this.$root.$confirm(`event.remove_${parent ? 'recurrent_' : ''}confirmation`)
       if (!ret) { return }
       const id = parent ? this.event.parentId : this.event.id
       await this.$axios.delete(`/event/${id}`)
-      this.delEvent(Number(id))
       this.$router.replace('/')
     },
     async toggle (parent = false) {

pages/index.vue

@@ -1,20 +1,155 @@
-<template lang='pug'>
+<template lang="pug">
-  Home
+  v-container#home(fluid)
+
+    //- Announcements
+    Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
+
+    v-row#calbarmb-2
+      .col-xl-5.col-lg-5.col-md-6.col-sm-12.col-xs-12
+        v-date-picker(
+          @update:picker-date='monthChange'
+          @click:date='dayChange'
+          :locale='settings.locale'
+          :events='calendarEvents'
+          :value='date'
+          landscape)
+
+      .col
+        Search(
+          :filters='filters'
+          @update='updateFilters')
+        v-chip(v-if='selectedDay' close @click:close='dayChange(selectedDay)') {{selectedDay}}
+
+    #events
+      Event(v-for='event in events'
+        :key='event.id' :event='event'
+          @tagclick='tagClick' @placeclick='placeClick')
+
 </template>
+
 <script>
-import Home from '~/components/Home.vue'
+import { mapState, mapActions } from 'vuex'
-import moment from 'moment-timezone'
+import dayjs from 'dayjs'
-import { mapState } from 'vuex'
+import Event from '@/components/Event'
+import Announcement from '@/components/Announcement'
+import Search from '@/components/Search'
 
 export default {
   name: 'Index',
-  components: { Home },
+  components: { Event, Search, Announcement },
-  fetch ({ store }) {
+  async asyncData ({ params, $api }) {
-    moment.tz.setDefault(store.state.settings.instance_timezone)
+    const events = await $api.getEvents({
+      start: dayjs().unix()
+    })
+    return { events }
   },
-  computed: mapState(['settings']),
+  data () {
-  mounted (ctx) {
+    return {
-    moment.tz.setDefault(this.settings.instance_timezone)
+      date: dayjs().format('YYYY-MM-DD'),
+      events: [],
+      start: dayjs().unix(),
+      end: null,
+      filters: { tags: [], places: [] },
+      selectedDay: null
+    }
+  },
+  computed: {
+    ...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,
+        places: this.filters.places,
+        tags: this.filters.tags
+      })
+      this.setFilters(this.filters)
+    },
+    placeClick (place_id) {
+      if (this.filters.places.includes(place_id)) {
+        this.filters.places = this.filters.places.filter(p_id => p_id !== place_id)
+      } else {
+        this.filters.places.push(place_id)
+      }
+      this.updateEvents()
+    },
+    tagClick (tag) {
+      if (this.filters.tags.includes(tag)) {
+        this.filters.tags = this.filters.tags.filter(t => t !== tag)
+      } else {
+        this.filters.tags.push(tag)
+      }
+      this.updateEvents()
+    },
+    updateFilters (filters) {
+      this.filters = filters
+      this.updateEvents()
+    },
+    monthChange (monthYear) {
+      this.selectedDay = null
+      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.end = dayjs().year(year).month(month - 1).endOf('month').unix() // .endOf('week').unix()
+      this.end = null
+      this.updateEvents()
+    },
+    dayChange (day) {
+      if (this.selectedDay === day) {
+        this.selectedDay = null
+        this.date = dayjs().format('YYYY-MM-DD')
+        this.start = dayjs().unix() // .startOf('week').unix()
+        this.end = null
+        this.updateEvents()
+        return
+      }
+      this.start = dayjs(day).unix()
+      this.end = dayjs(day).endOf('day').unix()
+      this.date = dayjs(day).format('YYYY-MM-DD')
+      this.selectedDay = day
+      this.updateEvents()
+    }
+  },
+  head () {
+    return {
+      title: this.settings.title,
+      meta: [
+        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+        { hid: 'description', name: 'description', content: this.settings.description },
+        { hid: 'og-description', name: 'og:description', content: this.settings.description },
+        { hid: 'og-title', property: 'og:title', content: this.settings.title },
+        { hid: 'og-url', property: 'og:url', content: this.settings.baseurl },
+        { property: 'og:image', content: this.settings.baseurl + '/favicon.ico' }
+      ],
+      link: [
+        { rel: 'alternate', type: 'application/rss+xml', title: this.settings.title, href: this.settings.baseurl + '/feed/rss' }
+      ]
+    }
   }
 }
 </script>
+<style lang='less'>
+#home {
+  max-width: 1400px;
+}
+
+#events {
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+</style>

plugins/v-calendar.js

@@ -1,7 +0,0 @@
-// import Vue from 'vue'
-// import VCalendar from 'v-calendar'
-// export default () => {
-//   Vue.use(VCalendar, {
-//     firstDayOfWeek: 2
-//   })
-// }