FlightsAPI/resources/js/Components/FlightsGoneBy/FlightListTable.vue

<script setup lang="ts">

import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import {Flight} from "@/Types/types";

const props = defineProps<{
    flights: Flight[]
}>()

const headers = [
    { title: 'FLIGHT', key: 'flight_number', sortable: true },
    { title: 'FROM', key: 'departure_airport', sortable: true },
    { title: 'TO', key: 'arrival_airport', sortable: true },
    { title: 'DATE', key: 'departure_date', sortable: true },
    { title: 'AIRLINE', key: 'airline', sortable: true },
    { title: 'AIRCRAFT', key: 'aircraft.designator', sortable: true },
    { title: 'CLASS', key: 'flight_class', sortable: true },
    { title: 'SEAT', key: 'seat_number', sortable: false },
]

const CLASS_ORDER: Record<string, number> = {
    'Unspecified': 0,
    'Economy': 1,
    'Premium Economy': 2,
    'Business': 3,
    'First': 4,
    'Private': 5
}

const customKeySort = {
    flight_class: (a: Flight['flight_class'], b: Flight['flight_class']) => {
        return (CLASS_ORDER[a?.name ?? ''] ?? -1) - (CLASS_ORDER[b?.name ?? ''] ?? -1)
    }
}
</script>

<template>
    <v-data-table
        :headers="headers"
        :custom-key-sort="customKeySort"
        :items="flights"
        :items-per-page="25"
        class="departures-table"
        hover
    >
        <!-- Flight number + logo -->
        <template #item.flight_number="{ item }">
            <div class="flight-cell">
                <AirlineLogo size="32" :airline="item.airline" class="airline-logo-img" />
                <span class="flight-number">{{ item.flight_number}}</span>
            </div>
        </template>

        <!-- Departure -->
        <template #item.departure_airport="{ item }">
            <span class="iata">{{ item.departure_airport.iata_code }}</span><br/>
            <span class="city-name">{{ item.departure_airport.municipality }}</span>
        </template>

        <!-- Arrival -->
        <template #item.arrival_airport="{ item }">
            <span class="iata">{{ item.arrival_airport.iata_code }}</span><br/>
            <span class="city-name">{{ item.arrival_airport.municipality }}</span>
        </template>

        <!-- Date -->
        <template #item.departure_date="{ item }">
            <span class="date-cell">{{ item.departure_date}}</span>
        </template>

        <!-- Airline -->
        <template #item.airline="{ item }">
            <span class="airline-name">{{ item.airline?.name }}</span>
        </template>

        <!-- Aircraft -->
        <template #item.aircraft="{ item }">
            <span class="mono-tag">{{ item.aircraft?.designator }}</span>
        </template>

        <!-- Class -->
        <template #item.flight_class="{ item }">
            <FlightClassBadge :flight-class="item.flight_class" />
        </template>

        <!-- Seat -->
        <template #item.seat_number="{ item }">
            <span class="seat-cell">{{ item.seat_number}}</span>
        </template>

        <!-- Empty state -->
        <template #no-data>
            <div class="no-data">
                <span>NO FLIGHTS ON RECORD</span>
            </div>
        </template>
    </v-data-table>
</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;
    letter-spacing: 0.14em !important;
    color: #ffc107 !important;
    font-weight: 400 !important;
}

:deep(.v-data-table__th) {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,193,7,0.15) !important;
    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;
}

:deep(.v-data-table__tr:nth-child(even)) {
    background: transparent !important;
}

:deep(.v-data-table__tr:hover td) {
    background: rgba(255,193,7,0.05) !important;
}

:deep(.v-data-table__td) {
    border: none !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.88rem !important;
    color: #c8cdd8 !important;
}

/* Footer / pagination */
:deep(.v-data-table-footer) {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    color: #556 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.75rem !important;
}

:deep(.v-data-table-footer .v-btn) {
    color: #778 !important;
}

:deep(.v-data-table-footer .v-btn--active) {
    color: #ffc107 !important;
}

/* Sort icon colour */
:deep(.v-data-table-header__sort-icon) {
    color: #ffc107 !important;
    opacity: 0.5;
}

/* ── Cell styles ── */
.flight-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer
}

.airline-logo-img {
    opacity: 0.85;
    flex-shrink: 0;
}

.flight-number {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: #e8eaf0;
    letter-spacing: 0.06em;
}

.iata {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #e8eaf0;
    letter-spacing: 0.08em;
    margin-right: 0.35rem;
}

.city-name {
    font-size: 0.75rem;
    color: #556;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.date-cell {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.82rem;
    color: #9aa;
    letter-spacing: 0.04em;
}

.airline-name {
    font-size: 0.85rem;
    color: #b0b8c8;
}

.mono-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: #778899;
    letter-spacing: 0.06em;
}

.seat-cell {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: #c8cdd8;
}

/* ── Empty state ── */
.no-data {
    padding: 3rem;
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: #445;
}
</style>