mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Steve Ng
273 lines
16 KiB
Vue
273 lines
16 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row justify-content-center align-items-center m-t-50 m-b-50" v-show="step === 0">
|
|
<div class="col-5">
|
|
<div class="row text-center">
|
|
<div class="col b-a b-grey padding-50 m-r-15 pointer" :class="[{'bg-complete': type === 1}, {'text-white': type === 1}]" @click="type=1">Receivable Mapping</div>
|
|
<div class="col b-a b-grey padding-50 pointer" :class="[{'bg-complete': type === 2}, {'text-white': type === 2}]" @click="type=2">Payable Mapping</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center align-items-center m-t-50 m-b-50" v-if="type">
|
|
<div class="col-8">
|
|
<div class="row text-center m-b-50" v-if="step">
|
|
<div class="col">
|
|
<h4 class="all-caps">{{ type === 1 ? 'Receivable Mapping' : 'Payable Mapping'}}</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center align-items-center">
|
|
<div class="col b-a b-grey padding-30 pointer" :class="[{'bg-info': stage === 1}, {'text-white': stage === 1}]" @click="startMapping(1)">Mapping Approval</div>
|
|
<div class="col-auto"><i class="fa fa-angle-double-right fs-20"></i></div>
|
|
<div class="col b-a b-grey padding-30 pointer" :class="[{'bg-info': stage === 2}, {'text-white': stage === 2}]" @click="startMapping(2)">Mapping Review</div>
|
|
<div class="col-auto"><i class="fa fa-angle-double-right fs-20"></i></div>
|
|
<div class="col b-a b-grey padding-30 pointer" :class="[{'bg-info': stage === 3}, {'text-white': stage === 3}]" @click="startMapping(3)">Unknown</div>
|
|
<div class="col-auto"><i class="fa fa-angle-double-right fs-20"></i></div>
|
|
<div class="col b-a b-grey padding-30 pointer" :class="[{'bg-info': stage === 4}, {'text-white': stage === 4}]" @click="startMapping(4)">Pending Export</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center align-items-center m-t-50 m-b-50 hide" v-if="type">
|
|
<div class="col-5">
|
|
<div class="row text-center">
|
|
<div class="col b-a b-grey padding-30 m-r-15 pointer" :class="[{'bg-complete': type === 1}, {'text-white': type === 1}]" @click="type=1">All</div>
|
|
<div class="col b-a b-grey padding-30 m-r-15 pointer" :class="[{'bg-complete': type === 1}, {'text-white': type === 1}]" @click="type=1">Sales</div>
|
|
<div class="col b-a b-grey padding-30 pointer" :class="[{'bg-complete': type === 2}, {'text-white': type === 2}]" @click="type=2">Wallet Top Up</div>
|
|
<div class="col b-a b-grey padding-30 pointer" :class="[{'bg-complete': type === 2}, {'text-white': type === 2}]" @click="type=2">Internal Bank Transfer In</div>
|
|
<div class="col b-a b-grey padding-30 pointer" :class="[{'bg-complete': type === 2}, {'text-white': type === 2}]" @click="type=2">Unknown</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center m-b-50" v-show="step === 0">
|
|
<div class="col-4">
|
|
<div class="row">
|
|
<div class="col">
|
|
<button type="button" class="btn btn-lg btn-block btn-primary b-rad-none" @click="startMapping(1)" v-if="type">Start Mapping</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row p-b-15 p-t-15 bg-master-lighter" v-show="step !== 0">
|
|
<div class="col"></div>
|
|
<div class="col-auto pointer bold text-danger" @click="step=0">X</div>
|
|
</div>
|
|
<div class="row parentContainer" v-if="step > 0">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div v-if="stage === 1">
|
|
<div class="btn btn-primary btn-sm m-t-10 requestModal" data-type="approveMappingTransaction">Approve all the Mapping Below</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" type="approveMappingTransaction">
|
|
<general-confirmation-form-component
|
|
contentText="Are you sure you want to approve all these Transaction?"
|
|
modalType="confirm"
|
|
class="text-center"
|
|
:apiRoute="route('api.accounting.statement_transaction.owner.groupApprove')"
|
|
apiMethod="post"
|
|
:section="section"
|
|
>
|
|
</general-confirmation-form-component>
|
|
</modal-component>
|
|
</div>
|
|
<div class="row m-t-10 m-b-10">
|
|
<div class="col">
|
|
<div class="row p-t-10 p-b-10 b-b b-grey text-master-light">
|
|
<div class="col-2">Date</div>
|
|
<div class="col-2">Description</div>
|
|
<div class="col-5">
|
|
<div class="row">
|
|
<div class="col">System</div>
|
|
<div class="col">Type</div>
|
|
<div class="col">Reference</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-1">Amount</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<list-component ref="bankTransactionsList" section="bankTransactionSection" :endpoint="route('api.accounting.bank.transaction')" :options="this.filter">
|
|
<template slot="list" slot-scope="{data}">
|
|
<statement-transaction-component :data="data" :section="section" :stage="stage"></statement-transaction-component>
|
|
</template>
|
|
</list-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="stage === 4">
|
|
<div class="col">
|
|
<div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-show="exportStage === 0">
|
|
<div class="col">
|
|
<div class="btn btn-lg btn-primary" @click="exportInvoiceToAutoCount">Export Invoices To AutoCount</div>
|
|
<!-- todo-new: delete later --><br><div class="btn btn-lg btn-primary m-t-20" @click="exportStage++">Nest Step</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col">
|
|
<a href="https://docs.google.com/presentation/d/1N9QQOEMajYVVHQ4lMN7_Cu0BYNe4NYdV-TnxAhJUgRE/edit?usp=sharing" target="_blank">Learn How to do this step?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-if="exportStage === 1">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<file-input-component :validator="$v.files" v-model="files">
|
|
<template slot="label">
|
|
</template>
|
|
</file-input-component>
|
|
</div>
|
|
</div>
|
|
<div class="btn btn-lg btn-primary m-t-20" @click="importInvoice">Import Invoices</div>
|
|
<!-- todo-new: delete later --><br><div class="btn btn-lg btn-primary m-t-20" @click="exportStage++">Nest Step</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col">
|
|
<a href="https://docs.google.com/presentation/d/1XwKcdBCpHQSCQmsgnUHsypcqk5kdc8uZMqkjW9JXiw4/edit?usp=sharing" target="_blank">Learn How to do this step?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-show="exportStage === 2">
|
|
<div class="col">
|
|
<div class="btn btn-lg btn-primary" @click="exportStage++">Export Receipts To AutoCount</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col">
|
|
<a href="https://docs.google.com/presentation/d/1xMiWjU1hqPaihMhbgflFSDsu1sC_0Lk7OFmwDaXVt-w/edit?usp=sharing" target="_blank">Learn How to do this step?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-if="exportStage === 3">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<file-input-component :validator="$v.files" v-model="files">
|
|
<template slot="label">
|
|
</template>
|
|
</file-input-component>
|
|
</div>
|
|
</div>
|
|
<div class="btn btn-lg btn-primary m-t-20" @click="importReceipts">Import Receipts</div>
|
|
<!-- todo-new: delete later --><br><div class="btn btn-lg btn-primary m-t-20" @click="exportStage++">Nest Step</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col">
|
|
<a href="https://docs.google.com/presentation/d/1xMiWjU1hqPaihMhbgflFSDsu1sC_0Lk7OFmwDaXVt-w/edit?usp=sharing" target="_blank">Learn How to do this step?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center m-t-50 m-b-50 p-t-50 p-b-50" v-show="exportStage === 4">
|
|
<div class="col">
|
|
All Done, Good Job <span class="fs-50">👏</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { required } from "vuelidate/lib/validators";
|
|
|
|
export default {
|
|
components: {},
|
|
|
|
|
|
data(){
|
|
return {
|
|
type: null,
|
|
stage: null,
|
|
exportStage: 0,
|
|
step: 0,
|
|
filter: {},
|
|
files: [],
|
|
parameters: {},
|
|
section: 'bankTransactionSection',
|
|
}
|
|
},
|
|
validations: {
|
|
files: {
|
|
// required // todo-new: set required if is pdf section
|
|
}
|
|
},
|
|
methods: {
|
|
importInvoice(){
|
|
this.parameters = {
|
|
files: this.files
|
|
};
|
|
this.submit(this.route('api.import_invoices.upload'), 'post', this.section, true, false);
|
|
},
|
|
importReceipts(){
|
|
this.parameters = {
|
|
files: this.files
|
|
};
|
|
this.submit(this.route('api.import_receipts.upload'), 'post', this.section, true, false);
|
|
},
|
|
exportInvoiceToAutoCount(){
|
|
window.open(this.route('invoiceTransactions.export'), '_blank');
|
|
},
|
|
successHandler(){
|
|
this.step += 1;
|
|
|
|
// reset parameters
|
|
this.files = [];
|
|
this.parameters = {};
|
|
},
|
|
startMapping(stage){
|
|
|
|
this.stage = stage;
|
|
this.exportStage = 0;
|
|
if(this.type === 1){
|
|
switch(this.stage){
|
|
case 1:
|
|
this.filter = {min_amount: 0, is_mapped: true, is_mapped_with_multiple: false, statement_transaction_owner_type_in: [1, 2], statement_transaction_owner_status_in: [1], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
|
|
break;
|
|
case 2:
|
|
this.filter = {min_amount: 0, is_mapped: true, is_mapped_with_multiple: true, statement_transaction_owner_type_in: [1, 2], statement_transaction_owner_status_in: [1], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
|
|
break;
|
|
case 3:
|
|
this.filter = {min_amount: 0, is_mapped: false, per_page: 100, order_by: {column: 'posting_date', DESC: true}}
|
|
break;
|
|
case 4:
|
|
this.filter = {min_amount: 0, is_mapped: true, statement_transaction_owner_type_in: [1, 2], statement_transaction_owner_status_in: [2], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(this.type === 2){
|
|
switch(this.stage){
|
|
case 1:
|
|
this.filter = {max_amount: 0, is_mapped: true, is_mapped_with_multiple: false, statement_transaction_owner_type_in: [3, 5],statement_transaction_owner_status_in: [1], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
|
|
break;
|
|
case 2:
|
|
this.filter = {max_amount: 0, is_mapped: true, is_mapped_with_multiple: true, statement_transaction_owner_type_in: [3, 5], statement_transaction_owner_status_in: [1], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
|
|
break;
|
|
case 3:
|
|
this.filter = {max_amount: 0, is_mapped: false, per_page: 100, order_by: {column: 'posting_date', DESC: true}}
|
|
break;
|
|
case 4:
|
|
this.filter = {max_amount: 0, is_mapped: true, statement_transaction_owner_type_in: [3, 5], statement_transaction_owner_status_in: [2], per_page: 100, order_by: {column: 'posting_date', DESC: true}}
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.step = 1;
|
|
|
|
if(this.$refs.bankTransactionsList){
|
|
this.$refs.bankTransactionsList.updateFilters(this.filter);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|