CategoryStore, API calls

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>