48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { Flight } from '@/Types/types'
|
|
import BadgeTable from '@/Components/FlightsGoneBy/GenericBadgeTable.vue'
|
|
import FlightToolTip from '@/Components/FlightsGoneBy/FlightToolTip.vue'
|
|
import AirlineLogo from '@/Components/FlightsGoneBy/AirlineLogo.vue'
|
|
import InlineBadge from '@/Components/FlightsGoneBy/InlineBadge.vue'
|
|
import {computed} from "vue";
|
|
import FlightBadge from "@/Components/FlightsGoneBy/FlightBadge.vue";
|
|
|
|
const props = defineProps<{
|
|
regionCodes: string[]
|
|
flightsByRegion: Record<string, Flight[]>
|
|
regionNames?: Record<string, string>
|
|
}>()
|
|
|
|
const sortedRegionCodes = computed(() =>
|
|
[...props.regionCodes].sort((a, b) => {
|
|
const nameA = props.regionNames?.[a] ?? a
|
|
const nameB = props.regionNames?.[b] ?? b
|
|
return nameA.localeCompare(nameB)
|
|
})
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<BadgeTable
|
|
:rows="sortedRegionCodes"
|
|
:rowKey="code => code"
|
|
:hasItems="code => !!flightsByRegion[code]?.length"
|
|
>
|
|
<template #label="{ row: code }">
|
|
{{ regionNames?.[code] ?? code }}
|
|
</template>
|
|
|
|
<template #items="{ row: code }">
|
|
<FlightBadge
|
|
v-for="flight in flightsByRegion[code]"
|
|
:key="flight.id"
|
|
:flight="flight"
|
|
/>
|
|
</template>
|
|
</BadgeTable>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|