mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Steve Ng
362 lines
21 KiB
Vue
362 lines
21 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"
|
|
:params="filter"
|
|
:section="section"
|
|
>
|
|
</general-confirmation-form-component>
|
|
</modal-component>
|
|
</div>
|
|
|
|
<!-- filter for Pending Export tab -->
|
|
<div v-if="stage === 4">
|
|
<div class="row pt-3 pb-3">
|
|
<div class="col-5 col-md-3 ">
|
|
<validation-wrapper-component :validator="$v.parameters.startDate">
|
|
<label class="all-caps">Start Date</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-5 col-md-3 ">
|
|
<validation-wrapper-component :validator="$v.parameters.endDate">
|
|
<label class="all-caps">End Date</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-2 col-md-auto">
|
|
<div class="btn btn-lg btn-primary fs-11 w-100 h-100 d-flex justify-content-center align-items-center" @click="startMapping(4)">
|
|
<span>
|
|
Search
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 class="col-1" v-if="stage === 4"></div>
|
|
<div class="col-1" v-if="stage === 4">Select <input type="checkbox" v-model="selectAll">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<list-component :key="stage" 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" :selectAll="selectAll"></statement-transaction-component>
|
|
</template>
|
|
</list-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row parentContainer" 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 requestModal" data-type="ModalImportInvoice" @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 class="row">
|
|
<div class="col-12">
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="ModalImportInvoice">
|
|
<imported-invoice-mapped-component section="importInvoiceMapping" v-if="mappedTrue" :files="files"></imported-invoice-mapped-component>
|
|
</modal-component>
|
|
</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="exportReceiptToAutoCount">Export Receipts 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/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 requestModal" data-type="ModalImportInvoice" @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 class="row">
|
|
<div class="col-12">
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="ModalImportInvoice">
|
|
<imported-invoice-mapped-component section="importReceiptMapping" v-if="mappedTrue" :files="files"></imported-invoice-mapped-component>
|
|
</modal-component>
|
|
</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 {
|
|
parameters: {
|
|
startDate: '',
|
|
endDate: '',
|
|
},
|
|
type: null,
|
|
stage: null,
|
|
exportStage: 0,
|
|
step: 0,
|
|
filter: {},
|
|
files: [],
|
|
parameters: {},
|
|
section: 'bankTransactionSection',
|
|
mappedTrue: false,
|
|
selectAll: false,
|
|
}
|
|
},
|
|
validations: {
|
|
parameters: {
|
|
startDate: {
|
|
required
|
|
},
|
|
endDate: {
|
|
required
|
|
},
|
|
},
|
|
files: {
|
|
// required // todo-new: set required if is pdf section
|
|
}
|
|
},
|
|
methods: {
|
|
importInvoice(){
|
|
this.mappedTrue = true;
|
|
},
|
|
importReceipts(){
|
|
this.mappedTrue = true;
|
|
},
|
|
exportInvoiceToAutoCount(){
|
|
const checkedStatementTransactions = this.getCheckedStatementOwners();
|
|
|
|
let route = this.route('invoiceTransactions.export')+'?filter='+JSON.stringify(this.filter);
|
|
if (checkedStatementTransactions) {
|
|
route += '&bankStatementTransactionId='+checkedStatementTransactions;
|
|
}
|
|
|
|
window.open(route, '_blank');
|
|
},
|
|
exportReceiptToAutoCount(){
|
|
const checkedStatementTransactions = this.getCheckedStatementOwners();
|
|
|
|
this.filter['where_has_owners_and_null'] = 'statement_transaction_owners.receipt_reference';
|
|
this.filter['where_has_owners_and_not_null'] = 'statement_transaction_owners.invoice_reference';
|
|
let route = this.route('receiptTransactions.export')+'?filter='+JSON.stringify(this.filter);
|
|
if (checkedStatementTransactions) {
|
|
route += '&bankStatementTransactionId='+checkedStatementTransactions;
|
|
}
|
|
|
|
window.open(route, '_blank');
|
|
},
|
|
getCheckedStatementOwners() {
|
|
let bankStatementTransactionId = [];
|
|
$('.request_export_item:checked').each(function() {
|
|
bankStatementTransactionId.push($(this).val());
|
|
});
|
|
return (bankStatementTransactionId.length > 0 ? JSON.stringify(bankStatementTransactionId) : null);
|
|
},
|
|
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_or_mapped_but_status_in: [4], 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}}
|
|
|
|
if (typeof this.parameters.startDate != 'undefined' && this.parameters.startDate != '') this.filter = {...this.filter, ...{statement_transaction_posting_start: this.parameters.startDate}};
|
|
|
|
if (typeof this.parameters.endDate != 'undefined' && this.parameters.endDate != '') this.filter = {...this.filter, ...{statement_transaction_posting_end:this.parameters.endDate}};
|
|
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}}
|
|
|
|
if (typeof this.parameters.startDate != 'undefined' && this.parameters.startDate != '') this.filter = {...this.filter, ...{statement_transaction_posting_start: this.parameters.startDate}};
|
|
|
|
if (typeof this.parameters.endDate != 'undefined' && this.parameters.endDate != '') this.filter = {...this.filter, ...{statement_transaction_posting_end:this.parameters.endDate}};
|
|
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.step = 1;
|
|
|
|
if(this.$refs.bankTransactionsList){
|
|
this.$refs.bankTransactionsList.updateFilters(this.filter);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|