encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix from mounted to asyncData/fetch, fix #12

Browse Source
This commit is contained in:
lesion
2019-06-12 22:26:28 +02:00
parent 9003afd810
commit a9b73f373b
4 changed files with 147 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
layouts/error.vue
View File

@@ -1,8 +1,8 @@
<template lang='pug'> <template lang='pug'>
.container .container
#error #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> </template>
<script> <script>

2
nuxt.config.js
View File

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

241
pages/add/_edit.vue
View File

@@ -1,95 +1,97 @@
<template lang="pug"> <template lang="pug">
el-card el-card(v-loading='loading')
nuxt-link.float-right(to='/') nuxt-link.float-right(to='/')
el-button el-button
v-icon(name='times' color='red') v-icon(name='times' color='red')
h5 {{edit?$t('common.edit_event'):$t('common.add_event')}} h5 {{edit?$t('common.edit_event'):$t('common.add_event')}}
el-form(v-loading='loading') el-form
el-tabs.mb-2(v-model='activeTab') no-ssr
el-tabs.mb-2(v-model='activeTab')
//- NOT LOGGED EVENT //- NOT LOGGED EVENT
el-tab-pane(v-if='!$auth.loggedIn') el-tab-pane(v-if='!$auth.loggedIn')
span(slot='label') {{$t('event.anon')}} <v-icon name='user-secret'/> span(slot='label') {{$t('event.anon')}} <v-icon name='user-secret'/>
p(v-html="$t('event.anon_description')") p(v-html="$t('event.anon_description')")
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('common.next')}} el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('common.next')}}
//- WHERE //- WHERE
el-tab-pane el-tab-pane
span(slot='label') <v-icon name='map-marker-alt'/> {{$t('common.where')}} span(slot='label') <v-icon name='map-marker-alt'/> {{$t('common.where')}}
p(v-html="$t('event.where_description')") p(v-html="$t('event.where_description')")
el-select.mb-3(v-model='event.place.name' el-select.mb-3(v-model='event.place.name'
@change='placeChoosed' @change='placeChoosed'
filterable allow-create filterable allow-create
default-first-option default-first-option
) )
el-option(v-for='place in places' :label='place.name' :value='place.name' :key='place.id') el-option(v-for='place in places' :label='place.name' :value='place.name' :key='place.id')
span {{place.name}} span {{place.name}}
div {{$t("common.address")}} div {{$t("common.address")}}
el-input.mb-3(ref='address' v-model='event.place.address' el-input.mb-3(ref='address' v-model='event.place.address'
:disabled='places_name.indexOf(event.place.name)>-1' :disabled='places_name.indexOf(event.place.name)>-1'
@keydown.native.enter='next') @keydown.native.enter='next')
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('common.next')}} el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('common.next')}}
//- WHEN //- WHEN
el-tab-pane el-tab-pane
span(slot='label') {{$t('common.when')}} <v-icon name='clock'/> span(slot='label') {{$t('common.when')}} <v-icon name='clock'/>
span {{event.multidate ? $t('event.dates_description') : $t('event.date_description')}} span {{event.multidate ? $t('event.dates_description') : $t('event.date_description')}}
el-switch.float-right(v-model='event.multidate' :active-text="$t('event.multidate_description')") el-switch.float-right(v-model='event.multidate' :active-text="$t('event.multidate_description')")
v-date-picker.mb-3( v-date-picker.mb-3(
:mode='event.multidate ? "range" : "single"' :mode='event.multidate ? "range" : "single"'
:attributes='attributes' :attributes='attributes'
v-model='date' v-model='date'
is-inline :from-page.sync='page'
is-expanded is-inline
:min-date='new Date()' is-expanded
) :min-date='new Date()'
)
el-row el-row
el-col(:span='12') el-col(:span='12')
div {{$t('event.time_start_description')}} div {{$t('event.time_start_description')}}
el-time-select.mb-3(ref='time_start' el-time-select.mb-3(ref='time_start'
v-model="time.start" v-model="time.start"
:picker-options="{ start: '00:00', step: '00:30', end: '24:00'}") :picker-options="{ start: '00:00', step: '00:30', end: '24:00'}")
div {{$t('event.time_end_description')}} div {{$t('event.time_end_description')}}
el-time-select(v-model='time.end' el-time-select(v-model='time.end'
:picker-options="{start: '00:00', step: '00:30', end: '24:00'}") :picker-options="{start: '00:00', step: '00:30', end: '24:00'}")
el-col(:span='12') el-col(:span='12')
List(:events='todayEvents' :title='$t("event.same_day")') List(:events='todayEvents' :title='$t("event.same_day")')
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('common.next')}} el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('common.next')}}
//- WHAT //- WHAT
el-tab-pane el-tab-pane
span(slot='label') {{$t('common.what')}} <v-icon name='file-alt'/> span(slot='label') {{$t('common.what')}} <v-icon name='file-alt'/>
span {{$t('event.what_description')}} span {{$t('event.what_description')}}
el-input.mb-3(v-model='event.title' ref='title') el-input.mb-3(v-model='event.title' ref='title')
span {{$t('event.description_description')}} span {{$t('event.description_description')}}
el-input.mb-3(v-model='event.description' type='textarea' :rows='9') el-input.mb-3(v-model='event.description' type='textarea' :rows='9')
span {{$t('event.tag_description')}} span {{$t('event.tag_description')}}
br br
el-select(v-model='event.tags' multiple filterable allow-create el-select(v-model='event.tags' multiple filterable allow-create
default-first-option placeholder='Tag') default-first-option placeholder='Tag')
el-option(v-for='tag in tags' :key='tag.tag' el-option(v-for='tag in tags' :key='tag.tag'
:label='tag' :value='tag') :label='tag' :value='tag')
el-button.float-right(@click.native='next' :disabled='!couldProceed') {{$t('common.next')}} el-button.float-right(@click.native='next' :disabled='!couldProceed') {{$t('common.next')}}
el-tab-pane el-tab-pane
span(slot='label') {{$t('common.media')}} <v-icon name='image'/> span(slot='label') {{$t('common.media')}} <v-icon name='image'/>
el-upload.text-center( el-upload.text-center(
action='' action=''
:limit="1" :limit="1"
:auto-upload='false' :auto-upload='false'
drag drag
:on-change='uploadedFile' :on-change='uploadedFile'
:multiple='false' :multiple='false'
:file-list="fileList" :file-list="fileList"
) )
i.el-icon-upload i.el-icon-upload
div.el-upload__text {{$t('event.media_description')}} div.el-upload__text {{$t('event.media_description')}}
el-button.float-right(@click='done' :disabled='!couldProceed') {{edit?$t('common.edit'):$t('common.send')}} el-button.float-right(@click='done' :disabled='!couldProceed') {{edit?$t('common.edit'):$t('common.send')}}
</template> </template>
<script> <script>
@@ -102,6 +104,8 @@ export default {
name: 'Add', name: 'Add',
components: { List }, components: { List },
data() { data() {
const month = moment().month()+1
const year = moment().year()
return { return {
event: { event: {
place: { name: '', address: '' }, place: { name: '', address: '' },
@@ -109,8 +113,8 @@ export default {
multidate: false, multidate: false,
image: false image: false
}, },
page: { month, year},
fileList: [], fileList: [],
open: true,
id: null, id: null,
activeTab: "0", activeTab: "0",
date: null, date: null,
@@ -124,28 +128,57 @@ export default {
'time.start' (value) { 'time.start' (value) {
let [h, m] = value.split(':') let [h, m] = value.split(':')
this.time.end = (Number(h)+1) + ':' + m 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
this.event.description = event.description.replace(/(<([^>]+)>)/ig, '')
this.event.id = event.id
if (event.tags) {
this.event.tags = event.tags.map(t => t.tag)
}
} }
this.updateMeta() },
this.loading = false async asyncData ( { params, $axios, error }) {
if (params.edit) {
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) {
data.event.tags = event.tags.map(t => t.tag)
}
data.loading = false
return data
}
console.error('prima del return')
return { loading: false }
}, },
computed: { computed: {
...mapState({ ...mapState({
@@ -161,7 +194,11 @@ export default {
}, },
...mapGetters(['filteredEvents']), ...mapGetters(['filteredEvents']),
attributes () { 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 () { disableAddress () {
return this.places_name.find(p => p.name === this.event.place.name) return this.places_name.find(p => p.name === this.event.place.name)
@@ -187,7 +224,7 @@ export default {
} }
}, },
methods: { methods: {
...mapActions(['addEvent', 'updateEvent', 'updateMeta']), ...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']),
eventToAttribute(event) { eventToAttribute(event) {
let e = { let e = {
key: event.id, key: event.id,
@@ -201,12 +238,10 @@ export default {
e.dates = { e.dates = {
start: event.start_datetime, end: event.end_datetime start: event.start_datetime, end: event.end_datetime
} }
e.highlight = { backgroundColor: color, e.highlight = { }
// borderColor: 'transparent',
borderWidth: '4px' }
} else { } else {
e.dates = event.start_datetime e.dates = event.start_datetime
e.dot = { backgroundColor: color, borderColor: color, borderWidth: '3px' } e.dot = { }
} }
return e return e
}, },

6
server/api/controller/event.js
View File

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