Create product cards, display all on products page

software/src/pages/productsPage/filterBar.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { CategoryModel } from '@/data/models/categoryModel';
+import { FilterModel } from '@/data/models/filterModel';
+import axios from 'axios';
+import { Ref, ref } from 'vue';
+
+// Parameters
+defineProps({
+  numberOfItems: {
+    type: Number,
+    default: 0
+  }
+})
+
+// Constants
+const categories: Ref<Array<CategoryModel>> = ref([new CategoryModel()])
+const selectedCategory: Ref<CategoryModel> = ref(new CategoryModel())
+
+const sortBy: Array<FilterModel> = [
+  { icon: "mdi-sort-ascending", name: "Price: Low to high" }, 
+  { icon: "mdi-sort-descending", name: "Price: High to low" },
+  { icon: "mdi-sort-alphabetical-ascending", name: "Name: A to Z" }, 
+  { icon: "mdi-sort-alphabetical-descending", name: "Name: Z to A" },
+]
+const sortedBy = ref(sortBy[0])
+
+
+// Request from the database
+axios.get("http://127.0.0.1:3000/categories")
+  .then(function (response) { 
+    for (let categoryItem of response.data) {
+      categories.value.push(categoryItem)
+    }
+})
+</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">
+            {{ numberOfItems }} Produkt
+          </div>
+          <div v-else>
+            {{ numberOfItems }} Produkte
+          </div>
+        </v-col>
+
+        <v-spacer />
+        <v-col class="d-flex justify-center align-center">
+          <v-checkbox label="Angebote" />
+        </v-col>
+
+        <v-col>
+          <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" />
+            </template>
+
+            <template v-slot:selection="{ item }">
+              <v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
+            </template>
+          </v-select>
+        </v-col>
+
+        <v-col>
+          <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" />
+            </template>
+
+            <template v-slot:selection="{ item }">
+              <v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
+            </template>
+          </v-select>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>

software/src/pages/productsPage/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import productCard from "./productCard.vue"
+import filterBar from "./filterBar.vue"
+import axios from "axios";
+import { Ref, ref } from "vue";
+import { ProductModel } from "@/data/models/productModel";
+import { CategoryModel } from "@/data/models/categoryModel";
+
+const products: Ref<Array<ProductModel>> = ref<Array<ProductModel>>([])
+const categories: Ref<Array<CategoryModel>> = ref<Array<CategoryModel>>([])
+
+
+axios.get("http://127.0.0.1:3000/categories")
+  .then(function (response) {
+    categories.value = response.data
+  })
+
+axios.get("http://127.0.0.1:3000/products")
+  .then(function (response) {
+    products.value = response.data
+  })
+
+function getCategoryById(id: number) {
+  return categories.value.find(category => 
+    category.id === id
+  )
+}
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <filter-bar :number-of-items="products.length" />
+    </v-col>
+  </v-row>
+  <v-row dense>
+    <v-col v-for="product in products" cols="6" lg="4" xl="3">
+      <product-card :product="product" :category="getCategoryById(product.categoryId)" />
+    </v-col>
+  </v-row>
+</template>

software/src/pages/productsPage/productCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { CategoryModel } from '@/data/models/categoryModel';
+import { ProductModel } from '@/data/models/productModel';
+
+defineProps({
+  product: {
+    required: true,
+    type: ProductModel
+  },
+  category: {
+    type: CategoryModel
+  },
+})
+</script>
+
+<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"
+      cover
+      max-height="200"
+      class="align-end text-white"
+    >
+      <v-card-title>
+        {{ product.name }}
+      </v-card-title>
+
+      <v-card-subtitle class="mb-2">
+        <div><v-icon :icon="category.icon" /> {{ category.name }}</div>
+      </v-card-subtitle>
+    </v-img>
+    
+    <v-card-text>
+      <v-rating
+        size="medium"
+        :model-value="product.rating"
+        active-color="yellow-darken-1"
+        color="grey-darken-1"
+        half-increments
+      />
+
+
+      <div v-if="product.discount == 0" class="font-weight-bold text-body-1">{{ product.price }} €</div>
+      <div v-else class="">
+        <div class="d-flex justify-left flex-row">
+          <strong class="font-weight-bold text-body-1 text-red-lighten-1">
+            {{ (product.price * ( 100 - product.discount) / 100).toFixed(2) }} €
+          </strong>
+
+          <div class="text-decoration-line-through ml-3 mt-1">{{ product.price }} €</div>
+          <div class="ml-4 mb-1 bg-red">-{{ product.discount }} %</div>
+        </div>
+      </div>
+      
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.v-card :deep(img) {
+  filter: brightness(40%)
+}
+
+.v-card:hover :deep(img) {
+  filter: brightness(70%)
+}
+</style>

software/src/pages/productsPage/productDetails.vue

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