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/CreateUserModal.vue

@@ -9,7 +9,7 @@
     import { validateEmail } from '../helpers/validations';
     import { useAuthStore } from '../stores/auth';
     import { useCompanyStore } from '../stores/company';
-import Swal from 'sweetalert2';
+    import Swal from 'sweetalert2';
 
     const props = defineProps({
         user: {

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>