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

add: search vehicles view & fixes: bugs state

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-08-17 18:56:22 -06:00
parent 3cd6715c4b
commit 84c0595f5b
24 changed files with 392 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/AttachmentsModal.vue
View File

@@ -83,17 +83,24 @@
}
.attachment p {
font-size: 1rem;
font-weight: 900;
color: black;
font-size: 1rem;
font-weight: 900;
color: black;
}
.attachment img {
width: 50%;
width: 33%;
justify-content: center;
align-items: center;
margin: 0 auto;
align-content: center;
}
@media (max-width: 568px) {
.attachment img {
width: 50%;
}
}
</style>

50
src/components/CardLoad.vue
View File

@@ -19,13 +19,17 @@
type: Boolean,
required: false,
default: false
},
tracking: {
type: Boolean,
required: false,
default: true
}
});
const { t } = useI18n()
defineEmits(['set-load'])
const openAttachmentsModal = () => {
loadsStore.currentLoad = props.load;
loadsStore.openAttachmentsModal = true;
@@ -94,32 +98,32 @@
<div class="col-lg-6 col-sm-12">
<p>
<span>{{t('loads.origin')}}: </span>
<template v-if="load.origin.company_name"> {{ load.origin.company_name }}, </template>
<template v-if="load.origin.street_address1">{{ load.origin.street_address1 }}, </template>
<template v-if="load.origin.city">{{ load.origin.city }}, </template>
<template v-if="load.origin.state">{{ load.origin.state }}, </template>
<template v-if="load.origin.country">{{ load.origin.country }}, </template>
<template v-if="load.origin.zipcode">{{ load.origin.zipcode }} </template>
<template v-if="load.origin?.company_name"> {{ load.origin?.company_name }}, </template>
<template v-if="load.origin?.street_address1">{{ load.origin?.street_address1 }}, </template>
<template v-if="load.origin?.city">{{ load.origin?.city }}, </template>
<template v-if="load.origin?.state">{{ load.origin?.state }}, </template>
<template v-if="load.origin?.country">{{ load.origin?.country }}, </template>
<template v-if="load.origin?.zipcode">{{ load.origin?.zipcode }} </template>
</p>
<p>
<span>{{t('loads.destination')}}: </span>
<template v-if="load.destination.company_name"> {{ load.destination.company_name }}, </template>
<template v-if="load.destination.street_address1">{{ load.destination.street_address1 }}, </template>
<template v-if="load.destination.city">{{ load.destination.city }}, </template>
<template v-if="load.destination.state">{{ load.destination.state }}, </template>
<template v-if="load.destination.country">{{ load.destination.country }}, </template>
<template v-if="load.destination.zipcode">{{ load.destination.zipcode }} </template>
<template v-if="load.destination?.company_name"> {{ load.destination?.company_name }}, </template>
<template v-if="load.destination?.street_address1">{{ load.destination?.street_address1 }}, </template>
<template v-if="load.destination?.city">{{ load.destination?.city }}, </template>
<template v-if="load.destination?.state">{{ load.destination?.state }}, </template>
<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>
<div class="col-lg-6 col-sm-12">
<p v-if="readOnly">
<span>{{t('loads.company')}}: </span>
{{ load.company.company_name }}
{{ 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>
<p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span class="simple">{{ getStatusLoad(load).status }}</span></p>
<div v-if="!readOnly">
<p><span>{{t('loads.postStatus')}}:</span> <span class="simple">{{ getStatusPublished(load) }}</span></p>
<p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span class="simple">{{ getStatusLoad(load).status }}</span></p>
</div>
</div>
</div>
<div class="divider"></div>
@@ -139,7 +143,7 @@
<p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
<p><span>{{t('loads.loadCode')}}: </span> {{ load.shipment_code?.toUpperCase() }}
<span
v-if="load.load_status !== 'Draft' && !readOnly"
v-if="load.status !== 'Draft' && tracking"
class="tracking-icon"
@click="handleTracking"
data-target="_blank"
@@ -156,7 +160,7 @@
<div v-if="load.notes" class="box-note">
{{ load.notes }}
</div>
<div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_shipper'">
<div class="btn-row" v-if="load?.company?._id === authStore?.user?.company._id">
<button
v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"
class="btn-primary-sm bg-danger"
@@ -185,7 +189,7 @@
data-target="#proposalsModal"
>#{{ load.no_of_proposals }} {{t('loads.offers')}}</button>
</div>
<div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_carrier'">
<div class="btn-row" v-if="readOnly && authStore.user?.permissions === 'role_carrier'">
<button
class="btn-primary-sm bg-dark"
data-toggle="modal"

13
src/components/CardProposal.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import Swal from 'sweetalert2';
import { getDateMonthDay } from '../helpers/date_formats';
import { getDateOnly } from '../helpers/date_formats';
import { getStatusLoad } from '../helpers/status';
import { useCompanyStore } from '../stores/company';
import { useAuthStore } from '../stores/auth';
@@ -87,10 +87,10 @@
<p v-if="proposal.vehicle"><span>{{ t('labels.codeId') }}:</span> {{proposal.vehicle.vehicle_code?.toUpperCase()}}</p>
<p v-if="proposal.vehicle"><span>{{ t('global.segment') }}:</span> {{proposal.load.categories?.map((e) => e.name).join(', ')}}</p>
<p v-if="proposal.vehicle"><span>{{ t('directory.typeTruck') }}:</span> {{proposal.vehicle.truck_type}}</p>
<p v-if="proposal.vehicle"><span>{{ t('labels.datePublished') }}:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
<p v-if="proposal.vehicle"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
<p v-if="proposal.vehicle"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
<p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle.destino}}</p>
<p v-if="proposal.vehicle?.published_date"><span>{{ t('labels.datePublished') }}:</span> {{ getDateOnly(proposal.vehicle.published_date) }}</p>
<p v-if="proposal.vehicle?.is_available"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateOnly(proposal.vehicle.available_date) }}</p>
<p v-if="proposal.vehicle?.is_available"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
<p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle?.destino.replace(';', ', ')}}</p>
<p><span>{{ t('vehicles.truckPlates') }}:</span> {{ proposal.vehicle.circulation_serial_number }}</p>
<p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
<p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
@@ -103,7 +103,7 @@
@click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
data-toggle="modal" data-target="#loadDetailModal"
>{{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.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color, fontWeight: 'bold'}"><span>{{ t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
<p v-if="proposal._driver">{{ t('labels.operator') }}: {{proposal._driver}}</p>
</div>
@@ -222,4 +222,5 @@
gap: 0.2rem;
}
}
</style>

