Add a search modal, fix for #52

src/App.vue

@@ -29,10 +29,13 @@
                     <v-icon>more_vert</v-icon>
                 </v-btn>
                 <v-list>
+                    <v-list-tile @click="isSearchModalShown = true" v-if="isMapLoaded">
+                        <v-list-tile-title>{{ $t("menu.search") }}</v-list-tile-title>
+                    </v-list-tile>
                     <v-list-tile @click="exportGPX" v-if="isExportGPXMenuEntryVisible">
                         <v-list-tile-title>{{ $t("menu.exportGPX") }}</v-list-tile-title>
                     </v-list-tile>
-                    <v-list-tile @click="isShareMapViewModalShown = true" v-if="isShareMapViewMenuEntryVisible">
+                    <v-list-tile @click="isShareMapViewModalShown = true" v-if="isMapLoaded">
                         <v-list-tile-title>{{ $t("menu.shareMapView") }}</v-list-tile-title>
                     </v-list-tile>
                     <v-list-tile @click="goToAbout">
@@ -57,6 +60,7 @@
             <ReportErrorModal v-model="hasReportError"></ReportErrorModal>
             <ShareMapViewModal v-model="isShareMapViewModalShown"></ShareMapViewModal>
             <ReportIssueModal v-model="isReportIssueModalShown"></ReportIssueModal>
+            <SearchModal v-model="isSearchModalShown"></SearchModal>
             <router-view></router-view>
         </v-content>
     </v-app>
@@ -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",

src/components/AddressInput.vue

@@ -13,6 +13,7 @@
         append-icon="my_location"
         :rules="rules"
         v-on:input="onInputHandler"
+        :menu-props="{ auto: true, overflowY: true }"
         ></v-combobox>
 </template>
 
@@ -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;
                 }
 

src/components/SearchModal.vue

@@ -0,0 +1,75 @@
+<template>
+    <Modal v-model="isActive">
+        <v-card>
+            <v-card-title class="headline">{{ $t('searchModal.searchModal') }}</v-card-title>
+
+            <v-card-text>
+                <AddressInput
+                    :label="inputLabel"
+                    :onInput="onManualLocationPicker"
+                    :clearOnSelection="true"
+                    ></AddressInput>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+
+                <v-btn
+                    color="green darken-1"
+                    @click="isActive = false"
+                    dark
+                    large
+                    role="button"
+                    >
+                    {{ $t('misc.ok') }}
+                </v-btn>
+
+                <v-spacer></v-spacer>
+            </v-card-actions>
+        </v-card>
+    </Modal>
+</template>
+
+<script>
+import { DEFAULT_ZOOM } from '@/constants';
+import { capitalize } from '@/tools';
+
+import AddressInput from '@/components/AddressInput.vue';
+import Modal from '@/components/Modal.vue';
+
+export default {
+    components: {
+        AddressInput,
+        Modal,
+    },
+    computed: {
+        inputLabel() {
+            return capitalize(this.$t('locationPicker.pickALocationManually'));
+        },
+        isActive: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit('input', val);
+            },
+        },
+    },
+    methods: {
+        onManualLocationPicker(value) {
+            this.isActive = false;
+            this.$router.push({
+                name: 'SharedMap',
+                params: {
+                    lat: value.latlng.lat,
+                    lng: value.latlng.lng,
+                    zoom: DEFAULT_ZOOM,
+                },
+            });
+        },
+    },
+    props: {
+        value: Boolean,
+    },
+};
+</script>

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

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);
+}