add: delete vehicle

src/components/CardVehicle.vue

@@ -1,5 +1,7 @@
 <script setup>
+    import Swal from 'sweetalert2';
     import { getDateMonthDayEs } from '../helpers/date_formats';
+    import { useVehiclesStore } from '../stores/vehicles';
 
     const props = defineProps({
         vehicle: {
@@ -10,6 +12,48 @@
 
     defineEmits(['set-vehicle']);
 
+    const vehicleStore = useVehiclesStore();
+
+    const handleDeleteVehicle = async() => {
+        Swal.fire({
+            title: `Eliminar vehiculo "${props.vehicle.vehicle_code}""`,
+            text: '¿Estás seguro de eliminar este vehiculo?',
+            icon: 'warning',
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonText: 'Eliminar',
+            cancelButtonText: 'Cancelar',
+        }).then(async(result) => {
+            if(result.isConfirmed) {
+                Swal.fire({
+                    title: 'Por favor espere!',
+                    html: 'Eliminando vehiculo...',// add html attribute if you want or remove
+                    allowOutsideClick: false,
+                    didOpen: () => {
+                        Swal.showLoading()
+                    },
+                });
+                const resp = await vehicleStore.deleteVehicleCompany(props.vehicle._id);
+                Swal.close();
+                
+                if(resp != null) {
+                    Swal.fire({
+                        title: "vehiculo eliminado!",
+                        text: "Tu vehiculo ha sido eliminado exitosamente.",
+                        icon: "success"
+                    });
+                } else {
+                    Swal.fire({
+                        title: "Error!",
+                        text: "Tu vehiculo no se pudo eliminar, intente más tarde.",
+                        icon: "error"
+                    });
+                }
+            }
+        });
+    }
+
+
 </script>
 
 <template>
@@ -19,7 +63,7 @@
                 <p>Código: <span>{{ vehicle.vehicle_code }}</span></p>
                 <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>Segmento: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
                 <p>Conductor: 
                     <span>
                         <span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span> 
@@ -59,6 +103,7 @@
         <div class="card-footer">
             <button 
                 class="btn btn-dark radius-sm"
+                @click="handleDeleteVehicle"
             >
                 <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
             </button>

src/components/CreateVehicleModal.vue

@@ -2,10 +2,13 @@
     import { computed, onMounted, reactive, ref } from 'vue';
     import CustomInput from './ui/CustomInput.vue';
     import TruckTypes from './ui/TruckTypes.vue';
+    import { useAuthStore } from '../stores/auth';
     import Segments from './ui/Segments.vue';
     import States from './ui/States.vue';
     import Cities from './ui/Cities.vue';
     import Spiner from './ui/Spiner.vue';
+    import Swal from 'sweetalert2';
+    import { useVehiclesStore } from '../stores/vehicles';
 
     const props = defineProps({
         vehicle: {
@@ -29,10 +32,22 @@
         destino: '',
     }
 
+    const errors = ref({
+        truck_type: null,
+        categories: null,
+        vehicle_number: null,
+        state: null,
+        city: null,
+        destino: null,
+    })
+
     const vehicleForm = reactive({
         ...initState
     })
 
+    const authStore = useAuthStore();
+    const vehicleStore = useVehiclesStore();
+
     onMounted(() => {
         if(props.vehicle) {
             vehicleForm.truck_type = {
@@ -55,6 +70,69 @@
     const title = computed(() => {
         return (props.vehicle) ? 'Editar vehiculo' : 'Agregar vehiculo';
     });
+
+    const handleSaveVehicle = async() => {
+        validations();
+
+        if(errors.value.vehicle_number || errors.value.truck_type || errors.value.categories || errors.value.city || errors.value.state || errors.value.destino ) return;
+        let vehicleData ={
+	    	vehicle_number : vehicleForm.vehicle_number,
+	    	city : vehicleForm.city?.city_name,
+	    	state : vehicleForm.state?.state_name,
+	    	truck_type : vehicleForm?.truck_type.meta_value,
+	    	trailer_plate_1: vehicleForm.trailer_plate_1,
+	    	trailer_plate_2: vehicleForm.trailer_plate_2,
+	    	circulation_serial_number: vehicleForm.circulation_serial_number,
+	    	notes: vehicleForm.notes,
+	    	company: authStore.user.company,
+	    	categories: vehicleForm.categories.length <= 0 ? null : vehicleForm.categories?.map((e) => e._id),
+	    	destino: vehicleForm.destino?.city_name,
+	    	available_date: new Date()
+	    };
+        let localData = {};
+        let result = 'error';
+        let action = 'Creado';
+        loading.value = true;
+        if(props.vehicle) {
+            localData = {
+                categories: vehicleForm.categories,
+                driver: props.vehicle.driver
+            };
+            action = 'actualizado';
+            result = await vehicleStore.updateVehicleCompany(props.vehicle._id, vehicleData, localData);
+        } else {
+            localData = {
+                categories: vehicleForm.categories
+            }
+            action = 'añadido';
+            result = await vehicleStore.createVehicleCompany(vehicleData, localData);
+        }
+
+        loading.value = false;
+        if(result === 'success') {
+            document.getElementById('btnClosecreateVehicleModal').click();
+            Swal.fire({
+                title: `<strong>Vehiculo ${action} con éxito!</strong>`,
+                icon: 'success'
+            })
+        } else {
+            Swal.fire({
+                title: result,
+                icon: 'error'
+            })
+        }
+    }
+
+    const validations = () => {
+        errors.value = {
+            truck_type: (!vehicleForm.truck_type) ? 'Seleccione tipo de transporte' : null,
+            categories: (!vehicleForm.categories) ? 'Seleccione al menos un segmento' : null,
+            vehicle_number: (!vehicleForm.vehicle_number) ? 'Campo es requerido' : null,
+            state: (!vehicleForm.state) ? 'Seleccione estado' : null,
+            city: (!vehicleForm.city) ? 'Seleccione municipio' : null,
+            destino: (!vehicleForm.destino) ? 'Seleccione municipio destino' : null,
+        };
+    }
 </script>
 
 <template>
@@ -72,14 +150,14 @@
                     </button>
                 </div>
                 <div class="modal-body form-content">
-                    <form @submit.prevent="saveVehicle" autocomplete="off" class="vehicle-form">
+                    <form @submit.prevent="handleSaveVehicle" autocomplete="off" class="vehicle-form">
                         <div class="row mt-4">
                             <div class="col-lg-6 col-12">
                                 <label class="custom-label">Tipo de Transporte*</label>
                                 <TruckTypes
                                     v-model="vehicleForm.truck_type" 
                                 />
-                                <!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
+                                <span class="error-msg" v-if="errors.truck_type">{{ errors.truck_type }}</span>
                             </div>
                             <div class="col-lg-6 col-12">
                                 <label class="custom-label">Segmento del transporte*</label>
@@ -87,7 +165,7 @@
                                     v-model="vehicleForm.categories" 
                                     :multiple="true"
                                 />
-                                <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
+                                <span class="error-msg" v-if="errors.categories">{{ errors.categories }}</span>
                             </div>
                         </div>
                         <div class="row mt-4">
@@ -97,6 +175,7 @@
                                     name="vehicle_number"
                                     v-model:field="vehicleForm.vehicle_number"
                                     :filled="false"
+                                    :error="errors.vehicle_number"
                                 />
                             </div>
                             <div class="col-lg-6 col-12">
@@ -132,14 +211,14 @@
                                 <States
                                     v-model="vehicleForm.state" 
                                 />
-                                <!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
+                                <span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
                             </div>
                             <div class="col-lg-6 col-12">
                                 <label class="custom-label">Base de Carga por Municipio*</label>
                                 <Cities
                                     v-model="vehicleForm.city" 
                                 />
-                                <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
+                                <span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
                             </div>
                         </div>
                         <div class="col-lg-6 col-12 mt-4">
@@ -147,7 +226,7 @@
                             <Cities
                                 v-model="vehicleForm.destino" 
                             />
-                            <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
+                            <span class="error-msg" v-if="errors.destino">{{ errors.destino }}</span>
                         </div>
                         <div class="d-flex flex-column mt-4">
                             <label class="custom-label" for="notes">Información Adicional del Transporte:</label>
@@ -163,7 +242,7 @@
                             <Spiner v-if="loading"/>
                             <button 
                                 v-else
-                                class="btn btn-dark" type="submit">Guardar</button>
+                                class="btn-primary-sm radius-sm" type="submit">Guardar</button>
                         </div> 
                     </form>
                 </div>

src/components/DriverVehicleModal.vue

@@ -42,8 +42,12 @@
         let vehicleData ={
             driver : driverSelected.value
         }
+        let localData ={
+            driver : driverSelected.value,
+            categories: props.vehicle.categories
+        }
         loading.value = true;
-        const result = await vehicleStore.updateVehicleCompany(vehicle_id, vehicleData, vehicleData);
+        const result = await vehicleStore.updateVehicleCompany(vehicle_id, vehicleData, localData);
         
         if( result === 'success' ) {
             //Actualizamos el vehiculo

src/components/StatusVehicleModal.vue

@@ -62,7 +62,8 @@
 			}
         }
         let localData = {
-            driver: props.vehicle.driver
+            driver: props.vehicle.driver,
+            categories: props.vehicle.categories
         }
         loading.value = true;
         const result = await vehicleStore.updateVehicleCompany(props.vehicle._id, vehicleData, localData);
@@ -87,7 +88,6 @@
             city: (!formAvailiable.city) ? 'Seleccione municipio' : null,
             destino: (!formAvailiable.destino) ? 'Seleccione municipio destino' : null,
         };
-        console.log(errors.value);
     }
 
 </script>

src/helpers/date_formats.js

@@ -47,9 +47,6 @@ export const getDateMonthDayEs = (value, isFull = false) => {
     } else {
       month = monthsAbr[date.getMonth()]
     }
-
-    console.log(date.getMonth());
-
     return `${month} ${date.getDate()}, ${date.getFullYear()}`;
 }
 

src/services/vehicles.js

@@ -4,7 +4,6 @@ import api from "../lib/axios";
 export const getVehicles = async(filter) => {
     try {
         const endpoint = `/vehicles/${filter}`;
-        console.log('endpoint: ', endpoint);
         const {data} = await api.get(endpoint);
         return data;
     } catch (error) {
@@ -16,12 +15,32 @@ 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 deleteVehicle = async(id) => {
+    try {
+        const endpoint = `/vehicles/${id}`;
+        const {data} = await api.delete(endpoint);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
+export const createVehicle = async(formData) => {
+    try {
+        const endpoint = `/vehicles/`;
+        const {data} = await api.post(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
         return null;
     }
 }

src/stores/vehicles.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { getVehicles, updateVehicle } from "../services/vehicles";
+import { createVehicle, deleteVehicle, getVehicles, updateVehicle } from "../services/vehicles";
 export const useVehiclesStore = defineStore('vehicles', () => {
     
     const vehicles = ref([]);
@@ -13,7 +13,6 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         if(cleanfilterArr.length > 0){
             filterStr ="?"+cleanfilterArr.join("&");
         }
-        console.log(filterStr);
         if(vehicles.value.length <= 0 || reload === true) {
             const resp = await getVehicles(filterStr);
             console.log(resp.data);
@@ -23,6 +22,19 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         }
     }
 
+    const createVehicleCompany = async(formData, localData = {}) => {
+        const data = await createVehicle(formData);
+        if(data) {
+            vehicles.value.push({
+                ...data,
+                ...localData
+            });
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
     const updateVehicleCompany = async(id, formData, localData = {}) => {
         const data = await updateVehicle(id, formData);
         if(data) {
@@ -41,10 +53,23 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         }
     }
 
+    const deleteVehicleCompany = async(id) => {
+        const data = await deleteVehicle(id);
+        if(data) {
+            vehicles.value = vehicles.value.filter(vehicle => vehicle._id !== id);
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
+
 
    return {
         vehicles,
         fetchVehicles,
-        updateVehicleCompany
+        createVehicleCompany,
+        updateVehicleCompany,
+        deleteVehicleCompany
    }
 });