fix from mounted to asyncData/fetch, fix #12

layouts/error.vue

@@ -1,8 +1,8 @@
 <template lang='pug'>
   .container
     #error
-      h1(v-if="error.statusCode === 404") Page not found
+      h1(v-if="error.statusCode === 404") {{error.message}}
-      h1(v-else) An error occurred
+      h1(v-else) An error occurred {{error}}
 </template>
 
 <script>

nuxt.config.js

@@ -102,6 +102,6 @@ module.exports = {
       layouts: true
     },
     cache: true,
-    parallel: true
+    // parallel: true
   }
 }

pages/add/_edit.vue

@@ -1,11 +1,12 @@
 <template lang="pug">
-  el-card
+  el-card(v-loading='loading')
     nuxt-link.float-right(to='/')
       el-button
         v-icon(name='times' color='red')
     h5 {{edit?$t('common.edit_event'):$t('common.add_event')}}
 
-    el-form(v-loading='loading')
+    el-form
+      no-ssr
         el-tabs.mb-2(v-model='activeTab')
 
           //- NOT LOGGED EVENT
@@ -42,6 +43,7 @@
               :mode='event.multidate ? "range" : "single"'
               :attributes='attributes'
               v-model='date'
+              :from-page.sync='page'
               is-inline
               is-expanded
               :min-date='new Date()'
@@ -102,6 +104,8 @@ export default {
   name: 'Add',
   components: { List },
   data() {
+    const month = moment().month()+1
+    const year = moment().year()
     return {
       event: { 
         place: { name: '', address: '' },
@@ -109,8 +113,8 @@ export default {
         multidate: false,
         image: false
       },
+      page: { month, year},
       fileList: [],
-      open: true,
       id: null,
       activeTab: "0",
       date: null,
@@ -124,28 +128,57 @@ export default {
     'time.start' (value) {
       let [h, m] = value.split(':')
       this.time.end = (Number(h)+1) + ':' + m
+    },
+    // month selected
+    page () {
+      this.updateEvents(this.page)
     }
   },
-  async mounted () {
+  async fetch ({ store, $axios }) {
-    if (this.$route.params.edit) {
+    try {
-      this.id = this.$route.params.edit
+      const now = new Date()
-      this.edit = true
+      const events = await $axios.$get(`/event/${now.getMonth()}/${now.getFullYear()}`)
-      const event = await this.$axios.$get('/event/'+ this.id)
+      store.commit('setEvents', events)
-      this.event.place.name = event.place.name
+      const { tags, places } = await $axios.$get('/event/meta')
-      this.event.place.address = event.place.address || ''
+      store.commit('update', { tags, places })
-      this.event.multidate = event.multidate
+    } catch(e) {
-      this.date = event.start_datetime
+      console.error('Error ', e)
-      this.time.start = moment(event.start_datetime).format('HH:mm')
+    }
-      this.time.end = moment(event.end_datetime).format('HH:mm')
+  },
-      this.event.title = event.title
+  async asyncData ( { params, $axios, error }) {
-      this.event.description = event.description.replace(/(<([^>]+)>)/ig, '')
+    if (params.edit) {
-      this.event.id = event.id
+      const data = { time: {}, event: { place: {} }}
+      data.id = params.edit
+      data.edit = true
+      let event
+      try {
+        event = await $axios.$get('/event/'+ data.id)
+        console.error(event)
+      } catch (e) {
+        error({ statusCode: 404, message: 'Event not found!'})
+        return {}
+      }
+      data.event.place.name = event.place.name
+      data.event.place.address = event.place.address || ''
+      data.event.multidate = event.multidate
+      if (event.multidate) {
+        data.date = { start: new Date(event.start_datetime), end: new Date(event.end_datetime) }
+      } else {
+        data.date = new Date(event.start_datetime)// moment(event.start_datetime)
+      }
+      data.time.start = moment(event.start_datetime).format('HH:mm')
+      data.time.end = moment(event.end_datetime).format('HH:mm')
+      data.event.title = event.title
+      data.event.description = event.description.replace(/(<([^>]+)>)/ig, '')
+      data.event.id = event.id
       if (event.tags) {
-        this.event.tags = event.tags.map(t => t.tag)
+        data.event.tags = event.tags.map(t => t.tag)
       }
+      data.loading = false
+      return data
     }
-    this.updateMeta()
+    console.error('prima del return')
-    this.loading = false
+    return { loading: false }
   },
   computed: {
     ...mapState({
@@ -161,7 +194,11 @@ export default {
     },
     ...mapGetters(['filteredEvents']),
     attributes () {
-      return this.events.filter(e => !e.past).map(this.eventToAttribute)
+      const tmp_events = this.events
+        .filter(e => this.id ? e.id !== this.event.id : true)
+        .filter(e => !e.past)
+      
+      return tmp_events.map(this.eventToAttribute)
     },
     disableAddress () {
       return this.places_name.find(p => p.name === this.event.place.name)
@@ -187,7 +224,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['addEvent', 'updateEvent', 'updateMeta']),
+    ...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']),
     eventToAttribute(event) {
       let e = {
         key: event.id,
@@ -201,12 +238,10 @@ export default {
         e.dates = {
           start: event.start_datetime, end: event.end_datetime
         }
-        e.highlight = { backgroundColor: color,
+        e.highlight = { }
-          // borderColor: 'transparent',
-          borderWidth: '4px' }
       } else {
         e.dates = event.start_datetime
-        e.dot = { backgroundColor: color, borderColor: color, borderWidth: '3px' }
+        e.dot = { }
       }
       return e
     },    

server/api/controller/event.js

@@ -92,7 +92,11 @@ const eventController = {
       ],
     order: [ [Comment, 'id', 'DESC'], [Tag, 'weigth', 'DESC'] ]
     })
+    if (event) {
       res.json(event)
+    } else {
+      res.sendStatus(404)
+    }
   },
 
   async confirm(req, res) {