mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
edmondlang
98 lines
4.9 KiB
Vue
98 lines
4.9 KiB
Vue
<template>
|
|
<div class="row m-b-15 m-l-5 m-r-10" v-if="$store.getters.isAdmin || item.order">
|
|
<div class="col bg-white rounded b-a" :class="{'b-white': !selected, 'b-primary': selected, 'bg-primary-lighter': selected}">
|
|
<div class="row">
|
|
<div class="col padding-20">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto pointer align-items-center" @click="activate()" v-if="!['customerPaidGroupInvoiceComponent', 'customerGroupPaymentInProgressInvoiceComponent'].includes(section)">
|
|
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Invoice No</p>
|
|
<div>{{ item.bill_no }}</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Order</p>
|
|
<div v-if="item.order"><a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a></div>
|
|
<div class="text-danger" v-else>Error in retrieving order</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Invoice Date</p>
|
|
<div>{{ item.created_at }}</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin fs-10 all-caps">Amount</p>
|
|
<div>MYR {{ item.amount.toFixed(2) }}</div>
|
|
</div>
|
|
<div class="col" v-if="['customerPaidInvoiceComponent', 'customerPaidGroupInvoiceComponent'].includes(section)">
|
|
<p class="no-margin fs-10 all-caps">Payment Date</p>
|
|
<div>{{ item.payment_history && item.payment_history.length > 0 ? item.payment_history[item.payment_history.length - 1].created_at : '-' }}</div>
|
|
</div>
|
|
<div class="col" v-if="['customerPaidInvoiceComponent', 'customerPaidGroupInvoiceComponent'].includes(section)">
|
|
<p class="no-margin fs-10 all-caps">Bill Number</p>
|
|
<div>{{ item.payment_history && item.payment_history.length > 0 ? item.payment_history[item.payment_history.length - 1].payment_reference : '-' }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div v-if="item.documents.length">
|
|
<div v-for="file in item.documents[0].files" v-bind:key="file.id" class="col-auto no-padding">
|
|
<document-file-viewer-component :file="file">
|
|
<template slot="button">
|
|
<div class="btn no-border muted" :class="{'btn-info': section === 'customerPaidInvoiceComponent', 'btn-success': section !== 'customerPaidInvoiceComponent'}">
|
|
<i class="fa fa-file-pdf-o"></i>
|
|
</div>
|
|
</template>
|
|
</document-file-viewer-component>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="btn bg-grey no-border muted invisible">
|
|
<i class="fa fa-file-pdf-o"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import componentHandler from '../../../general/mixins/componentHandler';
|
|
export default {
|
|
props: {
|
|
selectedInvoice: {
|
|
type: Array,
|
|
required: false,
|
|
},
|
|
section:{
|
|
type: String,
|
|
default: null
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
expanded: false,
|
|
selectedValue: false,
|
|
}
|
|
},
|
|
methods: {
|
|
activate(){
|
|
this.select = !this.select;
|
|
this.$emit('input', this.data);
|
|
}
|
|
},
|
|
computed: {
|
|
selected() {
|
|
var response = false;
|
|
this.selectedInvoice.forEach((value, index) => {
|
|
if (value.id == this.item.id) {
|
|
response = true;
|
|
}
|
|
});
|
|
return response;
|
|
}
|
|
},
|
|
mixins: [componentHandler]
|
|
}
|
|
</script>
|