WebETA/src/components/CardVehicle.vue

<script setup>
    import Swal from 'sweetalert2';
    import { getDateMonthDayEs } from '../helpers/date_formats';
    import { useVehiclesStore } from '../stores/vehicles';
import { useAuthStore } from '../stores/auth';

    const props = defineProps({
        vehicle: {
            type: Object,
            required: true
        }
    })
    console.log(props.vehicle);
    defineEmits(['set-vehicle']);

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

    const handleDeleteVehicle = async() => {
        Swal.fire({
            title: `Eliminar vehiculo "${props.vehicle.vehicle_code}""`,
            text: '¿Estás seguro de eliminar este vehiculo?',
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: 'Eliminar',
            cancelButtonText: 'Cancelar',
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: 'Por favor espere!',
                    html: 'Eliminando vehiculo...',// add html attribute if you want or remove
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });
                const resp = await vehicleStore.deleteVehicleCompany(props.vehicle._id);
                Swal.close();
                
                if(resp != null) {
                    Swal.fire({
                        title: "vehiculo eliminado!",
                        text: "Tu vehiculo ha sido eliminado exitosamente.",
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: "Error!",
                        text: "Tu vehiculo no se pudo eliminar, intente más tarde.",
                        icon: "error"
                    });
                }
            }
        });
    }


</script>

<template>
    <div class="card-fixed card-vehicle">
        <div class="row my-2">
            <div class="col-lg-6">
                <p>Código: <span>{{ vehicle?.vehicle_code }}</span></p>
                <p>Tipo de transporte: <span>{{ vehicle.truck_type }}</span></p>
                <p>Número de Serie: <span>{{ vehicle.vehicle_number }}</span></p>
                <p>Segmento: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
                <p>Conductor: 
                    <span>
                        <span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span> 
                        <span v-else>No asignado </span> 
                        <i 
                        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 v-if="vehicle.is_available">Disponible en: <span>{{ vehicle.destino }}</span></p>
            </div>
            <div class="col-lg-6">
                <p>Placas Tracto Camión: <span>{{ vehicle.circulation_serial_number }}</span></p>
                <p>Placas Remolque 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
                <p>Placas Remolque 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
                <p>Base de carga: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
                <p>Status: 
                    <span>{{ vehicle.is_available ? 'Disponible' : 'Reservado'}} 
                        <i 
                            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">Fecha Disponible: <span>{{ getDateMonthDayEs(vehicle.available_date, false) }}</span></p>
            </div>
        </div>
        <p v-if="vehicle.notes">Información Adicional del Transporte:</p>
        <div v-if="vehicle.notes" class="box-note mb-4">
            {{ vehicle.notes }}
        </div>
        <div class="card-footer">
            <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">Eliminar</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">Editar</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;
    }
</style>