From 7b245da95962ffdf11656aceeb6724c8a033a1f7 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Wed, 18 Sep 2024 16:21:07 +0200
Subject: [PATCH] CategoryStore, API calls

---
 software/src/App.vue                          |  3 ++
 software/src/data/api/categoryApi.ts          |  7 ++++
 software/src/data/models/productModel.ts      |  2 --
 .../data/models/productWithCategoryModel.ts   | 13 ++++++++
 software/src/data/stores/categoryStore.ts     | 25 ++++++++++++++
 software/src/data/stores/productStore.ts      | 14 ++++----
 software/src/pages/productsPage/filterBar.vue | 12 ++++---
 software/src/pages/productsPage/index.vue     | 33 ++++---------------
 .../src/pages/productsPage/productCard.vue    | 19 +++++------
 .../src/pages/productsPage/productDetails.vue |  4 +--
 software/src/scripts/productScripts.ts        |  3 +-
 11 files changed, 83 insertions(+), 52 deletions(-)
 create mode 100644 software/src/data/api/categoryApi.ts
 create mode 100644 software/src/data/models/productWithCategoryModel.ts
 create mode 100644 software/src/data/stores/categoryStore.ts

diff --git a/software/src/App.vue b/software/src/App.vue
index 04b3e6e..0ee999e 100644
--- a/software/src/App.vue
+++ b/software/src/App.vue
@@ -6,9 +6,11 @@ import { ref } from 'vue';
 import vuetify from './plugins/vuetify';
 import navigationItems from './components/navigationItems.vue';
 import { useProductStore } from './data/stores/productStore';
+import { useCategoryStore } from './data/stores/categoryStore';
 
 const userStore = useUserStore()
 const productStore = useProductStore()
+const categoryStore = useCategoryStore()
 const theme = useTheme()
 const navRail = ref(vuetify.display.mobile)
 
@@ -16,6 +18,7 @@ theme.global.name.value = userStore.theme
 i18n.global.locale = userStore.language
 
 productStore.fetchAllProducts()
+categoryStore.fetchAllCategories()
 </script>
 
 <template>
diff --git a/software/src/data/api/categoryApi.ts b/software/src/data/api/categoryApi.ts
new file mode 100644
index 0000000..f4e848e
--- /dev/null
+++ b/software/src/data/api/categoryApi.ts
@@ -0,0 +1,7 @@
+import axios from "axios"
+
+let BASE_URL = "http://localhost:3000/categories"
+
+export async function getAllCategories() {
+  return await axios.get(BASE_URL)
+}
\ No newline at end of file
diff --git a/software/src/data/models/productModel.ts b/software/src/data/models/productModel.ts
index b99113a..bc0defb 100644
--- a/software/src/data/models/productModel.ts
+++ b/software/src/data/models/productModel.ts
@@ -8,6 +8,4 @@ export class ProductModel {
   discount: number = 0
   rating: number = 1
   imageUrl: string = ""
-  createdAt: string = ""
-  updatedAt: string = ""
 }
