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

.

Browse Source
This commit is contained in:
lesion
2019-05-30 12:04:14 +02:00
parent 69792b518e
commit 6099d538c0
47 changed files with 1220 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
pages/add/_edit.vue
View File

@@ -1,8 +1,7 @@
<template lang="pug">
b-modal(ref='modal' @hidden='$router.replace("/")' size='lg' :visible='true'
:title="edit?$t('common.edit_event'):$t('common.add_event')" hide-footer)
el-form
el-tabs.mb-2(v-model='activeTab' v-loading='sending')
el-dialog(:before-close='close' :visible='open' :title="edit?$t('common.edit_event'):$t('common.add_event')")
el-form(v-loading='loading')
el-tabs.mb-2(v-model='activeTab')
//- NOT LOGGED EVENT
el-tab-pane(v-if='!$auth.loggedIn')
@@ -12,19 +11,28 @@
//- WHERE
el-tab-pane
span(slot='label') {{$t('common.where')}} <v-icon name='map-marker-alt'/>
div {{$t('common.where')}}
span(slot='label') <v-icon name='map-marker-alt'/> {{$t('common.where')}}
div {{$t('common.where')}}
el-popover(
placement="top-start"
width="400"
trigger="hover")
trigger="click")
v-icon(slot='reference' color='#ff9fc4' name='question-circle')
slot
p {{$t('event.where_description')}}
el-select.mb-3(v-model='event.place.name' @change='placeChoosed' filterable allow-create default-first-option)
p(v-html="$t('event.where_description')")
el-select.mb-3(v-model='event.place.name'
@change='placeChoosed'
filterable allow-create
default-first-option
)
el-option(v-for='place in places_name' :label='place' :value='place' :key='place.id')
div {{$t("common.address")}}
el-input.mb-3(ref='address' v-model='event.place.address' :disabled='places_name.indexOf(event.place.name)>-1' @keydown.native.enter='next')
br
br
div {{$t("common.address")}} {{event.place.name}}
el-input.mb-3(ref='address' v-model='event.place.address'
:disabled='places_name.indexOf(event.place.name)>-1'
@keydown.native.enter='next')
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('common.next')}}
//- WHEN
@@ -32,15 +40,27 @@
span(slot='label') {{$t('common.when')}} <v-icon name='clock'/>
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')")
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')
div {{$t('event.time_start_description')}}
el-time-select.mb-3(ref='time_start'
v-model="time.start"
:picker-options="{ start: '00:00', step: '00:30', end: '24:00'}")
div {{$t('event.time_end_description')}}
el-time-select(v-model='time.end'
:picker-options="{start: '00:00', step: '00:30', end: '24:00'}")
v-date-picker.mb-3(
:mode='event.multidate ? "range" : "single"'
:attributes='attributes'
v-model='date'
is-inline
is-expanded
:min-date='new Date()'
)
el-row
el-col(:span='12')
div {{$t('event.time_start_description')}}
el-time-select.mb-3(ref='time_start'
v-model="time.start"
:picker-options="{ start: '00:00', step: '00:30', end: '24:00'}")
div {{$t('event.time_end_description')}}
el-time-select(v-model='time.end'
:picker-options="{start: '00:00', step: '00:30', end: '24:00'}")
el-col(:span='12')
List(:events='todayEvents' :title='$t("event.same_day")')
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('common.next')}}
//- WHAT
@@ -61,35 +81,45 @@
el-tab-pane
span(slot='label') {{$t('common.media')}} <v-icon name='image'/>
span {{$t('event.media_description')}}
b-form-file.mb-2(v-model='event.image', :placeholder='$t("common.poster")' accept='image/*')
el-button.float-right(@click='done') {{edit?$t('common.edit'):$t('common.send')}}
el-upload.text-center(
action=''
:limit="1"
:auto-upload='false'
drag
:on-change='uploadedFile'
:multiple='false'
:file-list="fileList"
)
i.el-icon-upload
div.el-upload__text {{$t('event.media_description')}}
el-button.float-right(@click='done' :disabled='!couldProceed') {{edit?$t('common.edit'):$t('common.send')}}
</template>
<script>
// import api from '@/plugins/api'
import { mapActions, mapState } from 'vuex'
import { mapActions, mapState, mapGetters } from 'vuex'
import moment from 'dayjs'
import Calendar from '@/components/Calendar'
import List from '@/components/List'
import { Message } from 'element-ui'
export default {
components: { Calendar },
name: 'Add',
components: { List },
data() {
return {
event: {
place: { name: '', address: '' },
title: '', description: '', tags: [],
multidate: false,
image: false
},
visible: true,
fileList: [],
open: true,
id: null,
activeTab: "0",
date: null,
time: { start: '20:00', end: null },
edit: false,
sending: false,
loading: true,
}
},
name: 'newEvent',
@@ -100,11 +130,10 @@ export default {
}
},
async mounted () {
if (this.$route.params.id) {
this.id = this.$route.params.id
if (this.$route.params.edit) {
this.id = this.$route.params.edit
this.edit = true
const event = await api.getEvent(this.id)
// this.event.place = {name: event.place.name, address: event.place.address }
const event = await this.$axios.$get('/event/'+ this.id)
this.event.place.name = event.place.name
this.event.place.address = event.place.address || ''
this.event.multidate = event.multidate
@@ -119,6 +148,7 @@ export default {
}
}
this.updateMeta()
this.loading = false
},
computed: {
...mapState({
@@ -126,12 +156,18 @@ export default {
places_name: state => state.places.map(p => p.name ),
places: state => state.places,
user: state => state.user,
events: state => state.events
}),
todayEvents () {
const date = moment(this.date)
return this.events.filter(e => date.isSame(moment(e.start_datetime), 'day'))
},
...mapGetters(['filteredEvents']),
attributes () {
return this.events.filter(e => !e.past).map(this.eventToAttribute)
},
disableAddress () {
console.log('dentro disable Address')
const ret = this.places_name.find(p => p.name === this.event.place.name)
console.log(ret)
return ret
return this.places_name.find(p => p.name === this.event.place.name)
},
couldProceed () {
const t = this.$auth.loggedIn ? -1 : 0
@@ -143,18 +179,45 @@ export default {
this.event.place.address.length>0
case 2+t:
if (this.date && this.time.start) return true
break
case 3+t:
return this.event.title.length>0
break
case 4+t:
return true
break
return this.event.place.name.length>0 &&
this.event.place.address.length>0 &&
(this.date && this.time.start) &&
this.event.title.length>0
}
}
},
methods: {
...mapActions(['addEvent', 'updateEvent', 'updateMeta']),
close (done) {
this.$router.replace('/')
done()
},
eventToAttribute(event) {
let e = {
key: event.id,
customData: event,
order: event.start_datetime,
}
const day = moment(event.start_datetime).date()
let color = event.tags && event.tags.length && event.tags[0].color ? event.tags[0].color : 'rgba(170,170,250,0.7)'
if (event.past) color = 'rgba(200,200,200,0.5)'
if (event.multidate) {
e.dates = {
start: event.start_datetime, end: event.end_datetime
}
e.highlight = { backgroundColor: color,
// borderColor: 'transparent',
borderWidth: '4px' }
} else {
e.dates = event.start_datetime
e.dot = { backgroundColor: color, borderColor: color, borderWidth: '3px' }
}
return e
},
next () {
this.activeTab = String(Number(this.activeTab)+1)
if (this.activeTab === "2") {
@@ -171,6 +234,9 @@ export default {
}
this.$refs.address.focus()
},
uploadedFile(file, fileList) {
this.event.image = file
},
async done () {
let start_datetime, end_datetime
const [ start_hour, start_minute ] = this.time.start.split(':')
@@ -191,7 +257,7 @@ export default {
const formData = new FormData()
if (this.event.image) {
formData.append('image', this.event.image, this.event.image.name)
formData.append('image', this.event.image.raw, this.event.image.name)
}
formData.append('title', this.event.title)
formData.append('place_name', this.event.place.name)
@@ -205,7 +271,7 @@ export default {
}
if (this.event.tags)
this.event.tags.forEach(tag => formData.append('tags[]', tag))
this.sending = true
this.loading = true
try {
if (this.edit) {
await this.updateEvent(formData)
@@ -213,11 +279,11 @@ export default {
await this.addEvent(formData)
}
this.updateMeta()
this.sending = false
this.$refs.modal.hide()
this.loading = false
this.$router.replace('/')
Message({ type: 'success', message: this.$auth.loggedIn ? this.$t('event.added') : this.$t('event.added_anon')})
} catch (e) {
this.sending = false
this.loading = false
console.error(e)
}
}