32
src/components/CardVehicle.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import Swal from 'sweetalert2';
import { getDateMonthDayEs } from '../helpers/date_formats';
import { getDateOnly } from '../helpers/date_formats';
import { useVehiclesStore } from '../stores/vehicles';
import { useAuthStore } from '../stores/auth';
import { useI18n } from 'vue-i18n';
@@ -10,10 +10,15 @@
vehicle: {
type: Object,
required: true
},
readOnly: {
type: Boolean,
required: false,
default: false
}
})
defineEmits(['set-vehicle']);
const { t, locale } = useI18n()
const vehicleStore = useVehiclesStore();
@@ -70,15 +75,17 @@
<div class="card-fixed card-vehicle">
<div class="row my-2">
<div class="col-lg-6">
<p v-if="vehicle.company !== authStore?.user?.company._id">{{ t('global.company') }}: <span>{{ vehicle?.company_name }}</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 v-if="!readOnly">{{ t('vehicles.serialNumber') }}: <span>{{ vehicle.vehicle_number }}</span></p>
<p>{{ t('global.segment') }}: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
<p>{{ t('labels.driver') }}:
<span>
<span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span>
<span v-else>{{ t('vehicles.noDriver') }} </span>
<i
v-if="!readOnly"
class="fa-solid fa-pen-to-square icon-btn"
data-toggle="modal"
data-target="#editDriverVehicle"
@@ -92,11 +99,12 @@
<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.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 v-if="vehicle.destino">{{ t('loads.destination') }}: <span>{{ vehicle.destino.replace(';', ', ') }}</span></p>
<p>Status:
<span>{{ vehicle.is_available ? t('vehicles.available') : t('vehicles.reserved')}}
<i
v-if="!readOnly"
class="fa-solid fa-pen-to-square icon-btn"
data-toggle="modal"
data-target="#editStatusVehicle"
@@ -104,23 +112,26 @@
</i>
</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">
<p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateOnly(vehicle.available_date) }}</span></p>
<p v-if="vehicle.active_load && !readOnly">
{{ t('loads.loadCode') }}:
<span
class="code-enruta"
class="code-enruta font-bold"
@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>
<p v-if="vehicle.active_load && !readOnly">
{{ t('loads.loadStatus') }}:
<span :style="{color: getStatusLoad(vehicle.active_load).color, fontWeight: 'bold'}">{{ getStatusLoad(vehicle.active_load, locale).status}}</span>
</p>
</div>
</div>
<p v-if="vehicle.notes">{{ t('vehicles.additionalInfoVehicle') }}:</p>
<div v-if="vehicle.notes" class="box-note mb-4">
{{ vehicle.notes }}
</div>
<div class="card-footer">
<div class="card-footer" v-if="vehicle.company === authStore?.user?.company._id">
<button
v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.vehicle.posted_by"
class="btn btn-dark radius-sm"
@@ -182,4 +193,7 @@
cursor: pointer;
color: rgb(107, 107, 227);
}
.font-bold {
font-weight: 700;
}
</style>

11
src/components/CreateVehicleModal.vue
View File

