[ADD] product pack component

src/components/common/CartItem.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-    li.cart-item(:class="{'cart-item-invalid': !isValid()}")
+    li.cart-item(:class="{ 'cart-item-invalid': !isValid() }" :style="{ height: itemHeight + 'px' }")
         h3.item-name {{ item.name }}
         input.item-quantity(
             type='number'
@@ -11,6 +11,16 @@
         span.item-price {{ item.price | currency(...currencyOptions) }}
         span.item-equals =
         span.item-subtotal {{ (item.price * (item.quantity || 1)) | currency(...currencyOptions) }}
+        .item-packs-wrapper
+            ul.item-packs
+                li.item-pack(
+                    v-for='(pack, index) in item.packs'
+                    :key='index'
+                ) 
+                    span.pack-index {{ index + 1 }}.
+                    h3.pack-name {{ pack.name }}
+                    span.pack-x x
+                    span.pack-quantity {{ pack.quantity }}
         .cart-item-options-wrapper
             .cart-item-options
                 .cart-item-option(
@@ -119,6 +129,7 @@
                 console.log(e)
             },
             onChange(item) {
+                this.itemHeight = this.itemHeight + (item.packs.length * 30) 
                 this.$emit('onChange', item)
             },
             onClickIncrement() {
@@ -152,7 +163,8 @@
             return {
                 editing: false,
                 input: 0,
-                inputDaemon: null
+                inputDaemon: null,
+                itemHeight: 90
             }
         }
     }
@@ -162,7 +174,6 @@
     @import '../../assets/variables'
     .cart-item
         width: 100%
-        height: 90px
         list-style: none outside none
         border-bottom: 1px solid $app-border-color
         box-sizing: border-box
@@ -219,6 +230,33 @@
             text-align: right
             font-weight: bold
             display: inline-block
+        .item-packs-wrapper
+            margin-top: 10px
+            .item-packs
+                list-style: none
+                padding-left: 10px
+                .item-pack
+                    padding-top: 5px
+                    padding-bottom: 2px
+                    .pack-index
+                        display: inline-block
+                        width: 20px
+                        font-size: 8pt
+                    .pack-name
+                        display: inline-block
+                        width: 120px
+                        margin: 0
+                        font-size: 8pt
+                    .pack-x
+                        display: inline-block
+                        width: 20px
+                        margin: 0
+                        font-size: 8pt
+                    .pack-quantity
+                        display: inline-block
+                        width: 50px
+                        margin: 0
+                        font-size: 8pt
         .cart-item-options-wrapper
             width: 100%
             height: 20px

src/store/actions.js

@@ -158,7 +158,8 @@ const actions = {
                         id: item.id,
                         quantity: item.quantity,
                         price: item.price,
-                        listPrice: item.listPrice
+                        listPrice: item.listPrice,
+                        packs: item.packs
                     }
                 }),
                 customerId: getters.selectedCustomer.id,

src/store/modules/cart.js

@@ -15,10 +15,10 @@ const getters = {
                 item.packs = []
 
                 for (let pack of getters.packs) {
-                    if (item.id !== pack.productId) {
+                    if (item.id !== pack.parentProduct) {
                         continue
                     }
-
+                    
                     item.packs.push(pack)
                 }
             }