chore: table cell highlight on hover; added vehicle removal confirmation

src/components/VehiclesManager/VehiclesTable.vue

@@ -23,9 +23,11 @@
       <tbody>
         <tr v-for="row in vehiclesTableComp" :key="row.vehicleRef.id">
           <td>{{ row.vehicleRef.id }}</td>
+
           <td class="editable" @click="editRowPrimitive(row, VehicleEditRowKey.NAME)">
             {{ row.vehicleRef.name }}
           </td>
+
           <td class="editable" @click="editRowPrimitive(row, VehicleEditRowKey.TYPE)">
             {{ row.vehicleRef.type }}
           </td>
@@ -34,7 +36,8 @@
             {{ row.vehicleRef.cabinName }}
           </td>
 
-          <td class="editable">{{ row.vehicleRef.group.name }}</td>
+          <td class="editable"></td>
+
           <td class="editable" @click="editRowRestrictions(row, VehicleEditRestrictionKey.SPONSOR_ONLY)">
             <span v-if="row.vehicleRef.restrictions?.sponsorOnly !== undefined">
               {{ new Date(row.vehicleRef.restrictions.sponsorOnly).toLocaleString() }}
@@ -42,6 +45,7 @@
 
             <span v-else>❌</span>
           </td>
+
           <td class="editable" @click="editRowRestrictions(row, VehicleEditRestrictionKey.TEAM_ONLY)">
             <span v-if="row.vehicleRef.restrictions?.teamOnly !== undefined">
               {{ row.vehicleRef.restrictions.teamOnly ? '✅' : '❌' }}
@@ -49,10 +53,12 @@
 
             <span v-else>❌</span>
           </td>
+
           <td class="editable" @click="editRowPrimitive(row, VehicleEditRowKey.HIDDEN)">
             {{ row.vehicleRef.hidden ? '✅' : '❌' }}
           </td>
-          <td @click="removeVehicle(row.vehicleRef.id)"><img src="/icon-trash.svg" alt="remove" /></td>
+
+          <td class="editable" @click="removeVehicle(row.vehicleRef.id)"><img src="/icon-trash.svg" alt="remove" /></td>
         </tr>
       </tbody>
     </table>
@@ -63,6 +69,7 @@
 import { computed, ref } 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('');
@@ -158,6 +165,10 @@ async function addVehicleRow() {
 }
 
 async function removeVehicle(id: number) {
+  const confirmRemove = confirm('Czy na pewno chcesz usunąć ten pojazd?');
+
+  if (!confirmRemove) return;
+
   const removedVehicleData = await vehiclesStore.removeVehicle(id);
 
   if (removedVehicleData) {

src/styles/_global.scss

@@ -65,7 +65,7 @@ table tr:nth-child(even) {
   background-color: #334756;
 }
 
-table tr:hover {
+table tr td.editable:hover {
   background-color: #1a293b;
   cursor: pointer;
 }