Added admin controls for missing airlines

resources/js/Components/Admin/MissingAirlineCard.vue

@@ -1,25 +1,63 @@
 <script setup lang="ts">
+import { ref, computed } from "vue"
+import axios from "axios"
 import { MissingAirline } from "@/Types/types"
 
-defineProps<{
+const props = defineProps<{
     airline: MissingAirline
 }>()
+
+// Track ids we've dismissed locally (optimistic UI) and ones currently in-flight
+const dismissedIds = ref<Set<number>>(new Set())
+const pendingIds = ref<Set<number>>(new Set())
+
+const visibleFlights = computed(() =>
+    props.airline.flights.filter(flight => !dismissedIds.value.has(flight.id))
+)
+
+async function dismissFlight(flightId: number) {
+    if (pendingIds.value.has(flightId)) return
+
+    pendingIds.value.add(flightId)
+    // Optimistically remove the pill
+    dismissedIds.value.add(flightId)
+
+    try {
+        await axios.post('/admin/ignore-missing-airline', {
+            flight_id: flightId,
+        })
+    } catch (error) {
+        // Revert on failure so the flight isn't silently lost from view
+        dismissedIds.value.delete(flightId)
+        console.error('Failed to ignore missing airline for flight', flightId, error)
+    } finally {
+        pendingIds.value.delete(flightId)
+    }
+}
 </script>
 
 <template>
     <div class="missing-airline-card">
         <div class="card-header">
             <span class="airline-code">{{ airline.code }}</span>
-            <span class="flight-count">{{ airline.flights.length }} flight{{ airline.flights.length === 1 ? '' : 's' }}</span>
+            <span class="flight-count">{{ visibleFlights.length }} flight{{ visibleFlights.length === 1 ? '' : 's' }}</span>
         </div>
 
-        <ul class="flight-list">
-            <li v-for="flight in airline.flights" :key="flight.link" class="flight-item">
-                <a :href="flight.link" class="flight-link" target="_blank" rel="noopener">
+        <div class="flight-list">
+            <v-chip
+                v-for="flight in visibleFlights"
+                :key="flight.link"
+                class="flight-chip"
+                size="small"
+                closable
+                :disabled="pendingIds.has(flight.id)"
+                @click:close="dismissFlight(flight.id)"
+            >
+                <a :href="flight.link" class="flight-link" target="_blank" rel="noopener" @click.stop>
                     {{ flight.flight_number }}
                 </a>
-            </li>
-        </ul>
+            </v-chip>
+        </div>
     </div>
 </template>
 
@@ -62,30 +100,23 @@ defineProps<{
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
-    list-style: none;
-    padding: 0;
-    margin: 0;
 }
 
-.flight-item {
-    display: flex;
-}
-
-.flight-link {
+.flight-chip {
     font-family: 'Share Tech Mono', monospace;
     font-size: 0.72rem;
     letter-spacing: 0.06em;
+    background: rgba(255, 255, 255, 0.04) !important;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.flight-link {
     color: #9fb3c8;
     text-decoration: none;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 4px;
-    padding: 0.25rem 0.5rem;
-    transition: color 0.15s ease, border-color 0.15s ease;
+    transition: color 0.15s ease;
 }
 
 .flight-link:hover {
     color: #ffc107;
-    border-color: rgba(255, 193, 7, 0.4);
 }
 </style>