Filter products by category and discount, sort by price and name

software/src/pages/productsPage/filterBar.vue

@@ -1,37 +1,27 @@
 <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
+  },
+  categories: {
+    type: Array<CategoryModel>,
+    required: true
+  },
+  sortBy: {
+    type: Array<FilterModel>,
+    required: true
   }
 })
 
 // Constants
-const categories: Ref<Array<CategoryModel>> = ref([new CategoryModel()])
+const selectedCategory = defineModel("selectedCategory", { required: true, type: CategoryModel, default: new CategoryModel() })
-const selectedCategory: Ref<CategoryModel> = ref(new CategoryModel())
+const sortedBy = defineModel("sortedBy", { required: true, type: FilterModel })
-
+const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boolean })
-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>
@@ -49,7 +39,7 @@ axios.get("http://127.0.0.1:3000/categories")
 
         <v-spacer />
         <v-col class="d-flex justify-center align-center">
-          <v-checkbox label="Angebote" />
+          <v-checkbox label="Angebote" v-model="onlyDiscounts" />
         </v-col>
 
         <v-col>

software/src/pages/productsPage/index.vue

@@ -2,22 +2,40 @@
 import productCard from "./productCard.vue"
 import filterBar from "./filterBar.vue"
 import axios from "axios";
-import { Ref, ref } from "vue";
+import { Ref, ref, watch } from "vue";
 import { ProductModel } from "@/data/models/productModel";
 import { CategoryModel } from "@/data/models/categoryModel";
+import { FilterModel } from "@/data/models/filterModel";
 
 const products: Ref<Array<ProductModel>> = ref<Array<ProductModel>>([])
-const categories: Ref<Array<CategoryModel>> = ref<Array<CategoryModel>>([])
+const filteredProducts: Ref<Array<ProductModel>> = ref<Array<ProductModel>>([])
+const categories: Ref<Array<CategoryModel>> = ref<Array<CategoryModel>>([new CategoryModel()])
+const selectedCategory: Ref<CategoryModel> = ref<CategoryModel>(new CategoryModel())
+const sortedBy: Ref<FilterModel> = ref<FilterModel>()
+const onlyDiscounts: Ref<boolean> = ref(false)
 
+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" },
+]
+
+sortedBy.value = sortBy[0]
 
 axios.get("http://127.0.0.1:3000/categories")
   .then(function (response) {
-    categories.value = response.data
+    for (let category of response.data) {
+      categories.value.push(category)
+    }
   })
 
 axios.get("http://127.0.0.1:3000/products")
   .then(function (response) {
     products.value = response.data
+    filteredProducts.value = response.data
+
+    sortProducts()
   })
 
 function getCategoryById(id: number) {
@@ -25,17 +43,91 @@ function getCategoryById(id: number) {
     category.id === id
   )
 }
+
+
+function sortProducts() {
+  switch (sortedBy.value.name) {
+    case sortBy[0].name: {
+      filteredProducts.value.sort((a, b) =>
+        a.price - b.price
+      )
+      break;
+    }
+    case sortBy[1].name: {
+      filteredProducts.value.sort((a, b) =>
+        b.price - a.price
+      )
+      break;
+    }
+    case sortBy[2].name: {
+      filteredProducts.value.sort((a, b) => {
+        if (b.name > a.name) {
+          return -1
+        }
+        else {
+          return 1
+        }
+      })
+      break;
+    }
+    case sortBy[3].name: {
+      filteredProducts.value.sort((a, b) => {
+        if (b.name < a.name) {
+          return -1
+        }
+        else {
+          return 1
+        }
+      })
+      break;
+    }
+  }
+}
+
+function filterProducts() {
+  if (selectedCategory.value.id == -1) {
+    filteredProducts.value = products.value
+  } else {
+    filteredProducts.value = products.value.filter(product => 
+      product.categoryId == selectedCategory.value.id
+    )
+  }
+  
+  console.log("1", filteredProducts.value)
+
+  if (onlyDiscounts.value) {
+    filteredProducts.value = filteredProducts.value.filter(product => 
+      product.discount > 0
+    )
+  }
+
+  console.log("2", filteredProducts.value)
+}
+
+watch(() => selectedCategory.value, () => { filterProducts() })
+watch(() => sortedBy.value, () => { sortProducts() })
+watch(() => onlyDiscounts.value, () => { filterProducts() })
 </script>
 
 <template>
   <v-row>
     <v-col>
-      <filter-bar :number-of-items="products.length" />
+      <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-for="product in products" cols="6" lg="4" xl="3">
+    <v-col v-for="product in filteredProducts" cols="6" lg="4" xl="3">
-      <product-card :product="product" :category="getCategoryById(product.categoryId)" />
+      <product-card
+        :product="product"
+        :category="getCategoryById(product.categoryId)"
+      />
     </v-col>
   </v-row>
 </template>

software/src/pages/productsPage/productCard.vue

@@ -31,17 +31,22 @@ defineProps({
     </v-img>
     
     <v-card-text>
-      <v-rating
+      <div class="d-flex justify-left flex-row pb-2">
-        size="medium"
+        <v-rating
-        :model-value="product.rating"
+          size="medium"
-        active-color="yellow-darken-1"
+          :model-value="product.rating"
-        color="grey-darken-1"
+          active-color="yellow-darken-1"
-        half-increments
+          color="grey-darken-1"
-      />
+          half-increments
+          readonly
+        />
+
+        {{ product.rating }}/5
+      </div>
 
 
       <div v-if="product.discount == 0" class="font-weight-bold text-body-1">{{ product.price }} €</div>
-      <div v-else class="">
+      <div v-else>
         <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) }} €