Added Notifications

resources/js/Components/FlightsGoneBy/FlightRegionTable.vue

@@ -1,49 +1,47 @@
 <script setup lang="ts">
-import {Flight} from "@/Types/types";
-import FlightToolTip from "@/Components/FlightsGoneBy/FlightToolTip.vue";
-import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
-import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
+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";
 
-defineProps<{
+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>
-    <table>
-        <tr v-for="code in regionCodes" :key="code">
-            <td>{{ regionNames?.[code] ?? code }}</td>
-            <td>
-                <template v-if="flightsByRegion[code]?.length">
-                    <span style="display:inline-flex; align-items:center; gap:0.25em; flex-wrap:wrap;">
-                        <FlightToolTip
-                            v-for="(flight, index) in flightsByRegion[code].slice(0, 5)"
-                            :key="flight.id"
-                            :flight="flight"
-                        >
-                            <InlineBadge style="display:inline-flex; align-items:center; gap:0.25em;">
-                                <AirlineLogo hideTooltip :airline="flight.airline" />
-                                {{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
-                            </InlineBadge>
-                        </FlightToolTip>
-                    </span>
-                </template>
-                <template v-else>
-                </template>
-            </td>
-        </tr>
-    </table>
+    <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>
-table {
-    border-spacing: 0;
-    width: 100%;
-}
-table td {
-    border: solid 1px;
-    padding: 0.5em;
-}
+
 </style>