add: search vehicles view & fixes: bugs state

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

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>