mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
multi payment ui
This commit is contained in:
edmondlang
+35
-57
@@ -7,9 +7,9 @@
|
||||
<div class="col b-a b-grey rounded bg-master-light">
|
||||
<div class="row">
|
||||
<div class="col padding-20">
|
||||
<div class="row align-items-center justify-conten-center">
|
||||
<div class="row align-items-center justify-conten-center" @click="chooseAllInvoice()">
|
||||
<div class="col-auto pointer">
|
||||
<i class="fa fs-30 fa-fw fa-square-o"></i>
|
||||
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectAllInvoice, 'fa-check-square': selectAllInvoice, 'text-primary':selectAllInvoice}" ></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin font-heading">Invoice No</h5>
|
||||
@@ -23,9 +23,9 @@
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Amount</h5>
|
||||
</div>
|
||||
<div class="col-auto invisible">
|
||||
<div class="btn btn-default no-border">
|
||||
<i class="fa fa-angle-up"></i>
|
||||
<div class="col-auto">
|
||||
<div class="btn bg-grey no-border muted invisible">
|
||||
<i class="fa fa-file-pdf-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,17 +33,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <list-component section="containerListSection" :endpoint="route('api.address.district.list')">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<payments-billing-components :data="data"></payments-billing-components>
|
||||
</template>
|
||||
</list-component> -->
|
||||
<payments-billing-components :data="invoice" v-for="invoice in invoices"></payments-billing-components>
|
||||
<!-- <div class="row" v-for="invoice in invoices">
|
||||
<div class="row" v-for="invoice in invoices">
|
||||
<div class="col">
|
||||
{{ invoice.id }}
|
||||
<payments-billing-components :data="invoice" :selectedInvoice="selectedInvoice" v-on:input="updateList($event)"></payments-billing-components>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-3">
|
||||
<div class="row align-items-center">
|
||||
@@ -60,15 +54,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-l-0">
|
||||
<h6 class="semi-bold text-primary">2 Invoice Selected</h6>
|
||||
<h6 class="semi-bold text-primary">{{selectedInvoice.length}} Invoice Selected</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<h6 class="no-margin">x1</h6>
|
||||
</div>
|
||||
<div class="row" v-for="invoice in selectedInvoice">
|
||||
<div class="col">
|
||||
<h6 class="no-margin">lorem ipsum</h6>
|
||||
</div>
|
||||
@@ -76,42 +67,6 @@
|
||||
<h6 class="no-margin">52x62x635 CM</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<h6 class="no-margin">x1</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6 class="no-margin">lorem ipsum</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="no-margin">52x62x635 CM</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="normal m-t-5 m-b-5">Shipping Fee</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="normal m-t-5 m-b-5">RM 212.15</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="normal m-t-5 m-b-5">Serrvice Fee</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="normal m-t-5 m-b-5">RM 41.25</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="normal m-t-5 m-b-5">Discount</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="normal m-t-5 m-b-5">RM 0.00</h6>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
@@ -125,6 +80,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="btn btn-xl btn-success pointer m-t-10 w-100" @click='makePayment'>Make Payments</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,13 +96,15 @@
|
||||
company_module_id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
section: 'customerPaymentBillingSectionComponent',
|
||||
isLoading: true,
|
||||
invoices: null
|
||||
invoices: null,
|
||||
selectedInvoice: [],
|
||||
selectAllInvoice: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -169,6 +131,22 @@
|
||||
this.$store.dispatch('completeList', {'name': this.section, 'data': []});
|
||||
this.isLoading = false;
|
||||
this.invoices = response.payload.data;
|
||||
},
|
||||
makePayment(){
|
||||
var selectedId = this.selectedInvoice.map(s=>s.id);
|
||||
console.log(selectedId);
|
||||
|
||||
},
|
||||
updateList(packageList){
|
||||
this.selectedInvoice.includes(packageList) ? this.selectedInvoice.splice(this.selectedInvoice.indexOf(packageList), 1) : this.selectedInvoice.push(packageList);
|
||||
this.selectedInvoice.length === this.invoices.length ? this.selectAllInvoice = true : this.selectAllInvoice = false;
|
||||
},
|
||||
chooseAllInvoice(){
|
||||
this.selectAllInvoice = !this.selectAllInvoice;
|
||||
this.selectedInvoice = [];
|
||||
if (this.selectAllInvoice) {
|
||||
this.selectedInvoice = this.invoices;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+40
-91
@@ -4,110 +4,36 @@
|
||||
<div class="row">
|
||||
<div class="col padding-20">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto pointer align-items-center" @click="selected = !selected">
|
||||
<div class="col-auto pointer align-items-center" @click="activate()">
|
||||
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">05052021</h5>
|
||||
<h5 class="no-margin">{{ item.bill_no }}</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Invoice Date Invoice Date</h5>
|
||||
<h5 class="no-margin">{{ item.created_at }}</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Status</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Amount</h5>
|
||||
<h5 class="no-margin">MYR {{ item.amount.toFixed(2) }}</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn bg-grey no-border" @click="expanded = !expanded">
|
||||
<i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row b-t b-grey p-t-10" v-show="expanded">
|
||||
<div class="col p-b-10">
|
||||
<div class="row">
|
||||
<div class="col p-l-20 p-r-20 p-t-10 p-b-10">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto invisible">
|
||||
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0">Carrier Tracking Number</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">#1zbr06tw403742920</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0">Due Date</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">11.04.2021</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">Outstanding</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">RM0.00</h5>
|
||||
</div>
|
||||
</div>
|
||||
<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 bg-grey no-border muted">
|
||||
<i class="fa fa-file-pdf-o"></i>
|
||||
</div>
|
||||
</template>
|
||||
</document-file-viewer-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-l-20 p-r-20 p-t-10 p-b-10">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto invisible">
|
||||
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 normal-text">This package was delivered by</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">#1zbr06tw403742920</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0">Date Paid</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">21.01.2021</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="btn btn-outline-complete btn-lg">
|
||||
Invoice Detail
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn bg-grey no-border muted invisible">
|
||||
<i class="fa fa-file-pdf-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,10 +46,33 @@
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
props: {
|
||||
selectedInvoice: {
|
||||
type: Array,
|
||||
required: false,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
expanded: false,
|
||||
selected: 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]
|
||||
|
||||
Reference in New Issue
Block a user