From 944b9842cb3f7de7b963ecaf11ecac92f7a52536 Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Wed, 7 Nov 2018 20:04:00 +0100 Subject: [PATCH] Add a search modal, fix for #52 --- src/App.vue | 11 ++++- src/components/AddressInput.vue | 8 ++++ src/components/SearchModal.vue | 75 +++++++++++++++++++++++++++++++++ src/i18n/en.json | 4 ++ src/tools/index.js | 4 ++ 5 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 src/components/SearchModal.vue diff --git a/src/App.vue b/src/App.vue index fdce398..60b745a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -29,10 +29,13 @@ more_vert + + {{ $t("menu.search") }} + {{ $t("menu.exportGPX") }} - + {{ $t("menu.shareMapView") }} @@ -57,6 +60,7 @@ + @@ -69,12 +73,14 @@ import { DELAY_BETWEEN_API_BATCH_REQUESTS } from '@/constants'; import ReportErrorModal from '@/components/ReportErrorModal.vue'; import ReportIssueModal from '@/components/ReportIssueModal.vue'; +import SearchModal from '@/components/SearchModal.vue'; import ShareMapViewModal from '@/components/ShareMapViewModal.vue'; export default { components: { ReportErrorModal, ReportIssueModal, + SearchModal, ShareMapViewModal, }, computed: { @@ -84,7 +90,7 @@ export default { isExportGPXMenuEntryVisible() { return this.$store.state.location.gpx.length > 0; }, - isShareMapViewMenuEntryVisible() { + isMapLoaded() { return this.$store.state.map.center.every(item => item !== null); }, unsentReportsLength() { @@ -95,6 +101,7 @@ export default { return { hasReportError: false, isReportIssueModalShown: false, + isSearchModalShown: false, isSendingReports: false, isShareMapViewModalShown: false, title: "Cycl'Assist", diff --git a/src/components/AddressInput.vue b/src/components/AddressInput.vue index 8ada075..3db4569 100644 --- a/src/components/AddressInput.vue +++ b/src/components/AddressInput.vue @@ -13,6 +13,7 @@ append-icon="my_location" :rules="rules" v-on:input="onInputHandler" + :menu-props="{ auto: true, overflowY: true }" > @@ -21,9 +22,11 @@ import { GEOCODING_API_ENDPOINT } from '@/constants'; export default { props: { + clearOnSelection: Boolean, label: String, hint: String, onInput: Function, + value: Boolean, }, data() { return { @@ -83,6 +86,11 @@ export default { label: APIItem.properties.label, }; this.onInput(this.selectedItem); + if (this.clearOnSelection) { + this.$nextTick(() => { + this.select = null; + }); + } return; } diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue new file mode 100644 index 0000000..f115612 --- /dev/null +++ b/src/components/SearchModal.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/i18n/en.json b/src/i18n/en.json index b42f768..4140f55 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -52,6 +52,7 @@ "Settings": "Settings", "exportGPX": "Export GPX", "reportIssue": "Report an issue", + "search": "Search", "shareMapView": "Share map view" }, "misc": { @@ -111,6 +112,9 @@ "pothole": "Pothole", "potholeDescription": "A pothole in the ground." }, + "searchModal": { + "searchModal": "Search a location" + }, "settings": { "autorotate": "Autorotate (current direction up)", "customTileServer": "Custom tile server", diff --git a/src/tools/index.js b/src/tools/index.js index 4b3bfe8..a1b1836 100644 --- a/src/tools/index.js +++ b/src/tools/index.js @@ -112,3 +112,7 @@ export function storageAvailable(type) { && storage.length !== 0; } } + +export function capitalize(string) { + return string.charAt(0).toUpperCase() + string.slice(1); +}