add: search vehicles view & fixes: bugs state
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user