chore: added updating group of a vehicle

src/components/VehiclesManager/VehiclesTable.vue

@@ -12,7 +12,7 @@
           <td style="width: 200px">Nazwa</td>
           <td style="width: 150px">Typ</td>
           <td style="width: 150px">Kabina (lok.)</td>
-          <td style="width: 100px">Grupa</td>
+          <td style="width: 170px">Grupa</td>
           <td style="width: 100px">Tylko sponsorzy do</td>
           <td style="width: 100px">Tylko zespół</td>
           <td style="width: 50px">Ukryty</td>
@@ -36,7 +36,26 @@
             {{ row.vehicleRef.cabinName }}
           </td>
 
-          <td class="editable"></td>
+          <td class="editable" @click="selectRowVehicleGroup(row)">
+            <select
+              v-if="currentEditingGroupId == row.vehicleRef.id"
+              @blur="currentEditingGroupId = -1"
+              @change="(e) => editVehicleGroup(e, row)"
+              :id="`select-group-${row.vehicleRef.id}`"
+              ref="select-group"
+              style="width: 100%"
+            >
+              <option
+                v-for="value in vehiclesStore.vehicleGroupsTable"
+                :value="value.vehicleGroupRef.id"
+                :selected="row.vehicleRef.group.id == value.vehicleGroupRef.id"
+              >
+                {{ value.vehicleGroupRef.name }}
+              </option>
+            </select>
+
+            <span v-else>{{ row.vehicleRef.group.name }}</span>
+          </td>
 
           <td class="editable" @click="editRowRestrictions(row, VehicleEditRestrictionKey.SPONSOR_ONLY)">
             <span v-if="row.vehicleRef.restrictions?.sponsorOnly !== undefined">
@@ -66,17 +85,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref, useTemplateRef } from 'vue';
 import { useVehiclesStore } from '../../stores/vehicles.store';
 import { IVehicleTableRow, VehicleEditRestrictionKey, VehicleEditRowKey } from '../../types/vehicles.types';
-import VehicleGroupsTable from './VehicleGroupsTable.vue';
 
 const vehiclesStore = useVehiclesStore();
 const vehicleSearchInput = ref('');
+const currentEditingGroupId = ref(-1);
+const selectGroup = useTemplateRef('select-group');
 
 const vehiclesTableComp = computed(() => {
   return vehiclesStore.vehiclesTable
-    .filter((row) => row.vehicleRef.name.toLowerCase().startsWith(vehicleSearchInput.value.trim().toLowerCase()))
+    .filter((row) => row.vehicleRef.name.toLowerCase().includes(vehicleSearchInput.value.trim().toLowerCase()))
     .sort((r1, r2) => {
       return r1.vehicleRef.id - r2.vehicleRef.id;
     });
@@ -143,6 +163,28 @@ async function editRowRestrictions(row: IVehicleTableRow, editKey: VehicleEditRe
   }
 }
 
+async function selectRowVehicleGroup(row: IVehicleTableRow) {
+  currentEditingGroupId.value = row.vehicleRef.id;
+
+  nextTick(() => {
+    if (selectGroup.value) {
+      selectGroup.value[0].focus();
+    }
+  });
+}
+
+async function editVehicleGroup(e: Event, row: IVehicleTableRow) {
+  const id = (e.target as HTMLSelectElement).value;
+
+  const updatedData = await vehiclesStore.updateVehicle(row.vehicleRef.id, 'vehicleGroupId', +id);
+
+  if (updatedData) {
+    row.vehicleRef.group = vehiclesStore.vehicleGroupsTable.find(
+      (g) => g.vehicleGroupRef.id == updatedData.vehicleGroupsId,
+    )!.vehicleGroupRef;
+  }
+}
+
 async function addVehicleRow() {
   const createdVehicleData = await vehiclesStore.createVehicle({
     name: 'Vehicle-' + Date.now(),