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

fixes: vehicles & proposals

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-08-07 20:54:39 -06:00
parent 75af1a9bf4
commit 59f2b20890
12 changed files with 162 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/CardLoad.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { getDayMonthYear } from '../helpers/date_formats';
import { getDateOnly } from '../helpers/date_formats';
import { getStatusPublished } from '../helpers/status';
import { getStatusLoad } from '../helpers/status';
import { useLoadsStore } from '../stores/loads';
@@ -84,13 +84,6 @@
const handleTracking = () => {
let code = props.load._id;
window.open('/publico/tracking/' + code, '_blank');
// router.push({
// name: 'tracking-load',
// params: {code},
// }
// ).then(() => {
// window.open('/publico/tracking/' + code, '_blank');
// })
}
</script>
@@ -117,7 +110,12 @@
<template v-if="load.destination.country">{{ load.destination.country }}, </template>
<template v-if="load.destination.zipcode">{{ load.destination.zipcode }} </template>
</p>
</div>
<div class="col-lg-6 col-sm-12" v-if="readOnly">
<p>
<span>{{t('loads.company')}}: </span>
{{ load.company.company_name }}
</p>
</div>
<div class="col-lg-6 col-sm-12" v-if="authStore.user?.permissions === 'role_shipper'">
<p><span>{{t('loads.postStatus')}}:</span> <span class="simple">{{ getStatusPublished(load) }}</span></p>
@@ -130,16 +128,16 @@
<div class="col-lg-4 col-sm-12">
<p><span>{{t('loads.truckType')}}: </span> {{ load.truck_type }}</p>
<p><span>{{t('loads.weight')}}: </span> {{ load.weight }} KG</p>
<p><span>{{t('loads.dateLoad')}}: </span> {{ getDayMonthYear(load.est_loading_date) }}</p>
<p><span>{{t('loads.dateLoad')}}: </span> {{ getDateOnly(load.est_loading_date) }}</p>
</div>
<div class="col-lg-4 col-sm-12">
<p><span>{{t('loads.product')}}: </span> {{ load?.product?.name }}</p>
<p><span>{{t('loads.cost')}}: </span> {{ load.actual_cost }}</p>
<p><span>{{t('loads.dateDownload')}}: </span> {{getDayMonthYear(load.est_unloading_date) }}</p>
<p><span>{{t('loads.dateDownload')}}: </span> {{getDateOnly(load.est_unloading_date) }}</p>
</div>
<div class="col-lg-4 col-sm-12">
<p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
<p><span>{{t('loads.loadCode')}}: </span> {{ load.shipment_code }}
<p><span>{{t('loads.loadCode')}}: </span> {{ load.shipment_code?.toUpperCase() }}
<span
v-if="load.load_status !== 'Draft' && !readOnly"
class="tracking-icon"

2
src/components/CardProposal.vue
View File

@@ -104,7 +104,7 @@
class="code-enruta"
@click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
data-toggle="modal" data-target="#loadDetailModal"
>{{proposal.load.shipment_code}}</span></p>
>{{proposal.load.shipment_code.toUpperCase()}}</span></p>
<p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color}"><span>{{ t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
<p v-if="proposal._driver">{{ t('labels.operator') }}: {{proposal._driver}}</p>

25
src/components/CardVehicle.vue
View File

@@ -12,7 +12,6 @@
required: true
}
})
console.log(props.vehicle);
defineEmits(['set-vehicle']);
const { t, locale } = useI18n()
@@ -59,6 +58,11 @@
});
}
const handleTracking = () => {
let code = props.vehicle.active_load._id;
window.open('/publico/tracking/' + code, '_blank');
}
</script>
@@ -66,7 +70,7 @@
<div class="card-fixed card-vehicle">
<div class="row my-2">
<div class="col-lg-6">
<p>{{ t('labels.codeId') }}: <span>{{ vehicle?.vehicle_code }}</span></p>
<p>{{ t('labels.codeId') }}: <span>{{ vehicle?.vehicle_code.toUpperCase() }}</span></p>
<p>{{ t('directory.typeTruck') }}: <span>{{ vehicle.truck_type }}</span></p>
<p>{{ t('vehicles.serialNumber') }}: <span>{{ vehicle.vehicle_number }}</span></p>
<p>{{ t('global.segment') }}: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
@@ -88,7 +92,8 @@
<div class="col-lg-6">
<p>{{ t('vehicles.trailerPlates') }} 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
<p>{{ t('vehicles.chargingBase') }}: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
<p v-if="vehicle.is_available">{{ t('vehicles.availableIn') }}: <span>{{ vehicle.destino }}</span></p>
<p v-if="vehicle.destino">{{ t('loads.destination') }}: <span>{{ vehicle.destino.replace(';', ', ') }}</span></p>
<p v-if="vehicle.available_in">{{ t('vehicles.availableIn') }}: <span>{{ vehicle.available_in.replace(';', ', ') }}</span></p>
<p>Status:
<span>{{ vehicle.is_available ? t('vehicles.available') : t('vehicles.reserved')}}
<i
@@ -100,7 +105,14 @@
</span>
</p>
<p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateMonthDayEs(vehicle.available_date, false) }}</span></p>
<p v-if="vehicle.active_load">{{ t('loads.loadCode') }}: <span>{{ vehicle.active_load.shipment_code}}</span></p>
<p v-if="vehicle.active_load">
{{ t('loads.loadCode') }}:
<span
class="code-enruta"
@click="handleTracking"
data-target="_blank"
>{{ vehicle.active_load.shipment_code?.toUpperCase() }}</span>
</p>
<p v-if="vehicle.active_load">{{ t('loads.loadStatus') }}: <span>{{ getStatusLoad(vehicle.active_load, locale).status}}</span></p>
</div>
</div>
@@ -165,4 +177,9 @@
background-color: aqua;
border-radius: 13px;
}
.code-enruta {
cursor: pointer;
color: rgb(107, 107, 227);
}
</style>

