exchange-2.0/resources/assets/vue/components/accounting/sections/ImportedReceiptMappedComponent.vue

<template>
    <div class="row h-100 parentContainer">
        <div class="col-12" style="min-height: 20px;">
            <loading-component style="height: 20px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
        </div>

        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>{{ componentTitle }}</h3>
                    <div class="row m-b-10 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="text-right">
                        <button class="btn btn-xs btn-outline-success b-rad-none m-r-5" @click="downloadInvoiceMapped">
                            Download Receipts Mapped
                        </button>
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover">
                    <thead>
                        <tr>
                            <th v-for="item in tableHeaders">{{ item }}</th>
                        </tr>
                    </thead>
                    <tbody v-show="!isLoading">
                        <tr v-for="(item, index) in $store.getters.getListData(section)">
                            <td>{{index+1}}</td>
                            <td>{{item.check }}</td>
                            <td>{{item.doc_no}}</td>
                            <td>{{item.doc_date }}}</td>
                            <td>{{item.debtor_code}}</td>
                            <td>{{item.company_name}}</td>
                            <td>{{item.description}}</td>
                            <td>{{item.payment_amount}}</td>
                            <td>{{item.created_user}}</td>
                            <td>{{item.curr}}</td>
                            <td>{{item.to_home_rate}}</td>
                            <td>{{item.local_payment_amount}}</td>
                            <td>{{item.cancelled}}</td>
                            <td>{{item.mapped_status}}</td>
                            <td>{{item.mapped_result_reference}}</td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">

                </div>
            </div>
        </div>

        <div class="col-12">
            <pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            files: {
                required: true
            },
            type: {
                type: String,
                required: true,
            },
            section:{
                type: String,
                required: true
            },
        },
        data() {
            return {
                isLoading: false,
                error: '',
                importedDate: null,
            }
        },
        computed: {
            pendingQueue() {
                return this.$store.getters.isInCompleteQueue(this.section);
            }
        },
        watch: {
            pendingQueue(inComplete, oldValue){
                if(inComplete){
                    this.importInvoice();
                }
            },
        },
        created(){
            this.appendComponentTitle();
            this.appendComponentTableHeader();
            this.$store.dispatch('updateListQueue', {'name': this.section});
        },
        methods: {
            appendComponentTitle() {
                this.componentTitle = 'Imported Receipts Mapped';
            },
            appendComponentTableHeader() {
                this.tableHeaders = ['Check','Doc No','Doc Date','Debtor Code','Company Name','Description','Payment Amount','Created User','Curr.','To Home Rate','Local Payment Amount','Cancelled','Mapped Status','Mapped Reference No'];
            },
            importInvoice(){
                this.isLoading = true;
                this.parameters = {
                    files: this.files
                };
                this.submit(this.route('api.import_receipts.upload'), 'post', this.section, true, false);
            },

            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
                this.importedDate = response.payload.importedDate;
                this.isLoading = false;
            },

            errorHandler(error){
                this.isLoading = false;
                this.error = error.message;
            },

            downloadInvoiceMapped() {
                var arrDateTime = this.importedDate.split(" ");
                const fileName = 'ReceiptMapped';
                const url = this.route('importedReceiptMapped.export')+'?date='+arrDateTime[0]+'&time='+arrDateTime[1]+'&fileName='+fileName;

                if(window.LARAVEL_VAPOR_ENABLED){
                    this.$store.dispatch('crudRequest', {endpoint: url, method: 'get'})
                    .then(response =>
                        {
                            let success = response.ok;
                            response.json().then(response => {
                                if(!success){return;}
                                if (response.src) {
                                    window.location.href = response.src;
                                }
                            });
                        }
                    );
                }
                else{
                    window.open(url, '_blank');
                }
            },
        }
    }

</script>