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

refactoring online events

Browse Source
This commit is contained in:
lesion
2023-04-05 16:14:55 +02:00
parent 121af4872d
commit 8c8103a5ee
12 changed files with 139 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
components/WhereInput.vue
View File

@@ -1,6 +1,7 @@
<template lang="pug">
v-row.mb-4
v-col(cols=12 md=6)
//- this is the name used by people
v-combobox(ref='place'
:rules="[$validators.required('common.where')]"
:label="$t('common.where')"
@@ -18,6 +19,8 @@ v-row.mb-4
v-list-item(v-bind='attrs' v-on='on')
v-list-item-content(two-line v-if='item.create')
v-list-item-title <v-icon color='primary' v-text='mdiPlus' :aria-label='$t("common.add")'></v-icon> {{$t('common.add')}} <strong>{{item.name}}</strong>
v-list-item-content(two-line v-else-if='item.online')
v-list-item-title <v-icon color='primary' v-text='mdiLaptopAccount' :aria-label='$t("common.online")'></v-icon> {{$t('common.online')}}
v-list-item-content(two-line v-else)
v-list-item-title(v-text='item.name')
v-list-item-subtitle(v-text='item.address')
@@ -34,14 +37,14 @@ v-row.mb-4
:label="$t('common.address')"
:hint="$t('event.address_description')"
persistent-hint)
template(v-slot:append v-if="!hideWhereInputAdvancedDialogButton")
v-icon(v-text='mdiCog' :disabled='!(value.name && settings.allow_event_also_online) && !(value.isNew && settings.allow_geolocation)'
template(v-slot:append v-if="showAdvancedDialogButton")
v-icon(v-text='mdiCog'
@click="whereInputAdvancedDialog = true")
v-combobox.mr-4(v-model="onlineLocations" v-if="settings.allow_event_only_online && value.name === 'online'"
v-combobox.mr-4(v-model="onlineLocations" v-else
:prepend-icon='mdiLink'
:hint="$t('event.online_locations_help')"
:label="$t('event.online_locations_url')"
:label="$t('event.online_locations')"
clearable chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ';', '; ']"
:items="onlineLocations"
@@ -50,24 +53,21 @@ v-row.mb-4
v-chip(v-bind="attrs" :outlined='index !== 0'
close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
:input-value="selected" label small) {{ item }}
template(v-slot:append)
v-icon(v-text='mdiCog' :disabled='!value.name' @click="whereInputAdvancedDialog = true")
//- template(v-slot:append)
//- v-icon(v-text='mdiCog' :disabled='!value.name' @click="whereInputAdvancedDialog = true")
v-dialog(v-model='whereInputAdvancedDialog' :key="whereAdvancedId" destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly' dense)
WhereInputAdvanced(ref='whereAdvanced' :place.sync='value' :event='event' @close='whereInputAdvancedDialog = false && this.$refs.address.blur()'
v-dialog(v-model='whereInputAdvancedDialog' destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly' dense)
WhereInputAdvanced(ref='whereAdvanced' :place.sync='value' :event='event'
@close='whereInputAdvancedDialog = false && this.$refs.address.blur()'
:onlineLocations.sync="onlineLocations"
:event_only_online_value.sync='event_only_online'
@update:onlineEvent="changeEventOnlyOnline"
@update:onlineLocations="selectLocations"
)
@update:onlineLocations="selectLocations")
</template>
<script>
import { mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle } from '@mdi/js'
import { mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle, mdiLaptopAccount } from '@mdi/js'
import { mapState } from 'vuex'
import debounce from 'lodash/debounce'
import get from 'lodash/get'
import WhereInputAdvanced from './WhereInputAdvanced.vue'
export default {
@@ -79,38 +79,45 @@ export default {
components: { WhereInputAdvanced },
data ( {$store} ) {
return {
mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle,
mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle, mdiLaptopAccount,
places: [],
place: { },
placeName: '',
disableAddress: true,
whereInputAdvancedDialog: false,
hideWhereInputAdvancedDialogButton: !$store.state.settings.allow_event_also_online && !$store.state.settings.allow_geolocation,
onlineLocations: this.event.online_locations || [],
event_only_online: (this.value.name === 'online') ? true : false,
whereAdvancedId: 1
}
},
computed: {
...mapState(['settings']),
filteredPlaces () {
if (!this.placeName) { return this.places }
const placeName = this.placeName.trim().toLowerCase()
let nameMatch = false
const matches = this.places.filter(p => {
const tmpName = p.name.toLowerCase()
const tmpAddress = p.address.toLowerCase()
if (tmpName.includes(placeName)) {
if (tmpName === placeName) { nameMatch = true }
return true
}
return tmpAddress.includes(placeName)
})
if (!nameMatch) {
matches.unshift({ create: true, name: this.placeName })
showAdvancedDialogButton () {
if (!(this.settings.allow_geolocation || this.settings.allow_online_event)) {
return false
}
return matches
if (!this.place.isNew && !this.settings.allow_online_event) return false
return true
}
// filteredPlaces () {
// if (!this.placeName) { return this.places }
// const placeName = this.placeName.trim().toLowerCase()
// let nameMatch = false
// const matches = this.places.filter(p => {
// const tmpName = p.name.toLowerCase()
// const tmpAddress = p.address.toLowerCase()
// if (tmpName.includes(placeName)) {
// if (tmpName === placeName) { nameMatch = true }
// return true
// }
// return tmpAddress.includes(placeName)
// })
// if (!nameMatch) {
// matches.unshift({ create: true, name: this.placeName })
// }
// return matches
// }
},
mounted () {
this.$nextTick( () => {
@@ -120,28 +127,32 @@ export default {
methods: {
search: debounce(async function(ev) {
const search = ev ? ev.target.value.trim().toLowerCase() : ''
this.places = await this.$axios.$get(`place?search=${search}`)
this.places = await this.$axios.$get('place', { params: { search } })
// Filter out the place with name 'online' if not allowed
if (this.places.length && !this.settings.allow_event_only_online) {
if (this.places.length) {
this.places = this.places.filter(p => p.name !== 'online')
}
if (this.settings.allow_online_event) {
this.places.push({ online: true, name: 'online' })
}
if (!search && this.places.length) {
return this.places
}
const matches = this.places.filter(p => p.name !== 'online').find(p => search === p.name.toLocaleLowerCase())
const matches = this.places.find(p => search === p.name.toLocaleLowerCase())
if (!matches && search) {
this.places.unshift({ create: true, name: ev.target.value.trim() })
}
}, 200),
selectPlace (p) {
// force online events under place: online address: online
this.event_only_online = false
// this.event_only_online = false
this.place.isNew = false
this.whereAdvancedId++
// this.whereAdvancedId++
if (!p) { return }
if (typeof p === 'object' && !p.create) {
if (typeof p === 'object' && !p.create && !p.online) {
if (p.id === this.value.id) return
this.place.name = p.name
this.place.address = p.address
@@ -150,9 +161,9 @@ export default {
this.place.longitude = p.longitude
}
this.place.id = p.id
if (this.settings.allow_event_only_online && this.place.name === 'online') {
this.event_only_online = true
}
// if (this.settings.allow_event_only_online && this.place.name === 'online') {
// this.event_only_online = true
// }
this.disableAddress = true
} else { // this is a new place
this.place.isNew = true
@@ -173,15 +184,15 @@ export default {
this.place.longitude = p.longitude
}
// If 'event only online' is not allowed: reset place and online_locations
if (this.place.name === 'online') {
if (!this.settings.allow_event_only_online) {
this.$nextTick(() => { this.$refs.place && this.$refs.place.setValue('') && this.$refs.place.focus() })
this.event.online_locations = []
return
} else {
this.event_online_only = true
}
}
// if (this.place.name === 'online') {
// if (!this.settings.allow_event_only_online) {
// this.$nextTick(() => { this.$refs.place && this.$refs.place.setValue('') && this.$refs.place.focus() })
// this.event.online_locations = []
// return
// } else {
// this.event_online_only = true
// }
// }
this.disableAddress = false
this.$refs.place.blur()
this.$nextTick(() => { this.$refs.address && this.$refs.address.focus() })
@@ -206,18 +217,18 @@ export default {
})
}
},
changeEventOnlyOnline(v) {
this.event_only_online = v
// console.log(this.event_only_online)
if (this.event_only_online) { this.place.name = this.place.address = 'online' }
if (!this.event_only_online) { this.place.name = this.place.address = ''; this.onlineLocations = [] }
this.place.latitude = null
this.place.longitude = null
// changeEventOnlyOnline(v) {
// this.event_only_online = v
// // console.log(this.event_only_online)
// if (this.event_only_online) { this.place.name = this.place.address = 'online' }
// if (!this.event_only_online) { this.place.name = this.place.address = ''; this.onlineLocations = [] }
// this.place.latitude = null
// this.place.longitude = null
// Update onlineLocations
this.event.online_locations && this.selectLocations()
this.$emit('input', { ...this.place })
},
// // Update onlineLocations
// this.event.online_locations && this.selectLocations()
// this.$emit('input', { ...this.place })
// },
}
}
</script>