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

software/src/App.vue

@@ -41,7 +41,7 @@ requestAllCategories()
         <v-list-item title="Produkte" prepend-icon="mdi-store" to="/products" link />
         <v-list-item to="/basket" link title="Warenkorb">
           <template v-slot:prepend>
-            <v-badge color="primary" :content="basketStore.productsInBasket.length">
+            <v-badge color="primary" :content="basketStore.itemsInBasket.length">
               <v-icon icon="mdi-cart" />
             </v-badge>
           </template>

software/src/data/models/basketItemModel.ts

@@ -0,0 +1,10 @@
+export class BasketItemModel {
+  productId: number = -1
+  brand: string = ""
+  name: string = ""
+  categoryName: string = ""
+  categoryIcon: string = ""
+  price: number = 0
+  discount: number = 0
+  quantity: number = 1
+}

software/src/data/models/orderedItemModel.ts

@@ -0,0 +1,6 @@
+export class OrderedItemModel {
+  orderId: number = -1
+  productId: number = -1
+  quantity: number = 1
+  totalPrice: number = 0
+}

software/src/data/models/productModel.ts

@@ -7,7 +7,6 @@ export class ProductModel {
   price: number = 0
   discount: number = 0
   rating: number = 1
-  nrOfArticles: number = 2
   imageUrl: string = ""
   createdAt: string = ""
   updatedAt: string = ""

software/src/data/stores/basketStore.ts

@@ -1,30 +1,39 @@
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
-import { ProductModel } from "../models/productModel";
 import { calcProductPrice } from "@/scripts/productScripts";
+import { BasketItemModel } from "../models/basketItemModel";
 
 export const useBasketStore = defineStore('basket', {
   state: () => ({
-    productsInBasket: useLocalStorage<Array<ProductModel>>("hackmycart/basketStore/productsInBasket", [])
+    itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", [])
   }),
 
   getters: {
     getTotalPrice() {
       let result = 0
 
-      for (let product of this.productsInBasket) {
-        result += calcProductPrice(product)
+      for (let item of this.itemsInBasket) {
+        result += calcProductPrice(item, item.quantity)
       }
 
-      return result
+      return Math.round(result * 100) / 100
     }
   },
 
   actions: {
-    removeProductFromBasket(product: ProductModel) {
-      this.productsInBasket = this.productsInBasket.filter((p: ProductModel) => 
-        p.id != product.id
+    removeItemFromBasket(item: BasketItemModel) {
+      this.itemsInBasket = this.itemsInBasket.filter((basketItemModel: BasketItemModel) => 
+        basketItemModel.productId != item.productId
       )
+    },
+
+    addItemToBasket(item: BasketItemModel) {
+      // Product is already in the basket, increase number of items
+      if (this.itemsInBasket.find((basketItem) => basketItem.productId == item.productId)) {
+        this.itemsInBasket.find((basketItem) => basketItem.productId == item.productId).quantity += item.quantity
+      } else {
+        this.itemsInBasket.push(item)
+      }
     }
   }
 })

software/src/pages/basketPage/basketItem.vue

@@ -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>

software/src/pages/basketPage/index.vue

@@ -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>

software/src/pages/basketPage/productsTable.vue

@@ -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>

software/src/pages/productsPage/index.vue

@@ -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>

software/src/pages/productsPage/productDetails.vue

@@ -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>

software/src/scripts/productScripts.ts

@@ -1,5 +1,44 @@
+import { BasketItemModel } from "@/data/models/basketItemModel";
+import { CategoryModel } from "@/data/models/categoryModel";
 import { ProductModel } from "@/data/models/productModel";
 
-export function calcProductPrice(product: ProductModel): number {
-  return Math.round(product.price * ((100 - product.discount) / 100) * 100) / 100
-} 
+export function calcProductPrice(product: ProductModel, quantity: number = 1): number {
+  return calcPrice(product.price, product.discount, quantity)
+}
+
+/**
+ * Calculate a price based on parameters
+ * 
+ * @param price Original price for one unit
+ * @param discount Discount in percent
+ * @param quantity Number of units
+ * 
+ * @returns Price rounded to two digits
+ */
+export function calcPrice(price: number, discount: number = 0, quantity: number = 1): number {
+  return Math.round(quantity * price * ((100 - discount) / 100) * 100) / 100
+}
+
+/**
+ * Convert a ProductModel to a BasketModel
+ * 
+ * @param product ProductModel to convert
+ * @param productCategory Category of the product
+ * @param quantity Number of units
+ * 
+ * @returns BasketItemModel
+ */
+export function productToBasketItem(product: ProductModel, productCategory: CategoryModel, quantity: number): BasketItemModel {
+  let result = new BasketItemModel()
+
+  result.productId = product.id
+  result.quantity = quantity
+  result.price = product.price
+  result.brand = product.brand
+  result.discount = product.discount
+  result.name = product.name
+  result.categoryName = productCategory.name
+  result.categoryIcon = productCategory.icon
+
+  return result
+}