ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: delete vehicle

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/CardVehicle.vue
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>

93
src/components/CreateVehicleModal.vue
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>

6
src/components/DriverVehicleModal.vue
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

4
src/components/StatusVehicleModal.vue
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>

3
src/helpers/date_formats.js
View File

@@ -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()}`;
}

25
src/services/vehicles.js
View File

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

31
src/stores/vehicles.js
View File

@@ -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
}
});