mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-25 23:43:58 +00:00
Dillon Ngo
169 lines
11 KiB
Vue
169 lines
11 KiB
Vue
<template>
|
|
<div class="row zig-zag-top">
|
|
<div class="col bg-white padding-25">
|
|
<div class="row p-b-20 b-b b-dashed b-grey m-b-20">
|
|
<div class="col">
|
|
<div class="row m-b-10" v-if="data">
|
|
<div class="col" v-if="data.billNo && data.billNo !== ''">
|
|
<div class="font-heading all-caps bold fs-10">Edit Recipient Bank Details ({{ data.billNo }})</div>
|
|
</div>
|
|
<div class="col" v-else>
|
|
<div class="font-heading all-caps bold fs-10">Edit Recipient Bank Details (Default)</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="row parentContainer">
|
|
<div class="col">
|
|
<div class="row" v-show="!createBank && !isEditing">
|
|
<div class="col-7 p-r-0">
|
|
<div class="row" id="select-list" name="select-list">
|
|
<div class="col">
|
|
<div class="form-group no-margin form-group-default">
|
|
<label>{{ data.serviceType.id === 4 ? '1688 Login Id/Email/Phone' : 'Account No.' }}</label>
|
|
<input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !dropdownStatus}]" style="top: 100%; right: 0; z-index: 1;">
|
|
<div class="row text-left no-margin bg-white">
|
|
<div class="col no-padding">
|
|
<div class="row no-margin" v-for="bank in data.recipientBanks.filter(AccountNumber)" v-bind:key="bank.id" >
|
|
<div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" :class="['bg-master-lightest','text-master', 'hover-primary', 'pointer']" @click="selectBank(bank)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading bold lh-15 fs-13">{{bank.reference ? bank.reference + ' - ':''}}{{bank.holder_name}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{bank.account_no}}</b> {{bank.bank_name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto p-l-0" v-show="!createBank && account_no">
|
|
<button class="btn btn-sm h-100 btn-primary b-rad-none all-caps" @click="createBank = !createBank; dropdownStatus = false">
|
|
<i class="fa fa-plus m-r-5"></i>
|
|
Create New
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-show="createBank || isEditing">
|
|
<div class="col">
|
|
<bank-account-form-component v-if="data.serviceType.id !== 4"
|
|
section="bookingEditRecipientDetailSection"
|
|
:data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}"
|
|
:company_id="data.company.id"
|
|
:country_id="2" :type="2"
|
|
:currency="data.serviceType.selectedCurrency.short_code"
|
|
:serviceType="data.serviceType"
|
|
:closable=false
|
|
:isEditing="isEditing"
|
|
v-on:createdBank="updateBank($event)"
|
|
v-on:updatedBankDetails="updatedBankDetails"
|
|
v-on:close="clearAccount()">
|
|
</bank-account-form-component>
|
|
<phone-account-form-component v-if="data.serviceType.id === 4"
|
|
section="bookingEditRecipientDetailSection"
|
|
:data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}"
|
|
:company_id="data.company.id"
|
|
:country_id="2" :type="2"
|
|
:serviceType="data.serviceType"
|
|
:closable=false
|
|
:isEditing="isEditing"
|
|
v-on:createdBank="updateBank($event)"
|
|
v-on:updatedBankDetails="updatedBankDetails"
|
|
v-on:close="clearAccount()">
|
|
</phone-account-form-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<update-booking-component section="bookingEditRecipientDetailSection" :data="data" v-if="parameters" v-on:updatedBooking="updatedBankDetails($event)" v-on:updateBookingCanceled="cancelUpdate()"></update-booking-component>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FormHandler from '../../../general/mixins/formHandler';
|
|
// import UpdateBookingComponent from "../forms/UpdateBookingComponent";
|
|
export default {
|
|
// components: {UpdateBookingComponent},
|
|
data(){
|
|
return {
|
|
createBank: false,
|
|
isEditing: true,
|
|
recipientBanks: [],
|
|
dropdownStatus: false,
|
|
account_no: '',
|
|
}
|
|
},
|
|
created(){
|
|
this.recipientBanks = this.data.recipientBanks;
|
|
},
|
|
methods: {
|
|
AccountNumber(bank){
|
|
return bank.account_no.startsWith(this.account_no)
|
|
},
|
|
updateBank(bank){
|
|
this.selectBank(bank);
|
|
this.recipientBanks.push(bank);
|
|
this.parameters.bankAccount = bank;
|
|
this.parameters.bankAccountDefault = bank;
|
|
},
|
|
updatedBankDetails(bank, transactionId){
|
|
this.parameters.bankAccount = bank;
|
|
this.parameters.bankAccountDefault = bank;
|
|
|
|
var foundIndex = this.recipientBanks.findIndex(x => x.id == bank.id);
|
|
this.recipientBanks[foundIndex] = bank;
|
|
|
|
this.$emit('updatedBankDetails', bank, transactionId);
|
|
},
|
|
selectBank(bank){
|
|
this.account_no = bank.account_no;
|
|
this.isEditing = true;
|
|
this.createBank = false;
|
|
this.parameters.bankAccount = bank;
|
|
this.dropdownStatus = false;
|
|
},
|
|
clearAccount(){
|
|
this.createBank = false;
|
|
this.isEditing = false;
|
|
this.account_no = '';
|
|
this.parameters.bankAccount = {};
|
|
},
|
|
cancelUpdate(){
|
|
this.parameters.bankAccount = this.parameters.bankAccountDefault;
|
|
this.isEditing = true;
|
|
this.createBank = false;
|
|
}
|
|
},
|
|
mixins: [FormHandler]
|
|
}
|
|
</script>
|