111 lines
3.4 KiB
Vue
111 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, nextTick, watch } from 'vue'
|
|
import axios from 'axios'
|
|
|
|
const props = defineProps<{
|
|
prefilledOptions: { value: number, title: string, country_code: string }[]
|
|
errorMessages?: string[] | string
|
|
label?: string
|
|
}>()
|
|
|
|
const model = defineModel<{ value: number, title: string, country_code: string } | null>()
|
|
|
|
const airportOptions = ref(props.prefilledOptions ?? [])
|
|
const autocompleteRef = ref<any>(null)
|
|
const showClosed = ref(false)
|
|
const showNoCode = ref(false)
|
|
const lastQuery = ref('')
|
|
const menuOpen = ref(false)
|
|
|
|
const onFocus = () => {
|
|
menuOpen.value = true
|
|
|
|
nextTick(() => {
|
|
const input = autocompleteRef.value?.$el?.querySelector('input')
|
|
input?.select()
|
|
})
|
|
}
|
|
|
|
const searchAirports = async (query: string) => {
|
|
lastQuery.value = query
|
|
|
|
if (!query || query.length < 2) {
|
|
airportOptions.value = props.prefilledOptions ?? []
|
|
return
|
|
}
|
|
|
|
if (query === model.value?.title) return
|
|
|
|
const { data } = await axios.get('/search/airports', {
|
|
params: {
|
|
q: query,
|
|
show_closed: showClosed.value ? 1 : undefined,
|
|
show_no_code: showNoCode.value ? 1 : undefined,
|
|
},
|
|
})
|
|
airportOptions.value = data
|
|
}
|
|
|
|
// Re-run the last search when either checkbox is toggled, so results update immediately
|
|
watch([showClosed, showNoCode], () => {
|
|
if (lastQuery.value) searchAirports(lastQuery.value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-autocomplete
|
|
ref="autocompleteRef"
|
|
v-model="model"
|
|
v-model:menu="menuOpen"
|
|
:label="label ?? 'Airport'"
|
|
:items="airportOptions"
|
|
:error-messages="errorMessages"
|
|
item-title="title"
|
|
@update:search="searchAirports"
|
|
@focus="onFocus"
|
|
hint="Search by IATA (3 letters), ICAO (4 letters), or airport/city name"
|
|
placeholder="SYD"
|
|
clearable
|
|
hide-no-data
|
|
return-object
|
|
autocomplete="off"
|
|
:custom-filter="() => true"
|
|
>
|
|
<template #prepend-inner>
|
|
<span style="padding:0.5em">
|
|
<span v-if="model" :class="`fi fi-${model.country_code}`"></span>
|
|
</span>
|
|
</template>
|
|
|
|
<template #prepend-item>
|
|
<div class="px-4 py-1 d-flex align-center" style="gap: 16px;" @mousedown.prevent>
|
|
<v-checkbox
|
|
v-model="showClosed"
|
|
label="Show Closed Airports"
|
|
density="compact"
|
|
hide-details
|
|
style="flex: none; transform: scale(0.65); transform-origin: left center;"
|
|
/>
|
|
<v-checkbox
|
|
v-model="showNoCode"
|
|
label="Show Airports with No Code"
|
|
density="compact"
|
|
hide-details
|
|
style="flex: none; transform: scale(0.65); transform-origin: left center;"
|
|
/>
|
|
</div>
|
|
<v-divider class="mt-1" />
|
|
</template>
|
|
|
|
<template #item="{ item, props: itemProps }">
|
|
<v-list-item v-bind="itemProps">
|
|
<template #prepend>
|
|
<span style="padding-right:1em">
|
|
<span :class="`fi fi-${item.country_code}`"></span>
|
|
</span>
|
|
</template>
|
|
</v-list-item>
|
|
</template>
|
|
</v-autocomplete>
|
|
</template>
|