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" 
+                        class="fa-solid fa-pen-to-square icon-btn" 
-                            data-toggle="modal"
+                        data-toggle="modal"
-                            data-target="#editDriverVehicle"
+                        data-target="#editDriverVehicle"
-                            @click="$emit('set-vehicle', {vehicle: vehicle, modal: 'driver'})">
+                        @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_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),
+				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),
+				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: {
+        vehicle: {
-            type: Object
+            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) {
+        if(props?.vehicle?.driver) {
-            const index = drivers.value.findIndex((d) => d._id === props.driver?._id);
+            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 
+                    <Spiner v-if="loading"/>
-                        type="button" 
+                    <div v-else class="btns-footer">
-                        class="btn btn-dark radius-sm" 
+                        <button 
-                        data-dismiss="modal"
+                            type="button" 
-                        @click="$emit('reset-vehicle')"
+                            class="btn btn-dark radius-sm" 
-                    >Cancelar</button>
+                            data-dismiss="modal"
-                    <button 
+                            @click="$emit('reset-vehicle')"
-                        class="btn-primary-sm radius-sm"
+                        >Cancelar</button>
-                    >
+                        <button 
-                        <span class="clear-xsm">Guardar</span>
+                            class="btn-primary-sm radius-sm"
-                    </button>
+                            @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">
+                    <form @submit.prevent="handleSetStatusVehicle">
-                        <h4 class="custom-label my-3">Status del vehiculo</h4>
+                        <div class="custom-selected-field">
-                        <div class="d-flex">
+                            <h4 class="custom-label my-3">Status del vehiculo</h4>
-                            <CustomRadioInput
+                            <div class="d-flex">
-                                value="Booked" 
+                                <CustomRadioInput
-                                label="Reservado"
+                                    value="Booked" 
-                                :name="'status-vehicle' + vehicle._id"
+                                    label="Reservado"
-                                v-model:typeselected="statusSelected"
+                                    :name="'status-vehicle' + vehicle._id"
-                            />
+                                    v-model:typeselected="statusSelected"
-                            <CustomRadioInput
+                                />
-                                value="Availiable" 
+                                <CustomRadioInput
-                                label="Disponible"
+                                    value="Availiable" 
-                                :name="'status-vehicle' + vehicle._id"
+                                    label="Disponible"
-                                v-model:typeselected="statusSelected"
+                                    :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 
+                </div> -->
-                        class="btn-primary-sm radius-sm"
-                    >
-                        <span class="clear-xsm">Cuardar</span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>

src/helpers/date_formats.js

@@ -1,4 +1,32 @@
+const months = [
+  "Enero", 
+  "Febrero", 
+  "Marzo", 
+  "Abril", 
+  "Mayo", 
+  "Junio", 
+  "Julio", 
+  "Agosto", 
+  "Septiembre", 
+  "Octubre",
+  "Noviembre", 
+  "Diciembre"
+];
 
+const monthsAbr = [
+  "Ene", 
+  "Feb", 
+  "Mar", 
+  "Abr", 
+  "May", 
+  "Jun", 
+  "Jul", 
+  "Ago", 
+  "Sep", 
+  "Oct",
+  "Nov", 
+  "Dic"
+];
 
 export const getDateMonthDay = (value) => {
     const date = new Date(value)
@@ -11,6 +39,20 @@ export const getDateMonthDay = (value) => {
     })
 }
 
+export const getDateMonthDayEs = (value, isFull = false) => {
+    const date = new Date(value)
+    let month = '';
+    if(isFull) {
+      month = months[date.getMonth()];
+    } else {
+      month = monthsAbr[date.getMonth()]
+    }
+
+    console.log(date.getMonth());
+
+    return `${month} ${date.getDate()}, ${date.getFullYear()}`;
+}
+
 export const getDateTime = (value, hour) => {
 
   const date = new Date(value);

src/services/vehicles.js

@@ -13,6 +13,19 @@ export const getVehicles = async(filter) => {
     }
 }
 
+export const updateVehicle = async(id, formData) => {
+    try {
+        const endpoint = `/vehicles/${id}`;
+        console.log('endpoint: ', endpoint);
+        const {data} = await api.patch(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
+        console.log(error.response);
+        return null;
+    }
+}
+
 export const saveProposal = async(formData) => {
     try {
         const endpoint = `/proposals`;

src/stores/vehicles.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { getVehicles } from "../services/vehicles";
+import { getVehicles, updateVehicle } from "../services/vehicles";
 export const useVehiclesStore = defineStore('vehicles', () => {
     
     const vehicles = ref([]);
@@ -23,8 +23,28 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         }
     }
 
+    const updateVehicleCompany = async(id, formData, localData = {}) => {
+        const data = await updateVehicle(id, formData);
+        if(data) {
+            console.log({data});
+            const index = vehicles.value.findIndex((vehicle) => vehicle._id === id);
+            vehicles.value[index] = {
+                ...vehicles.value[index],
+                ...data,
+                ...localData
+            };
+
+            console.log(vehicles.value[index]);
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
+
    return {
+        vehicles,
         fetchVehicles,
-        vehicles
+        updateVehicleCompany
    }
 });

src/views/VehiclesView.vue

@@ -6,8 +6,8 @@
     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 StatusVehicleModal from '../components/StatusVehicleModal.vue';
-import DriverVehicleModal from '../components/DriverVehicleModal.vue';
+    import DriverVehicleModal from '../components/DriverVehicleModal.vue';
 
     const companyStore = useCompanyStore();
     const vehicleStore = useVehiclesStore();
@@ -100,7 +100,7 @@ import DriverVehicleModal from '../components/DriverVehicleModal.vue';
         />
         <DriverVehicleModal
             v-if="editDriverVehicle === true"
-            :driver="vehicleCurrent?.driver"
+            :vehicle="vehicleCurrent"
             @reset-vehicle="handleResetCurrentVehicle"
         />
         <h2 class="title">Vehiculos</h2>