284 lines
10 KiB
Vue
284 lines
10 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { useLoadsStore } from '../stores/loads';
|
|
import { useAuthStore } from '../stores/auth';
|
|
import Spiner from './ui/Spiner.vue';
|
|
import { getDateMonthDay } from '../helpers/date_formats';
|
|
import VehicleInfo from './VehicleInfo.vue';
|
|
import Swal from 'sweetalert2'
|
|
import CardEmpty from './CardEmpty.vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const loadsStore = useLoadsStore();
|
|
const authStore = useAuthStore();
|
|
const isLoading = ref(false);
|
|
const isLoadingActions = ref(false);
|
|
const { t } = useI18n();
|
|
|
|
onMounted(() => {
|
|
getProposalsData()
|
|
});
|
|
|
|
const getProposalsData = async() => {
|
|
isLoading.value = true;
|
|
await loadsStore.getProposalsOfLoads(loadsStore.currentLoad._id);
|
|
console.log(loadsStore.proposalsOfLoads)
|
|
isLoading.value = false;
|
|
}
|
|
|
|
const clearMoal = () => {
|
|
loadsStore.openProposalsModal = false;
|
|
loadsStore.currentLoad = false;
|
|
}
|
|
|
|
const handleAceptedProposal = async(proposal) => {
|
|
|
|
const load_id = proposal.load._id;
|
|
|
|
let loadData = {
|
|
status : "Completed",
|
|
contract_start_date: new Date(),
|
|
carrier: proposal.carrier._id,
|
|
vehicle: proposal.vehicle._id,
|
|
}
|
|
|
|
console.log(proposal)
|
|
|
|
isLoadingActions.value = true;
|
|
let load = await loadsStore.updateLoad(load_id, loadData);
|
|
if(load != null) {
|
|
const dataLocal = {
|
|
company: authStore.user.company,
|
|
categories: loadsStore?.currentLoad?.categories,
|
|
product: loadsStore?.currentLoad?.product
|
|
};
|
|
const index = loadsStore.loads.findIndex((load) => load._id === load_id);
|
|
loadsStore.loads[index] = {
|
|
...loadsStore.loads[index],
|
|
...load,
|
|
...dataLocal,
|
|
carrier: proposal.carrier,
|
|
vehicle: proposal.vehicle,
|
|
};
|
|
const proposal_id = proposal._id;
|
|
|
|
let formData = {
|
|
accepted_by : authStore.user,
|
|
accepted_date : new Date(),
|
|
is_accepted : true,
|
|
}
|
|
const resp = await loadsStore.updateProposal(proposal_id, formData);
|
|
if(resp){
|
|
const index = loadsStore.proposalsOfLoads.findIndex((p) => p._id === proposal_id);
|
|
loadsStore.proposalsOfLoads[index] = {
|
|
...proposal,
|
|
...formData
|
|
};
|
|
Swal.fire({
|
|
title: t('proposals.titleOfferAccept'),
|
|
text: t('proposals.msgOfferAccept'),
|
|
icon: "success"
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: "Error!",
|
|
text: t('proposals.msgErrorAcceptOffer'),
|
|
icon: "error"
|
|
});
|
|
}
|
|
} else {
|
|
Swal.fire({
|
|
title: "Error!",
|
|
text: t('proposals.msgNotAcceptOffer'),
|
|
icon: "error"
|
|
});
|
|
}
|
|
isLoadingActions.value = false;
|
|
|
|
}
|
|
|
|
const handleCancelProposal = async(proposal) => {
|
|
const proposal_id = proposal._id;
|
|
const load_id = proposal.load._id;
|
|
const {isConfirmed} = await Swal.fire({
|
|
title: t('proposals.titleCanceModal'),
|
|
text: t('proposals.textCancelModal'),
|
|
icon: 'warning',
|
|
cancelButtonColor: "#d33",
|
|
showCancelButton: true,
|
|
confirmButtonText: t('proposals.confirmCancel'),
|
|
cancelButtonText: 'No'
|
|
})
|
|
if( isConfirmed ) {
|
|
let loadData = {
|
|
status : "Published",
|
|
contract_start_date: null,
|
|
carrier: null,
|
|
vehicle: null,
|
|
}
|
|
|
|
isLoadingActions.value = true;
|
|
let load = await loadsStore.updateLoad(load_id, loadData);
|
|
if(load) {
|
|
const dataLocal = {
|
|
company: authStore.user.company,
|
|
categories: loadsStore?.currentLoad?.categories,
|
|
product: loadsStore?.currentLoad?.product
|
|
};
|
|
const index = loadsStore.loads.findIndex((load) => load._id === load_id);
|
|
loadsStore.loads[index] = {
|
|
...loadsStore.loads[index],
|
|
...load,
|
|
...dataLocal
|
|
};
|
|
let formData = {
|
|
accepted_by : null,
|
|
accepted_date : null,
|
|
is_accepted : false,
|
|
}
|
|
const resp = await loadsStore.updateProposal(proposal_id, formData);
|
|
if(resp) {
|
|
const index = loadsStore.proposalsOfLoads.findIndex((p) => p._id === proposal._id);
|
|
loadsStore.proposalsOfLoads[index] = {
|
|
...proposal,
|
|
...formData
|
|
};
|
|
Swal.fire({
|
|
title: t('proposals.msgTitleCancel'),
|
|
text: t('proposals.msgCancel'),
|
|
icon: "success"
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: "Error!",
|
|
text: t('proposals.msgNotCancel'),
|
|
icon: "error"
|
|
});
|
|
}
|
|
} else {
|
|
Swal.fire({
|
|
title: "Error!",
|
|
text: t('errors.generic'),
|
|
icon: "error"
|
|
});
|
|
}
|
|
isLoadingActions.value = false;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal fade" id="proposalsModal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="title mt-2 mb-3">{{ t('loads.offers') }}</h2>
|
|
<button
|
|
id="btnCloseProposalsModal"
|
|
type="button"
|
|
@click="clearMoal"
|
|
class="close bg-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body view-proposals">
|
|
<Spiner v-if="isLoading"/>
|
|
<div v-else>
|
|
<div v-if="loadsStore.proposalsOfLoads.length > 0" v-for="proposal in loadsStore.proposalsOfLoads" class="card-fixed card-proposal">
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<p>{{ t('global.company') }}: <span>{{ proposal.carrier.company_name }}</span></p>
|
|
<p>{{ t('proposals.bidder') }}: <span>{{ proposal.bidder.first_name }} {{ proposal.bidder.last_name }}</span></p>
|
|
<p>{{ t('proposals.numCarrier') }}: <span>{{proposal.carrier.company_code}}</span></p>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<p>{{ t('labels.date') }}: <span>{{ getDateMonthDay(proposal.carrier.createdAt) }}</span></p>
|
|
<p>RFC: <span>{{proposal.carrier.rfc}}</span></p>
|
|
</div>
|
|
</div>
|
|
<div v-if="proposal.comment" class="box-note">
|
|
{{ proposal.comment }}
|
|
</div>
|
|
<VehicleInfo
|
|
v-if="proposal.vehicle"
|
|
:vehicle="proposal.vehicle"
|
|
:driver="proposal.driver"
|
|
/>
|
|
<Spiner v-if="isLoadingActions"/>
|
|
<div class="d-flex justify-content-end gap-3" v-else>
|
|
<div v-if="proposal.is_accepted" class="indicator-check">
|
|
<i class="fa-solid fa-check"></i>
|
|
{{ t('buttons.accepted') }}
|
|
</div>
|
|
<button v-if="!proposal.is_accepted"
|
|
type="button"
|
|
class="btn-primary-sm"
|
|
@click="handleAceptedProposal(proposal)"
|
|
>
|
|
<i class="fa-solid fa-check"></i>
|
|
{{ t('buttons.accept') }}
|
|
</button>
|
|
<button
|
|
v-if="proposal.load.load_status !== 'Delivered' && proposal.is_accepted"
|
|
class="btn-primary-sm"
|
|
@click="handleCancelProposal(proposal)"
|
|
>
|
|
<i class="fa-solid fa-ban clear-sm"></i>
|
|
{{ t('buttons.cancel') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<CardEmpty v-else :text="t('proposals.empty')"/>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-dark"
|
|
@click="clearMoal"
|
|
data-dismiss="modal">{{ t('buttons.close') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.view-proposals {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-proposal {
|
|
flex-direction: column;
|
|
width: 100% !important;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: #323032;
|
|
font-weight: 700;
|
|
}
|
|
|
|
p span {
|
|
color: #323032;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.indicator-check {
|
|
width: 120px;
|
|
padding: 10px 12px;
|
|
background: #FFF;
|
|
border: 1px solid green;
|
|
border-radius: 50px;
|
|
color: green;
|
|
}
|
|
|
|
.box-note {
|
|
padding: 12px 16px;
|
|
background-color: aqua;
|
|
border-radius: 13px;
|
|
}
|
|
</style> |