front end, config
This commit is contained in:
lesion
206
client/src/components/newEvent.vue
Normal file
206
client/src/components/newEvent.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template lang="pug">
|
||||
b-modal(hide-header hide-footer no-close-on-backdrop
|
||||
@hide='$router.go(-1)' no-close-on-esc size='lg' :visible='true')
|
||||
h4.text-center.center {{edit?$t('Edit event'):$t('New event')}}
|
||||
b-tabs#tabss(pills v-model='activeTab')
|
||||
b-form
|
||||
b-tab
|
||||
template(slot='title')
|
||||
v-icon(name='map-marker-alt')
|
||||
span {{$t('Where')}}
|
||||
b-card-body
|
||||
span.text-muted {{$t('where_explanation')}}
|
||||
typeahead.mb-3(v-model='event.place.name' :data='places_name' @enter='placeChoosed')
|
||||
span.text-muted {{$t('address_explanation')}}
|
||||
b-form-input(ref='address' v-model='event.place.address' @keydown.native.enter='next')
|
||||
b-tab
|
||||
template(slot='title')
|
||||
v-icon(name='clock')
|
||||
span {{$t('When')}}
|
||||
b-card-body
|
||||
el-switch.float-right(v-model='event.multidate' :active-text="$t('multidate_explanation')")
|
||||
span.text-muted {{event.multidate ? $t('dates_explanation') : $t('date_explanation')}}
|
||||
v-date-picker.mb-3(:mode='event.multidate ? "range" : "single"' v-model='date' is-inline
|
||||
is-expanded :min-date='new Date()' @input='date ? $refs.time_start.focus() : false')
|
||||
b-row
|
||||
b-col
|
||||
label.text-muted {{$t('time_start_explanation')}}
|
||||
el-time-select(ref='time_start'
|
||||
v-model="time.start"
|
||||
:picker-options="{ start: '00:00', step: '00:30', end: '24:00'}")
|
||||
b-col.text-right
|
||||
label.text-muted {{$t('time_end_explanation')}}
|
||||
el-time-select(
|
||||
v-model='time.end'
|
||||
:picker-options="{start: `${event.multidate?'00:00':time.start}`, step: '00:30', end: '24:00'}"
|
||||
)
|
||||
|
||||
b-tab
|
||||
template(slot='title')
|
||||
v-icon(name='file-alt')
|
||||
span {{$t('What')}}
|
||||
b-card-body
|
||||
span.text-muted {{$t('what_explanation')}}
|
||||
b-form-input.mb-3(v-model.trim='event.title' autocomplete='off')
|
||||
span.text-muted {{$t('description_explanation')}}
|
||||
b-form-textarea.mb-3(v-model='event.description' :rows='3')
|
||||
span.text-muted {{$t('tag_explanation')}}
|
||||
typeahead(v-model="event.tags" :data='tags' multiple)
|
||||
b-tab
|
||||
template(slot='title')
|
||||
v-icon(name='image')
|
||||
span {{$t('Media')}}
|
||||
b-card-body
|
||||
span.text-muted {{$t('media_explanation')}}
|
||||
b-form-file(v-model='event.image', :placeholder='$t("Poster")' accept='image/*')
|
||||
b-button(v-if='activeTab==0' variant='danger' @click='$router.go(-1)') {{$t('Cancel')}}
|
||||
b-button.float-left(v-else variant='danger' @click='prev') {{$t('Prev')}}
|
||||
b-button.float-right(v-if='activeTab<3' variant='success' @click='next' :disabled='!couldProceed') {{$t('Next')}}
|
||||
b-button.float-right(v-else variant='success' @click='done') {{edit?$t('Edit'):$t('Send')}}
|
||||
</template>
|
||||
<script>
|
||||
import api from '@/api'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
event: {
|
||||
place: { name: '', address: '' },
|
||||
title: '', description: '', tags: [],
|
||||
multidate: false,
|
||||
},
|
||||
id: null,
|
||||
activeTab: 0,
|
||||
date: null,
|
||||
time: { start: '00:00', end: null },
|
||||
edit: false
|
||||
}
|
||||
},
|
||||
name: 'newEvent',
|
||||
async mounted () {
|
||||
if (this.$route.params.id) {
|
||||
this.id = this.$route.params.id
|
||||
this.edit = true
|
||||
const event = await api.getEvent(this.id)
|
||||
// this.event.place = {name: event.place.name, address: event.place.address }
|
||||
this.event.place.name = event.place.name
|
||||
this.event.place.address = event.place.address || ''
|
||||
this.event.multidate = event.multidate
|
||||
this.date = event.start_datetime
|
||||
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
|
||||
this.event.id = event.id
|
||||
if (event.tags) {
|
||||
this.event.tags = event.tags.map(t => t.tag)
|
||||
}
|
||||
|
||||
}
|
||||
this.updateMeta()
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
tags: state => state.tags.map(t => t.tag ),
|
||||
places_name: state => state.places.map(p => p.name ),
|
||||
places: state => state.places
|
||||
}),
|
||||
couldProceed () {
|
||||
switch(this.activeTab) {
|
||||
case 0:
|
||||
return this.event.place.name.length>0 &&
|
||||
this.event.place.address.length>0
|
||||
case 1:
|
||||
return true
|
||||
break
|
||||
case 2:
|
||||
return this.event.title.length>0
|
||||
break
|
||||
case 3:
|
||||
return true
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['addEvent', 'updateEvent', 'updateMeta']),
|
||||
next () {
|
||||
this.activeTab++
|
||||
},
|
||||
prev () {
|
||||
this.activeTab--
|
||||
},
|
||||
placeChoosed () {
|
||||
const place = this.places.find( p => p.name === this.event.place.name )
|
||||
if (place && place.address) {
|
||||
this.event.place.address = place.address
|
||||
}
|
||||
this.$refs.address.focus()
|
||||
},
|
||||
async done () {
|
||||
let start_datetime, end_datetime
|
||||
const [ start_hour, start_minute ] = this.time.start.split(':')
|
||||
if (!this.time.end) {
|
||||
this.time.end = this.time.start
|
||||
}
|
||||
const [ end_hour, end_minute ] = this.time.end.split(':')
|
||||
if (this.event.multidate) {
|
||||
start_datetime = moment(this.date.start)
|
||||
.hour(start_hour).minute(start_minute)
|
||||
end_datetime = moment(this.date.end)
|
||||
.hour(end_hour).minute(end_minute)
|
||||
} else {
|
||||
start_datetime = moment(this.date)
|
||||
.hour(start_hour).minute(start_minute)
|
||||
end_datetime = moment(this.date)
|
||||
.hour(end_hour).minute(end_minute)
|
||||
}
|
||||
const formData = new FormData()
|
||||
|
||||
if (this.event.image) {
|
||||
formData.append('image', this.event.image, this.event.image.name)
|
||||
}
|
||||
formData.append('title', this.event.title)
|
||||
formData.append('place_name', this.event.place.name)
|
||||
formData.append('place_address', this.event.place.address)
|
||||
formData.append('description', this.event.description)
|
||||
formData.append('multidate', this.event.multidate)
|
||||
formData.append('start_datetime', start_datetime)
|
||||
formData.append('end_datetime', end_datetime)
|
||||
if (this.edit) {
|
||||
formData.append('id', this.event.id)
|
||||
}
|
||||
if (this.event.tags)
|
||||
this.event.tags.forEach(tag => formData.append('tags[]', tag))
|
||||
|
||||
try {
|
||||
if (this.edit) {
|
||||
await this.updateEvent(formData)
|
||||
} else {
|
||||
await this.addEvent(formData)
|
||||
}
|
||||
this.updateMeta()
|
||||
this.$router.go(-1)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
#tabss ul {
|
||||
justify-content: space-evenly;
|
||||
background: linear-gradient( #fff, #FFF 22px, #007bff, #fff 23px, #fff)
|
||||
}
|
||||
|
||||
#tabss ul .nav-link {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#tabss ul .nav-link.active {
|
||||
background-color: #007bff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user