91 lines
4.6 KiB
JavaScript
91 lines
4.6 KiB
JavaScript
Vue.component('WarehouseArticlePacket', {
|
|
//language=Vue
|
|
template: `
|
|
<tt-card>
|
|
<tt-table-crud @openHistory="historyModal = true; historyModalId = $event.id" ref="WarehouseArticlePacketCrud">
|
|
|
|
<template v-slot:subitems="{row}">
|
|
<template v-for="item in JSON.parse(row.subItems)">
|
|
<span v-if="articles.find(article => article.value === item.id)">
|
|
{{item.amount + 'x '}}{{articles.find(article => article.value === item.id).text}}<br>
|
|
</span>
|
|
<span v-else></span>
|
|
</template>
|
|
</template>
|
|
|
|
<template v-slot:subitems-modal="{crudModalData}">
|
|
<!-- TODO: add autocomplete and list with items, each removable, just simple quick-->
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr auto;grid-gap: 8px">
|
|
<tt-autocomplete v-model="subItemsAutocomplete"
|
|
:items="articles"
|
|
ref="subItemsAutocomplete"
|
|
label="Subitems" sm/>
|
|
<tt-input v-model="newSubItemAmount" label="Menge" sm/>
|
|
<button type="button" class="btn btn-primary" @click="addSubItem" style="max-height: 32px; align-self: center">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<ul class="list-group" v-if="typeof subItems !== 'undefined' && subItems.length > 0" :key="updateCounter">
|
|
<template v-for="item in subItems">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Menge {{item.amount}} | Artikel {{articles.find(article => article.value === item.id).text}}
|
|
<button type="button" class="btn btn-danger btn-sm" @click="removeSubItem(item)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<span v-else>Keine Artikel hinzugefügt</span>
|
|
|
|
</template>
|
|
|
|
</tt-table-crud>
|
|
<warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
|
|
</tt-card>
|
|
`, data() {
|
|
return {
|
|
window: window,
|
|
historyModal: false,
|
|
historyModalId: null,
|
|
subItemsAutocomplete: '',
|
|
articles: [],
|
|
updateCounter: 0,
|
|
newSubItemAmount: 1,
|
|
subItems: []
|
|
}
|
|
}, beforeMount() {
|
|
this.articles = window['TT_CONFIG']['CRUD_CONFIG'].columns.find(column => column.key === 'subItems').modal.items;
|
|
}, methods: {
|
|
updateCrudModalData() {
|
|
const ref = this.$refs.WarehouseArticlePacketCrud;
|
|
ref.$set(ref.crudModalData, 'subItems', JSON.stringify(this.subItems));
|
|
this.updateCounter++;
|
|
}, removeSubItem(item) {
|
|
this.subItems = this.subItems.filter(subItem => subItem !== item);
|
|
this.updateCrudModalData();
|
|
}, addSubItem() {
|
|
// only continue if id and amount are set else use window.notify('error', 'Bitte Artikel und Menge auswählen');
|
|
if (this.subItemsAutocomplete === '' || this.newSubItemAmount === '') {
|
|
window.notify('error', 'Bitte Artikel und Menge auswählen');
|
|
return;
|
|
}
|
|
|
|
this.subItems.push({id: this.subItemsAutocomplete, amount: this.newSubItemAmount});
|
|
this.updateCrudModalData();
|
|
this.$refs.subItemsAutocomplete.clear();
|
|
this.newSubItemAmount = 1;
|
|
}
|
|
}, mounted() {
|
|
this.$watch(() => {
|
|
return this.$refs.WarehouseArticlePacketCrud.crudModal
|
|
}, () => {
|
|
// check if this.$refs.WarehouseArticlePacketCrud.crudModalData.subItems is defined
|
|
if (typeof this.$refs.WarehouseArticlePacketCrud.crudModalData.subItems === 'undefined') {
|
|
this.$set(this.$refs.WarehouseArticlePacketCrud.crudModalData, 'subItems', JSON.stringify([]));
|
|
}
|
|
this.subItems = JSON.parse(this.$refs.WarehouseArticlePacketCrud.crudModalData.subItems);
|
|
})
|
|
|
|
}
|
|
})
|