dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added save functionality

Browse Source
This commit is contained in:
josh
2026-04-04 18:10:01 +10:00
parent 4ed4110ba0
commit 6bb6ff7f71
12 changed files with 384 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/AircraftSearchBox.vue
+51
View File
@@ -0,0 +1,51 @@
<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 aircraftOptions = ref(props.prefilledOptions ?? [])
const autocompleteRef = ref<any>(null)
const onFocus = () => {
nextTick(() => {
const input = autocompleteRef.value?.$el?.querySelector('input')
input?.select()
})
}
const searchAircraft = async (query: string) => {
if (!query || query.length < 2) {
aircraftOptions.value = props.prefilledOptions ?? []
return
}
if (query === model.value?.title) return
const { data } = await axios.get('/search/aircraft', { params: { q: query } })
aircraftOptions.value = data
}
</script>
<template>
<v-autocomplete
ref="autocompleteRef"
v-model="model"
label="Aircraft"
:items="aircraftOptions"
:error-messages="errorMessages"
item-title="title"
@update:search="searchAircraft"
@focus="onFocus"
hint="Showing closest matches to the imported value"
placeholder="B738"
clearable
hide-no-data
return-object
/>
</template>
resources/js/Components/FlightsGoneBy/AirlineSearchBox.vue
+1 -1
View File
@@ -31,7 +31,7 @@ const searchAirlines = async (query: string) => {
if (query === model.value?.title) return
const { data } = await axios.get('/airlines/search', { params: { q: query } })
const { data } = await axios.get('/search/airlines', { params: { q: query } })
airlineOptions.value = data
}
</script>
resources/js/Components/FlightsGoneBy/AirportSearchBox.vue
+69
View File
@@ -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, 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 onFocus = () => {
nextTick(() => {
const input = autocompleteRef.value?.$el?.querySelector('input')
input?.select()
})
}
const searchAirports = async (query: string) => {
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 } })
airportOptions.value = data
}
</script>
<template>
<v-autocomplete
ref="autocompleteRef"
v-model="model"
: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
: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 #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>
resources/js/Pages/ReconcileFlight.vue
+76 -22
View File
@@ -3,6 +3,8 @@ import MainLayout from "@/Layouts/MainLayout.vue";
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
import {Head, useForm} from "@inertiajs/vue3";
import AirlineSearchBox from "@/Components/FlightsGoneBy/AirlineSearchBox.vue";
import AircraftSearchBox from "@/Components/FlightsGoneBy/AircraftSearchBox.vue";
import AirportSearchBox from "@/Components/FlightsGoneBy/AirportSearchBox.vue";
defineOptions({ layout: MainLayout });
@@ -24,6 +26,9 @@ const props = defineProps<{
arr_time: string
duration: string
airline_options: { value: number, title: string }[]
from_options: { value: number, title: string, country_code: string}[]
to_options: { value: number, title: string, country_code: string }[]
aircraft_options: { value: number, title: string }[]
}
}>()
const flight = props.flight;
@@ -31,13 +36,13 @@ const flight = props.flight;
const form = useForm({
date: flight.date,
flight_number: flight.flight_number,
from: '',
to: '',
from: flight.from_options[0] ?? null,
to: flight.to_options[0] ?? null,
dep_time: flight.dep_time,
arr_time: flight.arr_time,
duration: flight.duration,
airline_id: flight.airline_options[0] ?? null,
aircraft: '',
aircraft: flight.aircraft_options[0] ?? null,
registration: flight.registration,
seat_number: flight.seat_number,
seat_type: flight.seat_types[flight.seat_type],
@@ -47,8 +52,42 @@ const form = useForm({
});
const submitForm = useForm({
date: '' as string | null,
flight_number: '' as string | null,
from_id: null as number | null,
to_id: null as number | null,
dep_time: '' as string | null,
arr_time: '' as string | null,
duration: '' as string | null,
airline_id: null as number | null,
aircraft_id: null as number | null,
registration: '' as string | null,
seat_number: '' as string | null,
seat_type_id: null as number | null,
flight_class_id: null as number | null,
flight_reason_id: null as number | null,
note: '' as string | null,
});
function submit() {
form.post(route('reconcile.store'));
submitForm.date = form.date;
submitForm.flight_number = form.flight_number;
submitForm.from_id = form.from?.value ?? null;
submitForm.to_id = form.to?.value ?? null;
submitForm.dep_time = form.dep_time;
submitForm.arr_time = form.arr_time;
submitForm.duration = form.duration;
submitForm.airline_id = form.airline_id?.value ?? null;
submitForm.aircraft_id = form.aircraft?.value ?? null;
submitForm.registration = form.registration;
submitForm.seat_number = form.seat_number;
submitForm.seat_type_id = form.seat_type?.value ?? null;
submitForm.flight_class_id = form.flight_class?.value ?? null;
submitForm.flight_reason_id = form.flight_reason?.value ?? null;
submitForm.note = form.note;
submitForm.post(route('import.save'));
}
</script>
@@ -65,36 +104,47 @@ function submit() {
<!-- Date / Flight Number / Registration -->
<v-row>
<v-col cols="12" md="4">
<v-text-field type="date" v-model="form.date" label="Date" placeholder="03-18-11" :error-messages="form.errors.date" />
<v-text-field type="date" v-model="form.date" label="Date" placeholder="03-18-11" :error-messages="submitForm.errors.date" />
</v-col>
<v-col cols="12" md="4">
<v-text-field v-model="form.flight_number" label="Flight Number" placeholder="UL227" :error-messages="form.errors.flight_number" />
<v-text-field v-model="form.flight_number" label="Flight Number" placeholder="UL227" :error-messages="submitForm.errors.flight_number" />
</v-col>
<v-col cols="12" md="4">
<v-text-field v-model="form.registration" label="Registration" placeholder="4R-ALX" :error-messages="form.errors.registration" />
<v-text-field v-model="form.registration" label="Registration" placeholder="4R-ALX" :error-messages="submitForm.errors.registration" />
</v-col>
</v-row>
<!-- From / To -->
<v-row>
<v-col cols="12" md="6">
<v-autocomplete label="From" :items="[]" placeholder="Dubai International (DXB)" :error-messages="form.errors.from" hide-no-data clearable />
<v-col cols="24" md="12">
<AirportSearchBox
v-model="form.from"
label="From"
:prefilled-options="flight.from_options"
:error-messages="submitForm.errors.from_id"
/>
</v-col>
<v-col cols="12" md="6">
<v-autocomplete label="To" :items="[]" placeholder="Kuwait (KWI)" :error-messages="form.errors.to" hide-no-data clearable />
</v-row>
<v-row>
<v-col cols="24" md="12">
<AirportSearchBox
label="To"
v-model="form.to"
:prefilled-options="flight.to_options"
:error-messages="submitForm.errors.to_id"
/>
</v-col>
</v-row>
<!-- Dep time / Arr time / Duration -->
<v-row>
<v-col cols="12" md="4">
<v-text-field v-model="form.dep_time" type="time" label="Departure Time" placeholder="09:30" :error-messages="form.errors.dep_time" />
<v-text-field v-model="form.dep_time" type="time" label="Departure Time" placeholder="09:30" :error-messages="submitForm.errors.dep_time" />
</v-col>
<v-col cols="12" md="4">
<v-text-field v-model="form.arr_time" type="time" label="Arrival Time" placeholder="11:45" :error-messages="form.errors.arr_time" />
<v-text-field v-model="form.arr_time" type="time" label="Arrival Time" placeholder="11:45" :error-messages="submitForm.errors.arr_time" />
</v-col>
<v-col cols="12" md="4">
<v-text-field v-model="form.duration" label="Duration" placeholder="1:23" :error-messages="form.errors.duration" />
<v-text-field v-model="form.duration" label="Duration" placeholder="1:23" :error-messages="submitForm.errors.duration" />
</v-col>
</v-row>
@@ -104,35 +154,39 @@ function submit() {
<AirlineSearchBox
v-model="form.airline_id"
:prefilled-options="flight.airline_options"
:error-messages="form.errors.airline_id"
:error-messages="submitForm.errors.airline_id"
/>
</v-col>
<v-col cols="12" md="6">
<v-autocomplete label="Aircraft" :items="[]" placeholder="Airbus A330" :error-messages="form.errors.aircraft" hide-no-data clearable />
<AircraftSearchBox
v-model="form.aircraft"
:prefilled-options="flight.aircraft_options"
:error-messages="submitForm.errors.aircraft_id"
/>
</v-col>
</v-row>
<!-- Seat Number / Seat Type / Flight Class / Flight Reason -->
<v-row>
<v-col cols="12" md="3">
<v-text-field v-model="form.seat_number" label="Seat Number" placeholder="22A" :error-messages="form.errors.seat_number" />
<v-text-field v-model="form.seat_number" label="Seat Number" placeholder="22A" :error-messages="submitForm.errors.seat_number" />
</v-col>
<v-col cols="12" md="3">
<v-select v-model="form.seat_type" label="Seat Type" :items="flight.seat_types" :error-messages="form.errors.seat_type" clearable />
<v-select v-model="form.seat_type" label="Seat Type" :items="flight.seat_types" :error-messages="submitForm.errors.seat_type_id" clearable />
</v-col>
<v-col cols="12" md="3">
<v-select v-model="form.flight_class" label="Class" :items="flight.flight_classes" :error-messages="form.errors.flight_class" clearable />
<v-select v-model="form.flight_class" label="Class" :items="flight.flight_classes" :error-messages="submitForm.errors.flight_class_id" clearable />
</v-col>
<v-col cols="12" md="3">
<v-select v-model="form.flight_reason" label="Reason" :items="flight.flight_reasons" :error-messages="form.errors.flight_reason" clearable />
<v-select v-model="form.flight_reason" label="Reason" :items="flight.flight_reasons" :error-messages="submitForm.errors.flight_reason_id" clearable />
</v-col>
</v-row>
<!-- Note -->
<v-row>
<v-col cols="12">
<v-textarea v-model="form.note" label="Note" placeholder="Any additional notes…" :error-messages="form.errors.note" rows="3" auto-grow />
<v-textarea v-model="form.note" label="Note" placeholder="Any additional notes…" :error-messages="submitForm.errors.note" rows="3" auto-grow />
</v-col>
</v-row>
resources/js/app.ts
+1
View File
@@ -7,6 +7,7 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createApp, h, DefineComponent } from 'vue';
import vuetify from './plugins/vuetify';
import '@mdi/font/css/materialdesignicons.css'
import 'flag-icons/css/flag-icons.min.css'
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';