mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
edit bank for customer profile
This commit is contained in:
JiaSheng
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="row m-l-0 m-r-0 m-b-10 parentContainer align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="padding-5 bg-master-lightest">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="30" height="30"
|
||||
viewBox="0 0 172 172"
|
||||
style=" fill:#000000;"><defs><linearGradient x1="86" y1="38.97413" x2="86" y2="57.78663" gradientUnits="userSpaceOnUse" id="color-1_77055_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="77.49138" x2="129" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-2_77055_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="43" y1="77.49138" x2="43" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-3_77055_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="64.94881" x2="86" y2="133.92888" gradientUnits="userSpaceOnUse" id="color-4_77055_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.11963" x2="86" y2="155.875" gradientUnits="userSpaceOnUse" id="color-5_77055_gr5"><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="M86,40.31787c-4.4528,0 -8.0625,3.6097 -8.0625,8.0625c0,4.4528 3.6097,8.0625 8.0625,8.0625c4.4528,0 8.0625,-3.6097 8.0625,-8.0625c0,-4.4528 -3.6097,-8.0625 -8.0625,-8.0625z" fill="url(#color-1_77055_gr1)"></path><path d="M126.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-2_77055_gr2)"></path><path d="M40.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-3_77055_gr3)"></path><path d="M56.4375,69.875v59.125h59.125v-59.125zM99.4375,88.6875h-21.5v8.0625h16.125c2.96431,0 5.375,2.41069 5.375,5.375v8.0625c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.375v5.375h-5.375v-5.375h-10.75v-5.375h21.5v-8.0625h-16.125c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-8.0625c0,-2.96431 2.41069,-5.375 5.375,-5.375h5.375v-5.375h5.375v5.375h10.75z" fill="url(#color-4_77055_gr4)"></path><path d="M86,59.125c-5.92862,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75zM86,43c-2.96431,0 -5.375,2.41069 -5.375,5.375c0,2.96431 2.41069,5.375 5.375,5.375c2.96431,0 5.375,-2.41069 5.375,-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375zM108.84375,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM108.84375,49.71606v0.00269zM63.15625,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM63.15625,49.71606v0.00269zM150.5,69.875c2.96431,0 5.375,-2.39456 5.375,-5.34544v-1.29806c0,-1.72269 -0.84119,-3.34862 -2.30319,-4.39138l-60.03069,-40.40925c-4.58219,-3.08256 -10.49737,-3.08256 -15.07956,0l-60.08981,40.44956c-1.40825,1.00244 -2.24675,2.62838 -2.24675,4.35106v1.29806c0,2.95088 2.41069,5.34544 5.375,5.34544h8.0625v59.13037c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h139.75v-8.05712c0,-3.49913 -2.25481,-6.45269 -5.375,-7.568v-3.182c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625v-59.13038zM150.5,147.81788v2.68212h-129v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h123.625c1.4835,0 2.6875,1.20937 2.6875,2.69288zM145.125,137.06788v2.68212h-118.25v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h26.875h16.125h26.875h16.125h26.875c1.4835,0 2.6875,1.20937 2.6875,2.69288zM51.0625,80.625v37.625h-16.125v-37.625zM34.9375,75.25v-5.375h16.125v5.375zM51.0625,123.625v5.375h-16.125v-5.375zM56.4375,129v-59.125h5.375h10.75h5.375h16.125h5.375h5.375h10.75v59.125h-10.75h-5.375h-5.375h-16.125h-5.375h-10.75zM137.0625,80.625v37.625h-16.125v-37.625zM120.9375,75.25v-5.375h16.125v5.375zM137.0625,123.625v5.375h-16.125v-5.375zM115.5625,64.5h-16.125h-26.875v0.0215l-16.125,0.00269v-0.02419h-26.875h-8.0625l-0.06719,-1.21475l60.03069,-40.40387c1.376,-0.92987 2.95625,-1.38944 4.5365,-1.38944c1.58025,0 3.1605,0.46494 4.5365,1.39481l59.9635,40.33938l0.00806,1.27388c0,0 -0.00269,0 -0.00806,0h-8.0625z" fill="url(#color-5_77055_gr5)"></path></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading all-caps fs-11">{{item.type === 2 ? item.reference : item.company_business_type === 1 ? 'Company\'s Bank Account' : 'Personal Bank Account'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10 muted">{{item.bank_name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10">{{item.holder_name}}</div>
|
||||
<div class="font-heading fs-11 text-complete m-b-5">{{item.type === 3 ? item.account_no : item.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim() }}</div>
|
||||
</div>
|
||||
<div class="col-auto b-l b-grey">
|
||||
<div class="row h-100">
|
||||
<div class="col">
|
||||
<div class="row no-margin">
|
||||
<div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest requestModal" data-type="editBankModal">
|
||||
<a class="pointer">
|
||||
<div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Edit">
|
||||
<div class="col">
|
||||
<i class="fa fa-pencil text-info"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto m-l-10 d-flex align-items-center">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto text-right p-t-5 p-b-5" :class="[{'bg-warning-lighter': item.default}, {'bg-master-light': !item.default}]">
|
||||
<div data-toggle="tooltip" class="row align-items-center justify-content-center" :class="{'link': !item.default}">
|
||||
<div class="col">
|
||||
<i class="fa fa-star" :class="[{'text-warning': item.default}, {'text-master': !item.default}]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col bg-white p-t-5 p-b-5">
|
||||
<small class="fs-12 all-caps bold" :class="[{'text-warning': item.default}, {'text-master': !item.default}]">Default Bank</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editBankModal">
|
||||
<edit-bank-form-component :data="item" :section="section" :company_id="company_id"></edit-bank-form-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
props: {
|
||||
company_id: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
section: {
|
||||
default: 'companyBanksSection'
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -57,10 +57,20 @@
|
||||
<i class="fa fa-pencil m-r-10"></i>Edit Profile Info
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 p-0">
|
||||
<div class="col-12 p-0 p-t-5">
|
||||
<label class="muted m-b-0" :style="minWidth">Recipients Bank Accounts </label>
|
||||
</div>
|
||||
<div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1">
|
||||
<list-component key="2" section="companyBanksSection" :endpoint="route('api.bank.list')" :options="{'company_id': this.company_details.id}" v-if="this.company_details.id">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<company-bank-account-component :data="data" :company_id="parseInt(company_details.id)" section="companyBanksSection"></company-bank-account-component>
|
||||
</template>
|
||||
</list-component>
|
||||
</div>
|
||||
<div class="col-12 p-0 p-t-5">
|
||||
<label class="muted m-b-0" :style="minWidth">Address </label>
|
||||
</div>
|
||||
<div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-0">
|
||||
<div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1">
|
||||
<list-component key="2" section="addresslist" :endpoint="route('api.address.list')" :options="{'company_id':this.company_details.id}" v-if="this.company_details.id">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<address-component :data="data" section="addressListItem"></address-component>
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="row" @keyup.enter="submitForm">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<h3 class="all-caps m-b-5 bold no-margin">Edit Bank Account</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
|
||||
<div class="col">
|
||||
<small class="bold fs-10 text-danger">{{error}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.reference">
|
||||
<label>Reference</label>
|
||||
<input type="text" class="form-control" v-model="parameters.reference">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.holder_name">
|
||||
<label>Account Holder Name / Company Name</label>
|
||||
<input type="text" class="form-control" v-model="parameters.holder_name">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.account_no">
|
||||
<label>Account No.</label>
|
||||
<input type="text" class="form-control" v-model="parameters.account_no">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="parameters.type === 2">
|
||||
<div class="col">
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.bank_name">
|
||||
<label>Bank Name</label>
|
||||
<input type="text" class="form-control" v-model="parameters.bank_name">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.bank_branch">
|
||||
<label>Bank Branch / 所在地</label>
|
||||
<input type="text" class="form-control" v-model="parameters.bank_branch">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-20" v-if="parameters.type !== 2">
|
||||
<div class="col">
|
||||
<validation-wrapper-component selectable :validator="$v.parameters.bank_name">
|
||||
<label>Bank Name</label>
|
||||
<selectable-component endpoint="malaysian_banks.json" section="banksListSection" valueColumn="name" :labelColumn="['name']" v-model="parameters.bank_name"></selectable-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Update</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import modalFormHandler from "../../../general/mixins/modalFormHandler";
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
export default {
|
||||
props : {
|
||||
company_id: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log(this.parameters)
|
||||
this.parameters.company_id = this.company_id;
|
||||
this.parameters.account_type = this.data.type;
|
||||
},
|
||||
watch: {
|
||||
'data': function() {
|
||||
this.parameters = this.data;
|
||||
this.parameters.company_id = this.company_id;
|
||||
this.parameters.account_type = this.data.type;
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
parameters: {
|
||||
company_id: this.company_id
|
||||
}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
parameters: {
|
||||
holder_name: {
|
||||
required
|
||||
},
|
||||
account_no: {
|
||||
required
|
||||
},
|
||||
bank_branch: {
|
||||
// required
|
||||
},
|
||||
swift: {
|
||||
// required
|
||||
},
|
||||
snap: {
|
||||
// required
|
||||
},
|
||||
bank_name: {
|
||||
required
|
||||
},
|
||||
reference: {
|
||||
// required
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm(){
|
||||
console.log(this.company_id)
|
||||
|
||||
this.submit(route('api.bank.update', this.data.id), 'put', this.section, true, true);
|
||||
},
|
||||
},
|
||||
mixins: [modalFormHandler]
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user