Skip to content
This repository was archived by the owner on May 20, 2024. It is now read-only.

Commit d2abc5c

Browse files
nicksellentiltec
nicksellen
authored and
tiltec
committed
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
1 parent 9380fa6 commit d2abc5c

File tree

8 files changed

+111
-101
lines changed

8 files changed

+111
-101
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
"@storybook/addon-actions": "5.2.6",
8686
"@storybook/addon-links": "5.2.6",
8787
"@storybook/vue": "5.2.6",
88+
"@types/jest": "^24.0.23",
8889
"@vue/test-utils": "1.0.0-beta.29",
8990
"autoprefixer": "^9.7.0",
9091
"axios-mock-adapter": "^1.17.0",

‎src/__snapshots__/storyshots.spec.js.snap

+17-28
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Storyshots AddressPicker Default 1`] = `
4-
<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">
4+
<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">
55
<div class="q-field__before q-field__marginal row no-wrap items-center"><i aria-hidden="true"></i></div>
66
<div class="q-field__inner relative-position col self-stretch column justify-center">
77
<div tabindex="-1" class="q-field__control relative-position row no-wrap">
8-
<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">
8+
<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
9+
<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>
910
<div class="q-field__label no-pointer-events absolute ellipsis"></div>
10-
<!---->
1111
</div>
12-
<div class="q-field__append q-field__marginal row no-wrap items-center"></div>
1312
</div>
1413
<div class="q-field__bottom row items-start q-field__bottom--animated">
1514
<div class="q-field__messages col"></div>
@@ -3553,18 +3552,14 @@ It would make sense if it was markdown
35533552
</label>
35543553
<!---->
35553554
</div>
3556-
<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">
3555+
<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">
35573556
<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>
35583557
<div class="q-field__inner relative-position col self-stretch column justify-center">
35593558
<div tabindex="-1" class="q-field__control relative-position row no-wrap">
3560-
<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">
3559+
<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
3560+
<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>
35613561
<div class="q-field__label no-pointer-events absolute ellipsis">Address</div>
3562-
<!---->
35633562
</div>
3564-
<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;">
3565-
<div tabindex="-1" class="q-focus-helper"></div>
3566-
<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>
3567-
</button></div>
35683563
<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>
35693564
</div>
35703565
<div class="q-field__bottom row items-start q-field__bottom--animated">
@@ -9358,15 +9353,14 @@ exports[`Storyshots Places PlaceEdit (with server error) 1`] = `
93589353
</label>
93599354
<!---->
93609355
</div>
9361-
<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">
9356+
<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">
93629357
<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>
93639358
<div class="q-field__inner relative-position col self-stretch column justify-center">
93649359
<div tabindex="-1" class="q-field__control relative-position row no-wrap">
9365-
<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">
9360+
<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
9361+
<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>
93669362
<div class="q-field__label no-pointer-events absolute ellipsis">Address</div>
9367-
<!---->
93689363
</div>
9369-
<div class="q-field__append q-field__marginal row no-wrap items-center"></div>
93709364
</div>
93719365
<div class="q-field__bottom row items-start q-field__bottom--animated">
93729366
<div class="q-field__messages col"></div>
@@ -9491,15 +9485,14 @@ exports[`Storyshots Places PlaceEdit 1`] = `
94919485
</label>
94929486
<!---->
94939487
</div>
9494-
<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">
9488+
<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">
94959489
<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>
94969490
<div class="q-field__inner relative-position col self-stretch column justify-center">
94979491
<div tabindex="-1" class="q-field__control relative-position row no-wrap">
9498-
<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">
9492+
<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
9493+
<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>
94999494
<div class="q-field__label no-pointer-events absolute ellipsis">Address</div>
9500-
<!---->
95019495
</div>
9502-
<div class="q-field__append q-field__marginal row no-wrap items-center"></div>
95039496
</div>
95049497
<div class="q-field__bottom row items-start q-field__bottom--animated">
95059498
<div class="q-field__messages col"></div>
@@ -9702,7 +9695,7 @@ exports[`Storyshots Profile member 1`] = `
97029695
</div>
97039696
</button></div>
97049697
<div class="photoAndName row no-wrap ellipsis">
9705-
<div name="turn-in" appear="" class="photo q-pa-sm q-ma-md bg-white shadow-4">
9698+
<div class="photo q-pa-sm q-ma-md bg-white shadow-4">
97069699
<div class="wrapper" style="width:180px;height:180px;">
97079700
<div text="User 162" seed="162" class="randomArt fill"></div>
97089701
</div>
@@ -9841,7 +9834,7 @@ exports[`Storyshots Profile non-member 1`] = `
98419834
<!---->
98429835
</div>
98439836
<div class="photoAndName row no-wrap ellipsis">
9844-
<div name="turn-in" appear="" class="photo q-pa-sm q-ma-md bg-white shadow-4">
9837+
<div class="photo q-pa-sm q-ma-md bg-white shadow-4">
98459838
<div class="wrapper" style="width:180px;height:180px;">
98469839
<div text="User 161" seed="161" class="randomArt fill"></div>
98479840
</div>
@@ -10047,18 +10040,14 @@ exports[`Storyshots Settings Page Default 1`] = `
1004710040
</div>
1004810041
</div>
1004910042
</label>
10050-
<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">
10043+
<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">
1005110044
<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>
1005210045
<div class="q-field__inner relative-position col self-stretch column justify-center">
1005310046
<div tabindex="-1" class="q-field__control relative-position row no-wrap">
10054-
<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">
10047+
<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
10048+
<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>
1005510049
<div class="q-field__label no-pointer-events absolute ellipsis">Where you are from (not required)</div>
10056-
<!---->
1005710050
</div>
10058-
<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;">
10059-
<div tabindex="-1" class="q-focus-helper"></div>
10060-
<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>
10061-
</button></div>
1006210051
<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>
1006310052
</div>
1006410053
<div class="q-field__bottom row items-start q-field__bottom--animated">

‎src/locales/locale-en.json

+6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"NOT_CONNECTED": "You aren't connected to the server",
77
"INVALID_LINK": "Sorry, the link you've opened is invalid.",
88
"GENERIC_ERROR": "Sorry, something went wrong",
9+
"SEARCH_RESULTS": "Search results",
910
"SEARCH_NOT_FOUND": "Not Found",
1011
"ABOUT_KARROT": "About Karrot"
1112
},
@@ -652,6 +653,11 @@
652653
},
653654
"NO_ONGOING": "No ongoing issues."
654655
},
656+
"ADDRESS_PICKER": {
657+
"SET_AS": "Set address as",
658+
"KEEP_EXISTING_LOCATION": "keep existing location on map",
659+
"CHOOSE_LOCATION": "choose location on map"
660+
},
655661
"UNSUBSCRIBE": {
656662
"HEADER": "Unsubscribe",
657663
"ALL": "Unsubscribe all",

‎src/maps/components/AddressPicker.vue

+70-68
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,63 @@
11
<template>
22
<div>
3-
<QInput
4-
:value="value.address"
3+
<QSelect
4+
use-input
5+
fill-input
56
clearable
6-
:placeholder="$t('BUTTON.SEARCH')"
7+
hide-dropdown-icon
78
:label="label"
89
:error="error"
910
:error-message="errorMessage"
11+
:options="options"
12+
:placeholder="$t('BUTTON.SEARCH')"
13+
:value="value.address"
14+
:input-debounce="1000"
1015
@input="input"
11-
@keyup.esc="$refs.menu.hide()"
12-
@keyup.enter.prevent.stop="search"
16+
@filter="search"
1317
>
14-
<template v-slot:append>
15-
<QBtn
16-
v-if="value.address"
17-
icon="fas fa-search"
18-
:title="$t('BUTTON.SEARCH')"
19-
flat
20-
round
21-
size="sm"
22-
@click="search"
23-
/>
24-
</template>
25-
<template v-slot:before>
18+
<template #before>
2619
<QIcon :name="icon" />
2720
</template>
28-
<QMenu
29-
ref="menu"
30-
fit
31-
no-parent-event
32-
square
33-
>
34-
<QList>
35-
<QItem
36-
v-for="(result, idx) in options"
37-
:key="idx"
38-
v-close-popup
39-
clickable
40-
@click="select(result)"
41-
>
42-
<QItemSection>
43-
<QItemLabel>
44-
{{ result.label }}
45-
</QItemLabel>
46-
</QItemSection>
47-
</QItem>
48-
<QItem
49-
v-if="options.length < 1"
50-
>
21+
<template #selected-item />
22+
<template #option="{ index, itemProps, itemEvents, opt: { label: itemLabel, useSearchTerm } }">
23+
<QItem
24+
:key="index"
25+
v-bind="itemProps"
26+
v-on="itemEvents"
27+
>
28+
<QItemSection>
29+
<QItemLabel v-if="useSearchTerm">
30+
{{ $t('ADDRESS_PICKER.SET_AS') }}
31+
<strong>{{ itemLabel }}</strong>
32+
<span v-if="hasLocation">({{ $t('ADDRESS_PICKER.KEEP_EXISTING_LOCATION') }})</span>
33+
<span v-else>({{ $t('ADDRESS_PICKER.CHOOSE_LOCATION') }})</span>
34+
</QItemLabel>
35+
<QItemLabel v-else>
36+
{{ itemLabel }}
37+
</QItemLabel>
38+
</QItemSection>
39+
</QItem>
40+
<template v-if="useSearchTerm">
41+
<QSeparator />
42+
<QItemLabel
43+
v-t="'GLOBAL.SEARCH_RESULTS'"
44+
header
45+
/>
46+
<QItem v-if="options.length === 1">
5147
<QItemSection>
5248
<QItemLabel>
5349
{{ $t('GLOBAL.SEARCH_NOT_FOUND') }}
5450
</QItemLabel>
5551
</QItemSection>
5652
</QItem>
57-
</QList>
58-
</QMenu>
59-
</QInput>
53+
</template>
54+
</template>
55+
</QSelect>
6056
<StandardMap
6157
class="map"
6258
:markers="marker ? [marker] : []"
6359
:prevent-zoom="preventZoom"
60+
:default-center="defaultMapCenter"
6461
@markerMoved="mapMarkerMoved"
6562
@mapClick="mapMarkerMoved"
6663
/>
@@ -69,30 +66,27 @@
6966

7067
<script>
7168
import {
72-
QInput,
73-
QBtn,
7469
QIcon,
75-
QMenu,
76-
QList,
7770
QItem,
7871
QItemSection,
7972
QItemLabel,
73+
QSelect,
74+
QSeparator,
8075
} from 'quasar'
8176
import StandardMap from '@/maps/components/StandardMap'
8277
import L from 'leaflet'
8378
8479
import geocoding from '@/maps/api/geocoding'
80+
import { filterTruthy } from '@/utils/utils'
8581
8682
export default {
8783
components: {
88-
QInput,
89-
QBtn,
9084
QIcon,
91-
QMenu,
92-
QList,
9385
QItem,
9486
QItemSection,
9587
QItemLabel,
88+
QSelect,
89+
QSeparator,
9690
StandardMap,
9791
},
9892
props: {
@@ -124,6 +118,10 @@ export default {
124118
default: null,
125119
type: String,
126120
},
121+
defaultMapCenter: {
122+
default: null,
123+
type: Object,
124+
},
127125
},
128126
data () {
129127
return {
@@ -144,45 +142,49 @@ export default {
144142
}
145143
return null
146144
},
145+
hasLocation () {
146+
const { latitude, longitude } = this.value
147+
return Boolean(latitude && longitude)
148+
},
147149
},
148150
methods: {
149-
async search () {
150-
const terms = this.value.address
151-
if (!terms) {
152-
this.options = []
153-
}
151+
async search (terms, update) {
152+
if (!terms) return update(() => { this.options = [] })
154153
155-
this.options = (await geocoding.lookupAddress(terms)).map(result => {
154+
const searchResults = (await geocoding.lookupAddress(terms)).map(result => {
156155
const { address } = result
157156
return {
158157
result,
158+
value: address,
159159
label: address,
160+
useSearchTerm: false,
160161
}
161162
})
162-
this.$refs.menu.show()
163+
update(() => {
164+
// A special option that allows us to select the literal search term as the address with no geocoding
165+
this.options = [{
166+
result: { address: terms },
167+
value: terms,
168+
label: terms,
169+
useSearchTerm: true,
170+
hasSearchResults: searchResults.length > 0,
171+
}, ...searchResults]
172+
})
163173
},
164174
input (value) {
165-
if (!value) {
166-
this.reset()
167-
return
168-
}
169-
this.$emit('input', { ...this.value, address: value })
170-
},
171-
select (value) {
172175
if (!value) {
173176
this.reset()
174177
return
175178
}
176179
const { result: { address, latitude, longitude } } = value
177180
this.preventZoom = false
178-
this.$emit('input', { ...this.value, latitude, longitude, address })
181+
this.$emit('input', { ...this.value, ...filterTruthy({ latitude, longitude, address }) })
179182
},
180183
mapMarkerMoved ({ lat: latitude, lng: longitude }) {
181184
this.preventZoom = true
182185
this.$emit('input', { ...this.value, latitude, longitude })
183186
},
184187
reset () {
185-
this.$refs.menu.hide()
186188
this.$emit('input', { ...this.value, latitude: null, longitude: null, address: null })
187189
},
188190
},
@@ -192,7 +194,7 @@ export default {
192194
<style scoped lang="stylus">
193195
.map
194196
height 260px
195-
margin-left 42px
197+
margin-left 37px
196198
margin-top -10px
197199
width calc(100% - 42px)
198200
</style>

‎src/places/components/PlaceEdit.vue

+6
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
:label="$t('STOREEDIT.ADDRESS')"
8787
:error="hasAddressError"
8888
:error-message="addressError"
89+
:default-map-center="defaultMapCenter"
8990
/>
9091

9192
<div>
@@ -271,6 +272,11 @@ export default {
271272
if (this.edit) return optionsFor(this.edit).color
272273
return null
273274
},
275+
defaultMapCenter () {
276+
const { latitude: lat, longitude: lng } = this.edit.group || {}
277+
if (lat && lng) return { lat, lng }
278+
return null
279+
},
274280
},
275281
watch: {
276282
'$route.query' (val) {

0 commit comments

Comments
 (0)