Added Imported Flights Table

2026-04-03 23:59:40 +10:00
parent 6a88d0cdfb
commit 877caa3291
16 changed files with 622 additions and 21 deletions
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import axios from 'axios'
+
+const props = defineProps<{
+    prefilledOptions: { value: number, title: string }[]
+    errorMessages?: string[] | string
+}>()
+
+const model = defineModel<{ value: number, title: string } | null>()
+
+const airlineOptions = ref(props.prefilledOptions ?? [])
+const autocompleteRef = ref<any>(null)
+
+const onFocus = () => {
+    nextTick(() => {
+        const input = autocompleteRef.value?.$el?.querySelector('input')
+        input?.select()
+    })
+}
+
+const searchAirlines = async (query: string) => {
+    if (!query || query.length < 2) {
+        airlineOptions.value = props.prefilledOptions ?? []
+        return
+    }
+
+    if (query === model.value?.title) return
+
+    const { data } = await axios.get('/airlines/search', { params: { q: query } })
+    airlineOptions.value = data
+}
+</script>
+
+<template>
+    <v-autocomplete
+        ref="autocompleteRef"
+        v-model="model"
+        label="Airline"
+        :items="airlineOptions"
+        :error-messages="errorMessages"
+        item-title="title"
+        @update:search="searchAirlines"
+        @focus="onFocus"
+        hint="Showing closest matches to the imported value"
+        placeholder="SriLankan Airlines"
+        clearable
+        hide-no-data
+        return-object
+    >
+        <template #prepend-inner>
+            <img
+                v-if="model"
+                style="padding: 0.25em"
+                width="40"
+                height="40"
+                :src="`http://api.flightsgoneby.test:8000/airlines/logos/tail/id/${model.value}`"
+            />
+        </template>
+        <template #item="{ item, props: itemProps }">
+            <v-list-item v-bind="itemProps">
+                <template #prepend>
+                    <img style="padding:0.25em" width="40" height="40" :src="`http://api.flightsgoneby.test:8000/airlines/logos/tail/id/${item.value}`" />
+                </template>
+
+            </v-list-item>
+        </template>
+    </v-autocomplete>
+</template>