Store products in a basket, display list of products in basket

software/src/pages/ProductsPage.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  Products
-</template>

software/src/pages/basketPage/basketItem.vue

@@ -0,0 +1,33 @@
+<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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useBasketStore } from '@/data/stores/basketStore';
+import basketItem from './basketItem.vue';
+
+const basketStore = useBasketStore()
+</script>
+
+<template>
+  <v-container max-width="800">
+    <v-row>
+      <v-col>
+        <v-card title="Warenkorb" >
+          <v-card-subtitle>
+            {{ basketStore.productsInBasket.length }} Artikel
+          </v-card-subtitle>
+
+          <v-list>
+            <basket-item
+              v-for="product in basketStore.productsInBasket"
+              :product="product"
+            />
+          </v-list>
+
+          <v-card-text class="text-right">
+            Total: {{ basketStore.getTotalPrice }} €
+          </v-card-text>
+
+          <v-card-actions>
+            <v-btn prepend-icon="mdi-basket-check">Bestellen</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

software/src/pages/productsPage/index.vue

@@ -114,34 +114,36 @@ watch(() => onlyDiscounts.value, () => { filterProducts() })
 </script>
 
 <template>
-  <v-row>
-    <v-col>
-      <filter-bar
-        :number-of-items="filteredProducts.length"
-        :categories="categories"
-        :sort-by="sortBy"
-        v-model:selected-category="selectedCategory"
-        v-model:sorted-by="sortedBy"
-        v-model:only-discounts="onlyDiscounts"
-      />
-    </v-col>
-  </v-row>
-  <v-row dense>
-    <v-col v-if="filteredProducts.length > 0" v-for="product in filteredProducts" cols="6" lg="4" xl="3">
-      <product-card
-        :product="product"
-        :category="getCategoryById(product.categoryId)"
-        @click="showProductDialog(product)"
-      />
-    </v-col>
-    
-    <v-col v-else>
-      <v-empty-state
-        icon="mdi-magnify"
-        headline="Keine Artikel gefunden"
-      />
-    </v-col>
-  </v-row>
+  <v-container>
+    <v-row>
+      <v-col>
+        <filter-bar
+          :number-of-items="filteredProducts.length"
+          :categories="categories"
+          :sort-by="sortBy"
+          v-model:selected-category="selectedCategory"
+          v-model:sorted-by="sortedBy"
+          v-model:only-discounts="onlyDiscounts"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col v-if="filteredProducts.length > 0" v-for="product in filteredProducts" cols="12" sm="6" lg="4" xl="3">
+        <product-card
+          :product="product"
+          :category="getCategoryById(product.categoryId)"
+          @click="showProductDialog(product)"
+        />
+      </v-col>
+      
+      <v-col v-else>
+        <v-empty-state
+          icon="mdi-magnify"
+          headline="Keine Artikel gefunden"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 
   <product-details v-model="showProductDetails" :product="dialogProduct" :productCategory="getCategoryById(dialogProduct.categoryId)" />
 </template>

software/src/pages/productsPage/productDetails.vue

@@ -3,14 +3,21 @@ import { VNumberInput } from 'vuetify/labs/VNumberInput'
 import { ProductModel } from '@/data/models/productModel';
 import { CategoryModel } from '@/data/models/categoryModel';
 import { ref } from 'vue';
+import { useBasketStore } from '@/data/stores/basketStore';
 
 const showDialog = defineModel("showDialog", { type: Boolean })
 const nrOfArticles = ref(1)
+const basketStore = useBasketStore()
 
-defineProps({
+const props = defineProps({
   product: ProductModel,
   productCategory: CategoryModel
 })
+
+function addProductToBasket() {
+  basketStore.productsInBasket.push(props.product)
+  showDialog.value = false
+}
 </script>
 
 <template>
@@ -49,7 +56,12 @@ defineProps({
       </v-card-text>
 
       <v-card-actions>
-        <v-btn prepend-icon="mdi-cart-plus" >Zum Einkaufswagen hinzufügen</v-btn>
+        <v-btn
+          prepend-icon="mdi-cart-plus"
+          @click="addProductToBasket"
+        >
+          Zum Einkaufswagen hinzufügen
+        </v-btn>
       </v-card-actions>
     </v-card>