WebETA/src/components/CardVehicle.vue

<script setup>
    import Swal from 'sweetalert2';
    import { getDateOnly } from '../helpers/date_formats';
    import { useVehiclesStore } from '../stores/vehicles';
    import { useAuthStore } from '../stores/auth';
    import { useI18n } from 'vue-i18n';
    import { getStatusLoad } from '../helpers/status';

    const props = defineProps({
        vehicle: {
            type: Object,
            required: true
        },
        readOnly: {
            type: Boolean,
            required: false,
            default: false
        }
    })
    defineEmits(['set-vehicle']);
    
    const { t, locale } = useI18n()

    const vehicleStore = useVehiclesStore();
    const authStore = useAuthStore();

    const handleDeleteVehicle = async() => {
        Swal.fire({
            title: `${t('vehicles.titleDel')} "${props.vehicle.vehicle_code}""`,
            text: t('vehicles.textDel'),
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: t('buttons.delete'),
            cancelButtonText: t('buttons.cancel'),
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: t('messages.loading'),
                    html: t('vehicles.loadingDel') + '...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });
                const resp = await vehicleStore.deleteVehicleCompany(props.vehicle._id);
                Swal.close();
                
                if(resp != null) {
                    Swal.fire({
                        title: t('vehicles.msgTitleDel'),
                        text: t('vehicles.msgDel'),
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: "Error!",
                        text: t('vehicles.msgNotDel'),
                        icon: "error"
                    });
                }
            }
        });
    }

    const handleTracking = () => {
        let code = props.vehicle.active_load._id;
        window.open('/publico/tracking/' + code, '_blank');
    }


</script>

<template>
    <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 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"
                        @click="$emit('set-vehicle', {vehicle: vehicle, modal: 'driver'})">
                        </i>
                    </span>
                </p>
                <p>{{ t('vehicles.truckPlates') }}: <span>{{ vehicle.circulation_serial_number }}</span></p>
                <p>{{ t('vehicles.trailerPlates') }} 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
            </div>
            <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.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"
                            @click="$emit('set-vehicle', {vehicle: vehicle, modal: 'status'})">
                        </i>
                    </span>
                </p>
                <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 font-bold"
                        @click="handleTracking" 
                        data-target="_blank"
                    >{{ vehicle.active_load.shipment_code?.toUpperCase() }}</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" 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"
                @click="handleDeleteVehicle"
            >
                <i class="fa-solid fa-trash" /> <span class="clear-xsm">{{ t('buttons.delete') }}</span>
            </button>
            <button 
                v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.vehicle.posted_by"
                class="btn-primary-sm radius-sm"
                @click="$emit('set-vehicle', {vehicle: vehicle, modal: 'form'})"
                data-toggle="modal" 
                data-target="#createVehicleModal"
            >
                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">{{ t('buttons.edit') }}</span>
            </button>
        </div>
    </div>
</template>

<style scoped>
     .card-vehicle {
        flex-direction: column;
        width: 100% !important;
    }

    .card-footer {
        display: flex;
        justify-content: end;
        gap: 1rem;
    }

    .icon-btn {
        cursor: pointer;
        font-size: 20px;
        margin-left: 8px;
        color: #FBBA33;
    }

    p {
        font-size: 1rem;
        font-weight: 400;
        color: #323032;
        font-weight: 700;
    }
    
    p span {
        color: #323032;
        font-weight: normal;
    }

    .box-note {
        padding: 12px 16px;
        background-color: aqua;
        border-radius: 13px;
    }

    .code-enruta {
        cursor: pointer;
        color: rgb(107, 107, 227);
    }
    .font-bold {
        font-weight: 700;
    }
</style>