Feature/add e shop

public/js/pages/WarehouseArticle/WarehouseArticle.js

@@ -256,6 +256,12 @@ Vue.component('warehouse-article', {
                                    @editPricesEntries="priceModal = true; priceModalId = $event.id"
                                    @editThresholdEntries="thresholdModal = true; thresholdModalId = $event.id">
 
+                      <template v-slot:cheapestsellprice="{ row }">
+                        <template v-for="price in JSON.parse(row.cheapestSellPrice)">
+                          <span v-if="price">{{price.title}}: {{(price.price)}} €</span><br>
+                        </template>
+                      </template>
+
                       <template v-slot:cheapestPurchasePrice="{ row }">
                         <span>{{(row.cheapestPurchasePrice * row.sellPriceMultiplier).toFixed(2)}} €</span>
                       </template>

public/js/pages/WarehouseArticlePacket/WarehouseArticlePacket.js

@@ -0,0 +1,90 @@
+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);
+        })
+
+    }
+})

public/js/pages/WarehouseEShop/WarehouseEShop.js

@@ -63,13 +63,18 @@ Vue.component('warehouse-e-shop', {
 
                   <tt-table-crud>
 
+                    <template v-slot:price="{ row }">
+                      <span v-if="row.hasOwnProperty('calculatedSellPrice')"> {{ row.calculatedSellPrice.toFixed(2) }} €</span>
+                      <span v-else>{{ JSON.parse(row.cheapestSellPrice).find(price => price.title === 'Energie Steiermark').price.toFixed(2) }} €</span>
+                    </template>
+
                     <template v-slot:amount="{ row }">
                       <!-- this has no padding - add a full width full height tt-input with  -->
-                      <tt-input type="number" style="width: 100%; height: 100%;margin:0 !important" v-model="itemAmounts[row.id]"/>
+                      <tt-input type="number" style="width: 100%; height: 100%;margin:0 !important" v-model="itemAmounts[row.hasOwnProperty('calculatedSellPrice') ? 'P-' + row.id : 'I-' + row.id]" sm/>
                     </template>
                     
                     <template v-slot:add="{ row }">
-                      <a style="cursor: pointer;" @click="addToCart(row)">
+                      <a style="cursor: pointer;" @click="addToCart(row, row.hasOwnProperty('calculatedSellPrice') ? 'P' : 'I')">
                         <i class="fas fa-shopping-cart text-primary"></i>
                       </a>
                     </template>
@@ -110,12 +115,16 @@ Vue.component('warehouse-e-shop', {
                         'Ein Fehler ist aufgetreten');
             }
         },
-        addToCart(row) {
+        addToCart(row, type) {
+            row = JSON.parse(JSON.stringify(row));
+            row.id = `${type}-${row.id}`;
             if (!this.itemAmounts[row.id] || this.itemAmounts[row.id] === 0) {
                 window.notify('error', 'Bitte geben Sie eine Menge ein.');
                 return;
             }
 
+            console.log(this.shoppingCart, row)
+
             // Check if Article is already in the shopping cart
             if (this.shoppingCart.some(item => item.itemId === row.id)) {
                 window.notify('warning', `${row.title} ist bereits im Warenkorb.`);