71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
// noinspection JSUnusedLocalSymbols
|
|
Vue.component('warehouse-order', {
|
|
//language=Vue
|
|
template: `
|
|
<tt-card>
|
|
<tt-table-crud @openHistory="historyModal = true; historyModalId = $event.id"
|
|
ref="table">
|
|
|
|
<template v-slot:create="{ row }">
|
|
{{ window.moment(row.create * 1000).format('DD.MM.YYYY HH:mm:ss') }}
|
|
</template>
|
|
|
|
<template v-slot:sum="{ row }">
|
|
<div style="text-align: right">{{ row.sum.toFixed(2) }} €</div>
|
|
</template>
|
|
|
|
<template v-slot:expandedRow="{ row }">
|
|
<div class="lazy-loading" :data-row-id="row.id">
|
|
<tt-loader v-if="orderLazyLoad[row.id] === true"/>
|
|
<div v-else>
|
|
<ul class="list-group">
|
|
<li class="list-group-item" v-for="item in orderLazyLoad[row.id]">
|
|
{{ item.quantity }}x {{ item.articleName }} - {{ item.price.toFixed(2) }} €
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</tt-table-crud>
|
|
<warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
|
|
</tt-card>
|
|
`, data() {
|
|
return {
|
|
window: window, historyModal: false, historyModalId: null, observer: null, orderLazyLoad: {},
|
|
}
|
|
}, mounted() {
|
|
this.observer = new MutationObserver((mutations) => {
|
|
const lazyLoadingElements = document.querySelectorAll('.lazy-loading');
|
|
console.log(lazyLoadingElements);
|
|
|
|
// check row id and check if it is already defined in orderLazyLoad else alert('loading')
|
|
// if it is defined do nothing
|
|
|
|
for (const element of lazyLoadingElements) {
|
|
if (element.dataset.rowId in this.orderLazyLoad) {
|
|
continue;
|
|
}
|
|
this.loadOrder(element.dataset.rowId);
|
|
}
|
|
|
|
})
|
|
this.observer.observe(document.querySelector('.tt-table-container'), {childList: true, subtree: true,});
|
|
}, methods: {
|
|
async loadOrder(rowId) {
|
|
this.orderLazyLoad[rowId] = true;
|
|
// use BASE_PATH . /WarehouseOrder/getOrderItems?id= + rowId
|
|
const response = await axios.post(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder/getOrderItems?id=${rowId}`);
|
|
console.log(response.data);
|
|
this.orderLazyLoad[rowId] = response.data;
|
|
|
|
// force re-render of the table
|
|
this.$refs.table.$forceUpdate();
|
|
|
|
|
|
}
|
|
}, beforeDestroy() {
|
|
this.observer.disconnect();
|
|
}
|
|
})
|