exchange-2.0/resources/assets/vue/components/accounting/sections/ImportedInvoiceMappedComponent.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 Invoices 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.doc_no }}</td>
                            <td>{{item.date}}</td>
                            <td>{{item.debtor_code }}}</td>
                            <td>{{item.debtor_name}}</td>
                            <td>{{item.shipping_info}}</td>
                            <td>{{item.net_total}}</td>
                            <td>{{item.cancelled}}</td>
                            <td>{{item.mapped_status}}</td>
                            <td>{{item.mapped_result_reference}}</td>
                            <td>{{item.payment_received_date}}</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 Invoices Mapped';
            },
            appendComponentTableHeader() {
                this.tableHeaders = ['No','Doc No','Date','Debtor Code','Debtor Name','Shipping Info','Net Total','Cancelled','Mapped Status','Mapped Reference No','Payment Received Date'];
            },
            importInvoice(){
                this.isLoading = true;
                this.parameters = {
                    files: this.files
                };
                this.submit(this.route('api.import_invoices.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 = 'importInvoiceMapping';

                window.open(this.route('importedInvoiceMapped.export')+'?date='+arrDateTime[0]+'&time='+arrDateTime[1]+'&fileName='+fileName, '_blank');
            },
        }
    }

</script>