140 lines
6.1 KiB
JavaScript
140 lines
6.1 KiB
JavaScript
|
|
|
|
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: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.hasOwnProperty('calculatedSellPrice') ? 'P-' + row.id : 'I-' + row.id]" sm/>
|
|
</template>
|
|
|
|
<template v-slot:add="{ row }">
|
|
<a style="cursor: pointer;" @click="addToCart(row, row.hasOwnProperty('calculatedSellPrice') ? 'P' : 'I')">
|
|
<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, 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.`);
|
|
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.`);
|
|
|
|
}
|
|
},
|
|
})
|