chore: vehicle groups editing

src/components/VehiclesManager/VehicleEditModal.vue

@@ -1,14 +1,10 @@
 <template>
-  <div class="modal-bg" @click="() => (vehiclesStore.selectedVehicleId = -1)"></div>
+  <div class="modal-bg" @click="closeModal()"></div>
 
-  <div class="modal">
+  <div class="modal" @keydown.esc="closeModal()" ref="modal" tabindex="0">
     <div class="modal-content">
       <h1 class="modal-header">
-        {{ mode == 'update' ? 'Edytuj' : 'Dodaj' }} pojazd
-
-        <button class="modal-exit" @click="closeModal">
-          <LucideX :size="40" />
-        </button>
+        <span>{{ mode == 'update' ? 'Edytuj' : 'Dodaj' }} pojazd</span>
       </h1>
 
       <div class="modal-details" v-if="vehicleRef">
@@ -40,20 +36,22 @@
         </div>
 
         <div>
-          <input
-            type="checkbox"
-            name="vehicle-team-only"
-            id="vehicle-team-only"
-            v-model="vehicleValues.restrictions!.teamOnly"
-          />
-          <label for="vehicle-team-only">Tylko dla zespołu</label>
+          <span>
+            <input
+              type="checkbox"
+              name="vehicle-team-only"
+              id="vehicle-team-only"
+              v-model="vehicleValues.restrictions!.teamOnly"
+            />
+            <label for="vehicle-team-only">Tylko dla zespołu</label>
+          </span>
           &nbsp;
-          <input type="checkbox" name="vehicle-hidden" id="vehicle-hidden" v-model="vehicleValues.hidden" />
-          <label for="vehicle-hidden">Ukryty</label>
+          <span>
+            <input type="checkbox" name="vehicle-hidden" id="vehicle-hidden" v-model="vehicleValues.hidden" />
+            <label for="vehicle-hidden">Ukryty</label>
+          </span>
         </div>
 
-        <div></div>
-
         <div>
           <b>Miniaturka:</b>
           <div>
@@ -98,15 +96,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, PropType, reactive, ref, Ref, watch } from 'vue';
+import { computed, onMounted, PropType, reactive, ref, Ref, useTemplateRef, watch } from 'vue';
 import { useVehiclesStore } from '../../stores/vehicles.store';
-import { LucideX } from 'lucide-vue-next';
 import { IVehicle, RemoveVehicleGroupAPIResponse, UpdateVehicleAPIResponse } from '../../types/vehicles.types';
 import client from '../../common/http';
 import { AxiosError } from 'axios';
 
-const vehiclesStore = useVehiclesStore();
+const modalElementRef = useTemplateRef('modal');
 
+const vehiclesStore = useVehiclesStore();
 const currentVehicleRef: Ref<IVehicle | null> = ref(null);
 
 let vehicleValues: Partial<IVehicle> = reactive({
@@ -121,8 +119,6 @@ let vehicleValues: Partial<IVehicle> = reactive({
   hidden: false,
 });
 
-let currentChanges: Record<string, any> = reactive({});
-
 const props = defineProps({
   mode: {
     type: String as PropType<'update' | 'create'>,
@@ -149,22 +145,10 @@ onMounted(() => {
       teamOnly: currentVehicleRef.value.restrictions?.teamOnly ?? false,
     };
   }
+
+  modalElementRef.value?.focus();
 });
 
-watch(
-  vehicleValues,
-  (val) => {
-    Object.keys(val).forEach((k) => {
-      const newValue = vehicleValues[k as keyof IVehicle];
-      const currentValue = currentVehicleRef.value![k as keyof IVehicle];
-
-      if (newValue != currentValue) currentChanges[k] = newValue;
-      else currentChanges[k] = undefined;
-    });
-  },
-  { deep: true },
-);
-
 function closeModal() {
   vehiclesStore.selectedVehicleId = -1;
 }
@@ -226,6 +210,10 @@ async function removeVehicle() {
 
   if (!vehicle) return;
 
+  const removeConfirm = confirm('Czy na pewno chcesz usunąć ten pojazd?');
+
+  if (!removeConfirm) return;
+
   try {
     const removedData = (await client.delete<RemoveVehicleGroupAPIResponse>(`/manager/vehicles/${vehicle.id}`)).data;
     vehicle.group._count.vehicles -= 1;
@@ -260,6 +248,10 @@ async function removeVehicle() {
   padding: 1em;
 }
 
+h1.modal-header {
+  justify-content: center;
+}
+
 .modal-actions {
   display: flex;
   gap: 0.5em;