ProductStore, move API calls to separate file

software/src/pages/productsPage/index.vue

@@ -2,18 +2,15 @@
 import productCard from "./productCard.vue"
 import productDetails from "./productDetails.vue"
 import filterBar from "./filterBar.vue"
-import axios from "axios";
 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";
+
+const productStore = useProductStore()
 
-const products: Ref<Array<ProductModel>> = ref<Array<ProductModel>>([])
-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 showProductDetails = ref(false)
 const dialogProduct = ref(new ProductModel())
 
@@ -24,22 +21,13 @@ const sortBy: Array<FilterModel> = [
   { 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) {
-    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()
-  })
+// 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 => 
@@ -47,70 +35,14 @@ function getCategoryById(id: number) {
   )
 }
 
-
-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
-    )
-  }
-  
-  if (onlyDiscounts.value) {
-    filteredProducts.value = filteredProducts.value.filter(product => 
-      product.discount > 0
-    )
-  }
-}
-
 function showProductDialog(product: ProductModel) {
   dialogProduct.value = product
   showProductDetails.value = true
 }
 
-watch(() => selectedCategory.value, () => { filterProducts() })
-watch(() => sortedBy.value, () => { sortProducts() })
-watch(() => onlyDiscounts.value, () => { filterProducts() })
+watch(() => productStore.filteredCategory, async () => { productStore.filterProducts() })
+watch(() => productStore.sortOrder, async () => { productStore.sortProducts() })
+watch(() => productStore.onlyDiscounts, async () => { productStore.filterProducts() })
 </script>
 
 <template>
@@ -118,17 +50,18 @@ watch(() => onlyDiscounts.value, () => { filterProducts() })
     <v-row>
       <v-col>
         <filter-bar
-          :number-of-items="filteredProducts.length"
+          :number-of-items="productStore.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-if="filteredProducts.length > 0" v-for="product in filteredProducts" cols="12" sm="6" lg="4" xl="3">
+      <v-col
+        v-if="productStore.filteredProducts.length > 0"
+        v-for="product in productStore.filteredProducts"
+        cols="12" sm="6" lg="4" xl="3"
+      >
         <product-card
           :product="product"
           :category="getCategoryById(product.categoryId)"