thetool/public/js/pages/WarehouseEShopOrder/WarehouseEShopOrder.js

// noinspection JSUnusedLocalSymbols
Vue.component('warehouse-e-shop-order', {
    //language=Vue
    template: `
                <tt-card>
                  <tt-table-crud @openHistory="historyModal = true; historyModalId = $event.id"
                                 @openSingleOrderEmail="openSingleOrderEmailModal = true; singleOrderEmailModalId = $event.id"
                                 @createShippingNote="createShippingNote($event.id)"
                                 @showTrackingHistory="openTrackingHistoryModal = true; trackingHistoryModalId = $event.id"
                                 ref="table">

                    <template v-slot:table-top-buttons>
                      <button @click="createCSVExportAndMarkAsAccepted" type="button" class="btn btn-outline-success">
                        <i class="fas fa-file-excel"></i>
                        Excel Export für neue Bestellungen
                      </button>
                    </template>

                    <template v-slot:create="{ row }">
                      {{ window.moment(row.create * 1000).format('DD.MM.YYYY HH:mm:ss') }}
                    </template>

                    <template v-slot:expandedRow="{ row }">
                      <div>
                        <ul class="list-group" v-if="articleItems && articleItems[row.id]">
                          <li class="list-group-item" v-for="item in articleItems[row.id]">
                            Menge: {{ item.quantity }} | {{ item.articlePacketTitle || item.articleTitle }}
                          </li>
                        </ul>
                      </div>
                    </template>

                  </tt-table-crud>
                  <warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>

                  <!--                  add a tt-modal which just shows some text from the api to show a email for a single order-->
                  <tt-modal :show.sync="openSingleOrderEmailModal"
                            :title="'Email für Bestellung ' + singleOrderEmailModalId"
                            @close="openSingleOrderEmailModal = false"
                            save-text="E-Mail senden"
                            @submit="sendSingleOrderEmail"
                            :delete="false"
                  >
                    <div v-if="singleOrderEmailModalId && singleOrderEmailModalText">
                      <p v-html="singleOrderEmailModalText.body.replaceAll('\\n', '<br>')"></p>
                    </div>
                    <!--                    else show loader-->
                    <div v-else>
                      <tt-loader/>
                    </div>
                  </tt-modal>

                  <tt-modal :show.sync="openTrackingHistoryModal"
                            :title="'Tracking Historie für Bestellung ' + trackingHistoryModalId"
                            @close="openTrackingHistoryModal = false"
                            :delete="false"
                            :save="false"
                  >
                    <div v-if="trackingHistoryModalData">
                      <ul class="list-group">
                        <li class="list-group item" v-for="entry in trackingHistoryModalData.history">
                            <strong>{{ entry.date }} {{ entry.time }}</strong> - {{ entry.evtDscr }}
                        </li>
                        </ul>
                    </div>
                    
                  </tt-modal>


                </tt-card>
              `, data() {
        return {
            window:                    window,
            historyModal:              false,
            historyModalId:            null,
            articleItems:              null,
            openSingleOrderEmailModal: false,
            singleOrderEmailModalId:   null,
            singleOrderEmailModalText: null,
            openTrackingHistoryModal:  false,
            trackingHistoryModalId:    null,
            trackingHistoryModalData:  null,
        }
    }, async mounted() {
        const response = await axios.get(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseEShopOrder/getAllItemsPerOrder`);
        this.articleItems = response.data;
    }, methods: {
        async createShippingNote(id) {
            const response = await axios.get(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseEShopOrder/createShippingNote?id=${id}`);

            window.notify(response.data.success === true ? 'success' : 'info', response.data.message);
            if (response.data.shippingNoteId) {
                window.open(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseShippingNote/createPDF?id=${response.data.shippingNoteId}&price=true`, '_blank');
            }
        },
        async sendSingleOrderEmail() {
            const response = await axios.get(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseEShopOrder/singleOrderEmail?id=${this.singleOrderEmailModalId}`);
            if (response.data.message) {
                window.notify(response.data.success === true ? 'success' : 'error', response.data.message);
                this.openSingleOrderEmailModal = false;
            } else {
                window.notify('error', 'Ein Fehler ist aufgetreten');
            }
            await this.$refs.table.$refs.table.fetchData();
        }, async createCSVExportAndMarkAsAccepted() {
            const response = await axios.post(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseEShopOrder/CSVExportNewOrdersMarkAccepted`);

            if (response.data.message) {
                window.notify(response.data.success === true ? 'success' : 'error', response.data.message);
                return;
            }

            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = '/plugins/xlsx/xlsx.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            })

            const wb = this.window.XLSX.utils.book_new();

            const ws = this.window.XLSX.utils.json_to_sheet(response.data);

            for (const cell in ws) {
                if (cell.startsWith('!')) continue; // Skip non-cell properties like '!ref'
                const cellValue = ws[cell].v;
                if (cellValue?.toString().includes('\n')) {
                    // console.log('Found newline in cell:', cell, cellValue);
                    if (!ws[cell].s) ws[cell].s = {};
                    ws[cell].s.alignment = {wrapText: true, vertical: 'center'};
                } else {
                    ws[cell].s = {alignment: {vertical: 'center'}};
                }
            }

            this.window.XLSX.utils.book_append_sheet(wb, ws, "Export");
            this.window.XLSX.writeFile(wb, 'Export.xlsx');

            await this.$refs.table.$refs.table.fetchData();
        }
    }, watch:   {
        singleOrderEmailModalId() {
            this.openSingleOrderEmailModal = !!this.singleOrderEmailModalId;
            this.singleOrderEmailModalText = null;
            if (this.singleOrderEmailModalId) {
                axios.get(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseEShopOrder/singleOrderEmail?id=${this.singleOrderEmailModalId}&dryRun=true`)
                    .then(response => this.singleOrderEmailModalText = response.data)
                    .catch(error => window.notify('error', error.response?.data?.message || 'Ein Fehler ist aufgetreten'));
            }
        },
        async trackingHistoryModalId() {
            this.openTrackingHistoryModal = !!this.trackingHistoryModalId;
            this.trackingHistoryModalData = null;
            if (this.trackingHistoryModalId) {
                const response = await axios.get(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseEShopOrder/fetchGLSTracking?id=${this.trackingHistoryModalId}`);
                const data = response.data;
                // if data is a empty string, show error
                if (!data) {
                    window.notify('error', data.message || 'Keine Daten gefunden');
                    return;
                }
                // if data is not empty, show data
                this.$set(this, 'trackingHistoryModalData', data);
            }
        }
    }
})