1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<style lang="scss">
.lpQtySubtotal {
padding-right: 25px; /* Accommodates delete column */
}
.lpPriceSubtotal { /* unused? */
padding-right: 4px;
}
</style>
<template>
<li :id="category.id" class="lpCategory">
<ul class="lpItems lpDataTable">
<li class="lpHeader lpItemsHeader">
<span class="handleCell">
<div class="handle lpCategoryHandle" title="Reorder this category" />
</span>
<input v-focus-on-create="category._isNew" type="text" :value="category.name" placeholder="Category Name" class="lpCategoryName lpSilent" @input="updateCategoryName">
<span v-if="library.optionalFields['price']" class="lpPriceCell">Price</span>
<span class="lpWeightCell">Weight</span>
<span class="lpQtyCell">qty</span>
<span class="lpRemoveCell"><a class="lpRemove lpRemoveCategory" title="Remove this category" @click="removeCategory(category)"><i class="lpSprite lpSpriteRemove" /></a></span>
</li>
<item v-for="itemContainer in itemContainers" :key="itemContainer.item.id" :item-container="itemContainer" :category="category" @keyup.enter.native="newItem" />
<li class="lpFooter lpItemsFooter">
<span class="lpAddItemCell">
<a class="lpAdd lpAddItem" @click="newItem"><i class="lpSprite lpSpriteAdd" />Add new item</a>
</span>
<span v-if="library.optionalFields['price']" class="lpPriceCell lpNumber lpSubtotal">
{{ category.subtotalPrice | displayPrice(library.currencySymbol) }}
</span>
<span class="lpWeightCell lpNumber lpSubtotal">
<span class="lpDisplaySubtotal">{{ category.subtotalWeight | displayWeight(library.totalUnit) }}</span>
<span class="lpSubtotalUnit">{{ library.totalUnit }}</span>
</span>
<span class="lpQtyCell lpSubtotal">
<span class="lpQtySubtotal">{{ category.subtotalQty }}</span>
</span>
<span class="lpRemoveCell" />
</li>
</ul>
</li>
</template>
<script>
import mixinUtils from '../utils/mixin.js';
import item from './item.vue';
export default {
name: 'Category',
components: {
item,
},
mixins: [mixinUtils],
props: ['category'],
computed: {
library() {
return this.$store.state.library;
},
itemContainers() {
return this.category.categoryItems.map(categoryItem => ({ categoryItem, item: this.library.getItemById(categoryItem.itemId) }));
},
},
methods: {
newItem() {
this.$store.commit('newItem', { category: this.category, _isNew: true });
},
updateCategoryName(evt) {
this.$store.commit('updateCategoryName', { id: this.category.id, name: evt.target.value });
},
removeCategory(category) {
const callback = function () {
this.$store.commit('removeCategory', category);
};
const speedbumpOptions = {
body: 'Are you sure you want to delete this category? This cannot be undone.',
};
bus.$emit('initSpeedbump', callback, speedbumpOptions);
},
},
};
</script>