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

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>