Merge pull request 'Add historic airports to database' (#20) from add-historic-airports into main

Reviewed-on: #20

resources/js/Components/FlightsGoneBy/AirportSearchBox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, watch } from 'vue'
 import axios from 'axios'
 
 const props = defineProps<{
@@ -12,6 +12,8 @@ const model = defineModel<{ value: number, title: string, country_code: string }
 
 const airportOptions = ref(props.prefilledOptions ?? [])
 const autocompleteRef = ref<any>(null)
+const includeInactive = ref(true)
+const lastQuery = ref('')
 
 const onFocus = () => {
     nextTick(() => {
@@ -21,6 +23,8 @@ const onFocus = () => {
 }
 
 const searchAirports = async (query: string) => {
+    lastQuery.value = query
+
     if (!query || query.length < 2) {
         airportOptions.value = props.prefilledOptions ?? []
         return
@@ -28,9 +32,19 @@ const searchAirports = async (query: string) => {
 
     if (query === model.value?.title) return
 
-    const { data } = await axios.get('/search/airports', { params: { q: query } })
+    const { data } = await axios.get('/search/airports', {
+        params: {
+            q: query,
+            include_inactive: includeInactive.value ? 1 : undefined,
+        },
+    })
     airportOptions.value = data
 }
+
+// Re-run the last search when the checkbox is toggled, so results update immediately
+watch(includeInactive, () => {
+    if (lastQuery.value) searchAirports(lastQuery.value)
+})
 </script>
 
 <template>
@@ -62,7 +76,6 @@ const searchAirports = async (query: string) => {
                         <span :class="`fi fi-${item.country_code}`"></span>
                     </span>
                 </template>
-
             </v-list-item>
         </template>
     </v-autocomplete>