@@ -52,10 +52,9 @@
const vehicleStore = useVehiclesStore();
onMounted(() => {
const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
if(props.vehicle) {
const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
vehicleForm.truck_type = {
meta_value: props.vehicle.truck_type
};
@@ -162,15 +161,15 @@
</div>
<div class="modal-body form-content">
<form @submit.prevent="handleSaveVehicle" autocomplete="off" class="vehicle-form">
<div class="row mt-4">
<div class="col-lg-6 col-12">
<div class="row">
<div class="col-lg-6 col-12 mt-4">
<label class="custom-label">{{ t('directory.typeTruck') }}*</label>
<TruckTypes
v-model="vehicleForm.truck_type"
/>
<span class="error-msg" v-if="errors.truck_type">{{ errors.truck_type }}</span>
</div>
<div class="col-lg-6 col-12">
<div class="col-lg-6 col-12 mt-4">
<label class="custom-label">{{ t('vehicles.segments') }}*</label>
<Segments
v-model="vehicleForm.categories"

13
src/components/FormLoadModal.vue
View File

@@ -86,11 +86,8 @@
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;
@@ -275,13 +272,18 @@
if(loadStore.currentLoad){
const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
isLoading.value = false;
const dataLocal = {
company: auth.user.company,
categories: formLoad.segment || null,
product: formLoad.terms?.length <= 0 ? null : formLoad.terms
};
if(resp) {
const index = loadStore.loads.findIndex((load) => load._id === resp._id);
loadStore.loads[index] = {
...loadStore.loads[index],
...resp
...resp,
...dataLocal,
};
return 'success';
} else {
return 'error';
@@ -295,6 +297,7 @@
...loadData,
categories: [loadData.categories]
}
loadStore.loads.unshift(load);
return 'success';
} else {

4
src/components/NavBar.vue
View File

@@ -23,6 +23,10 @@
<i class="fas fa-align-left"></i>
</button>
<div class="nav-options">
<RouterLink
v-if="auth.user?.permissions === 'role_shipper'"
active-class="router-link-active"
class="nav-link" :to="{name: 'search-vehicles'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.vehicles') }}</span></RouterLink>
<RouterLink
v-if="auth.user?.permissions === 'role_shipper'"
active-class="router-link-active"

16
src/components/ProposalsModal.vue
View File

@@ -44,10 +44,16 @@
isLoadingActions.value = true;
let load = await loadsStore.updateLoad(load_id, loadData);
if(load != null) {
const dataLocal = {
company: authStore.user.company,
categories: loadsStore?.currentLoad?.categories,
product: loadsStore?.currentLoad?.product
};
const index = loadsStore.loads.findIndex((load) => load._id === load_id);
loadsStore.loads[index] = {
...loadsStore.loads[index],
...load
...load,
...dataLocal
};
const proposal_id = proposal._id;
@@ -109,10 +115,16 @@
isLoadingActions.value = true;
let load = await loadsStore.updateLoad(load_id, loadData);
if(load) {
const dataLocal = {
company: authStore.user.company,
categories: loadsStore?.currentLoad?.categories,
product: loadsStore?.currentLoad?.product
};
const index = loadsStore.loads.findIndex((load) => load._id === load_id);
loadsStore.loads[index] = {
...loadsStore.loads[index],
...load
...load,
...dataLocal
};
let formData = {
accepted_by : null,

18
src/components/StatusVehicleModal.vue
View File

@@ -7,8 +7,10 @@
import States from './ui/States.vue';
import Cities from './ui/Cities.vue';
import Swal from 'sweetalert2';
import { getDateTime } from '../helpers/date_formats';
import { useI18n } from 'vue-i18n';
const props = defineProps({
vehicle: {
type: Object
@@ -24,12 +26,12 @@
const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
const [availableCityName = '', availableStateName = ''] = props.vehicle.available_in?.split(';') || [];
const date = getDateTime( props.vehicle?.available_date || new Date(), 0);
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);
formAvailiable.available_date = date.substring(0, 10);
});
defineEmits(['reset-vehicle']);
@@ -53,18 +55,19 @@
const handleSetStatusVehicle = async() => {
let vehicleData;
// console.log(statusSelected.value);
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');
if(statusSelected.value === 'Availiable') {
// console.log('check validations');
validations();
if(errors.value.availableCity || errors.value.availableState || errors.value.destinoCity || errors.value.destinoState ) return;
vehicleData = {
available_date : formAvailiable.available_date,
available_date : new Date(`${formAvailiable.available_date}T${hours}:${minutes}:${seconds}`).toISOString(),
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,
@@ -73,7 +76,8 @@
}
let localData = {
driver: props.vehicle.driver,
categories: props.vehicle.categories
categories: props.vehicle.categories,
active_load: props.vehicle.active_load,
}
loading.value = true;
const result = await vehicleStore.updateVehicleCompany(props.vehicle._id, vehicleData, localData);