add: modals edit driver & status vehicle

src/views/VehiclesView.vue

@@ -2,20 +2,23 @@
     import { onMounted, ref, watch } from 'vue';
     import { useCompanyStore } from '../stores/company';
     import Spiner from '../components/ui/Spiner.vue';
-    import CreateLocationModal from '../components/CreateLocationModal.vue';
     import { useVehiclesStore } from '../stores/vehicles';
     import CardVehicle from '../components/CardVehicle.vue';
     import CardEmpty from '../components/CardEmpty.vue';
+    import CreateVehicleModal from '../components/CreateVehicleModal.vue';
+import StatusVehicleModal from '../components/StatusVehicleModal.vue';
+import DriverVehicleModal from '../components/DriverVehicleModal.vue';
 
     const companyStore = useCompanyStore();
     const vehicleStore = useVehiclesStore();
 
     const loading = ref(false);
     const filterQuery = ref([]);
-    const drivers = ref([]);
     const query = ref('');
-    const locationCurrent = ref(null);
+    const vehicleCurrent = ref(null);
     const openModal = ref(false);
+    const editStatusVehicle = ref(false);
+    const editDriverVehicle = ref(false);
 
     onMounted(() => {
         getInitData();
@@ -26,7 +29,6 @@
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         await vehicleStore.fetchVehicles(filterQuery.value, false);
         await companyStore.getUsersCompany();
-        drivers.value = companyStore.users?.filter((u) => u.job_role == 'driver');
         loading.value = false;
     }
 
@@ -63,24 +65,43 @@
         }
     }
 
-    const handleSetCurrentLocation = (location) => {
-        openModal.value = true;
-        locationCurrent.value = location;
+    const handleSetCurrentVehicle = (data) => {
+        console.log(data);
+        if(data.modal === 'form') {
+            openModal.value = true;
+        } else if (data.modal === 'driver') {
+            editDriverVehicle.value = true;
+        } else {
+            editStatusVehicle.value = true;
+        }
+        vehicleCurrent.value = data.vehicle;
     }
 
-    const handleResetCurrentBudget = () => {
+    const handleResetCurrentVehicle = () => {
         openModal.value = false;
-        locationCurrent.value = null;
+        editDriverVehicle.value = false;
+        editStatusVehicle.value = false;
+        vehicleCurrent.value = null;
     }
 
 </script>
 
 <template>
     <div>
-        <CreateLocationModal 
+        <CreateVehicleModal 
             v-if="openModal === true"
-            :location="locationCurrent"
-            @reset-location="handleResetCurrentBudget"
+            :vehicle="vehicleCurrent"
+            @reset-vehicle="handleResetCurrentVehicle"
+        />
+        <StatusVehicleModal
+            v-if="editStatusVehicle === true"
+            :vehicle="vehicleCurrent"
+            @reset-vehicle="handleResetCurrentVehicle"
+        />
+        <DriverVehicleModal
+            v-if="editDriverVehicle === true"
+            :driver="vehicleCurrent?.driver"
+            @reset-vehicle="handleResetCurrentVehicle"
         />
         <h2 class="title">Vehiculos</h2>
         <div class="box-filters">
@@ -94,8 +115,9 @@
             </button>
             <button
                 class="btn-primary-sm radius-sm"
-                data-toggle="modal" data-target="#locationFormModal"
-                @click="handleSetCurrentLocation(null)"
+                data-toggle="modal" 
+                data-target="#createVehicleModal"
+                @click="handleSetCurrentVehicle({vehicle: null, modal: 'form'})"
             ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Agregar</span><span class="clear-md"> vehiculo</span></button>
         </div>
         <Spiner v-if="loading"/>
@@ -105,9 +127,9 @@
                 v-for="vehicle in vehicleStore.vehicles"
                 :vehicle="vehicle"
                 :key="vehicle._id"
-                :drivers="drivers"
+                @set-vehicle="handleSetCurrentVehicle"
             />
-            <CardEmpty v-else text="No hay ubicaciones agregadas"/>
+            <CardEmpty v-else text="No hay vehiculos agregados"/>
         </div>
     </div>
 </template>