add: delete vehicle

This commit is contained in:
Alexandro Uc Santos
2024-01-16 20:59:47 -06:00
parent 89730148b4
commit d66c01ff74
7 changed files with 189 additions and 20 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

@@ -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>