WebETA/src/components/CardProposal.vue

<script setup>
    import Swal from 'sweetalert2';
import { getDateMonthDay } from '../helpers/date_formats';
    import { getStatusLoad } from '../helpers/status';
    import { useCompanyStore } from '../stores/company';

    const props = defineProps({
        proposal: {
            type: Object,
            required: true,
        }
    })

    const companyStore = useCompanyStore();

    const handleWithdrawnProposal = async() => {

        Swal.fire({
            title: 'Retirar oferta!',
            text: '¿Estás seguro de retirar esta oferta?',
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: 'Si, Retirar',
            cancelButtonText: 'No',
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: 'Por favor espere!',
                    html: 'Retirando oferta...',// add html attribute if you want or remove
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });

                let formData = {
                    is_withdrawn : true
                }

                let localData = {
                    vehicle: props.proposal.vehicle,
                    load: props.proposal.load
                }

                const resp = await companyStore.updatePropsalLoad(props.proposal._id, formData, localData);

                Swal.close();
                
                if(resp != null) {
                    Swal.fire({
                        title: "Oferta retirada!",
                        text: "Tu oferta ha sido retirada exitosamente.",
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: "Oferta no retirada!",
                        text: "Tu oferta no se pudo retirar, intente más tarde.",
                        icon: "error"
                    });
                }
            }

        });
    }

    defineEmits(['set-proposal']);
</script>

<template>
    <div class="card-fixed card-load mt-4">
        <br>
        <div class="box-proposal">
            <div class="">
                <p v-if="proposal.vehicle"><span>Código:</span> {{proposal.vehicle.vehicle_code}}</p>
                <p v-if="proposal.vehicle"><span>Segmento:</span> {{proposal._categories}}</p>
                <p v-if="proposal.vehicle"><span>Tipo de transporte:</span> {{proposal.vehicle.truck_type}}</p>
                <p v-if="proposal.vehicle"><span>Fecha de publicación:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
                <p v-if="proposal.vehicle"><span>Fecha dispobible:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
                <p v-if="proposal.vehicle"><span>Disponible en:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
                <p v-if="proposal.vehicle"><span>Destino:</span> {{proposal.vehicle.destino}}</p>
                <p v-if="proposal.vehicle"><span>Placas remolque 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
                <p v-if="proposal.vehicle"><span>Placas remolque 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load).color}"><span>Status de la carga:</span> {{ getStatusLoad(proposal.load).status }}</p>
            </div>
             
            <div class="">
                <p v-if="proposal.load"> Código de carga: 
                    <span 
                        class="code-enruta"
                        @click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
                        data-toggle="modal" data-target="#loadDetailModal"
                    >{{proposal.load.shipment_code}}</span></p>
                <p v-if="proposal._driver">Operator: {{proposal._driver}}</p>
            </div>
        </div>
        <div class="btn-row">
            <!-- <button
                class="btn-primary-sm"
                data-toggle="modal" data-target="#editcompanymodal"
            ><i class="fa-solid fa-ban"></i> Retirar</button> -->
            <div v-if="proposal.is_withdrawn" class="indicator-cancel">
                <i class="fa-solid fa-ban"></i>
                Retirado
            </div>
            <button  v-else
                type="button" 
                class="btn btn-danger radius-sm" 
                @click="handleWithdrawnProposal"
            >
                <i class="fa-solid fa-ban"></i>
                Retirar
            </button>
            <button
                class="btn-primary-sm radius-sm"
                @click="$emit('set-proposal', {proposal: proposal, modal: 'edit'})"
                data-toggle="modal" data-target="#makeProposalModal"
            ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
        </div>
    </div>
</template>

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

    .box-proposal {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .code-enruta {
        cursor: pointer;
        color: rgb(107, 107, 227);
    }
    
    .code-enruta:hover{
        color: rgb(75, 75, 228);
    }

    .tracking-icon {
        cursor: pointer;
        color: #f2a23f;
    }

    .tracking-icon svg{
    height: 30px;
    }
    .tracking-icon:hover {
        color: #ddb380;;
        height: 150px;
    }

    .indicator-cancel {
        width: 120px;
        padding: 10px 12px;
        background: #FFF;
        /* border: 1px solid red; */
        border-radius: 50px;
        color: red;
    }

    .tracking-icon svg:hover{
        height: 33px;
    }

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

    .btn-row {
        margin-top: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: end;
        gap: 1rem;
    }

    .box-note {
        padding: 8px 16px;
        background-color: aqua;
        border-radius: 13px;
    }
    
    @media (max-width: 768px) {
        .box-proposal {
            flex-direction: column-reverse;
        }
        .btn-row {
            gap: 0.2rem;
        }
    }
</style>