2024-07-16 06:55:46 +00:00
parent 8b4589523e
commit e75f13f8d8
64 changed files with 3207 additions and 265 deletions
@@ -0,0 +1,130 @@
Vue.component('tt-expandable-shopping-cart', {
    props: {
        cartItems: Array,
    },
    data() {
        return {
            isExpanded: false,
        };
    },
    methods: {
    },
    template: `
  <div class="tt-expandable-shopping-cart" :class="{ expanded: isExpanded }">
    <button class="toggle-button" @click="isExpanded = !isExpanded">
      <i class="fas fa-shopping-cart text-primary"></i>
        <span v-if="cartItems.length > 0 && isExpanded" class="btn btn-primary" @click.prevent="$emit('submitOrder')">Bestellen</span>
      <span class="cart-count" v-if="cartItems.length > 0">{{ cartItems.length }}</span>
      <!-- add arrow down icon when cart is expanded additionally with v-if -->
        <i v-if="isExpanded" class="fas fa-arrow-down text-danger" style="font-size:21px;grid-column: 4;"></i>
    </button>
    <div class="cart-content" v-if="isExpanded">
      <div v-if="cartItems.length > 0">
        <h3>Einkaufswagen</h3>
        <ul class="list-group">
          <template v-for="item in cartItems">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            {{ item.title }}
            <span class="badge badge-primary badge-pill">{{ item.amount }}</span>
          </li>
            </template>
        </ul>
      </div>
      <p v-else>Der Einkaufswagen ist leer.</p>
    </div>
  </div>
  `
});
Vue.component('warehouse-e-shop', {
    //language=Vue
    template: `
                <tt-card>
                  <tt-expandable-shopping-cart :cart-items="shoppingCart" @submitOrder="openOrderDialog"/>
                  <tt-modal :show.sync="createOrderDialog"
                            :delete="false"
                            title="Bestellung abschicken"
                            @submit="submitOrder">
                    
                    <tt-select v-model="createOrderDialogData.deliveryMode" label="Adresse" :options="[
                        {text: 'Einzelne Adresse', value: 'singleAddress'},
                        {text: 'Mehrere Adressen', value: 'multipleAddresses'},
                    ]" sm row/>
                    <tt-input v-model="createOrderDialogData.deliveryAddressName" label="Name" sm row/>
                    <tt-input v-model="createOrderDialogData.deliveryAddressLine" label="Straße" sm row/>
                    <tt-input v-model="createOrderDialogData.deliveryAddressPLZ" label="PLZ" sm row/>
                    <tt-input v-model="createOrderDialogData.deliveryAddressCity" label="Stadt" sm row/>
                    
                  </tt-modal>
                  <tt-table-crud>
                    <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]"/>
                    </template>
                    
                    <template v-slot:add="{ row }">
                      <a style="cursor: pointer;" @click="addToCart(row)">
                        <i class="fas fa-shopping-cart text-primary"></i>
                      </a>
                    </template>
                    
                  </tt-table-crud>
                </tt-card>
              `, data() {
        return {
            window: window, itemAmounts: {}, shoppingCart: [], createOrderDialog: false, createOrderDialogData: {
                deliveryMode: 'singleAddress',
                deliveryAddressName: '',
                deliveryAddressLine: '',
                deliveryAddressPLZ: '',
                deliveryAddressCity: '',
            },
        }
    },
    methods: {
        async openOrderDialog() {
            this.createOrderDialog = true;
        },
        async submitOrder() {
            const response = await axios.post(`${window['TT_CONFIG']['BASE_PATH']}/WarehouseEShopOrder/createOrder`, {
                shoppingCart: this.shoppingCart,
                deliveryMode: this.createOrderDialogData.deliveryMode,
                deliveryAddressName: this.createOrderDialogData.deliveryAddressName,
                deliveryAddressLine: this.createOrderDialogData.deliveryAddressLine,
                deliveryAddressPLZ: this.createOrderDialogData.deliveryAddressPLZ,
                deliveryAddressCity: this.createOrderDialogData.deliveryAddressCity,
            });
            if (response.data.success) {
                this.window.notify('success', response.data.message || 'Erfolgreich gespeichert');
                this.shoppingCart = [];
                this.createOrderDialog = false;
            } else {
                this.window.notify('error',
                    response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message ||
                        'Ein Fehler ist aufgetreten');
            }
        },
        addToCart(row) {
            if (!this.itemAmounts[row.id] || this.itemAmounts[row.id] === 0) {
                window.notify('error', 'Bitte geben Sie eine Menge ein.');
                return;
            }
            // 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.`);
                return;
            }
            this.shoppingCart.push({itemId: row.id, title: row.title, amount: this.itemAmounts[row.id]});
            window.notify('success', `${this.itemAmounts[row.id]}x ${row.title} wurde dem Warenkorb hinzugefügt.`);
        }
    },
})