From 59f2b208907713922c9e488a99c04ba9e7f2d19f Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Wed, 7 Aug 2024 20:54:39 -0600 Subject: [PATCH] fixes: vehicles & proposals --- src/components/CardLoad.vue | 22 ++++---- src/components/CardProposal.vue | 2 +- src/components/CardVehicle.vue | 25 +++++++-- src/components/CreateVehicleModal.vue | 47 ++++++++++------ src/components/FormLoadModal.vue | 31 +++++++---- src/components/StatusVehicleModal.vue | 80 ++++++++++++++++----------- src/components/VehicleInfo.vue | 4 +- src/helpers/date_formats.js | 24 ++++++-- src/i18n/en.js | 3 + src/i18n/es.js | 3 + src/stores/company.js | 2 +- src/views/CalendarView.vue | 10 +--- 12 files changed, 162 insertions(+), 91 deletions(-) diff --git a/src/components/CardLoad.vue b/src/components/CardLoad.vue index 757221c..ffaa02d 100644 --- a/src/components/CardLoad.vue +++ b/src/components/CardLoad.vue @@ -1,5 +1,5 @@ @@ -117,7 +110,12 @@

- + +
+

+ {{t('loads.company')}}: + {{ load.company.company_name }} +

{{t('loads.postStatus')}}: {{ getStatusPublished(load) }}

@@ -130,16 +128,16 @@

{{t('loads.truckType')}}: {{ load.truck_type }}

{{t('loads.weight')}}: {{ load.weight }} KG

-

{{t('loads.dateLoad')}}: {{ getDayMonthYear(load.est_loading_date) }}

+

{{t('loads.dateLoad')}}: {{ getDateOnly(load.est_loading_date) }}

{{t('loads.product')}}: {{ load?.product?.name }}

{{t('loads.cost')}}: {{ load.actual_cost }}

-

{{t('loads.dateDownload')}}: {{getDayMonthYear(load.est_unloading_date) }}

+

{{t('loads.dateDownload')}}: {{getDateOnly(load.est_unloading_date) }}

{{t('global.segment')}}: {{ load.categories?.map((e) => e.name).join(', ') }}

-

{{t('loads.loadCode')}}: {{ load.shipment_code }} +

{{t('loads.loadCode')}}: {{ load.shipment_code?.toUpperCase() }} {{proposal.load.shipment_code}}

+ >{{proposal.load.shipment_code.toUpperCase()}}

{{ t('loads.loadStatus') }}: {{ getStatusLoad(proposal.load, locale).status}}

{{ t('labels.operator') }}: {{proposal._driver}}

diff --git a/src/components/CardVehicle.vue b/src/components/CardVehicle.vue index 9215f3d..f7ee93f 100644 --- a/src/components/CardVehicle.vue +++ b/src/components/CardVehicle.vue @@ -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'); + } + @@ -66,7 +70,7 @@
-

{{ t('labels.codeId') }}: {{ vehicle?.vehicle_code }}

+

{{ t('labels.codeId') }}: {{ vehicle?.vehicle_code.toUpperCase() }}

{{ t('directory.typeTruck') }}: {{ vehicle.truck_type }}

{{ t('vehicles.serialNumber') }}: {{ vehicle.vehicle_number }}

{{ t('global.segment') }}: {{vehicle.categories?.map((e) => e.name).join(', ')}}

@@ -88,7 +92,8 @@

{{ t('vehicles.trailerPlates') }} 2: {{ vehicle.trailer_plate_2 }}

{{ t('vehicles.chargingBase') }}: {{ vehicle.city }}, {{ vehicle.state }}

-

{{ t('vehicles.availableIn') }}: {{ vehicle.destino }}

+

{{ t('loads.destination') }}: {{ vehicle.destino.replace(';', ', ') }}

+

{{ t('vehicles.availableIn') }}: {{ vehicle.available_in.replace(';', ', ') }}

Status: {{ vehicle.is_available ? t('vehicles.available') : t('vehicles.reserved')}}

{{ t('vehicles.availableDate') }}: {{ getDateMonthDayEs(vehicle.available_date, false) }}

-

