Use address autocomplete (#1878)

* Use address autocomplete As it used to be. Also defaults place edit map to be group centre if available. * Remove uneeded extra wrapped div * Update setup for storyshots testing "sync: false" seems to be the new way it goes and will be the default in the future, see vuejs/vue-test-utils#1137 The transition group stubs seem to be there by default now too, I think.. Anyway it works where it did no tbefore :) Also see vuejs/vue-test-utils#1163 * Add @types/jest - for editor support See https://blog.jetbrains.com/webstorm/2018/10/testing-with-jest-in-webstorm/ * Increase test wait Not really sure why this changed, but don't want to think about it for now... * Add text to translation file * Use the spelling of the enemy * Simplify template logic
karrot-dev · Nov 17, 2019 · 156c011 · 156c011
1 parent ef5660b
commit 156c011
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 101 deletions.
diff --git a/package.json b/package.json
@@ -85,6 +85,7 @@
     "@storybook/addon-actions": "5.2.6",
     "@storybook/addon-links": "5.2.6",
     "@storybook/vue": "5.2.6",
+    "@types/jest": "^24.0.23",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^9.7.0",
     "axios-mock-adapter": "^1.17.0",

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -1,15 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots AddressPicker Default 1`] = `
-<div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-input q-field--standard q-field--labeled q-field--with-bottom">
+<div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-select q-field--auto-height q-select--with-input q-field--standard q-field--labeled q-field--with-bottom">
     <div class="q-field__before q-field__marginal row no-wrap items-center"><i aria-hidden="true"></i></div>
     <div class="q-field__inner relative-position col self-stretch column justify-center">
       <div tabindex="-1" class="q-field__control relative-position row no-wrap">
-        <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip"><input tabindex="0" placeholder="Search" id="qf_80008000-8000-8000-8000-800080008000" type="text" value="" class="q-field__native q-placeholder">
+        <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
+          <div placeholder="Search" class="q-field__native row items-center"><input type="search" placeholder="Search" tabindex="0" id="qf_80008000-8000-8000-8000-800080008000" value="" class="q-select__input q-placeholder col q-select__input--padding"></div>
           <div class="q-field__label no-pointer-events absolute ellipsis"></div>
-          <!---->
         </div>
-        <div class="q-field__append q-field__marginal row no-wrap items-center"></div>
       </div>
       <div class="q-field__bottom row items-start q-field__bottom--animated">
         <div class="q-field__messages col"></div>
@@ -3553,18 +3552,14 @@ It would make sense if it was markdown
           </label>
           <!---->
         </div>
-        <div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-input q-field--standard q-field--float q-field--labeled q-field--with-bottom">
+        <div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-select q-field--auto-height q-select--with-input q-field--standard q-field--float q-field--labeled q-field--with-bottom">
             <div class="q-field__before q-field__marginal row no-wrap items-center"><i aria-hidden="true" class="fas fa-fw fa-map-marker q-icon"> </i></div>
             <div class="q-field__inner relative-position col self-stretch column justify-center">
               <div tabindex="-1" class="q-field__control relative-position row no-wrap">
-                <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip"><input tabindex="0" aria-label="Address" placeholder="Search" id="qf_80008000-8000-8000-8000-800080008000" type="text" value="Darmstadt, Regierungsbezirk Darmstadt, Hessen, Deutschland" class="q-field__native q-placeholder">
+                <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
+                  <div placeholder="Search" class="q-field__native row items-center"><input type="search" placeholder="Search" tabindex="0" id="qf_80008000-8000-8000-8000-800080008000" value="Darmstadt, Regierungsbezirk Darmstadt, Hessen, Deutschland" class="q-select__input q-placeholder col q-select__input--padding"></div>
                   <div class="q-field__label no-pointer-events absolute ellipsis">Address</div>
-                  <!---->
                 </div>
-                <div class="q-field__append q-field__marginal row no-wrap items-center"><button tabindex="0" type="button" title="Search" class="q-btn inline q-btn-item non-selectable no-outline q-btn--flat q-btn--round q-btn--actionable q-focusable q-hoverable" style="font-size:10px;">
-                    <div tabindex="-1" class="q-focus-helper"></div>
-                    <div class="q-btn__content text-center col items-center q-anchor--skip justify-center row"><i aria-hidden="true" class="fas fa-search q-icon"> </i></div>
-                  </button></div>
                 <div class="q-field__append q-field__marginal row no-wrap items-center q-anchor--skip"><i aria-hidden="true" class="material-icons q-icon cursor-pointer">cancel</i></div>
               </div>
               <div class="q-field__bottom row items-start q-field__bottom--animated">
@@ -9358,15 +9353,14 @@ exports[`Storyshots Places PlaceEdit (with server error) 1`] = `
           </label>
           <!---->
         </div>
-        <div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-input q-field--standard q-field--labeled q-field--with-bottom">
+        <div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-select q-field--auto-height q-select--with-input q-field--standard q-field--labeled q-field--with-bottom">
             <div class="q-field__before q-field__marginal row no-wrap items-center"><i aria-hidden="true" class="fas fa-map-marker q-icon"> </i></div>
             <div class="q-field__inner relative-position col self-stretch column justify-center">
               <div tabindex="-1" class="q-field__control relative-position row no-wrap">
-                <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip"><input tabindex="0" aria-label="Address" placeholder="Search" id="qf_80008000-8000-8000-8000-800080008000" type="text" value="" class="q-field__native q-placeholder">
+                <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
+                  <div placeholder="Search" class="q-field__native row items-center"><input type="search" placeholder="Search" tabindex="0" id="qf_80008000-8000-8000-8000-800080008000" value="" class="q-select__input q-placeholder col q-select__input--padding"></div>
                   <div class="q-field__label no-pointer-events absolute ellipsis">Address</div>
-                  <!---->
                 </div>
-                <div class="q-field__append q-field__marginal row no-wrap items-center"></div>
               </div>
               <div class="q-field__bottom row items-start q-field__bottom--animated">
                 <div class="q-field__messages col"></div>
@@ -9491,15 +9485,14 @@ exports[`Storyshots Places PlaceEdit 1`] = `
           </label>
           <!---->
         </div>
-        <div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-input q-field--standard q-field--labeled q-field--with-bottom">
+        <div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-select q-field--auto-height q-select--with-input q-field--standard q-field--labeled q-field--with-bottom">
             <div class="q-field__before q-field__marginal row no-wrap items-center"><i aria-hidden="true" class="fas fa-map-marker q-icon"> </i></div>
             <div class="q-field__inner relative-position col self-stretch column justify-center">
               <div tabindex="-1" class="q-field__control relative-position row no-wrap">
-                <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip"><input tabindex="0" aria-label="Address" placeholder="Search" id="qf_80008000-8000-8000-8000-800080008000" type="text" value="" class="q-field__native q-placeholder">
+                <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
+                  <div placeholder="Search" class="q-field__native row items-center"><input type="search" placeholder="Search" tabindex="0" id="qf_80008000-8000-8000-8000-800080008000" value="" class="q-select__input q-placeholder col q-select__input--padding"></div>
                   <div class="q-field__label no-pointer-events absolute ellipsis">Address</div>
-                  <!---->
                 </div>
-                <div class="q-field__append q-field__marginal row no-wrap items-center"></div>
               </div>
               <div class="q-field__bottom row items-start q-field__bottom--animated">
                 <div class="q-field__messages col"></div>
@@ -9702,7 +9695,7 @@ exports[`Storyshots Profile member 1`] = `
         </div>
       </button></div>
     <div class="photoAndName row no-wrap ellipsis">
-      <div name="turn-in" appear="" class="photo q-pa-sm q-ma-md bg-white shadow-4">
+      <div class="photo q-pa-sm q-ma-md bg-white shadow-4">
         <div class="wrapper" style="width:180px;height:180px;">
           <div text="User 162" seed="162" class="randomArt fill"></div>
         </div>
@@ -9841,7 +9834,7 @@ exports[`Storyshots Profile non-member 1`] = `
       <!---->
     </div>
     <div class="photoAndName row no-wrap ellipsis">
-      <div name="turn-in" appear="" class="photo q-pa-sm q-ma-md bg-white shadow-4">
+      <div class="photo q-pa-sm q-ma-md bg-white shadow-4">
         <div class="wrapper" style="width:180px;height:180px;">
           <div text="User 161" seed="161" class="randomArt fill"></div>
         </div>
@@ -10047,18 +10040,14 @@ exports[`Storyshots Settings Page Default 1`] = `
               </div>
             </div>
           </label>
-          <div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-input q-field--standard q-field--float q-field--labeled q-field--with-bottom">
+          <div><label for="qf_80008000-8000-8000-8000-800080008000" class="q-field row no-wrap items-start q-select q-field--auto-height q-select--with-input q-field--standard q-field--float q-field--labeled q-field--with-bottom">
               <div class="q-field__before q-field__marginal row no-wrap items-center"><i aria-hidden="true" class="fas fa-map-marker q-icon"> </i></div>
               <div class="q-field__inner relative-position col self-stretch column justify-center">
                 <div tabindex="-1" class="q-field__control relative-position row no-wrap">
-                  <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip"><input tabindex="0" aria-label="Where you are from (not required)" placeholder="Search" id="qf_80008000-8000-8000-8000-800080008000" type="text" value="Darmstadt, Regierungsbezirk Darmstadt, Hessen, Deutschland" class="q-field__native q-placeholder">
+                  <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
+                    <div placeholder="Search" class="q-field__native row items-center"><input type="search" placeholder="Search" tabindex="0" id="qf_80008000-8000-8000-8000-800080008000" value="Darmstadt, Regierungsbezirk Darmstadt, Hessen, Deutschland" class="q-select__input q-placeholder col q-select__input--padding"></div>
                     <div class="q-field__label no-pointer-events absolute ellipsis">Where you are from (not required)</div>
-                    <!---->
                   </div>
-                  <div class="q-field__append q-field__marginal row no-wrap items-center"><button tabindex="0" type="button" title="Search" class="q-btn inline q-btn-item non-selectable no-outline q-btn--flat q-btn--round q-btn--actionable q-focusable q-hoverable" style="font-size:10px;">
-                      <div tabindex="-1" class="q-focus-helper"></div>
-                      <div class="q-btn__content text-center col items-center q-anchor--skip justify-center row"><i aria-hidden="true" class="fas fa-search q-icon"> </i></div>
-                    </button></div>
                   <div class="q-field__append q-field__marginal row no-wrap items-center q-anchor--skip"><i aria-hidden="true" class="material-icons q-icon cursor-pointer">cancel</i></div>
                 </div>
                 <div class="q-field__bottom row items-start q-field__bottom--animated">

diff --git a/src/locales/locale-en.json b/src/locales/locale-en.json
@@ -6,6 +6,7 @@
     "NOT_CONNECTED": "You aren't connected to the server",
     "INVALID_LINK": "Sorry, the link you've opened is invalid.",
     "GENERIC_ERROR": "Sorry, something went wrong",
+    "SEARCH_RESULTS": "Search results",
     "SEARCH_NOT_FOUND": "Not Found",
     "ABOUT_KARROT": "About Karrot"
   },
@@ -660,6 +661,11 @@
     "DESCRIPTION": "Description",
     "DESCRIPTION_HELPER": "Longer description of the item"
   },
+  "ADDRESS_PICKER": {
+    "SET_AS": "Set address as",
+    "KEEP_EXISTING_LOCATION": "keep existing location on map",
+    "CHOOSE_LOCATION": "choose location on map"
+  },
   "UNSUBSCRIBE": {
     "HEADER": "Unsubscribe",
     "ALL": "Unsubscribe all",

diff --git a/src/maps/components/AddressPicker.vue b/src/maps/components/AddressPicker.vue
@@ -1,66 +1,63 @@
 <template>
   <div>
-    <QInput
-      :value="value.address"
+    <QSelect
+      use-input
+      fill-input
       clearable
-      :placeholder="$t('BUTTON.SEARCH')"
+      hide-dropdown-icon
       :label="label"
       :error="error"
       :error-message="errorMessage"
+      :options="options"
+      :placeholder="$t('BUTTON.SEARCH')"
+      :value="value.address"
+      :input-debounce="1000"
       @input="input"
-      @keyup.esc="$refs.menu.hide()"
-      @keyup.enter.prevent.stop="search"
+      @filter="search"
     >
-      <template v-slot:append>
-        <QBtn
-          v-if="value.address"
-          icon="fas fa-search"
-          :title="$t('BUTTON.SEARCH')"
-          flat
-          round
-          size="sm"
-          @click="search"
-        />
-      </template>
-      <template v-slot:before>
+      <template #before>
         <QIcon :name="icon" />
       </template>
-      <QMenu
-        ref="menu"
-        fit
-        no-parent-event
-        square
-      >
-        <QList>
-          <QItem
-            v-for="(result, idx) in options"
-            :key="idx"
-            v-close-popup
-            clickable
-            @click="select(result)"
-          >
-            <QItemSection>
-              <QItemLabel>
-                {{ result.label }}
-              </QItemLabel>
-            </QItemSection>
-          </QItem>
-          <QItem
-            v-if="options.length < 1"
-          >
+      <template #selected-item />
+      <template #option="{ index, itemProps, itemEvents, opt: { label: itemLabel, useSearchTerm } }">
+        <QItem
+          :key="index"
+          v-bind="itemProps"
+          v-on="itemEvents"
+        >
+          <QItemSection>
+            <QItemLabel v-if="useSearchTerm">
+              {{ $t('ADDRESS_PICKER.SET_AS') }}
+              <strong>{{ itemLabel }}</strong>
+              <span v-if="hasLocation">({{ $t('ADDRESS_PICKER.KEEP_EXISTING_LOCATION') }})</span>
+              <span v-else>({{ $t('ADDRESS_PICKER.CHOOSE_LOCATION') }})</span>
+            </QItemLabel>
+            <QItemLabel v-else>
+              {{ itemLabel }}
+            </QItemLabel>
+          </QItemSection>
+        </QItem>
+        <template v-if="useSearchTerm">
+          <QSeparator />
+          <QItemLabel
+            v-t="'GLOBAL.SEARCH_RESULTS'"
+            header
+          />
+          <QItem v-if="options.length === 1">
             <QItemSection>
               <QItemLabel>
                 {{ $t('GLOBAL.SEARCH_NOT_FOUND') }}
               </QItemLabel>
             </QItemSection>
           </QItem>
-        </QList>
-      </QMenu>
-    </QInput>
+        </template>
+      </template>
+    </QSelect>
     <StandardMap
       class="map"
       :markers="marker ? [marker] : []"
       :prevent-zoom="preventZoom"
+      :default-center="defaultMapCenter"
       @markerMoved="mapMarkerMoved"
       @mapClick="mapMarkerMoved"
     />
@@ -69,30 +66,27 @@
 
 <script>
 import {
-  QInput,
-  QBtn,
   QIcon,
-  QMenu,
-  QList,
   QItem,
   QItemSection,
   QItemLabel,
+  QSelect,
+  QSeparator,
 } from 'quasar'
 import StandardMap from '@/maps/components/StandardMap'
 import L from 'leaflet'
 
 import geocoding from '@/maps/api/geocoding'
+import { filterTruthy } from '@/utils/utils'
 
 export default {
   components: {
-    QInput,
-    QBtn,
     QIcon,
-    QMenu,
-    QList,
     QItem,
     QItemSection,
     QItemLabel,
+    QSelect,
+    QSeparator,
     StandardMap,
   },
   props: {
@@ -124,6 +118,10 @@ export default {
       default: null,
       type: String,
     },
+    defaultMapCenter: {
+      default: null,
+      type: Object,
+    },
   },
   data () {
     return {
@@ -144,45 +142,49 @@ export default {
       }
       return null
     },
+    hasLocation () {
+      const { latitude, longitude } = this.value
+      return Boolean(latitude && longitude)
+    },
   },
   methods: {
-    async search () {
-      const terms = this.value.address
-      if (!terms) {
-        this.options = []
-      }
+    async search (terms, update) {
+      if (!terms) return update(() => { this.options = [] })
 
-      this.options = (await geocoding.lookupAddress(terms)).map(result => {
+      const searchResults = (await geocoding.lookupAddress(terms)).map(result => {
         const { address } = result
         return {
           result,
+          value: address,
           label: address,
+          useSearchTerm: false,
         }
       })
-      this.$refs.menu.show()
+      update(() => {
+        // A special option that allows us to select the literal search term as the address with no geocoding
+        this.options = [{
+          result: { address: terms },
+          value: terms,
+          label: terms,
+          useSearchTerm: true,
+          hasSearchResults: searchResults.length > 0,
+        }, ...searchResults]
+      })
     },
     input (value) {
-      if (!value) {
-        this.reset()
-        return
-      }
-      this.$emit('input', { ...this.value, address: value })
-    },
-    select (value) {
       if (!value) {
         this.reset()
         return
       }
       const { result: { address, latitude, longitude } } = value
       this.preventZoom = false
-      this.$emit('input', { ...this.value, latitude, longitude, address })
+      this.$emit('input', { ...this.value, ...filterTruthy({ latitude, longitude, address }) })
     },
     mapMarkerMoved ({ lat: latitude, lng: longitude }) {
       this.preventZoom = true
       this.$emit('input', { ...this.value, latitude, longitude })
     },
     reset () {
-      this.$refs.menu.hide()
       this.$emit('input', { ...this.value, latitude: null, longitude: null, address: null })
     },
   },
@@ -192,7 +194,7 @@ export default {
 <style scoped lang="stylus">
 .map
   height 260px
-  margin-left 42px
+  margin-left 37px
   margin-top -10px
   width calc(100% - 42px)
 </style>
diff --git a/src/places/components/PlaceEdit.vue b/src/places/components/PlaceEdit.vue
@@ -86,6 +86,7 @@
             :label="$t('STOREEDIT.ADDRESS')"
             :error="hasAddressError"
             :error-message="addressError"
+            :default-map-center="defaultMapCenter"
           />
 
           <div>
@@ -271,6 +272,11 @@ export default {
       if (this.edit) return optionsFor(this.edit).color
       return null
     },
+    defaultMapCenter () {
+      const { latitude: lat, longitude: lng } = this.edit.group || {}
+      if (lat && lng) return { lat, lng }
+      return null
+    },
   },
   watch: {
     '$route.query' (val) {