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

<script setup lang="ts">
import type { Flight } from '@/Types/types'
import { computed, ref } from 'vue'
import { usePage } from '@inertiajs/vue3'

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

const selectedYears         = ref<number[]>([])
const selectedAirlines      = ref<number[]>([])
const selectedCountries     = ref<string[]>([])
const selectedContinents    = ref<string[]>([])
const selectedFlightClasses = ref<number[]>([])

const emit = defineEmits<{
    change: [filters: {
        years: number[]
        airlines: number[]
        countries: string[]
        continents: string[]
        flightClasses: number[]
    }]
}>()

function emitFilters() {
    emit('change', {
        years:         selectedYears.value,
        airlines:      selectedAirlines.value,
        countries:     selectedCountries.value,
        continents:    selectedContinents.value,
        flightClasses: selectedFlightClasses.value,
    })
}

const page = usePage()
const airlineLogoUrl = (id: number) =>
    `${page.props.logo_api_url}/airlines/logos/tail/id/${id}`

const countryFlagClass = (code: string) =>
    `fi fi-${code.toLowerCase()}`

const availableYears = computed(() => {
    const years = new Set<number>()
    props.flights.forEach(f => years.add(new Date(f.departure_date).getFullYear()))
    return [...years].sort((a, b) => b - a)
})

const availableAirlines = computed((): { id: number; name: string }[] => {
    const map = new Map<number, { id: number; name: string }>()
    props.flights.forEach(f => {
        if (f.airline?.id && f.airline?.name)
            map.set(f.airline.id, { id: f.airline.id, name: f.airline.name })
    })
    return [...map.values()].sort((a, b) => a.name.localeCompare(b.name))
})

const availableCountries = computed((): { code: string; name: string }[] => {
    const map = new Map<string, { code: string; name: string }>()
    props.flights.forEach(f => {
        const dep = f.departure_airport.region?.country
        const arr = f.arrival_airport.region?.country
        if (dep) map.set(dep.code, { code: dep.code, name: dep.name })
        if (arr) map.set(arr.code, { code: arr.code, name: arr.name })
    })
    return [...map.values()].sort((a, b) => a.name.localeCompare(b.name))
})

const availableContinents = computed((): { code: string; name: string }[] => {
    const map = new Map<string, { code: string; name: string }>()
    props.flights.forEach(f => {
        const dep = f.departure_airport.region?.continent
        const arr = f.arrival_airport.region?.continent
        if (dep) map.set(dep.code, { code: dep.code, name: dep.name })
        if (arr) map.set(arr.code, { code: arr.code, name: arr.name })
    })
    return [...map.values()].sort((a, b) => a.name.localeCompare(b.name))
})

const availableFlightClasses = computed((): { id: number; name: string }[] => {
    const map = new Map<number, { id: number; name: string }>()
    props.flights.forEach(f => {
        if (f.flight_class?.id && f.flight_class?.name)
            map.set(f.flight_class.id, { id: f.flight_class.id, name: f.flight_class.name })
    })
    return [...map.values()].sort((a, b) => a.name.localeCompare(b.name))
})
</script>

<template>
    <div class="flight-filters">
        <v-select
            v-model="selectedYears"
            :items="availableYears"
            label="Year"
            multiple clearable hide-details
            density="compact" variant="outlined"
            @update:model-value="emitFilters"
        >
            <template #selection="{ item, index }">
                <span v-if="index < 2" class="v-select__selection-text">
                    {{ item }}<span v-if="index < Math.min(selectedYears.length, 2) - 1">,&nbsp;</span>
                </span>
                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedYears.length - 2 }}</span>
            </template>
        </v-select>

        <v-select
            v-model="selectedAirlines"
            :items="availableAirlines"
            item-title="name" item-value="id"
            label="Airline"
            multiple clearable hide-details
            density="compact" variant="outlined"
            @update:model-value="emitFilters"
        >
            <template #item="{ item, props: itemProps }">
                <v-list-item v-bind="itemProps">
                    <template #prepend="{ isSelected }">
                        <v-checkbox-btn :model-value="isSelected" tabindex="-1" />
                    </template>
                    <template #title>
                        <img
                            :src="airlineLogoUrl((item as any).id)"
                            width="32" height="32"
                            style="object-fit: contain; margin-right: 8px; vertical-align: middle;"
                            alt=""
                        />
                        {{ (item as any).name }}
                    </template>
                </v-list-item>
            </template>
            <template #selection="{ item, index }">
                <span v-if="index < 2" class="v-select__selection-text">
                    {{ (item as any).name }}<span v-if="index < Math.min(selectedAirlines.length, 2) - 1">,&nbsp;</span>
                </span>
                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAirlines.length - 2 }}</span>
            </template>
        </v-select>

        <v-select
            v-model="selectedCountries"
            :items="availableCountries"
            item-title="name" item-value="code"
            label="Country"
            multiple clearable hide-details
            density="compact" variant="outlined"
            @update:model-value="emitFilters"
        >
            <template #item="{ item, props: itemProps }">
                <v-list-item v-bind="itemProps">
                    <template #prepend="{ isSelected }">
                        <v-checkbox-btn :model-value="isSelected" tabindex="-1" />
                    </template>
                    <template #title>
                        <span :class="countryFlagClass((item as any).code)" style="margin-right: 8px; font-size: 1.1em;" />
                        {{ (item as any).name }}
                    </template>
                </v-list-item>
            </template>
            <template #selection="{ item, index }">
                <span v-if="index < 2" class="v-select__selection-text">
                    <span :class="countryFlagClass((item as any).code)" style="margin-right: 4px;" />
                    {{ (item as any).name }}<span v-if="index < Math.min(selectedCountries.length, 2) - 1">,&nbsp;</span>
                </span>
                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCountries.length - 2 }}</span>
            </template>
        </v-select>

        <v-select
            v-model="selectedContinents"
            :items="availableContinents"
            item-title="name" item-value="code"
            label="Continent"
            multiple clearable hide-details
            density="compact" variant="outlined"
            @update:model-value="emitFilters"
        >
            <template #selection="{ item, index }">
                <span v-if="index < 2" class="v-select__selection-text">
                    {{ (item as any).name }}<span v-if="index < Math.min(selectedContinents.length, 2) - 1">,&nbsp;</span>
                </span>
                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedContinents.length - 2 }}</span>
            </template>
        </v-select>

        <v-select
            v-model="selectedFlightClasses"
            :items="availableFlightClasses"
            item-title="name" item-value="id"
            label="Flight class"
            multiple clearable hide-details
            density="compact" variant="outlined"
            @update:model-value="emitFilters"
        >
            <template #selection="{ item, index }">
                <span v-if="index < 2" class="v-select__selection-text">
                    {{ (item as any).name }}<span v-if="index < Math.min(selectedFlightClasses.length, 2) - 1">,&nbsp;</span>
                </span>
                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightClasses.length - 2 }}</span>
            </template>
        </v-select>
    </div>
</template>

<style scoped>
.flight-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.flight-filters .v-select {
    flex: 1 1 160px;
}
</style>