NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-01-31 16:42:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix: refactoring online locations UI, fix #400

Browse source
This commit is contained in:
lesion 2024-06-26 15:31:48 +02:00
parent d86d64d970
commit a60051bdef
No known key found for this signature in database
GPG key ID: 352918250B012177
4 changed files with 56 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/TBtn.vue
View file

@ -1,11 +1,11 @@
<template>
<v-tooltip top>
<template v-slot:activator="{ on, attrs}">
<v-btn v-bind="attrs" :to='to' :large="large" icon v-on="on" @click='$emit("click")' :color='color'>
<v-btn v-bind="attrs" :to='to' :large="large" :small="small" text icon v-on="on" @click='$emit("click")' :color='color'>
<slot />
</v-btn>
</template>
<span>{{ tooltip }}</span>
<span>{{ $t(tooltip) }}</span>
</v-tooltip>
</template>
<script>
@ -15,7 +15,8 @@ export default {
tooltip: String,
color: String,
to: String,
large: { type: Boolean, default: false }
large: { type: Boolean, default: false },
small: { type: Boolean, default: false }
}
}
</script>

60
components/WhereInput.vue
View file

@ -1,6 +1,6 @@
<template lang="pug">
v-row.mb-4
v-col(cols=12 md=6)
v-col(cols=12 md=4)
//- this is the name used by people
v-combobox(ref='place'
:rules="[$validators.required('common.where')]"
@ -26,10 +26,8 @@ v-row.mb-4
v-list-item-subtitle(v-text='item.address')
v-col(cols=12 md=6)
v-row.mx-0.my-0.align-center.justify-center
v-text-field.mr-4(ref='address' v-if="value.name?.toLocaleLowerCase() !== 'online' || !settings.allow_online_event"
v-col(cols=12 :md='settings.allow_online_event?5:8' v-if="!isOnLine")
v-text-field.mr-4(ref='address'
v-model='value.address'
:prepend-icon='mdiMap'
:disabled='disableAddress'
@ -38,14 +36,15 @@ v-row.mb-4
:hint="$t('event.address_description')"
persistent-hint)
template(v-slot:append v-if="showAdvancedDialogButton")
v-icon(v-text='mdiCog'
@click="whereInputAdvancedDialog = true")
TBtn(@click="whereInputAdvancedDialog = true" tooltip='admin.geolocation' small)
v-icon(v-text='mdiMapSearch')
v-combobox.mr-4(v-model="onlineLocations" v-else
v-col(cols=12 :md='isOnLine?8:3' v-if='settings.allow_online_event')
v-combobox.mr-4(v-model="onlineLocations"
:prepend-icon='mdiLink'
:hint="$t('event.online_locations_help')"
:label="$t('event.online_locations')"
:rules="[$validators.required('event.online_locations')]"
:rules="isOnLine ? [$validators.required('event.online_locations')] : []"
clearable chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ';', '; ']"
:items="onlineLocations"
@ -54,8 +53,6 @@ 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")
v-dialog(v-model='whereInputAdvancedDialog' destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly' dense)
WhereInputAdvanced(ref='whereAdvanced' :place.sync='value' :event='event'
@ -66,10 +63,11 @@ v-row.mb-4
</template>
<script>
import { mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle, mdiLaptopAccount } from '@mdi/js'
import { mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle, mdiLaptopAccount, mdiMapSearch } from '@mdi/js'
import { mapState } from 'vuex'
import debounce from 'lodash/debounce'
import WhereInputAdvanced from './WhereInputAdvanced.vue'
import TBtn from '../components/TBtn.vue'
export default {
name: 'WhereInput',
@ -77,10 +75,10 @@ export default {
value: { type: Object, default: () => ({}) },
event: { type: Object, default: () => null },
},
components: { WhereInputAdvanced },
components: { WhereInputAdvanced, TBtn },
data ( {$store} ) {
return {
mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle, mdiLaptopAccount,
mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle, mdiLaptopAccount, mdiMapSearch,
places: [],
place: { isNew: false, name: '' },
placeName: '',
@ -91,17 +89,21 @@ export default {
},
computed: {
...mapState(['settings']),
isOnLine () {
return this.settings.allow_online_event && this.place.name === 'online'
},
showAdvancedDialogButton () {
if (!this.place.name) return false
// do not show advanced dialog button in case geolocation and online events are not allowed
if (!(this.settings.allow_geolocation || this.settings.allow_online_event)) {
// do not show advanced dialog button in case geolocation is not allowed
if (!(this.settings.allow_geolocation)) {
return false
}
// known places already have coords
if (!this.place.isNew && !this.settings.allow_online_event) return false
if (!this.place.isNew) return false
return true
}
@ -114,7 +116,7 @@ export default {
methods: {
search: debounce(async function(ev) {
const search = ev ? ev.target.value.trim().toLowerCase() : ''
this.places = await this.$axios.$get('place', { params: { search } })
this.places = await this.$axios.$get('place', { params: { search } }).catch()
// Filter out the place with name 'online' if not allowed
if (this.places.length) {
@ -170,16 +172,6 @@ export default {
this.place.latitude = p.latitude
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
// }
// }
this.disableAddress = false
this.$refs.place.blur()
this.$nextTick(() => { this.$refs.address && this.$refs.address.focus() })
@ -204,18 +196,6 @@ 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
// // Update onlineLocations
// this.event.online_locations && this.selectLocations()
// this.$emit('input', { ...this.place })
// },
}
}
</script>

29
components/WhereInputAdvanced.vue
View file

@ -39,23 +39,7 @@ v-card
p.mt-4(v-if='place.isNew' v-html="$t('event.address_geocoded_disclaimer')")
Map.mt-4(:place='place' draggable=true
v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)" )
v-divider(v-if='settings.allow_online_event && showGeocoded')
v-card-text.mt-6(v-if='settings.allow_online_event')
v-combobox(v-model="onlineLocations_update"
:prepend-icon='mdiLink'
:hint="$t('event.online_locations_help')"
:label="$t('event.online_locations')"
clearable chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ';']"
:items="onlineLocations_update")
template(v-slot:selection="{ item, index, on, attrs, selected, parent }")
v-chip(v-bind="attrs" :outlined='index !== 0'
close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
:input-value="selected" label small) {{ item }}
v-if="(settings.allow_geolocation && place.latitude && place.longitude)" )
v-card-actions
v-spacer
@ -74,7 +58,6 @@ export default {
props: {
place: { type: Object, default: () => ({}) },
event: { type: Object, default: () => null },
onlineLocations: { type: Array, default: [] }
},
components: {
[process.client && 'Map']: () => import('@/components/Map.vue')
@ -100,12 +83,6 @@ export default {
showGeocoded () {
return this.settings.allow_geolocation && this.place.name !== 'online' && this.place.isNew
},
onlineLocations_update: {
get () { return this.onlineLocations },
set (value) {
this.$emit('update:onlineLocations', value)
}
},
},
methods: {
close() {
@ -120,8 +97,12 @@ export default {
const searchCoordinates = pre_searchCoordinates.replace('/', ',')
if (searchCoordinates.length) {
this.loading = true
try {
const ret = await this.$axios.$get(`placeOSM/${this.currentGeocodingProvider.commonName}/${searchCoordinates}`)
this.addressList = this.currentGeocodingProvider.mapQueryResults(ret)
} catch (e) {
console.error(e)
}
this.loading = false
}
}, 1000),

2
locales/en.json
View file

@ -202,7 +202,7 @@
"where_advanced_options": "Place - Advanced options",
"where_advanced_options_description": "Define here additional place properties",
"online_locations": "Online locations",
"online_locations_help": "For instance an url to a videconference room and a fallback url (max. 3)",
"online_locations_help": "URL of a videoconference room or RSVP URL (max. 3)",
"online_locations_fallback_urls": "Fallback links",
"address_geocoded_disclaimer": "If you cannot find the <strong>street address</strong> or the <strong>housenumber</strong> you are looking for in the geocoding results, you can manually insert them in the 'Address' field without loose the coordinates. Consider also that the <a target=\"_blank\" href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> project is open to contributions. If you have Android, we recommend <a target=\"_blank\" href=\"https://f-droid.org/en/packages/de.westnordost.streetcomplete/\">StreetComplete</a> ",
"message": "Message",