add: modals edit driver & status vehicle

src/components/CardVehicle.vue

@@ -1,33 +1,14 @@
 <script setup>
-    import { onMounted, ref } from 'vue';
-    import CustomRadioInput from './ui/CustomRadioInput.vue';
 
     const props = defineProps({
         vehicle: {
             type: Object,
             required: true
-        },
-        drivers: {
-            type: Array,
-            requited: true
         }
     })
 
-    const driver = ref(null);
-    const status = ref(null);
-    const loading = ref(false);
+    defineEmits(['set-vehicle']);
 
-    onMounted(() => {
-        status.value = props.vehicle.is_available === true ? 'Availiable' : 'Booked'
-        if(props.vehicle?.driver) {
-            const index = props.drivers.findIndex((d) => d._id === props.vehicle?.driver?._id);
-            driver.value = props.drivers[index];
-        }
-    })
-
-    const setDriver = () => {
-        console.log('Driver selected: ', driver.value.name)
-    }
 </script>
 
 <template>
@@ -38,64 +19,51 @@
                 <p>Tipo de transporte: <span>{{ vehicle.truck_type }}</span></p>
                 <p>Número de Serie: <span>{{ vehicle.vehicle_number }}</span></p>
                 <p>Segmento: <span>{{ vehicle._categories }}</span></p>
+                <p>Conductor: 
+                    <span>
+                        <span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span> 
+                        <span v-else>No asignado </span> 
+                        <i 
+                            class="fa-solid fa-pen-to-square icon-btn" 
+                            data-toggle="modal"
+                            data-target="#editDriverVehicle"
+                            @click="$emit('set-vehicle', {vehicle: vehicle, modal: 'driver'})">
+                        </i>
+                     </span>
+                </p>
             </div>
             <div class="col-lg-6">
                 <p>Placas Tracto Camión: <span>{{ vehicle.circulation_serial_number }}</span></p>
                 <p>Placas Remolque 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
                 <p>Placas Remolque 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
                 <p>Base de carga: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
+                <p>Status: 
+                    <span>{{ vehicle.is_available ? 'Disponible' : 'Reservado'}} 
+                        <i 
+                            class="fa-solid fa-pen-to-square icon-btn" 
+                            data-toggle="modal"
+                            data-target="#editStatusVehicle"
+                            @click="$emit('set-vehicle', {vehicle: vehicle, modal: 'status'})">
+                        </i>
+                    </span>
+                </p>
             </div>
         </div>
         <p v-if="vehicle.notes">Información Adicional del Transporte:</p>
         <div v-if="vehicle.notes" class="box-note mb-4">
             {{ vehicle.notes }}
         </div>
-        <div class="divider"></div>
-        <div class="row my-2">
-            <div class="col-lg-6">
-                <div class="custom-selected-field">
-                    <label class="custom-label" for="driver">Conductor asignado:</label>
-                    <select 
-                        class="custom-input-light"
-                        name="driver" 
-                        id="driver" 
-                        v-model="driver"
-                        @change="setDriver()"
-                    >
-                        <option disabled value="">-- Seleccionar conductor --</option>
-                        <option v-for="driver in drivers" :value="driver">{{driver.name}}</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-lg-6">
-                <h4 class="custom-label mt-2">Status del vehiculo</h4>
-               <div class="d-flex">
-                    <CustomRadioInput
-                        value="Booked" 
-                        label="Reservado"
-                        :name="'status-vehicle' + vehicle._id"
-                        v-model:typeselected="status"
-                    />
-                    <CustomRadioInput
-                        value="Availiable" 
-                        label="Disponible"
-                        :name="'status-vehicle' + vehicle._id"
-                        v-model:typeselected="status"
-                    />
-               </div>
-            </div>
-        </div>
         <div class="card-footer">
             <button 
                 class="btn btn-dark radius-sm"
-                @click="handleDeleteLocation"
             >
                 <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
             </button>
             <button 
                 class="btn-primary-sm radius-sm"
-                @click="$emit('set-location')"
-                data-toggle="modal" data-target="#locationFormModal"
+                @click="$emit('set-vehicle', {vehicle: vehicle, modal: 'form'})"
+                data-toggle="modal" 
+                data-target="#createVehicleModal"
             >
                 <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
             </button>
@@ -115,10 +83,11 @@
         gap: 1rem;
     }
 
