chore: vehicle groups editing

src/components/VehiclesManager/VehicleGroupsTable.vue

@@ -18,24 +18,10 @@
     wyników
   </div>
 
+  <VehicleGroupEditModal v-if="vehiclesStore.selectedVehicleGroupId != -1" mode="update" />
+
   <div class="table-wrapper">
     <table class="vehicle-manager-table">
-      <!-- <thead>
-        <tr>
-          <td style="width: 50px">#</td>
-          <td style="width: 200px">Nazwa</td>
-          <td style="width: 80px">Długość</td>
-          <td style="width: 80px">Masa</td>
-          <td style="width: 100px">Prędkość</td>
-          <td style="width: 100px">Prędkość lok.</td>
-          <td style="width: 100px">Prędkość ładown.</td>
-          <td style="width: 100px">Pojazdy</td>
-          <td style="width: 80px">Zimny start</td>
-          <td style="width: 80px">Podwójna obsada</td>
-          <td style="width: 200px">Prędkości wg masy</td>
-        </tr>
-      </thead> -->
-
       <thead>
         <tr>
           <td
@@ -55,52 +41,52 @@
       </thead>
 
       <tbody>
-        <tr v-for="row in vehicleGroupsTableComp" :key="row.vehicleGroupRef.id">
+        <tr
+          v-for="row in vehicleGroupsTableComp"
+          :key="row.vehicleGroupRef.id"
+          @click="openEditModal(row.vehicleGroupRef.id)"
+        >
           <td>{{ row.vehicleGroupRef.id }}</td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.name }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.length }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.weight }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.speed }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.speedLoco }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.speedLoaded }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef._count.vehicles }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.locoProps?.coldStart ? '✅' : '❌' }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.locoProps?.doubleManned ? '✅' : '❌' }}
           </td>
 
-          <td class="editable">
+          <td>
             {{ row.vehicleGroupRef.massSpeeds ? 'WPISANE' : 'BRAK' }}
           </td>
-
-          <td class="editable" @click="removeVehicleGroupRow(row.vehicleGroupRef.id)">
-            <img src="/icon-trash.svg" alt="remove" />
-          </td>
         </tr>
       </tbody>
     </table>
@@ -112,6 +98,7 @@ 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 VehicleGroupEditModal from './VehicleGroupEditModal.vue';
 
 interface TableHeader {
   id: string;
@@ -142,7 +129,6 @@ const headers: TableHeader[] = [
   { id: 'coldStart', elementWidth: 75, title: 'Zimny start', sortable: true },
   { id: 'doubleManned', elementWidth: 75, title: 'Podwójna obsada', sortable: true },
   { id: 'massSpeeds', elementWidth: 100, title: 'Prędkości wg masy', sortable: false },
-  { id: 'remove', elementWidth: 75, title: 'Usuń', sortable: false },
 ];
 
 const vehiclesStore = useVehiclesStore();
@@ -183,27 +169,8 @@ function sortTableBy(id: string) {
   activeSortKey.value = id;
 }
 
-async function editRowPrimitive(row: IVehicleGroupTableRow, editKey: VehicleGroupEditRowKey) {
-  if (!(editKey in row.vehicleGroupRef)) return;
-
-  let rowValue = row.vehicleGroupRef[editKey];
-
-  if (typeof rowValue === 'string' || typeof rowValue === 'undefined' || rowValue == null) {
-    const promptValue = prompt('Zmień wartość:', rowValue ?? '');
-    if (promptValue == null) return;
-
-    const updatedData = await vehiclesStore.updateVehicleGroup(row.vehicleGroupRef.id, editKey, promptValue);
-
-    if (updatedData) {
-      (row.vehicleGroupRef[editKey] as any) = updatedData[editKey];
-    }
-  } else if (typeof rowValue == 'boolean') {
-    const updatedData = await vehiclesStore.updateVehicleGroup(row.vehicleGroupRef.id, editKey, !rowValue);
-
-    if (updatedData) {
-      (row.vehicleGroupRef[editKey] as any) = updatedData[editKey];
-    }
-  }
+function openEditModal(vehicleId: number) {
+  vehiclesStore.selectedVehicleGroupId = vehicleId;
 }
 
 async function addVehicleGroupRow() {
@@ -227,18 +194,6 @@ async function addVehicleGroupRow() {
     vehicleGroupSearchInput.value = data.name;
   }
 }
-
-async function removeVehicleGroupRow(id: number) {
-  const confirmRemove = confirm('Czy na pewno chcesz usunąć ten pojazd?');
-
-  if (!confirmRemove) return;
-
-  const removedData = await vehiclesStore.removeVehicle(id);
-
-  if (removedData) {
-    vehiclesStore.vehicleGroupsTable = vehiclesStore.vehicleGroupsTable.filter((v) => v.vehicleGroupRef.id != id);
-  }
-}
 </script>
 
 <style lang="scss" scoped></style>