add: asign driver to vehicle

src/components/CardVehicle.vue

@@ -1,4 +1,5 @@
 <script setup>
+    import { getDateMonthDayEs } from '../helpers/date_formats';
 
     const props = defineProps({
         vehicle: {
@@ -24,13 +25,14 @@
                         <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'})">
+                        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>
+                    </span>
                 </p>
+                <p v-if="vehicle.is_available">Disponible en: <span>{{ vehicle.destino }}</span></p>
             </div>
             <div class="col-lg-6">
                 <p>Placas Tracto Camión: <span>{{ vehicle.circulation_serial_number }}</span></p>
@@ -47,6 +49,7 @@
                         </i>
                     </span>
                 </p>
+                <p v-if="vehicle.is_available">Fecha Disponible: <span>{{ getDateMonthDayEs(vehicle.available_date, false) }}</span></p>
             </div>
         </div>
         <p v-if="vehicle.notes">Información Adicional del Transporte:</p>

src/components/CreateUserModal.vue

@@ -28,13 +28,13 @@
             userForm.phone2 = props.user.phone2;
             userForm.job_role = props.user.job_role;
             userForm.categories = props.user.categories;
-            userForm.user_city = props.user.user_city.map(m =>{
+            userForm.user_city = props.user.user_city?.map(m =>{
 				return { city_name: m };
 			});
-            userForm.user_state = props.user.user_state.map(m =>{
+            userForm.user_state = props.user.user_state?.map(m =>{
 				return { state_name:m };
 			});
-            userForm.truck_type = props.user.truck_type.map(m =>{
+            userForm.truck_type = props.user.truck_type?.map(m =>{
 				return { meta_value:m };
 			});
             userForm.user_description = props.user.user_description;
@@ -95,9 +95,9 @@
 				permissions: authStore.user.permissions,
 				company: authStore.user.company,
 				categories: userForm.categories.length <= 0 ? null : userForm.categories?.map((e) => e._id),
-				user_city: userForm.user_city.length <= 0 ? null : userForm.user_city?.map((e) => e.city_name),
-				user_state: userForm.user_state.length <= 0 ? null : userForm.user_state?.map((e) => e.state_name),
-				truck_type: userForm.truck_type.length <= 0 ? null : userForm.truck_type?.map((e) => e.meta_value),
+				user_city: userForm.user_city?.length <= 0 ? null : userForm.user_city?.map((e) => e.city_name),
+				user_state: userForm.user_state?.length <= 0 ? null : userForm.user_state?.map((e) => e.state_name),
+				truck_type: userForm.truck_type?.length <= 0 ? null : userForm.truck_type?.map((e) => e.meta_value),
 				user_description: userForm.user_description
 			}
 

src/components/DriverVehicleModal.vue

@@ -2,28 +2,85 @@
     import { onMounted, ref } from 'vue';
     import { useCompanyStore } from '../stores/company';
     import Spiner from './ui/Spiner.vue';
+    import { useVehiclesStore } from '../stores/vehicles';
+    import Swal from 'sweetalert2';
 
     const props = defineProps({
-        driver: {
-            type: Object
+        vehicle: {
+            type: Object,
+            required: true
         }
     });
 
     defineEmits(['reset-vehicle']);
 
     const companyStore = useCompanyStore();
+    const vehicleStore = useVehiclesStore();
 
     const driverSelected = ref(null);
     const drivers = ref([]);
+    const error = ref(null)
+    const loading = ref(false);
 
     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);
+        if(props?.vehicle?.driver) {
+            const index = drivers.value.findIndex((d) => d._id === props.vehicle.driver?._id);
             driverSelected.value = drivers.value[index];
         }
     });
 
+    const handleSetDriver = async() => {
+        if(driverSelected.value === null) {
+            error.value = 'Seleccione un conductor';
+            return 
+        }
+
+        let vehicle_id = props.vehicle._id;
+        let driver_id = driverSelected.value._id;
+
+        let vehicleData ={
+            driver : driverSelected.value
+        }
+        loading.value = true;
+        const result = await vehicleStore.updateVehicleCompany(vehicle_id, vehicleData, vehicleData);
+        
+        if( result === 'success' ) {
+            //Actualizamos el vehiculo
+            let userData = {
+                vehicle : vehicle_id
+            }
+
+            let localUser = {
+                categories: driverSelected.value.categories,
+            }
+            
+            const result2 = await companyStore.updateUserCompany(driver_id, userData, localUser);
+            if(result2 === 'success' ){
+                document.getElementById('btnCloseeditDriverVehicle').click();
+                Swal.fire({
+                    title: `<strong>Driver asignado con éxito!</strong>`,
+                    icon: 'success'
+                });
+            } else {
+                Swal.fire({
+                    title: result2,
+                    icon: 'error'
+                })
+            }
+        } else {
+            Swal.fire({
+                title: result,
+                icon: 'error'
+            })
+        }
+        
+        loading.value = false;
+
+        //Continua en la lina 568 web_main
+
+    }
+
 
 </script>
 
@@ -56,20 +113,25 @@
                             <option disabled value="">-- Seleccionar conductor --</option>
                             <option v-for="driver in drivers" :value="driver">{{driver.name}}</option>
                         </select>
+                        <span class="error-msg" v-if="error">{{ error }}</span>
                     </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>
+                    <Spiner v-if="loading"/>
+                    <div v-else class="btns-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"
+                            @click="handleSetDriver"
+                        >
+                            <span class="clear-xsm">Guardar</span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -82,4 +144,9 @@
         flex-direction: column;
         margin-bottom: 16px;
     }
+
+    .btns-footer {
+        display: flex;
+        gap: 1rem;
+    }
 </style>

src/components/StatusVehicleModal.vue

@@ -1,7 +1,12 @@
 <script setup>
-    import { onMounted, ref } from 'vue';
+    import { onMounted, reactive, ref } from 'vue';
     import Spiner from './ui/Spiner.vue';
     import CustomRadioInput from './ui/CustomRadioInput.vue';
+    import { useVehiclesStore } from '../stores/vehicles';
+    import CustomInput from './ui/CustomInput.vue';
+    import States from './ui/States.vue';
+    import Cities from './ui/Cities.vue';
+    import Swal from 'sweetalert2';
 
     const props = defineProps({
         vehicle: {
@@ -10,13 +15,81 @@
     });
 
     const statusSelected = ref(null);
+    const loading = ref(false);
+    const vehicleStore = useVehiclesStore();
 
     onMounted(() => {   
         statusSelected.value = props.vehicle.is_available === true ? 'Availiable' : 'Booked'
+        formAvailiable.state = {state_name: props.vehicle.state};
+        formAvailiable.destino = {city_name: props.vehicle.destino};
+        formAvailiable.city = {city_name: props.vehicle.city};
+        formAvailiable.available_date = props.vehicle.available_date?.substring(0, 10);
     });
 
     defineEmits(['reset-vehicle']);
 
+    const formAvailiable = reactive({
+        available_date: new Date(),
+        destino: '',
+        city : '',
+	    state : '',
+    });
+
+    const errors = ref({
+        destino: null,
+        city : null,
+	    state : null,
+    })
+
+    const handleSetStatusVehicle = async() => {
+        let vehicleData;
+        console.log(statusSelected.value);
+        if(statusSelected.value === 'Availiable') {
+            console.log('check validations');
+            validations();
+            if(errors.value.city || errors.value.state || errors.value.destino ) return;
+            vehicleData = {
+				available_date : formAvailiable.available_date,
+                destino: formAvailiable.destino.city_name,
+                city : formAvailiable.city.city_name,
+				state : formAvailiable.state.state_name,
+                is_available : true
+			}
+        } else {
+            vehicleData = {
+				available_date : null,
+                is_available : false
+			}
+        }
+        let localData = {
+            driver: props.vehicle.driver
+        }
+        loading.value = true;
+        const result = await vehicleStore.updateVehicleCompany(props.vehicle._id, vehicleData, localData);
+        loading.value = false;
+        if(result === 'success') {
+            document.getElementById('btnCloseeditStatusVehicle').click();
+            Swal.fire({
+                title: `<strong>Status del vehiculo actualizado con éxito!</strong>`,
+                icon: 'success'
+            })
+        } else {
+            Swal.fire({
+                title: result,
+                icon: 'error'
+            })
+        }
+    }
+
+    const validations = () => {
+        errors.value = {
+            state: (!formAvailiable.state) ? 'Seleccione estado' : null,
+            city: (!formAvailiable.city) ? 'Seleccione municipio' : null,
+            destino: (!formAvailiable.destino) ? 'Seleccione municipio destino' : null,
+        };
+        console.log(errors.value);
+    }
+
 </script>
 
 <template>
@@ -37,37 +110,74 @@
                     </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"
-                            />
+                    <form @submit.prevent="handleSetStatusVehicle">
+                        <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 v-if="statusSelected === 'Availiable'">
+                            <CustomInput
+                                label="Fecha de carga*"
+                                type="date"
+                                :filled="false"
+                                name="date-load"
+                                v-model:field="formAvailiable.available_date"
+                            />
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Base de carga por Estado</label>
+                                <States
+                                    v-model="formAvailiable.state" 
+                                />
+                                <span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
+                            </div>
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Base de Carga por Municipio</label>
+                                <Cities
+                                    v-model="formAvailiable.city" 
+                                />
+                                <span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
+                            </div>
+                            <div class="mb-4 mt-3">
+                                <label class="custom-label">Destino</label>
+                                <Cities
+                                    v-model="formAvailiable.destino" 
+                                />
+                                <span class="error-msg" v-if="errors.destino">{{ errors.destino }}</span>
+                            </div>
+                        </div>
+                        <div class="mt-4 text-center">
+                            <Spiner v-if="loading === true"/>
+                            <button 
+                                v-else
+                                class="btn-primary-sm radius-sm"
+                                type="submit"
+                            >
+                                <span class="clear-xsm">Cuardar</span>
+                            </button>
+                        </div>
+                    </form>
                 </div>
-                <div class="modal-footer">
+                <!-- <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>
     </div>