-    .custom-selected-field {
-        display: flex;
-        flex-direction: column;
-        margin-bottom: 16px;
+    .icon-btn {
+        cursor: pointer;
+        font-size: 20px;
+        margin-left: 8px;
+        color: #FBBA33;
     }
 
     p {

src/components/CreateVehicleModal.vue

@@ -0,0 +1,48 @@
+<script setup>
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        vehicle: {
+            type: Object,
+            required: false
+        }
+    });
+
+    defineEmits(['reset-vehicle']);
+
+    const title = computed(() => {
+        return (props.vehicle) ? 'Editar vehiculo' : 'Agregar vehiculo';
+    });
+</script>
+
+<template>
+    <div class="modal fade" id="createVehicleModal" tabindex="-1" role="dialog" aria-labelledby="createVehicleModal" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="title mt-2 mb-3">{{ title }}</h2>
+                    <button 
+                        id="btnClosecreateVehicleModal" 
+                        type="button" 
+                        @click="$emit('reset-vehicle')"
+                        class="close bg-white" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body form-content">
+                </div>
+                <div class="modal-footer">
+                    <button 
+                        type="button" 
+                        class="btn btn-dark" 
+                        @click="$emit('reset-vehicle')"
+                        data-dismiss="modal">Cerrar</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/DriverVehicleModal.vue

@@ -0,0 +1,85 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import { useCompanyStore } from '../stores/company';
+    import Spiner from './ui/Spiner.vue';
+
+    const props = defineProps({
+        driver: {
+            type: Object
+        }
+    });
+
+    defineEmits(['reset-vehicle']);
+
+    const companyStore = useCompanyStore();
+
+    const driverSelected = ref(null);
+    const drivers = ref([]);
+
+    onMounted(() => {   
+        drivers.value = companyStore.users?.filter((u) => u.job_role == 'driver');
+        if(props.driver) {
+            const index = drivers.value.findIndex((d) => d._id === props.driver?._id);
+            driverSelected.value = drivers.value[index];
+        }
+    });
+
+
+</script>
+
+<template>
+    <div class="modal fade" id="editDriverVehicle" tabindex="-1" role="dialog" aria-labelledby="editDriverVehicle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="title mt-2 mb-3">Cambiar conductor</h2>
+                    <button 
+                        id="btnCloseeditDriverVehicle" 
+                        type="button" 
+                        class="close bg-white" 
+                        data-dismiss="modal" 
+                        aria-label="Close"
+                        @click="$emit('reset-vehicle')"
+                    >
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body view-proposals">
+                    <div class="custom-selected-field">
+                        <label class="custom-label my-2" for="driver">Conductor asignado:</label>
+                        <select 
+                            class="custom-input-light"
+                            name="driver" 
+                            id="driver" 
+                            v-model="driverSelected"
+                        >
+                            <option disabled value="">-- Seleccionar conductor --</option>
+                            <option v-for="driver in drivers" :value="driver">{{driver.name}}</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button 
+                        type="button" 
+                        class="btn btn-dark radius-sm" 
+                        data-dismiss="modal"
+                        @click="$emit('reset-vehicle')"
+                    >Cancelar</button>
+                    <button 
+                        class="btn-primary-sm radius-sm"
+                    >
+                        <span class="clear-xsm">Guardar</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .custom-selected-field {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 16px;
+    }
+</style>

src/components/StatusVehicleModal.vue

@@ -0,0 +1,78 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import Spiner from './ui/Spiner.vue';
+    import CustomRadioInput from './ui/CustomRadioInput.vue';
+
+    const props = defineProps({
+        vehicle: {
+            type: Object
+        }
+    });
+
+    const statusSelected = ref(null);
+
+    onMounted(() => {   
+        statusSelected.value = props.vehicle.is_available === true ? 'Availiable' : 'Booked'
+    });
+
+    defineEmits(['reset-vehicle']);
+
+</script>
+
+<template>
+    <div class="modal fade" id="editStatusVehicle" tabindex="-1" role="dialog" aria-labelledby="editStatusVehicle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="title mt-2 mb-3">Cambiar status vehiculo</h2>
+                    <button 
+                        id="btnCloseeditStatusVehicle" 
+                        type="button" 
+                        class="close bg-white" 
+                        data-dismiss="modal" 
+                        @click="$emit('reset-vehicle')"
+                        aria-label="Close"
+                    >
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body view-proposals">
+                    <div class="custom-selected-field">
+                        <h4 class="custom-label my-3">Status del vehiculo</h4>
+                        <div class="d-flex">
+                            <CustomRadioInput
+                                value="Booked" 
+                                label="Reservado"
+                                :name="'status-vehicle' + vehicle._id"
+                                v-model:typeselected="statusSelected"
+                            />
+                            <CustomRadioInput
+                                value="Availiable" 
+                                label="Disponible"
+                                :name="'status-vehicle' + vehicle._id"
+                                v-model:typeselected="statusSelected"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button 
+                        type="button" 
+                        class="btn btn-dark radius-sm" 
+                        data-dismiss="modal"
+                        @click="$emit('reset-vehicle')"
+                    >Cerrar</button>
+                    <button 
+                        class="btn-primary-sm radius-sm"
+                    >
+                        <span class="clear-xsm">Cuardar</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

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) => {
+    const handleSetCurrentVehicle = (data) => {
+        console.log(data);
+        if(data.modal === 'form') {
             openModal.value = true;
-        locationCurrent.value = location;
+        } 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>