✨ Improve autocomplete-input (#2714)

Traewelling · Jun 27, 2024 · d2bcf1f · d2bcf1f
1 parent 4824cd9
commit d2bcf1f
Showing 1 changed file with 63 additions and 14 deletions.
diff --git a/resources/vue/components/StationAutocomplete.vue b/resources/vue/components/StationAutocomplete.vue
@@ -7,6 +7,7 @@ import '@vuepic/vue-datepicker/dist/main.css'
 import {DateTime} from "luxon";
 import {useUserStore} from "../stores/user";
 import AutocompleteListEntry from "./Checkin/AutocompleteListEntry.vue";
+import Spinner from "./Spinner.vue";
 
 export default {
     setup() {
@@ -17,7 +18,7 @@ export default {
     },
     name: "StationAutocomplete",
     emits: ["update:station", "update:time", "update:travelType"],
-    components: {AutocompleteListEntry, FullScreenModal, VueDatePicker},
+    components: {Spinner, AutocompleteListEntry, FullScreenModal, VueDatePicker},
     props: {
         station: {
             type: Object,
@@ -61,6 +62,7 @@ export default {
             selectedStation: null,
             selectedType: null,
             fetchingGps: false,
+            fetchingTextInput: false,
             travelTypes: [
                 {value: "express", color: "rgba(197,199,196,0.5)", icon: "fa-train", contrast: true},
                 {value: "regional", color: "rgba(193,18,28,0.5)", icon: "fa-train"},
@@ -100,22 +102,31 @@ export default {
                 this.loading          = false;
                 return;
             }
-            let query = this.stationInput.replace(/%2F/, " ").replace(/\//, " ");
-            fetch(`/api/v1/trains/station/autocomplete/${query}`).then((response) => {
-                response.json().then((result) => {
-                    this.autocompleteList = result.data;
-                    this.loading          = false;
-                });
+
+            this.fetchAutocomplete().then((result) => {
+                this.autocompleteList = result.data;
+                this.loading          = false;
             });
         },
+        async fetchAutocomplete() {
+            let query = this.stationInput.replace(/%2F/, " ").replace(/\//, " ");
+            const res = await fetch(`/api/v1/trains/station/autocomplete/${query}`);
+            return await res.json();
+        },
         showPicker() {
             this.$refs.picker.openMenu();
         },
         setTime() {
             this.$emit("update:time", DateTime.fromJSDate(this.date).setZone('UTC').toISO());
         },
         setStationFromText() {
-            this.setStation({name: this.stationInput});
+            this.fetchingTextInput = true;
+            this.fetchAutocomplete().then((result) => {
+                this.fetchingTextInput = false;
+                this.setStation(result.data.shift());
+            }).catch(() => {
+                this.fetchingTextInput = false;
+            });
         },
         setStation(item) {
             this.stationInput    = item.name;
@@ -148,6 +159,10 @@ export default {
                     notyf.error(trans("stationboard.position-unavailable"));
                 }
             );
+        },
+        clearInput() {
+            this.stationInput = "";
+            this.$refs.stationInput.focus();
         }
     },
     watch: {
@@ -184,14 +199,22 @@ export default {
 <template>
     <FullScreenModal ref="modal">
         <template #header>
-            <input type="text" name="station" class="form-control mobile-input-fs-16"
-                   :placeholder="placeholder"
-                   v-model="stationInput"
-                   @keyup.enter="setStationFromText"
-            />
+            <div class="input-group mx-2">
+                <input type="search" name="station" class="form-control mobile-input-fs-16"
+                       :placeholder="placeholder"
+                       v-model="stationInput"
+                       :disabled="fetchingTextInput"
+                       @keyup.enter="setStationFromText"
+                       ref="stationInput"
+                />
+                <button class="btn btn-light" @click="clearInput">
+                    <i class="fa-solid fa-delete-left"></i>
+                </button>
+            </div>
         </template>
         <template #body>
-            <ul class="list-group list-group-light list-group-small">
+            <Spinner v-if="fetchingTextInput"></Spinner>
+            <ul class="list-group list-group-light list-group-small" v-show="!fetchingTextInput">
                 <AutocompleteListEntry
                     v-show="autocompleteList.length === 0"
                     :text="trans('stationboard.search-by-location')"
@@ -329,4 +352,30 @@ export default {
         color: #FFF;
     }
 }
+
+span.deleteicon {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
+span.deleteicon span {
+    position: absolute;
+    display: block;
+    right: 3px;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    color: #fff;
+    background-color: #ccc;
+    font: 13px monospace;
+    text-align: center;
+    line-height: 1em;
+    cursor: pointer;
+}
+
+span.deleteicon input {
+    padding-right: 18px;
+    box-sizing: border-box;
+}
 </style>