cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 04:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
9dd0a8d7868c0211fb27e2ff5d8e19dcc24f4400
exchange-2.0/resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue
T

245 lines
19 KiB
Vue
Raw Blame History

<template>
<div class="row parentContainer">
<div class="col">
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
<div class="row" v-show="!isLoading" v-if="booking">
<div class="col-9">
<div class="row">
<div class="col bg-white p-t-25 p-b-0">
<div class="absolute" style="top: -5px;right: -5px;width: 0px;height: 0px;border-style: solid;border-width: 0px 110px 110px 0px;border-color: transparent rgb(249, 249, 249) transparent transparent;z-index: 2;">
<div @mouseover="bearShowing = true" style="width: 52px;height: 30px;margin-top: 75px;margin-left: 22px;"></div>
</div>
<div class="absolute shadow-sm " style="top: 0px; right: 0px; width: 0px; height: 0px; border-style: solid; border-width: 100px 0px 0px 100px; border-color: transparent transparent transparent rgb(255, 255, 255); z-index: 1;"></div>
<!--<bear-component class="animate__animated animate__slow animate__fadeInDown" v-on:mouseover.native="bearShowing = true" v-on:mouseleave.native="bearShowing = false" v-if="bearShowing"></bear-component>-->
<div class="row align-items-center m-b-0">
<div class="col-auto p-r-0">
<div class="icon-thumbnail icon-35 bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="35" height="35"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="69.875" y1="39.05475" x2="69.875" y2="54.29019" gradientUnits="userSpaceOnUse" id="color-1_L06xtIstZ632_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-2_L06xtIstZ632_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-3_L06xtIstZ632_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-4_L06xtIstZ632_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="48.375" y1="17.09788" x2="48.375" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-5_L06xtIstZ632_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="59.125" y1="17.09788" x2="59.125" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-6_L06xtIstZ632_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-7_L06xtIstZ632_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="17.09788" x2="86" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-8_L06xtIstZ632_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="130.34375" y1="17.09788" x2="130.34375" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-9_L06xtIstZ632_gr9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M48.23794,53.75h43.27681c1.40556,0 2.54775,-1.14219 2.54775,-2.55044v-5.65181c0,-1.40556 -1.14219,-2.54775 -2.55044,-2.54775h-43.27412c-1.40825,0 -2.55044,1.14219 -2.55044,2.55044v5.65181c0,1.40556 1.14219,2.54775 2.55044,2.54775z" fill="url(#color-1_L06xtIstZ632_gr1)"></path><rect x="17" y="23" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-2_L06xtIstZ632_gr2)"></rect><rect x="17" y="28" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-3_L06xtIstZ632_gr3)"></rect><rect x="17" y="33" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-4_L06xtIstZ632_gr4)"></rect><rect x="17" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-5_L06xtIstZ632_gr5)"></rect><rect x="21" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-6_L06xtIstZ632_gr6)"></rect><rect x="25" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-7_L06xtIstZ632_gr7)"></rect><path d="M155.875,86c0,-12.01044 -7.92006,-22.20413 -18.8125,-25.63606v-35.7545c0,-2.18494 -1.30075,-4.14144 -3.31369,-4.97456c-1.99681,-0.83044 -4.28387,-0.38431 -5.82381,1.15025l-4.02587,4.0205l-6.78325,-4.95306c-1.892,-1.38675 -4.43706,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.052,-5.14925c-1.88931,-1.38675 -4.43438,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.05469,-5.14925c-1.88931,-1.38675 -4.43437,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.052,-5.14925c-1.88931,-1.38675 -4.43437,-1.38944 -6.32906,-0.00269l-6.77519,4.95306l-4.042,-4.01781c-1.54263,-1.53456 -3.82969,-1.98606 -5.82381,-1.15025c-2.01294,0.83312 -3.31369,2.78962 -3.31369,4.97456v101.70575h-13.4375v13.4375c0,7.40944 6.03075,13.4375 13.4375,13.4375h94.05981c7.40944,-0.00269 13.44019,-6.03075 13.44019,-13.44019v-28.11394c10.89244,-3.43194 18.8125,-13.62562 18.8125,-25.63606zM29.5625,147.8125c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-8.0625h88.6875v8.0625c0,3.02344 1.00244,5.375 2.69019,8.0625zM131.6875,139.75c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-13.4375h-80.625v-24.1875h-0.00269l-0.02419,-77.53169l4.03663,4.01781c1.88125,1.8705 4.79988,2.09356 6.94987,0.53213l6.7725,-4.95575l7.05469,5.15194c1.89737,1.38406 4.43438,1.37869 6.32637,0l7.04125,-5.15194l7.05738,5.15194c1.89469,1.38137 4.429,1.38137 6.32369,0l7.04394,-5.15194l7.05469,5.15194c1.89737,1.38406 4.43437,1.37869 6.32637,0l7.04125,-5.15194l6.78862,4.95575c2.14194,1.56413 5.06594,1.34106 6.94719,-0.53213l4.01244,-4.00169v34.65263c-0.88419,-0.08869 -1.77912,-0.13706 -2.6875,-0.13706c-14.81888,0 -26.875,12.05613 -26.875,26.875c0,14.81887 12.05612,26.875 26.875,26.875c0.90838,0 1.80331,-0.04838 2.6875,-0.13706zM129,107.5c-11.85456,0 -21.5,-9.64544 -21.5,-21.5c0,-11.85456 9.64544,-21.5 21.5,-21.5c11.85456,0 21.5,9.64544 21.5,21.5c0,11.85456 -9.64544,21.5 -21.5,21.5z" fill="url(#color-8_L06xtIstZ632_gr8)"></path><path d="M140.53744,75.25l-14.22763,14.79469l-6.15975,-6.407l-3.80013,3.95331l6.15975,6.407c1.04812,1.09113 2.42413,1.634 3.80281,1.634c1.37869,0 2.75469,-0.54287 3.80281,-1.634l14.22225,-14.79469z" fill="url(#color-9_L06xtIstZ632_gr9)"></path></g></g></svg>
</div>
</div>
<div class="col-auto p-l-0">
<div class="font-heading all-caps fs-12 bold hint-text">Merge Transfer</div>
</div>
<div class="col-12 p-3 p-b-0">
<p>Merge multiple transfer orders to generate a single invoice for your purchase order</p>
</div>
</div>
<div class="row b-b b-dashed b-grey p-b-0" >
<div class="col-10">
<div class="row m-b-15">
<div class="col-auto">
<div class="font-heading fs-10 muted all-caps">Date</div>
<div class="font-heading fs-10">
{{booking.created_at}}
</div>
</div>
<div class="col-auto">
<div class="font-heading fs-10 muted all-caps">Reference</div>
<div class="font-heading fs-10">
{{booking.marking}}
</div>
</div>
<div class="col-auto">
<div class="font-heading fs-10 muted all-caps">{{booking.company.type === 1 ? 'SSM Registration No.' : 'Identification Card No.'}}</div>
<div class="font-heading fs-10 text-info">
{{booking.company.identification.reference}}
</div>
</div>
<div class="col-auto">
<div class="font-heading fs-10 muted all-caps">Purchase Order Amount</div>
<div class="font-heading fs-10 text-info" v-if="booking.purchase_order!==null">
{{formatAmount(booking.purchase_order.amount)}}
</div>
</div>
<div class="col-auto">
<div class="font-heading fs-10 muted all-caps">Booking Amount</div>
<div class="font-heading fs-10 text-info">
{{formatAmount(booking.amount)}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col bg-white padding-15">
<div class="row">
<p class="col-auto pull-left">Select Transfer Orders to merge with the order above</p>
</div>
<div class="b-b b-dashed b-grey p-b-25">
<div class="row align-items-center m-b-5 parentContainer">
<div class="col-auto pl3">
<div class="font-heading fs-12" style="line-height: 0px;">
<input type="checkbox" class="hide"/>
</div>
</div>
<div class="col-auto" :style="minWidth">
<div class="font-heading fs-10 muted all-caps">Created At</div>
</div>
<div class="col-auto" :style="minWidth">
<div class="font-heading fs-10 muted all-caps">Marking</div>
</div>
<div class="col-auto" :style="minWidth">
<div class="font-heading fs-10 muted all-caps">Currency</div>
</div>
<div class="col-auto" :style="minWidth">
<div class="font-heading fs-10 muted all-caps">Type</div>
</div>
<div class="col-auto" :style="minWidth150">
<div class="font-heading fs-10 muted all-caps">P.O. Amount</div>
</div>
<div class="col-auto" :style="minWidth150">
<div class="font-heading fs-10 muted all-caps">Booking Amount</div>
</div>
</div>
<list-component key="2" section="transferSection" :endpoint="route('api.booking.list')" :options="{per_page: 25, id_not: booking.id, company_id: booking.company_id, status: 2,service_id:booking.service.id,convertible_currency_id:booking.convertible_currency.id,fixed_currency_id:booking.fixed_currency.id,with_transactions:true}">
<template slot="list" slot-scope="{data}">
<booking-mergeable-component :data="data"></booking-mergeable-component>
</template>
</list-component>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="row m-l-0 m-r-0 m-b-15">
<div class="col bg-danger padding-15">
<div class="text-justify text-white fs-12">
Be cautious when merging multiple transfer orders, double check your reference numbers and the transfer amount before proceeding.
<br/><br/>
Please note that merged transfer orders can't be un-merged.
</div>
</div>
</div>
<div class="row no-margin">
<div class="col">
<div class="row">
<div class="col bg-white padding-15">
<div class="row" >
<div class="col">
<div class="row align-items-end text-complete">
<div class="col">
<div class="font-heading all-caps fs-10">Purchase Order Total Amount:</div>
</div>
<div class="col-12 text-left m-t-10 m-b-10">
<div class="font-heading fs-12">
<span class="bold" :class="getAmountClass()">{{totalPurchaseAmount}}</span><span class="bold text-success">&nbsp;/&nbsp;{{totalAmount}}</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-xs all-caps b-rad-none btn-success btn-block requestModal" data-type="mergeTransferModal" :class="[{'disabled':!validForSubmit}]">Merge Transfer Orders</button>
</div>
</div>
<modal-component type="mergeTransferModal">
<booking-merge-modal-component section="bookingDetailSection" :booking="this.booking" :bookingToMerge="this.bookings" :section="section">></booking-merge-modal-component>
</modal-component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BookingMergeModalComponent from "../elements/BookingMergeModalComponent";
export default {
components: {BookingMergeModalComponent},
props: {
marking: {
type: Number,
required: true
}
},
data(){
return {
minWidth:{
minWidth:'100px',
},
minWidth150:{
minWidth:'150px',
},
section: 'bookingMergeSection',
selected_id: '',
isLoading: true,
booking: null,
attention: false,
bearShowing: false,
bookings:[],
parameters:null,
}
},
computed: {
pendingQueue () {
return this.$store.getters.isInCompleteQueue(this.section);
},
totalAmount(){
return (Math.round((this.booking.amount + Number.EPSILON) * 100) / 100).toFixed(2);
},
totalPurchaseAmount(){
let totalPurchase = (this.booking.purchase_order) ? this.booking.purchase_order.amount : 0;
this.bookings.forEach(function(booking) {
totalPurchase += (booking.purchase_order ? booking.purchase_order.amount : 0);
});
return (Math.round((totalPurchase + Number.EPSILON) * 100) / 100).toFixed(2);
},
validForSubmit(){
return (this.bookings.length>0);// && this.totalAmount == this.totalPurchaseAmount);
}
},
watch: {
pendingQueue(inComplete){
if(inComplete){
this.fetchBooking();
}
}
},
created(){
this.$store.dispatch('updateListQueue', {'name': this.section});
},
mounted() {
this.$root.$on('selectedBookings', (el, item) => {
if (el.checked) {
this.bookings.push(item);
} else {
let index = this.bookings.findIndex(b => b.id == el.dataset.id);
if (index > -1) {
this.bookings.splice(index, 1);
}
}
});
this.$root.$on('setLoading', (isLoading) => {
this.isLoading = isLoading;
});
},
methods: {
fetchBooking(){
this.isLoading = true;
this.submit(route('api.booking.show', this.marking), 'get', this.section, false, false)
},
successHandler(response){
this.isLoading = false;
this.booking = response.payload.data;
},
errorHandler(){
window.location.href = this.route('dashboard');
},
getAmountClass(){
return this.totalAmount == this.totalPurchaseAmount ? 'text-success' : 'text-danger';
},
formatAmount(amount){
return (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2)
},
}
}
</script>
Reference in New Issue View Git Blame Copy Permalink