CategoryStore, API calls

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">

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>

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>

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() {