add: delete vehicle
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user