\ No newline at end of file
diff --git a/software/src/data/models/productWithCategoryModel.ts b/software/src/data/models/productWithCategoryModel.ts
new file mode 100644
index 0000000..f44f736
--- /dev/null
+++ b/software/src/data/models/productWithCategoryModel.ts
@@ -0,0 +1,13 @@
+import { CategoryModel } from "./categoryModel"
+
+export class ProductWithCategoryModel {
+  id: number = -1
+  brand: string
+  name: string
+  description: string = ""
+  category: CategoryModel
+  price: number = 0
+  discount: number = 0
+  rating: number = 1
+  imageUrl: string = ""
+}
\ No newline at end of file
diff --git a/software/src/data/stores/categoryStore.ts b/software/src/data/stores/categoryStore.ts
new file mode 100644
index 0000000..2f82935
--- /dev/null
+++ b/software/src/data/stores/categoryStore.ts
@@ -0,0 +1,25 @@
+import { useLocalStorage } from "@vueuse/core";
+import { defineStore } from "pinia";
+import { CategoryModel } from "../models/categoryModel";
+import { getAllCategories } from "../api/categoryApi";
+
+export const useCategoryStore = defineStore("categoryStore", {
+  state: () => ({
+    categories: useLocalStorage<Array<CategoryModel>>("hackmycart/categoryStore/categories", [])
+  }),
+
+  actions: {
+    async fetchAllCategories() {
+      await getAllCategories()
+        .then(categories => {
+          this.categories = categories.data
+        })
+    },
+
+    getProductById(id: number): CategoryModel {
+      return this.categories.find(category => 
+        category.id === id
+      )
+    }
+  }
+})
\ No newline at end of file
diff --git a/software/src/data/stores/productStore.ts b/software/src/data/stores/productStore.ts
index 5997bae..f40d44f 100644
--- a/software/src/data/stores/productStore.ts
+++ b/software/src/data/stores/productStore.ts
@@ -1,15 +1,15 @@
 import { useLocalStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
-import { ProductModel } from "../models/productModel";
 import { getAllProducts } from "../api/productApi";
 import { SortOrder } from "../enums/sortOrderEnum";
 import { CategoryModel } from "../models/categoryModel";
+import { ProductWithCategoryModel } from "../models/productWithCategoryModel";
 
 
 export const useProductStore = defineStore("productStore", {
   state: () => ({
-    products: useLocalStorage<Array<ProductModel>>("hackmycart/productStore/products", []),
-    filteredProducts: useLocalStorage<Array<ProductModel>>("hackmycart/productStore/filteredProducts", []),
+    products: useLocalStorage<Array<ProductWithCategoryModel>>("hackmycart/productStore/products", []),
+    filteredProducts: useLocalStorage<Array<ProductWithCategoryModel>>("hackmycart/productStore/filteredProducts", []),
     sortOrder: useLocalStorage<SortOrder>("hackmycart/productStore/sortOrder", SortOrder.NAMEATOZ),
     filteredCategory: useLocalStorage<CategoryModel>("hackmycart/productStore/filteredCategory", new CategoryModel()),
     onlyDiscounts: useLocalStorage<Boolean>("hackmycart/productStore/onlyDiscounts", false)
@@ -28,20 +28,20 @@ export const useProductStore = defineStore("productStore", {
       if (this.filteredCategory.id == -1) {
         this.filteredProducts = this.products
       } else {
-        this.filteredProducts = this.products.filter((product: ProductModel) => 
-          product.categoryId == this.filteredCategory.id
+        this.filteredProducts = this.products.filter((product: ProductWithCategoryModel) => 
+          product.category.id == this.filteredCategory.id
         )
       }
 
       if (this.onlyDiscounts) {
-        this.filteredProducts = this.filteredProducts.filter((product: ProductModel) => 
+        this.filteredProducts = this.filteredProducts.filter((product: ProductWithCategoryModel) => 
           product.discount > 0
         )
       }
     },
 
     sortProducts() {
-      this.filteredProducts.sort((a: ProductModel, b: ProductModel) => {
+      this.filteredProducts.sort((a: ProductWithCategoryModel, b: ProductWithCategoryModel) => {
         switch (this.sortOrder)
         {
           case SortOrder.PRICELOWTOHIGH: {
diff --git a/software/src/pages/productsPage/filterBar.vue b/software/src/pages/productsPage/filterBar.vue
index 62c2657..1dce530 100644
--- a/software/src/pages/productsPage/filterBar.vue
+++ b/software/src/pages/productsPage/filterBar.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { SortOrder } from '@/data/enums/sortOrderEnum';
-import { CategoryModel } from '@/data/models/categoryModel';
-import { FilterModel } from '@/data/models/filterModel';
+import { useCategoryStore } from '@/data/stores/categoryStore';
 import { useProductStore } from '@/data/stores/productStore';
 
 const productStore = useProductStore()
+const categoryStore = useCategoryStore()
 const sortOrderItems = Object.values(SortOrder)
 </script>
 
@@ -26,7 +26,11 @@ const sortOrderItems = Object.values(SortOrder)
         </v-col>
 
         <v-col class="d-flex justify-left align-center">
-          <!-- todo <v-select :items="categories" :label="$t('categories')" v-model="selectedCategory" >
+          <v-select
+            :items="categoryStore.categories"
+            :label="$t('categories')"
+            v-model="productStore.filteredCategory"
+          >
             <template v-slot:item="{ props, item }">
               <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
             </template>
@@ -34,7 +38,7 @@ const sortOrderItems = Object.values(SortOrder)
             <template v-slot:selection="{ item }">
               <v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
             </template>
-          </v-select> -->
+          </v-select>
         </v-col>
 
         <v-col class="d-flex justify-left align-center">
diff --git a/software/src/pages/productsPage/index.vue b/software/src/pages/productsPage/index.vue
index 8a5b75d..c0c463d 100644
--- a/software/src/pages/productsPage/index.vue
+++ b/software/src/pages/productsPage/index.vue
@@ -3,16 +3,17 @@ import productCard from "./productCard.vue"
 import productDetails from "./productDetails.vue"
 import filterBar from "./filterBar.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";
 import { useProductStore } from "@/data/stores/productStore";
+import { useCategoryStore } from "@/data/stores/categoryStore";
+import { ProductWithCategoryModel } from "@/data/models/productWithCategoryModel";
 
 const productStore = useProductStore()
+const categoryStore = useCategoryStore()
 
-const categories: Ref<Array<CategoryModel>> = ref<Array<CategoryModel>>([new CategoryModel()])
 const showProductDetails = ref(false)
-const dialogProduct = ref(new ProductModel())
+const dialogProduct = ref(new ProductWithCategoryModel())
 
 const sortBy: Array<FilterModel> = [
   { icon: "mdi-sort-ascending", name: "Price: Low to high" }, 
@@ -21,21 +22,7 @@ const sortBy: Array<FilterModel> = [
   { icon: "mdi-sort-alphabetical-descending", name: "Name: Z to A" },
 ]
 
-
-// todo axios.get("http://127.0.0.1:3000/categories")
-//   .then(function (response) {
-//     for (let category of response.data) {
-//       categories.value.push(category)
-//     }
-//   })
-
-function getCategoryById(id: number) {
-  return categories.value.find(category => 
-    category.id === id
-  )
-}
-
-function showProductDialog(product: ProductModel) {
+function showProductDialog(product: ProductWithCategoryModel) {
   dialogProduct.value = product
   showProductDetails.value = true
 }
@@ -49,11 +36,7 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
   <v-container>
     <v-row>
       <v-col>
-        <filter-bar
-          :number-of-items="productStore.filteredProducts.length"
-          :categories="categories"
-          :sort-by="sortBy"
-        />
+        <filter-bar />
       </v-col>
     </v-row>
     <v-row dense>
@@ -64,7 +47,6 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
       >
         <product-card
           :product="product"
-          :category="getCategoryById(product.categoryId)"
           @click="showProductDialog(product)"
         />
       </v-col>
@@ -80,7 +62,6 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
 
   <product-details
     v-model="showProductDetails"
-    :product="dialogProduct" 
-    :productCategory="getCategoryById(dialogProduct.categoryId)"
+    :product="dialogProduct"
   />
 </template>
\ No newline at end of file
diff --git a/software/src/pages/productsPage/productCard.vue b/software/src/pages/productsPage/productCard.vue
index d422b39..82bed89 100644
--- a/software/src/pages/productsPage/productCard.vue
+++ b/software/src/pages/productsPage/productCard.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import { CategoryModel } from '@/data/models/categoryModel';
-import { ProductModel } from '@/data/models/productModel';
+import { ProductWithCategoryModel } from '@/data/models/productWithCategoryModel';
 
 defineProps({
   product: {
     required: true,
-    type: ProductModel
-  },
-  // category: {
-  //   type: CategoryModel
-  // },
+    type: ProductWithCategoryModel
+  }
 })
 </script>
 
@@ -25,9 +21,12 @@ defineProps({
         {{ product.name }}
       </v-card-title>
 
-      <!-- todo <v-card-subtitle class="mb-2">
-        <div><v-icon :icon="category.icon" /> {{ category.name }}</div>
-      </v-card-subtitle> -->
+      <v-card-subtitle class="mb-2">
+        <div>
+          <v-icon :icon="product.category.icon" />
+          {{ product.category.name }}
+        </div>
+      </v-card-subtitle>
     </v-img>
     
     <v-card-text>
diff --git a/software/src/pages/productsPage/productDetails.vue b/software/src/pages/productsPage/productDetails.vue
index 63fa35b..098d17f 100644
--- a/software/src/pages/productsPage/productDetails.vue
+++ b/software/src/pages/productsPage/productDetails.vue
@@ -6,14 +6,14 @@ import { ModelRef, ref } from 'vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import { calcProductPrice, productToBasketItem } from '@/scripts/productScripts';
 import ActionDialog from '@/components/actionDialog.vue'
+import { ProductWithCategoryModel } from '@/data/models/productWithCategoryModel';
 
 const showDialog: ModelRef<boolean> = defineModel()
 const nrOfArticles = ref(1)
 const basketStore = useBasketStore()
 
 const props = defineProps({
-  product: ProductModel,
-  // todo productCategory: CategoryModel
+  product: ProductWithCategoryModel
 })
 
 function addProductToBasket() {
diff --git a/software/src/scripts/productScripts.ts b/software/src/scripts/productScripts.ts
index 51701a4..8d8fce9 100644
--- a/software/src/scripts/productScripts.ts
+++ b/software/src/scripts/productScripts.ts
@@ -1,8 +1,9 @@
 import { BasketItemModel } from "@/data/models/basketItemModel";
 import { CategoryModel } from "@/data/models/categoryModel";
 import { ProductModel } from "@/data/models/productModel";
+import { ProductWithCategoryModel } from "@/data/models/productWithCategoryModel";
 
-export function calcProductPrice(product: ProductModel, quantity: number = 1): number {
+export function calcProductPrice(product: ProductWithCategoryModel, quantity: number = 1): number {
   return calcPrice(product.price, product.discount, quantity)
 }