exchange-2.0/resources/assets/vue/components/bookings/forms/UploadPurchaseOrderPdfV2FormComponent.vue

<template>
    <div class="row" @keyup.enter="submitForm">
        <div class="col">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
            <div class="row" v-show="!$store.getters.isLoading(section)">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <file-input-component :key="fileInputKey" :validator="$v.parameters.files" v-model="parameters.files" :withMeta="true">
                                <template slot="label">
                                    <div class="font-heading fs-11 text-primary all-caps">Import Purchase Order PDF</div>
                                </template>
                            </file-input-component>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <button type="button"
                                class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none"
                                @click="importToSystem"
                                :disabled="isExporting || isImporting">
                                {{ isImporting ? 'Uploading...' : 'Upload' }}
                            </button>
                        </div>
                    </div>
                   <!-- <div class="row m-t-20 justify-content-center" v-if="parameters.files.length > 0">
                        <div class="col-auto">
                            <button type="button"
                                    class="btn btn-sm btn-outline-complete rounded-0 mx-1"
                                    @click="exportToCSV"
                                    :disabled="isExporting || isImporting">
                                {{ isExporting ? 'Exporting...' : 'Export to CSV' }}
                            </button>
                        </div>

                        <div class="col-auto">
                            <button type="button"
                                    class="btn btn-sm btn-outline-complete rounded-0 mx-1"
                                    @click="importToSystem"
                                    :disabled="isExporting || isImporting">
                                {{ isImporting ? 'Uploading...' : 'Continue Upload' }}
                            </button>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { required } from "vuelidate/lib/validators";
    import formHandler from '../../../general/mixins/formHandler';
    export default {

        props: {
            section: {
                type: String,
                required: true
            },
            bookingId: {
                type: Number,
                required: true
            }
        },
        data(){
            return {
                isExporting: false,
                isImporting: false,
                parameters: {
                    files: [],
                    products: []
                },
                fileInputKey: 0,
            }
        },
        validations: {
            parameters: {
                files: {
                    required
                }
            }
        },
        methods: {
            exportToCSV(){
                this.parameters.products = [];
                if (this.isExporting) return;
                this.isExporting = true;
                this.submit(this.route('api.transaction.po.etl', this.bookingId), 'post', this.section + 'PDFExport', true, false)
            },
            importToSystem() {
                if (this.isImporting) return;
                this.isImporting = true;

                this.submit(route('api.transaction.po.import', this.bookingId), 'post', this.section + 'PDFImport', true, true);
            },
            escapeCSV(value) {
                if (value === null || value === undefined) return '';
                const str = value.toString();
                if (str.includes(',') || str.includes('"') || str.includes('\n')) {
                    return `"${str.replace(/"/g, '""')}"`;
                }
                return str;
            },
            resetFileInput() {
                this.parameters.files = [];
                this.$v.parameters.files.$reset();
                this.fileInputKey++;
            },
            onComplete(data) {
                this.$store.dispatch('reloadList', {'name': 'bookingDetailSection'});
                this.fileInputKey += 1;
                const bookingChannel = `admin.pdf.1688.processing.${data.bookingId}`;
                window.Echo.leave(bookingChannel);
            },
            successHandler(response, section){
                if(this.section + 'PDFImport' === section){
                    if (Array.isArray(response.payload) && response.payload.length === 0) {
                        const bookingChannel = `admin.pdf.1688.processing.${this.bookingId}`;

                        window.Echo.channel(bookingChannel)
                            .listen('ETLPurchaseOrderTransactionCompleteEvent', this.onComplete);

                        this.isImporting = false;
                        this.resetFileInput();
                    }
                    else{
                        this.isImporting = false;
                        this.fileInputKey += 1;
                    }
                    this.$store.dispatch('reloadList', {'name': 'bookingDetailSection'});
                }
                else if(this.section + 'PDFExport' === section){
                    try {
                        const BOM = '\uFEFF';
                        let csvContent = "stock code,description,quantity,unit price\r\n";
                        response.payload.forEach(item => {
                            const formattedRow = [
                                item.stockCode,
                                this.escapeCSV(item.description),
                                item.quantity,
                                item.unit_price
                            ].join(',');

                            csvContent += formattedRow + "\r\n";
                        });

                        const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
                        const link = document.createElement("a");
                        link.href = URL.createObjectURL(blob);
                        link.setAttribute("download", "order_details.csv");
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);

                        this.parameters.products = response.payload;
                    } catch (e) {
                        console.error("Export failed:", e);
                        alert("Export failed. Please try again.");
                    } finally {
                        this.isExporting = false;
                    }
                }
            },
            errorHandler(response, statusCode, section){
                this.isExporting = false;
                this.isImporting = false;
            },
        },
        mixins: [formHandler]
    }
</script>