47
src/components/CreateVehicleModal.vue
View File

@@ -30,7 +30,8 @@
trailer_plate_2: '',
circulation_serial_number: '',
notes: '',
destino: '',
destinoCity: '',
destinoState: '',
}
const errors = ref({
@@ -39,7 +40,8 @@
vehicle_number: null,
state: null,
city: null,
destino: null,
destinoCity: null,
destinoState: null,
})
const vehicleForm = reactive({
@@ -50,6 +52,9 @@
const vehicleStore = useVehiclesStore();
onMounted(() => {
const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
if(props.vehicle) {
vehicleForm.truck_type = {
meta_value: props.vehicle.truck_type
@@ -62,7 +67,8 @@
vehicleForm.trailer_plate_2 = props.vehicle.trailer_plate_2;
vehicleForm.circulation_serial_number = props.vehicle.circulation_serial_number;
vehicleForm.notes = props.vehicle.notes;
vehicleForm.destino = props.vehicle.destino;
vehicleForm.destinoCity = destinoCityName ? {city_name: destinoCityName} : '';
vehicleForm.destinoState = destinoStateName ? { state_name: destinoStateName} : '';
}
})
@@ -77,7 +83,7 @@
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;
if(errors.value.vehicle_number || errors.value.truck_type || errors.value.categories || errors.value.city || errors.value.state || errors.value.destinoCity || errors.value.destinoState ) return;
let vehicleData ={
vehicle_number : vehicleForm.vehicle_number,
city : vehicleForm.city?.city_name,
@@ -90,7 +96,7 @@
company: authStore.user.company,
posted_by: authStore.user._id,
categories: vehicleForm.categories.length <= 0 ? null : vehicleForm.categories?.map((e) => e._id),
destino: vehicleForm.destino,
destino: vehicleForm.destinoCity.city_name + ';' + vehicleForm.destinoState.state_name,
available_date: new Date()
};
let localData = {};
@@ -134,7 +140,8 @@
vehicle_number: (!vehicleForm.vehicle_number) ? t('errors.required') : null,
state: (!vehicleForm.state) ? t('errors.state') : null,
city: (!vehicleForm.city) ? t('errors.city') : null,
destino: (!vehicleForm.destino) ? t('errors.destination') : null,
destinoCity: (!vehicleForm.destinoCity) ? t('errors.city') : null,
destinoState: (!vehicleForm.destinoState) ? t('errors.state') : null,
};
}
</script>
@@ -210,14 +217,14 @@
</div>
</div>
<div class="row">
<div class="col-lg-6 col-12">
<div class="col-lg-6 col-12 mb-4">
<label class="custom-label">{{ t('labels.stateBase') }}*</label>
<States
v-model="vehicleForm.state"
/>
<span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
</div>
<div class="col-lg-6 col-12">
<div class="col-lg-6 col-12 mb-4">
<label class="custom-label">{{ t('labels.cityBase') }}*</label>
<Cities
v-model="vehicleForm.city"
@@ -225,15 +232,21 @@
<span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
</div>
</div>
<div class="col-lg-6 col-12 mt-4">
<CustomInput
:label="t('loads.destination') + '*'"
type="text"
:filled="false"
name="destino"
:error="errors.destino"
v-model:field="vehicleForm.destino"
/>
<div class="row">
<div class="col-lg-6 col-12 mb-4">
<label class="custom-label">{{t('vehicles.destinationState')}}*</label>
<States
v-model="vehicleForm.destinoState"
/>
<span class="error-msg" v-if="errors.destinoState">{{ errors.destinoState }}</span>
</div>
<div class="col-lg-6 col-12 mb-4">
<label class="custom-label">{{t('vehicles.destinationCity')}}*</label>
<Cities
v-model="vehicleForm.destinoCity"
/>
<span class="error-msg" v-if="errors.destinoCity">{{ errors.destinoCity }}</span>
</div>
</div>
<div class="d-flex flex-column mt-4">
<label class="custom-label" for="notes">{{ t('vehicles.additionalInfoVehicle') }}:</label>

31
src/components/FormLoadModal.vue
View File

@@ -16,6 +16,8 @@
import { useCompanyStore } from '../stores/company';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import {getDateTime, getDateOnly } from '../helpers/date_formats';
const loadStore = useLoadsStore();
const notyStore = useNotificationsStore();
@@ -84,6 +86,11 @@
formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
//origin_formatted_address
if(loadStore.currentLoad){
// console.log(loadStore.currentLoad)
const dateStart = getDateTime(loadStore.currentLoad.est_loading_date, 0);
const dateEnd = getDateTime(loadStore.currentLoad.est_unloading_date, 0);
console.log(dateStart)
console.log(dateEnd)
formLoad.price = loadStore.currentLoad.actual_cost;
formLoad.segment = loadStore.currentLoad.categories?.length <= 0 ? [] : loadStore.currentLoad.categories.map(m =>{
return m;
@@ -97,8 +104,10 @@
formLoad.owner = loadStore.currentLoad.posted_by_name;
formLoad.notes = loadStore.currentLoad.notes;
formLoad.weight = loadStore.currentLoad.weight;
formLoad.dateLoad = loadStore.currentLoad.est_loading_date?.substring(0, 10);
formLoad.dateDownload = loadStore.currentLoad.est_unloading_date?.substring(0, 10);
formLoad.dateLoad = dateStart.substring(0, 10);
formLoad.dateDownload = dateEnd.substring(0, 10);
// formLoad.dateLoad = loadStore.currentLoad.est_loading_date?.substring(0, 10);
// formLoad.dateDownload = loadStore.currentLoad.est_unloading_date?.substring(0, 10);
formLoad.truckType = loadStore.currentLoad.truck_type ? {meta_value: loadStore.currentLoad.truck_type} : null;
origin.locationName = loadStore.currentLoad.origin.company_name;
@@ -179,12 +188,6 @@
if(originCoords.value && destinationCoords.value) {
polylines.value = await getDirections(originCoords.value, destinationCoords.value);
}
// if(loadStore.currentLoad.origin_formatted_address) {
// originCoords.value = await geocodeAddress(loadStore.currentLoad.origin_formatted_address);
// }
// if(loadStore.currentLoad.destination_formatted_address){
// destinationCoords.value = await geocodeAddress(loadStore.currentLoad.destination_formatted_address);
// }
}
@@ -221,11 +224,17 @@
});
const setLoadData = () => {
const currentDate = new Date();
const hours = currentDate.getHours().toString().padStart(2, '0');
const minutes = currentDate.getMinutes().toString().padStart(2, '0');
const seconds = currentDate.getSeconds().toString().padStart(2, '0');
const startDate = formLoad.dateLoad === "" ? "" : new Date(`${formLoad.dateLoad}T${hours}:${minutes}:${seconds}`).toISOString();
const endDate = formLoad.dateDownload === "" ? "" : new Date(`${formLoad.dateDownload}T${hours}:${minutes}:${seconds}`).toISOString();
let loadData = {
actual_cost: formLoad.price,
truck_type: formLoad.truckType?.meta_value || null,
est_loading_date : formLoad.dateLoad,
est_unloading_date : formLoad.dateDownload,
est_loading_date : startDate,
est_unloading_date : endDate,
notes : formLoad.notes,
weight : formLoad.weight,
product: formLoad.terms?.length <= 0 ? null : formLoad.terms,
@@ -286,7 +295,7 @@
...loadData,
categories: [loadData.categories]
}
loadStore.loads.push(load);
loadStore.loads.unshift(load);
return 'success';
} else {
return 'error';

80
src/components/StatusVehicleModal.vue
View File

@@ -21,9 +21,14 @@
onMounted(() => {
statusSelected.value = props.vehicle.is_available === true ? 'Availiable' : 'Booked'
formAvailiable.state = {state_name: props.vehicle.state};
formAvailiable.destino = props.vehicle.destino;
formAvailiable.city = {city_name: props.vehicle.city};
const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
const [availableCityName = '', availableStateName = ''] = props.vehicle.available_in?.split(';') || [];
formAvailiable.destinoCity = destinoCityName ? { city_name: destinoCityName } : '';
formAvailiable.destinoState = destinoStateName ? { state_name: destinoStateName } : '';
formAvailiable.availableCity = availableCityName ? { city_name: availableCityName } : '';
formAvailiable.availableState = availableStateName ? { state_name: availableStateName } : '';
formAvailiable.available_date = props.vehicle.available_date?.substring(0, 10);
});
@@ -33,15 +38,17 @@
const formAvailiable = reactive({
available_date: new Date(),
destino: '',
city : '',
state : '',
availableCity: '',
availableState: '',
destinoCity: '',
destinoState: '',
});
const errors = ref({
destino: null,
city : null,
state : null,
destinoState: null,
destinoCity: null,
availableState : null,
availableCity : null,
})
const handleSetStatusVehicle = async() => {
@@ -50,14 +57,14 @@
if(statusSelected.value === 'Availiable') {
// console.log('check validations');
validations();
if(errors.value.city || errors.value.state || errors.value.destino ) return;
if(errors.value.availableCity || errors.value.availableState || errors.value.destinoCity || errors.value.destinoState ) return;
vehicleData = {
available_date : formAvailiable.available_date,
destino: formAvailiable.destino,
city : formAvailiable.city.city_name,
state : formAvailiable.state.state_name,
destino: formAvailiable.destinoCity.city_name + ';' + formAvailiable.destinoState.state_name,
available_in: formAvailiable.availableCity.city_name + ';' + formAvailiable.availableState.state_name,
is_available : true
}
console.log(vehicleData);
} else {
vehicleData = {
available_date : null,
@@ -87,9 +94,10 @@
const validations = () => {
errors.value = {
state: (!formAvailiable.state) ? t('errors.state') : null,
city: (!formAvailiable.city) ? t('errors.city') : null,
destino: (!formAvailiable.destino) ? t('errors.destination') : null,
destinoState: (formAvailiable.destinoState === null || formAvailiable.destinoState === '') ? t('errors.state') : null,
destinoCity: (formAvailiable.destinoCity === null || formAvailiable.destinoCity === '') ? t('errors.city') : null,
availableState: (!formAvailiable.availableState) ? t('errors.state') : null,
availableCity: (!formAvailiable.availableCity) ? t('errors.city') : null,
};
}
@@ -133,34 +141,44 @@
</div>
<div v-if="statusSelected === 'Availiable'">
<CustomInput
:label="t('loads.dateLoad') + '*'"
:label="t('vehicles.availableDate') + '*'"
type="date"
:filled="false"
name="date-load"
v-model:field="formAvailiable.available_date"
/>
<p>Disponible en:</p>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('labels.stateBase') }}</label>
<label class="custom-label">{{ t('global.state') }}</label>
<States
v-model="formAvailiable.state"
v-model="formAvailiable.availableState"
/>
<span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
<span class="error-msg" v-if="errors.availableState">{{ errors.availableState }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('labels.cityBase') }}</label>
<label class="custom-label">{{ t('global.city') }}</label>
<Cities
v-model="formAvailiable.city"
v-model="formAvailiable.availableCity"
/>
<span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
<span class="error-msg" v-if="errors.availableCity">{{ errors.availableCity }}</span>
</div>
<p>Destino:</p>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('global.state') }}</label>
<States
key="destinoState"
v-model="formAvailiable.destinoState"
/>
<span class="error-msg" v-if="errors.destinoState">{{ errors.destinoState }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">{{ t('global.city') }}</label>
<Cities
key="destinoCity"
v-model="formAvailiable.destinoCity"
/>
<span class="error-msg" v-if="errors.destinoCity">{{ errors.destinoCity }}</span>
</div>
<CustomInput
:label="t('vehicles.availableIn') + '*'"
type="text"
:filled="false"
name="destino"
v-model:field="formAvailiable.destino"
:error="errors.destino"
/>
</div>
<div class="mt-4 text-center">
<Spiner v-if="loading === true"/>

4
src/components/VehicleInfo.vue
View File

@@ -29,9 +29,9 @@ import { useI18n } from 'vue-i18n';
<!-- <h2 class="my-3">Información del vehiculo</h2> -->
<div class="row my-2">
<div class="col-lg-6">
<p>{{ t('labels.codeId') }}: <span>{{ vehicle.vehicle_code }}</span></p>
<p>{{ t('labels.codeId') }}: <span>{{ vehicle.vehicle_code.toUpperCase() }}</span></p>
<p>{{ t('directory.typeTruck') }}: <span>{{ vehicle.truck_type }}</span></p>
<p>{{ t('vehicles.serialNumber') }}: <span>{{ vehicle.vehicle_number }}</span></p>
<p>{{ t('vehicles.assignedDriver') }}: <span>{{ vehicle.driver.first_name + ' ' + vehicle.driver.last_name }}</span></p>
<p>{{ t('global.segment') }}: <span>{{ vehicle._categories }}</span></p>
</div>
<div class="col-lg-6">