reorganizations of views & components
This commit is contained in:
Alexandro Uc Santos
284
src/views/loads/modals/ProposalsModal.vue
Normal file
284
src/views/loads/modals/ProposalsModal.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useLoadsStore } from '../../../stores/loads';
|
||||
import { useAuthStore } from '../../../stores/auth';
|
||||
import Spiner from '../../../components/ui/Spiner.vue';
|
||||
import { getDateMonthDay } from '../../../helpers/date_formats';
|
||||
import VehicleInfo from '../../../components/VehicleInfo.vue';
|
||||
import Swal from 'sweetalert2'
|
||||
import CardEmpty from '../../../components/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>
|
||||
Reference in New Issue
Block a user