Added User Settings

resources/js/Components/FlightsGoneBy/DepartureBoard.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import {Flight, User} from "@/Types/types";
+import {Flight, SharedProps, User} from "@/Types/types";
 import { computed, ref, watch, nextTick } from "vue";
 import type { DataTableSortItem } from 'vuetify';
 import {FlightStats} from "@/Composables/useFlightStats";
 import DepartureBoardTableRow from "@/Components/FlightsGoneBy/DepartureBoardTableRow.vue";
+import {usePage} from "@inertiajs/vue3";
 
 const props = defineProps<{
     flightStats: FlightStats
@@ -12,24 +13,34 @@ const props = defineProps<{
     flightId?: number | null
 }>()
 
+
+const page = usePage<SharedProps>().props
 const ITEMS_PER_PAGE = 25
 
-const headers = [
+const defaultColumns = ['airline', 'flight_number', 'from', 'to', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined']
+const columnsToShow = computed(() => page.auth.user?.resolved_settings?.departure_board_columns ?? defaultColumns)
+const showColumn = (column: string) => columnsToShow.value.includes(column)
+
+const allHeaders = [
     { title: '', key: 'airline', sortable: true },
     { title: 'FLIGHT', key: 'flight_number', sortable: true },
-    { title: 'FROM', key: 'departure_airport', sortable: true },
-    { title: 'TO', key: 'arrival_airport', sortable: true },
+    { title: 'FROM', key: 'from', sortable: true },
+    { title: 'TO', key: 'to', sortable: true },
     { title: 'DATE', key: 'departure_date', sortable: true },
-    { title: 'DEPART', key: 'departure_time_display', sortable: false },
-    { title: 'ARRIVE', key: 'arrival_time_display', sortable: false },
+    { title: 'DEPART', key: 'departure_time', sortable: false },
+    { title: 'ARRIVE', key: 'arrival_time', sortable: false },
     { title: 'DURATION', key: 'duration', sortable: true },
     { title: 'DISTANCE', key: 'distance', sortable: true },
-    { title: 'AIRCRAFT', key: 'aircraft.designator', sortable: true },
-    { title: 'REG', key: 'aircraft_registration', sortable: true },
-    { title: 'CLASS', key: 'flight_class', sortable: true },
+    { title: 'AIRCRAFT', key: 'aircraft', sortable: true },
+    { title: 'REG', key: 'registration', sortable: true },
+    { title: 'CLASS', key: 'class_seat_combined', sortable: true },
     { title: '', key: 'actions', sortable: false },
 ]
 
+const headers = computed(() =>
+    allHeaders.filter(h => h.key === 'actions' || showColumn(h.key))
+)
+
 const CLASS_ORDER: Record<string, number> = {
     'Unspecified': 0,
     'Economy': 1,
@@ -40,7 +51,7 @@ const CLASS_ORDER: Record<string, number> = {
 }
 
 const customKeySort = {
-    flight_class: (a: Flight['flight_class'], b: Flight['flight_class']) => {
+    class_seat_combined: (a: Flight['flight_class'], b: Flight['flight_class']) => {
         return (CLASS_ORDER[a?.name ?? ''] ?? -1) - (CLASS_ORDER[b?.name ?? ''] ?? -1)
     },
     airline: (a: Flight['airline'], b: Flight['airline']) => {
@@ -123,6 +134,7 @@ watch(
     },
     { immediate: true }
 )
+
 </script>
 
 <template>
@@ -160,6 +172,7 @@ watch(
 
             <template v-else-if="!(item as any)._groupHeader">
                 <DepartureBoardTableRow
+                    :columnsToShow="columnsToShow"
                     :flight="(item as Flight)"
                     :user="user"
                     :can-edit="canEdit"