ProductStore, move API calls to separate file

software/src/App.vue

@@ -5,13 +5,17 @@ import { i18n } from './plugins/i18n';
 import { ref } from 'vue';
 import vuetify from './plugins/vuetify';
 import navigationItems from './components/navigationItems.vue';
+import { useProductStore } from './data/stores/productStore';
 
 const userStore = useUserStore()
+const productStore = useProductStore()
 const theme = useTheme()
 const navRail = ref(vuetify.display.mobile)
 
 theme.global.name.value = userStore.theme
 i18n.global.locale = userStore.language
+
+productStore.fetchAllProducts()
 </script>
 
 <template>

software/src/data/api/productApi.ts

@@ -0,0 +1,10 @@
+import axios from "axios"
+
+let BASE_URL = "http://localhost:3000/products"
+
+/**
+ * Fetch all products from API
+ */
+export async function getAllProducts() {
+  return await axios.get(BASE_URL)
+}

software/src/data/enums/sortOrderEnum.ts

@@ -0,0 +1,6 @@
+export enum SortOrder {
+  PRICELOWTOHIGH = "Price: Low to high",
+  PRICEHIGHTOLOW = "Price: High to low",
+  NAMEATOZ = "Name: A to Z",
+  NAMEZTOA = "Name: Z to A"
+}

software/src/data/stores/productStore.ts

@@ -0,0 +1,73 @@
+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";
+
+
+export const useProductStore = defineStore("productStore", {
+  state: () => ({
+    products: useLocalStorage<Array<ProductModel>>("hackmycart/productStore/products", []),
+    filteredProducts: useLocalStorage<Array<ProductModel>>("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)
+  }),
+
+  actions: {
+    async fetchAllProducts() {
+      await getAllProducts()
+        .then(products => {
+          this.products = products.data
+          this.filteredProducts = products.data
+        })
+    },
+
+    async filterProducts() {
+      if (this.filteredCategory.id == -1) {
+        this.filteredProducts = this.products
+      } else {
+        this.filteredProducts = this.products.filter((product: ProductModel) => 
+          product.categoryId == this.filteredCategory.id
+        )
+      }
+
+      if (this.onlyDiscounts) {
+        this.filteredProducts = this.filteredProducts.filter((product: ProductModel) => 
+          product.discount > 0
+        )
+      }
+    },
+
+    sortProducts() {
+      this.filteredProducts.sort((a: ProductModel, b: ProductModel) => {
+        switch (this.sortOrder)
+        {
+          case SortOrder.PRICELOWTOHIGH: {
+            return a.price - b.price
+          }
+          case SortOrder.PRICEHIGHTOLOW: {
+            return b.price - a.price
+          }
+          case SortOrder.NAMEATOZ: {
+            if (b.name > a.name) {
+              return -1
+            }
+            else {
+              return 1
+            }
+          }
+          case SortOrder.NAMEZTOA: {
+            if (b.name < a.name) {
+              return -1
+            }
+            else {
+              return 1
+            }
+          }
+        }
+      })
+    }
+  }
+})

software/src/pages/productsPage/filterBar.vue

@@ -1,48 +1,32 @@
 <script setup lang="ts">
+import { SortOrder } from '@/data/enums/sortOrderEnum';
 import { CategoryModel } from '@/data/models/categoryModel';
 import { FilterModel } from '@/data/models/filterModel';
+import { useProductStore } from '@/data/stores/productStore';
 
-// Parameters
+const productStore = useProductStore()
-defineProps({
+const sortOrderItems = Object.values(SortOrder)
-  numberOfItems: {
-    type: Number,
-    default: 0
-  },
-  categories: {
-    type: Array<CategoryModel>,
-    required: true
-  },
-  sortBy: {
-    type: Array<FilterModel>,
-    required: true
-  }
-})
-
-// Constants
-const selectedCategory = defineModel("selectedCategory", { required: true, type: CategoryModel, default: new CategoryModel() })
-const sortedBy = defineModel("sortedBy", { required: true, type: FilterModel })
-const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boolean })
 </script>
 
 <template>
   <v-card>
     <v-card-title>
