chore: finished vehicle groups table filters, added default sorters dir on change

src/components/VehiclesManager/VehicleGroupsTable.vue

@@ -24,12 +24,7 @@
     <table class="vehicle-manager-table">
       <thead>
         <tr>
-          <td
+          <td v-for="header in headers" :style="`width: ${header.elementWidth}px`" @click="sortTableBy(header.id)">
-            v-for="header in headers"
-            :style="`width: ${header.elementWidth}px`"
-            @click="sortTableBy(header.id)"
-            :data-sortable="header.sortable"
-          >
             <div>
               {{ header.title }}
 
@@ -65,15 +60,11 @@
           </td>
 
           <td>
-            {{ row.vehicleGroupRef.speedLoco }}
+            {{ row.vehicleGroupRef.speedLoco ?? '-' }}
           </td>
 
           <td>
-            {{ row.vehicleGroupRef.speedLoaded }}
+            {{ row.vehicleGroupRef.speedLoaded ?? '-' }}
-          </td>
-
-          <td>
-            {{ row.vehicleGroupRef._count.vehicles }}
           </td>
 
           <td>
@@ -85,7 +76,15 @@
           </td>
 
           <td>
-            {{ row.vehicleGroupRef.massSpeeds ? 'WPISANE' : 'BRAK' }}
+            {{ row.vehicleGroupRef.massSpeeds ? '✅' : '❌' }}
+          </td>
+
+          <td>
+            {{ row.vehicleGroupRef.cargoTypes?.length ?? '-' }}
+          </td>
+
+          <td>
+            {{ row.vehicleGroupRef._count.vehicles ?? '0' }}
           </td>
         </tr>
       </tbody>
@@ -97,14 +96,14 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import { useVehiclesStore } from '../../stores/vehicles.store';
 import { LucideArrowDown, LucideArrowUp, LucidePlus, LucideX } from 'lucide-vue-next';
-import { IVehicleGroup, IVehicleGroupTableRow, VehicleGroupEditRowKey } from '../../types/vehicles.types';
+import { IVehicleGroup } from '../../types/vehicles.types';
 import VehicleGroupEditModal from './VehicleGroupEditModal.vue';
 
 interface TableHeader {
   id: string;
   elementWidth: number;
   title: string;
-  sortable: boolean;
+  defaultSorterDir: number;
 }
 
 const sorterFunctions: Record<string, (v1: IVehicleGroup, v2: IVehicleGroup) => number> = {
@@ -115,20 +114,28 @@ const sorterFunctions: Record<string, (v1: IVehicleGroup, v2: IVehicleGroup) =>
   speed: (v1, v2) => (v1.speed - v2.speed) * activeSortDir.value,
   speedLoco: (v1, v2) => ((v1.speedLoco || 0) - (v2.speedLoco || 0)) * activeSortDir.value,
   speedLoaded: (v1, v2) => ((v1.speedLoaded || 0) - (v2.speedLoaded || 0)) * activeSortDir.value,
+  coldStart: (v1, v2) =>
+    ((v1.locoProps?.coldStart ? 1 : -1) - (v2.locoProps?.coldStart ? 1 : -1)) * activeSortDir.value,
+  doubleManned: (v1, v2) =>
+    ((v1.locoProps?.doubleManned ? 1 : -1) - (v2.locoProps?.doubleManned ? 1 : -1)) * activeSortDir.value,
+  massSpeeds: (v1, v2) => ((v1.massSpeeds ? 1 : -1) - (v2.massSpeeds ? 1 : -1)) * activeSortDir.value,
+  cargoTypes: (v1, v2) => ((v1.cargoTypes?.length ?? 0) - (v2.cargoTypes?.length ?? 0)) * activeSortDir.value,
+  vehicles: (v1, v2) => (v1._count.vehicles - v2._count.vehicles) * activeSortDir.value,
 };
 
 const headers: TableHeader[] = [
-  { id: 'id', elementWidth: 50, title: '#', sortable: true },
+  { id: 'id', elementWidth: 50, title: '#', defaultSorterDir: 1 },
-  { id: 'name', elementWidth: 150, title: 'Nazwa', sortable: true },
+  { id: 'name', elementWidth: 150, title: 'Nazwa', defaultSorterDir: 1 },
-  { id: 'length', elementWidth: 100, title: 'Długość', sortable: true },
+  { id: 'length', elementWidth: 100, title: 'Długość', defaultSorterDir: -1 },
-  { id: 'weight', elementWidth: 100, title: 'Masa', sortable: true },
+  { id: 'weight', elementWidth: 100, title: 'Masa', defaultSorterDir: -1 },
-  { id: 'speed', elementWidth: 100, title: 'Prędkość', sortable: true },
+  { id: 'speed', elementWidth: 100, title: 'Prędkość', defaultSorterDir: -1 },
-  { id: 'speedLoco', elementWidth: 100, title: 'Prędkość (lok)', sortable: true },
+  { id: 'speedLoco', elementWidth: 100, title: 'Prędkość (lok)', defaultSorterDir: -1 },
-  { id: 'speedLoaded', elementWidth: 100, title: 'Prędkość (ład.)', sortable: true },
+  { id: 'speedLoaded', elementWidth: 100, title: 'Prędkość (ład.)', defaultSorterDir: -1 },
-  { id: 'vehicles', elementWidth: 80, title: 'Pojazdy', sortable: true },
+  { id: 'coldStart', elementWidth: 75, title: 'Zimny start', defaultSorterDir: -1 },
-  { id: 'coldStart', elementWidth: 75, title: 'Zimny start', sortable: true },
+  { id: 'doubleManned', elementWidth: 75, title: 'Podwójna obsada', defaultSorterDir: -1 },
-  { id: 'doubleManned', elementWidth: 75, title: 'Podwójna obsada', sortable: true },
+  { id: 'massSpeeds', elementWidth: 80, title: 'Prędkości wg masy', defaultSorterDir: -1 },
-  { id: 'massSpeeds', elementWidth: 100, title: 'Prędkości wg masy', sortable: false },
+  { id: 'cargoTypes', elementWidth: 80, title: 'Ładunki', defaultSorterDir: -1 },
+  { id: 'vehicles', elementWidth: 80, title: 'Pojazdy', defaultSorterDir: -1 },
 ];
 
 const vehiclesStore = useVehiclesStore();
@@ -164,7 +171,7 @@ function sortTableBy(id: string) {
   if (!(id in sorterFunctions)) return;
 
   if (activeSortKey.value == id) activeSortDir.value *= -1;
-  else activeSortDir.value = 1;
+  else activeSortDir.value = headers.find((h) => h.id == id)?.defaultSorterDir ?? 1;
 
   activeSortKey.value = id;
 }