Add more airlines and fix edit bugs

resources/js/Components/FlightsGoneBy/DepartureBoard.vue

@@ -3,7 +3,7 @@
 import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
 import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
 import {Flight} from "@/Types/types";
-import { computed, ref } from "vue";
+import { computed, ref, watch, nextTick } from "vue";
 import type { DataTableSortItem } from 'vuetify';
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
@@ -13,8 +13,10 @@ import {FlightStats} from "@/Composables/useFlightStats";
 const props = defineProps<{
     flightStats: FlightStats
     canEdit: boolean
+    flightId?: number | null
 }>()
 
+const ITEMS_PER_PAGE = 25
 
 const headers = [
     { title: '', key: 'airline', sortable: true },
@@ -50,15 +52,14 @@ const customKeySort = {
     duration: (a: any, b: any) => (a ?? 0) - (b ?? 0),
 }
 
-// Track active sort state
 const sortBy = ref<DataTableSortItem[]>([])
+const currentPage = ref(1)
 
 const today = new Date()
 today.setHours(0, 0, 0, 0)
 
 const isSorting = computed(() => sortBy.value.length > 0)
 
-// Split flights into upcoming vs departed, sorted by date within each group
 const upcomingFlights = computed(() =>
     props.flightStats.upcomingFlights.value
 )
@@ -69,7 +70,6 @@ const departedFlights = computed(() =>
         .sort((a, b) => new Date(b.departure_date).getTime() - new Date(a.departure_date).getTime())
 )
 
-// Flat ordered list with group markers injected — used only when not sorting
 type GroupedFlight = Flight & { _group?: 'upcoming' | 'departed'; _groupHeader?: boolean; _groupLabel?: string }
 
 const groupedItems = computed<GroupedFlight[]>(() => {
@@ -88,7 +88,6 @@ const groupedItems = computed<GroupedFlight[]>(() => {
     return result
 })
 
-// When sorting, pass all flights flat; when not sorting, pass grouped (headers will be rendered via #item slot trick)
 const allFlights = computed(() => [
     ...props.flightStats.upcomingFlights.value,
     ...props.flightStats.pastFlights.value,
@@ -97,6 +96,34 @@ const allFlights = computed(() => [
 const tableItems = computed(() =>
     isSorting.value ? allFlights.value : groupedItems.value
 )
+
+watch(
+    [() => props.flightId, tableItems],
+    async ([id]) => {
+        if (!id) return
+
+        // Count the flight's position among data rows (skipping group headers)
+        const items = tableItems.value
+        let dataIndex = 0
+        let found = false
+
+        for (const item of items) {
+            if ((item as any)._groupHeader) continue
+            if ((item as any).id === id) { found = true; break }
+            dataIndex++
+        }
+
+        if (!found) return
+
+        currentPage.value = Math.floor(dataIndex / ITEMS_PER_PAGE) + 1
+
+        await nextTick()
+
+        const row = document.querySelector<HTMLElement>(`tr[data-flight-id="${id}"]`)
+        row?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    },
+    { immediate: true }
+)
 </script>
 
 <template>
@@ -104,14 +131,13 @@ const tableItems = computed(() =>
         :headers="headers"
         :custom-key-sort="customKeySort"
         :items="tableItems"
-        :items-per-page="25"
+        :items-per-page="ITEMS_PER_PAGE"
         v-model:sort-by="sortBy"
+        v-model:page="currentPage"
         class="departures-table"
         hover
     >
-        <!-- ── GROUP HEADER ROW (injected as a fake item) ── -->
         <template #item="{ item, columns }">
-            <!-- Section divider row -->
             <template v-if="(item as any)._groupHeader && !isSorting">
                 <tr class="section-header-row">
                     <td :colspan="columns.length" class="section-header-cell">
@@ -133,34 +159,32 @@ const tableItems = computed(() =>
                 </tr>
             </template>
 
-            <!-- Normal data row -->
             <template v-else-if="!(item as any)._groupHeader">
                 <tr
                     class="v-data-table__tr"
-                    :class="(item as any)._group && !isSorting ? `group-row--${(item as any)._group}` : ''"
+                    :class="[
+                        (item as any)._group && !isSorting ? `group-row--${(item as any)._group}` : '',
+                        (item as any).id === flightId ? 'flight-row--highlighted' : '',
+                    ]"
+                    :data-flight-id="(item as any).id"
                 >
-                    <!-- Airline logo -->
                     <td class="v-data-table__td airline-logo-cell">
                         <AirlineLogo size="32" :airline="(item as any).airline" class="airline-logo-img" />
                     </td>
 
-                    <!-- Flight number -->
                     <td class="v-data-table__td flight-number-cell">
                         <div class="flight-cell">
                             <span class="flight-number">{{ (item as any).flight_number }}</span>
                         </div>
                     </td>
 
-                    <!-- Departure airport -->
                     <td class="v-data-table__td">
                         <AirportToolTip :airport="(item as Flight).departure_airport">
-                                <span class="iata">{{ (item as Flight).departure_airport.display_code }}</span><br/>
+                            <span class="iata">{{ (item as Flight).departure_airport.display_code }}</span><br/>
                         </AirportToolTip>
-                            <span class="city-name">{{ (item as Flight).departure_airport.municipality }}</span>
-
+                        <span class="city-name">{{ (item as Flight).departure_airport.municipality }}</span>
                     </td>
 
-                    <!-- Arrival airport -->
                     <td class="v-data-table__td">
                         <AirportToolTip :airport="(item as Flight).arrival_airport">
                             <span class="iata">{{ (item as Flight).arrival_airport.display_code }}</span><br/>
@@ -168,17 +192,14 @@ const tableItems = computed(() =>
                         <span class="city-name">{{ (item as Flight).arrival_airport.municipality }}</span>
                     </td>
 
-                    <!-- Departure date -->
                     <td class="v-data-table__td">
                         <span class="date-cell">{{ (item as Flight).departure_date_display }}</span>
                     </td>
 
-                    <!-- Departure time -->
                     <td class="v-data-table__td">
                         <span class="time-cell">{{ (item as Flight).departure_time_display }}</span>
                     </td>
 
-                    <!-- Arrival time -->
                     <td class="v-data-table__td">
                         <span class="time-cell">{{ (item as Flight).arrival_time_display }}</span>
                         <sup v-if="(item as Flight).arrival_day_difference" class="day-diff">
@@ -190,21 +211,18 @@ const tableItems = computed(() =>
                         <span class="mono-tag">{{ (item as Flight).duration_display ?? '—' }}</span>
                     </td>
 
-                    <!-- Distance -->
                     <td class="v-data-table__td">
                     <span class="mono-tag distance-cell">
                         {{ (item as Flight).distance ? Math.round((item as Flight).distance).toLocaleString() + ' km' : '' }}
                     </span>
                     </td>
 
-                    <!-- Aircraft -->
                     <td class="v-data-table__td">
                         <AircraftToolTip v-if="(item as any).aircraft" :aircraft="(item as any).aircraft">
                             <span class="mono-tag">{{ (item as any).aircraft?.designator }}</span>
                         </AircraftToolTip>
                     </td>
 
-                    <!-- Class -->
                     <td class="v-data-table__td ">
                         <span class="class-cell">
                         <FlightClassBadge :flight="(item as Flight)" />
@@ -213,7 +231,6 @@ const tableItems = computed(() =>
                         </span>
                     </td>
 
-                    <!-- Actions -->
                     <td class="v-data-table__td actions-cell">
                         <template v-if="canEdit">
                             <v-menu>
@@ -241,7 +258,6 @@ const tableItems = computed(() =>
             </template>
         </template>
 
-        <!-- Empty state -->
         <template #no-data>
             <div class="no-data">
                 <span>NO FLIGHTS ON RECORD</span>
@@ -251,14 +267,12 @@ const tableItems = computed(() =>
 </template>
 
 <style scoped>
-/* ── Vuetify table overrides ── */
 .departures-table {
     background: transparent !important;
     color: #c8cdd8 !important;
     font-family: 'Barlow', sans-serif !important;
 }
 
-/* Header row */
 :deep(.v-data-table-header__content) {
     font-family: 'Share Tech Mono', monospace !important;
     font-size: 0.68rem !important;
@@ -273,7 +287,6 @@ const tableItems = computed(() =>
     padding: 0.75rem 1rem !important;
 }
 
-/* Body rows — alternating, no borders */
 :deep(.v-data-table__tr:nth-child(odd)) {
     background: rgba(255,255,255,0.025) !important;
 }
@@ -293,7 +306,6 @@ const tableItems = computed(() =>
     color: #c8cdd8 !important;
 }
 
-/* Footer / pagination */
 :deep(.v-data-table-footer) {
     background: transparent !important;
     border-top: 1px solid rgba(255,255,255,0.06) !important;
@@ -310,13 +322,11 @@ const tableItems = computed(() =>
     color: #ffc107 !important;
 }
 
-/* Sort icon colour */
 :deep(.v-data-table-header__sort-icon) {
     color: #ffc107 !important;
     opacity: 0.5;
 }
 
-/* ── Section header rows ── */
 .section-header-row {
     background: transparent !important;
 }
@@ -334,7 +344,6 @@ const tableItems = computed(() =>
     position: relative;
 }
 
-/* Upcoming = amber accent */
 .section-header-inner.upcoming .section-header-icon,
 .section-header-inner.upcoming .section-header-label {
     color: #ffc107;
@@ -344,7 +353,6 @@ const tableItems = computed(() =>
     background: linear-gradient(to right, rgba(255,193,7,0.4), transparent);
 }
 
-/* Departed = muted slate */
 .section-header-inner.departed .section-header-icon,
 .section-header-inner.departed .section-header-label {
     color: #778899;
@@ -383,7 +391,6 @@ const tableItems = computed(() =>
     min-width: 2rem;
 }
 
-/* ── Airline + flight number fused cells ── */
 :deep(.v-data-table__th:nth-child(1)) {
     width: 50px !important;
     min-width: 50px !important;
@@ -406,7 +413,6 @@ const tableItems = computed(() =>
     padding-left: 0.5rem !important;
 }
 
-/* ── Cell styles ── */
 .flight-cell {
     display: flex;
     align-items: center;
@@ -484,7 +490,6 @@ const tableItems = computed(() =>
     gap: 0.5rem;
 }
 
-/* ── Empty state ── */
 .no-data {
     padding: 3rem;
     text-align: center;
@@ -506,4 +511,14 @@ const tableItems = computed(() =>
     letter-spacing: 0.08em !important;
     color: #c8cdd8 !important;
 }
+
+/* ── Highlighted flight row ── */
+.flight-row--highlighted {
+    box-shadow: inset 3px 0 0 #ffc107;
+
+}
+.flight-row--highlighted td {
+    background: rgba(255, 193, 7, 0.08) !important;
+    transition: background 0.3s ease;
+}
 </style>