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

add: asign driver to vehicle

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-01-15 20:14:20 -06:00
parent a1a92c417d
commit ffa5070510
8 changed files with 310 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/CardVehicle.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import { getDateMonthDayEs } from '../helpers/date_formats';
const props = defineProps({
vehicle: {
@@ -31,6 +32,7 @@
</i>
</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>

12
src/components/CreateUserModal.vue
View File

@@ -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_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),
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),
truck_type: userForm.truck_type?.length <= 0 ? null : userForm.truck_type?.map((e) => e.meta_value),
user_description: userForm.user_description
}

75
src/components/DriverVehicleModal.vue
View File

@@ -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: {
type: Object
vehicle: {
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) {
const index = drivers.value.findIndex((d) => d._id === props.driver?._id);
if(props?.vehicle?.driver) {
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,9 +113,12 @@
<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">
<Spiner v-if="loading"/>
<div v-else class="btns-footer">
<button
type="button"
class="btn btn-dark radius-sm"
@@ -67,6 +127,7 @@
>Cancelar</button>
<button
class="btn-primary-sm radius-sm"
@click="handleSetDriver"
>
<span class="clear-xsm">Guardar</span>
</button>
@@ -74,6 +135,7 @@
</div>
</div>
</div>
</div>
</template>
<style scoped>
@@ -82,4 +144,9 @@
flex-direction: column;
margin-bottom: 16px;
}
.btns-footer {
display: flex;
gap: 1rem;
}
</style>

126
src/components/StatusVehicleModal.vue
View File

@@ -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,6 +110,7 @@
</button>
</div>
<div class="modal-body view-proposals">
<form @submit.prevent="handleSetStatusVehicle">
<div class="custom-selected-field">
<h4 class="custom-label my-3">Status del vehiculo</h4>
<div class="d-flex">
@@ -54,20 +128,56 @@
/>
</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="modal-footer">
<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">
<button
type="button"
class="btn btn-dark radius-sm"
data-dismiss="modal"
@click="$emit('reset-vehicle')"
>Cerrar</button>
<button
class="btn-primary-sm radius-sm"
>
<span class="clear-xsm">Cuardar</span>
</button>
</div>
</div> -->
</div>
</div>
</div>

42
src/helpers/date_formats.js
View File

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

13
src/services/vehicles.js
View File

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

24
src/stores/vehicles.js
View File

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

2
src/views/VehiclesView.vue
View File

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