fix: refactoring online locations UI, fix #400

components/TBtn.vue

@@ -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>

components/WhereInput.vue

@@ -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,50 +26,48 @@ v-row.mb-4
             v-list-item-subtitle(v-text='item.address')
 
 
-  v-col(cols=12 md=6)
+  v-col(cols=12 :md='settings.allow_online_event?5:8' v-if="!isOnLine")
-    v-row.mx-0.my-0.align-center.justify-center
+    v-text-field.mr-4(ref='address'
+      v-model='value.address'
+      :prepend-icon='mdiMap'
+      :disabled='disableAddress'
+      :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
+      :label="$t('common.address')"
+      :hint="$t('event.address_description')"
+      persistent-hint)
+      template(v-slot:append v-if="showAdvancedDialogButton")
+        TBtn(@click="whereInputAdvancedDialog = true" tooltip='admin.geolocation' small)
+          v-icon(v-text='mdiMapSearch')
 
-      v-text-field.mr-4(ref='address' v-if="value.name?.toLocaleLowerCase() !== 'online' || !settings.allow_online_event"
+  v-col(cols=12 :md='isOnLine?8:3' v-if='settings.allow_online_event')
-        v-model='value.address'
+    v-combobox.mr-4(v-model="onlineLocations"
-        :prepend-icon='mdiMap'
+      :prepend-icon='mdiLink'
-        :disabled='disableAddress'
+      :hint="$t('event.online_locations_help')"
-        :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
+      :label="$t('event.online_locations')"
-        :label="$t('common.address')"
+      :rules="isOnLine ? [$validators.required('event.online_locations')] : []"
-        :hint="$t('event.address_description')"
+      clearable chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
-        persistent-hint)
+      :delimiters="[',', ';', '; ']"
-        template(v-slot:append v-if="showAdvancedDialogButton")
+      :items="onlineLocations"
-          v-icon(v-text='mdiCog'
+      @change='selectLocations')
-            @click="whereInputAdvancedDialog = true")
+      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-combobox.mr-4(v-model="onlineLocations" v-else
+  v-dialog(v-model='whereInputAdvancedDialog' destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly' dense)
-        :prepend-icon='mdiLink'
+    WhereInputAdvanced(ref='whereAdvanced' :place.sync='value' :event='event'
-        :hint="$t('event.online_locations_help')"
+      @close='whereInputAdvancedDialog = false && this.$refs.address.blur()'
-        :label="$t('event.online_locations')"
+      :onlineLocations.sync="onlineLocations"
-        :rules="[$validators.required('event.online_locations')]"
+      @update:onlineLocations="selectLocations")
-        clearable chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
-        :delimiters="[',', ';', '; ']"
-        :items="onlineLocations"
-        @change='selectLocations')
-        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 }}
-        //- 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'
-        @close='whereInputAdvancedDialog = false && this.$refs.address.blur()'
-        :onlineLocations.sync="onlineLocations"
-        @update:onlineLocations="selectLocations")
 
     
 </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
+      // do not show advanced dialog button in case geolocation is not allowed
-      if (!(this.settings.allow_geolocation || this.settings.allow_online_event)) {
+      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>

components/WhereInputAdvanced.vue

@@ -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-if="(settings.allow_geolocation && 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-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
-        const ret = await this.$axios.$get(`placeOSM/${this.currentGeocodingProvider.commonName}/${searchCoordinates}`)
+        try {
-        this.addressList = this.currentGeocodingProvider.mapQueryResults(ret)
+          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),

locales/en.json

@@ -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",