tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

New basket table, add empty state on basket page, new BasketItemModel

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-09-09 19:47:46 +02:00
parent 6ff577ece1
commit 7ebc3c1c77
14 changed files with 190 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
software/src/pages/basketPage/basketItem.vue
View File

@@ -1,33 +0,0 @@
<script setup lang="ts">
import { ProductModel } from '@/data/models/productModel';
import { useBasketStore } from '@/data/stores/basketStore';
import { calcProductPrice } from '@/scripts/productScripts';
const basketStore = useBasketStore()
defineProps({
product: {
type: ProductModel,
required: true
}
})
function removeProductFromBasket(product: ProductModel) {
basketStore.removeProductFromBasket(product)
}
</script>
<template>
<v-list-item
:title="product.name"
:subtitle="product.brand"
>
<template v-slot:prepend>
<v-btn icon="mdi-delete" flat @click="removeProductFromBasket(product)"/>
</template>
<template v-slot:append>
{{ calcProductPrice(product) }} €
</template>
</v-list-item>
</template>

30
software/src/pages/basketPage/index.vue
View File

@@ -1,32 +1,38 @@
<script setup lang="ts">
import { useBasketStore } from '@/data/stores/basketStore';
import basketItem from './basketItem.vue';
import productsTable from './productsTable.vue';
const basketStore = useBasketStore()
</script>
<template>
<v-container max-width="800">
<v-container max-width="1000">
<v-row>
<v-col>
<v-card title="Warenkorb" >
<v-card-subtitle>
{{ basketStore.productsInBasket.length }} Artikel
<v-card-subtitle v-if="basketStore.itemsInBasket.length > 0">
{{ basketStore.itemsInBasket.length }} Artikel
</v-card-subtitle>
<v-list>
<basket-item
v-for="product in basketStore.productsInBasket"
:product="product"
/>
</v-list>
<products-table v-if="basketStore.itemsInBasket.length > 0" />
<v-card-text class="text-right">
<v-empty-state v-else
icon="mdi-basket-off"
title="Keine Artikel im Warenkorb"
text="Gehe zu unseren Produkten und lege Artikel in den Warenkorb"
/>
<v-card-text class="text-right" v-if="basketStore.itemsInBasket.length > 0">
Total: {{ basketStore.getTotalPrice }} €
</v-card-text>
<v-card-actions>
<v-btn prepend-icon="mdi-basket-check">Bestellen</v-btn>
<v-btn
prepend-icon="mdi-basket-check"
:disabled="basketStore.itemsInBasket.length == 0"
>
Bestellen
</v-btn>
</v-card-actions>
</v-card>
</v-col>

68
software/src/pages/basketPage/productsTable.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup lang="ts">
import { BasketItemModel } from '@/data/models/basketItemModel';
import { useBasketStore } from '@/data/stores/basketStore';
import { calcPrice, calcProductPrice } from '@/scripts/productScripts';
const basketStore = useBasketStore()
function removeFromBasket(basketItem: BasketItemModel) {
basketStore.removeItemFromBasket(basketItem)
}
</script>
<template>
<v-table>
<thead>
<tr>
<th></th>
<th>Category</th>
<th>Brand</th>
<th>Products</th>
<th class="text-center">Quantity</th>
<th class="text-right">Product price</th>
<th class="text-right">Total price</th>
</tr>
</thead>
<tbody>
<tr v-for="basketItem in basketStore.itemsInBasket">
<td><v-btn icon="mdi-delete" flat @click="removeFromBasket(basketItem)"/></td>
<td><v-icon :icon="basketItem.categoryIcon" /> {{ basketItem.categoryName }} </td>
<td>{{ basketItem.brand }}</td>
<td>{{ basketItem.name }}</td>
<td class="text-center">{{ basketItem.quantity }}x</td>
<td class="text-right">
<div v-if="basketItem.discount > 0">
<strong class="font-weight-bold text-body-1 text-red-lighten-1">
{{ calcPrice(basketItem.price, basketItem.discount) }} €
</strong>
<div class="text-decoration-line-through ml-3 mt-1 text-caption">{{ basketItem.price }} €</div>
</div>
<div v-else>
{{ basketItem.price }} €
</div>
</td>
<td class="text-right">
<div v-if="basketItem.discount > 0">
<strong class="font-weight-bold text-body-1 text-red-lighten-1">
{{ calcPrice(basketItem.price, basketItem.discount, basketItem.quantity) }} €
</strong>
<div class="text-decoration-line-through ml-3 mt-1 text-caption">
{{ calcPrice(basketItem.price, 0, basketItem.quantity) }} €
</div>
</div>
<div v-else>
{{ calcPrice(basketItem.price, 0, basketItem.quantity) }} €
</div>
</td>
</tr>
</tbody>
</v-table>
</template>

6
software/src/pages/productsPage/index.vue
View File

@@ -145,5 +145,9 @@ watch(() => onlyDiscounts.value, () => { filterProducts() })
</v-row>
</v-container>
<product-details v-model="showProductDetails" :product="dialogProduct" :productCategory="getCategoryById(dialogProduct.categoryId)" />
<product-details
v-model="showProductDetails"
:product="dialogProduct"
:productCategory="getCategoryById(dialogProduct.categoryId)"
/>
</template>

17
software/src/pages/productsPage/productDetails.vue
View File

@@ -2,10 +2,11 @@
import { VNumberInput } from 'vuetify/labs/VNumberInput'
import { ProductModel } from '@/data/models/productModel';
import { CategoryModel } from '@/data/models/categoryModel';
import { ref } from 'vue';
import { ModelRef, ref } from 'vue';
import { useBasketStore } from '@/data/stores/basketStore';
import { calcProductPrice, productToBasketItem } from '@/scripts/productScripts';
const showDialog = defineModel("showDialog", { type: Boolean })
const showDialog: ModelRef<boolean> = defineModel()
const nrOfArticles = ref(1)
const basketStore = useBasketStore()
@@ -15,7 +16,8 @@ const props = defineProps({
})
function addProductToBasket() {
basketStore.productsInBasket.push(props.product)
basketStore.addItemToBasket(productToBasketItem(props.product, props.productCategory, nrOfArticles.value))
nrOfArticles.value = 1
showDialog.value = false
}
</script>
@@ -46,11 +48,16 @@ function addProductToBasket() {
:hideInput="false"
:inset="false"
v-model="nrOfArticles"
:min="1"
:max="10"
density="comfortable"
/>
</v-col>
<v-col>
{{ nrOfArticles * product.price }} €
<v-spacer />
<v-col cols="2" class="justify-center d-flex">
{{ calcProductPrice(product, nrOfArticles) }} €
</v-col>
</v-row>
</v-card-text>