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

Use address autocomplete #1878

Merged
merged 8 commits into from
Nov 17, 2019
Merged

Use address autocomplete #1878

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aadd718
Use address autocomplete
nicksellen Nov 12, 2019
8a544c4
Remove uneeded extra wrapped div
nicksellen Nov 12, 2019
34c4175
Update setup for storyshots testing
nicksellen Nov 13, 2019
cbefc0b
Add @types/jest - for editor support
nicksellen Nov 13, 2019
691606f
Increase test wait
nicksellen Nov 13, 2019
902e2fe
Add text to translation file
nicksellen Nov 13, 2019
fe1c50b
Use the spelling of the enemy
nicksellen Nov 17, 2019
887a05d
Simplify template logic
nicksellen Nov 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
45 changes: 17 additions & 28 deletions src/__snapshots__/storyshots.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -3229,18 +3228,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">
Expand Down Expand Up @@ -9034,15 +9029,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>
Expand Down Expand Up @@ -9167,15 +9161,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>
Expand Down Expand Up @@ -9378,7 +9371,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>
Expand Down Expand Up @@ -9517,7 +9510,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>
Expand Down Expand Up @@ -9723,18 +9716,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">
Expand Down
6 changes: 6 additions & 0 deletions src/locales/locale-en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down Expand Up @@ -652,6 +653,11 @@
},
"NO_ONGOING": "No ongoing issues."
},
"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",
Expand Down
151 changes: 77 additions & 74 deletions src/maps/components/AddressPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,64 @@
<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"
>
<QItemSection>
<QItemLabel>
{{ $t('GLOBAL.SEARCH_NOT_FOUND') }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QMenu>
</QInput>
<template #selected-item />
tiltec marked this conversation as resolved.
Show resolved Hide resolved
<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>
<QSeparator v-if="useSearchTerm" />
nicksellen marked this conversation as resolved.
Show resolved Hide resolved
<QItemLabel
v-if="useSearchTerm"
v-t="'GLOBAL.SEARCH_RESULTS'"
header
/>
<QItem
v-if="useSearchTerm && options.length === 1"
>
<QItemSection>
<QItemLabel>
{{ $t('GLOBAL.SEARCH_NOT_FOUND') }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</QSelect>
<StandardMap
class="map"
:markers="marker ? [marker] : []"
:prevent-zoom="preventZoom"
:default-center="defaultMapCentre"
nicksellen marked this conversation as resolved.
Show resolved Hide resolved
@markerMoved="mapMarkerMoved"
@mapClick="mapMarkerMoved"
/>
Expand All @@ -69,30 +67,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: {
Expand Down Expand Up @@ -124,6 +119,10 @@ export default {
default: null,
type: String,
},
defaultMapCentre: {
default: null,
type: Object,
},
},
data () {
return {
Expand All @@ -144,45 +143,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 })
},
},
Expand All @@ -192,7 +195,7 @@ export default {
<style scoped lang="stylus">
.map
height 260px
margin-left 42px
margin-left 37px
tiltec marked this conversation as resolved.
Show resolved Hide resolved
margin-top -10px
width calc(100% - 42px)
</style>
Loading