Product images

software/src/data/models/productModel.ts

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

software/src/pages/productsPage/filterBar.vue

@@ -25,24 +25,23 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole
 </script>
 
 <template>
-  <v-card title="Filter" prepend-icon="mdi-filter">
-    <v-container>
-      <v-row>
-        <v-col class="d-flex justify-left align-center">
-          <div v-if="numberOfItems == 1">
+  <v-card>
+    <v-card-title>
+      <div v-if="numberOfItems == 1">
             {{ numberOfItems }} Produkt
           </div>
           <div v-else>
             {{ numberOfItems }} Produkte
           </div>
-        </v-col>
-
+    </v-card-title>
+    <v-container class="pb-0">
+      <v-row>
         <v-spacer />
         <v-col class="d-flex justify-center align-center">
           <v-checkbox label="Angebote" v-model="onlyDiscounts" />
         </v-col>
 
-        <v-col>
+        <v-col class="d-flex justify-left align-center">
           <v-select :items="categories" label="Categories" v-model="selectedCategory" >
             <template v-slot:item="{ props, item }">
               <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
@@ -54,7 +53,7 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole
           </v-select>
         </v-col>
 
-        <v-col>
+        <v-col class="d-flex justify-left align-center">
           <v-select label="Sortieren nach" :items="sortBy" v-model="sortedBy" >
             <template v-slot:item="{ props, item }">
               <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />

software/src/pages/productsPage/productCard.vue

@@ -16,7 +16,7 @@ defineProps({
 <template>
   <v-card link>
     <v-img
-      src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=799&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      :src="product.imageUrl"
       cover
       max-height="200"
       class="align-end text-white"