-      <div v-if="numberOfItems == 1">
+      <div v-if="productStore.filteredProducts.length == 1">
-        {{ numberOfItems }} {{ $t('product.product') }}
+        {{ productStore.filteredProducts.length }} {{ $t('product.product') }}
       </div>
       <div v-else>
-        {{ numberOfItems }} {{ $t('product.products') }}
+        {{ productStore.filteredProducts.length }} {{ $t('product.products') }}
       </div>
     </v-card-title>
     <v-container class="pb-0">
       <v-row>
         <v-spacer />
         <v-col class="d-flex justify-center align-center">
-          <v-checkbox :label="$t('offers')" v-model="onlyDiscounts" />
+          <v-checkbox :label="$t('offers')" v-model="productStore.onlyDiscounts" />
         </v-col>
 
         <v-col class="d-flex justify-left align-center">
-          <v-select :items="categories" :label="$t('categories')" v-model="selectedCategory" >
+          <!-- todo <v-select :items="categories" :label="$t('categories')" v-model="selectedCategory" >
             <template v-slot:item="{ props, item }">
               <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
             </template>
@@ -50,17 +34,17 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole
             <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">
-          <v-select :label="$t('sortBy')" :items="sortBy" v-model="sortedBy" >
+          <v-select :label="$t('sortBy')" :items="sortOrderItems" v-model="productStore.sortOrder" >
             <template v-slot:item="{ props, item }">
-              <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
+              <v-list-item v-bind="props" :title="item.title" />
             </template>
 
             <template v-slot:selection="{ item }">
-              <v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
+              <v-list-item :title="item.title" />
             </template>
           </v-select>
         </v-col>

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")
+// todo axios.get("http://127.0.0.1:3000/categories")
-  .then(function (response) {
+//   .then(function (response) {
-    for (let category of response.data) {
+//     for (let category of response.data) {
-      categories.value.push(category)
+//       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) {
   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(() => productStore.filteredCategory, async () => { productStore.filterProducts() })
-watch(() => sortedBy.value, () => { sortProducts() })
+watch(() => productStore.sortOrder, async () => { productStore.sortProducts() })
-watch(() => onlyDiscounts.value, () => { filterProducts() })
+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)"

software/src/pages/productsPage/productCard.vue

@@ -7,9 +7,9 @@ defineProps({
     required: true,
     type: ProductModel
   },
-  category: {
+  // category: {
-    type: CategoryModel
+  //   type: CategoryModel
-  },
+  // },
 })
 </script>
 
@@ -25,9 +25,9 @@ defineProps({
         {{ product.name }}
       </v-card-title>
 
-      <v-card-subtitle class="mb-2">
+      <!-- todo <v-card-subtitle class="mb-2">
         <div><v-icon :icon="category.icon" /> {{ category.name }}</div>
-      </v-card-subtitle>
+      </v-card-subtitle> -->
     </v-img>
     
     <v-card-text>

software/src/pages/productsPage/productDetails.vue

@@ -13,11 +13,11 @@ const basketStore = useBasketStore()
 
 const props = defineProps({
   product: ProductModel,
-  productCategory: CategoryModel
+  // todo productCategory: CategoryModel
 })
 
 function addProductToBasket() {
-  basketStore.addItemToBasket(productToBasketItem(props.product, props.productCategory, nrOfArticles.value))
+  // todo basketStore.addItemToBasket(productToBasketItem(props.product, props.productCategory, nrOfArticles.value))
   nrOfArticles.value = 1
   showDialog.value = false
 }
@@ -32,10 +32,10 @@ function addProductToBasket() {
   >
     <template #content>
       <v-row>
-        <v-col>
+        <!-- todo <v-col>
           <v-icon :icon="productCategory.icon" />
           {{ productCategory.name }}
-        </v-col>
+        </v-col> -->
       </v-row>
       <v-row>
         <v-col>