{{ t('loads.loadCode') }}: {{ vehicle.active_load.shipment_code}}

+

+ {{ t('loads.loadCode') }}: + {{ vehicle.active_load.shipment_code?.toUpperCase() }} +

{{ t('loads.loadStatus') }}: {{ getStatusLoad(vehicle.active_load, locale).status}}

@@ -165,4 +177,9 @@ background-color: aqua; border-radius: 13px; } + + .code-enruta { + cursor: pointer; + color: rgb(107, 107, 227); + } \ No newline at end of file diff --git a/src/components/CreateVehicleModal.vue b/src/components/CreateVehicleModal.vue index 62ae13c..8ad4bb2 100644 --- a/src/components/CreateVehicleModal.vue +++ b/src/components/CreateVehicleModal.vue @@ -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, }; } @@ -210,14 +217,14 @@
-
+
{{ errors.state }}
-
+
{{ errors.city }}
-
- +
+
+ + + {{ errors.destinoState }} +
+
+ + + {{ errors.destinoCity }} +
diff --git a/src/components/FormLoadModal.vue b/src/components/FormLoadModal.vue index 9a7b42b..ac7c070 100644 --- a/src/components/FormLoadModal.vue +++ b/src/components/FormLoadModal.vue @@ -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'; diff --git a/src/components/StatusVehicleModal.vue b/src/components/StatusVehicleModal.vue index c065b86..dfb9a87 100644 --- a/src/components/StatusVehicleModal.vue +++ b/src/components/StatusVehicleModal.vue @@ -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 @@
+

Disponible en:

- + - {{ errors.state }} + {{ errors.availableState }}
- + - {{ errors.city }} + {{ errors.availableCity }} +
+

Destino:

+
+ + + {{ errors.destinoState }} +
+
+ + + {{ errors.destinoCity }}
-
diff --git a/src/components/VehicleInfo.vue b/src/components/VehicleInfo.vue index 547e8d3..3f91ad6 100644 --- a/src/components/VehicleInfo.vue +++ b/src/components/VehicleInfo.vue @@ -29,9 +29,9 @@ import { useI18n } from 'vue-i18n';
-

{{ t('labels.codeId') }}: {{ vehicle.vehicle_code }}

+

{{ t('labels.codeId') }}: {{ vehicle.vehicle_code.toUpperCase() }}

{{ t('directory.typeTruck') }}: {{ vehicle.truck_type }}

-

{{ t('vehicles.serialNumber') }}: {{ vehicle.vehicle_number }}

+

{{ t('vehicles.assignedDriver') }}: {{ vehicle.driver.first_name + ' ' + vehicle.driver.last_name }}

{{ t('global.segment') }}: {{ vehicle._categories }}

diff --git a/src/helpers/date_formats.js b/src/helpers/date_formats.js index 24f7eb2..8d94258 100644 --- a/src/helpers/date_formats.js +++ b/src/helpers/date_formats.js @@ -59,6 +59,7 @@ export const getDateMonthDay = (value) => { export const getDateMonthDayEs = (value, isFull = false) => { const date = new Date(value) + // date.setHours(date.getHours()); let month = ''; if(isFull) { month = months[date.getMonth()]; @@ -75,10 +76,10 @@ export const getDateTime = (value, hour) => { // Obtener los componentes de la fecha const year = date.getFullYear(); - const month = ('0' + (date.getMonth() + 1)).slice(-2); // Agrega cero al principio si es necesario - const day = ('0' + date.getDate()).slice(-2); // Agrega cero al principio si es necesario - const hours = ('0' + date.getHours()).slice(-2); // Agrega cero al principio si es necesario - const minutes = ('0' + date.getMinutes()).slice(-2); // Agrega cero al principio si es necesario + const month = ('0' + (date.getMonth() + 1)).slice(-2); + const day = ('0' + date.getDate()).slice(-2); + const hours = ('0' + date.getHours()).slice(-2); + const minutes = ('0' + date.getMinutes()).slice(-2); // Crear la cadena de fecha formateada const dateFormat = `${year}-${month}-${day} ${hours}:${minutes}`; @@ -86,6 +87,21 @@ export const getDateTime = (value, hour) => { return dateFormat; } +export const getDateOnly = (value) => { + + const date = new Date(value); + date.setHours(date.getHours()); + + // Obtener los componentes de la fecha + const year = date.getFullYear(); + const month = ('0' + (date.getMonth() + 1)).slice(-2); + const day = ('0' + date.getDate()).slice(-2); + + const dateFormat = `${day}/${month}/${year}`; + + return dateFormat; +} + export const formatOnlyDate = (date) => { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); // Agregar cero si es necesario diff --git a/src/i18n/en.js b/src/i18n/en.js index 5c5f00f..fdbad24 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -258,6 +258,7 @@ const en = { loads: { title: 'My published loads', history: 'History', + company: 'Publishing company', querySearch: 'Name of person who posted', empty: 'No loads added', origin: 'Origin', @@ -363,6 +364,8 @@ const en = { reserved: 'Reserved', availableDate: 'Available date', segments: 'Transportation segment', + destinationState: 'Destination state', + destinationCity: 'Destination city', titleDel: 'Delete vehicle', textDel: 'Are you sure to delete this vehicle?', diff --git a/src/i18n/es.js b/src/i18n/es.js index 01e1873..e457dac 100644 --- a/src/i18n/es.js +++ b/src/i18n/es.js @@ -263,6 +263,7 @@ const es = { loads: { title: 'Mis cargas publicadas', history: 'Historial', + company: 'Empresa que publica', querySearch: 'Nombre de la persona quien publica', empty: 'No hay cargas agregadas', origin: 'Origen', @@ -369,6 +370,8 @@ const es = { reserved: 'Reservado', availableDate: 'Fecha disponible', segments: 'Segmento del transporte', + destinationState: 'Estado de destino', + destinationCity: 'Ciudad de destino', titleDel: 'Eliminar vehiculo', textDel: '¿Estás seguro de eliminar este vehiculo?', diff --git a/src/stores/company.js b/src/stores/company.js index f5a64a4..7d1ba42 100644 --- a/src/stores/company.js +++ b/src/stores/company.js @@ -175,7 +175,7 @@ export const useCompanyStore = defineStore('company', () => { try { if(proposals.value.length <= 0 || reload) { const endpoint = `/v1/proposals/find?carrier=${companyId}&${filter}&$sort%5BcreatedAt%5D=-1`; - // console.log(endpoint) + console.log(endpoint) const {data} = await api.get(endpoint); proposals.value = data.data; proposalsTotal.value = data.total; diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue index 77d6fb6..efca769 100644 --- a/src/views/CalendarView.vue +++ b/src/views/CalendarView.vue @@ -75,7 +75,6 @@ startDate.value = formatOnlyDate(startDateTemp); endDate.value = formatOnlyDate(endDateTemp); await getCalendarDate(startDate.value, endDate.value, 0); - console.log(loads.value) optionsFilter.value = [ {value: 'general',label: t('calendar.general')}, {value: 'my',label: t('calendar.my')}, @@ -101,27 +100,23 @@ } const handleUpdatedPeriod = async(ev) => { - // console.log(ev); const global = filter.value.value === 'general' ? 1 : 0; startDate.value = formatOnlyDate(ev.start) endDate.value = formatOnlyDate(ev.end) - console.log(startDate.value, endDate.value); await getCalendarDate(startDate.value, endDate.value, global); - console.log('LOADS: ', loads.value) mapLoadsToEvents() } const mapLoadsToEvents = () => { events.value = []; + console.log(loads.value) loads.value.forEach((e) => { const indicator = eventStatusLoad(e.load_status); const dateStart = getDateTime(e.est_loading_date, 0); const dateEnd = getDateTime(e.est_loading_date, 1); - // console.log('dateStart', dateStart) - // console.log('dateEnd', dateEnd) events.value.push({ id: e._id, - title: e.shipment_code, + title: e.shipment_code.toUpperCase(), with: indicator.status, start: e.est_loading_date, end: e.est_unloading_date, @@ -134,7 +129,6 @@ }, }) - console.log(events.value); }); }