Matching UI with improved API

This commit is contained in:
2024-09-24 13:12:44 +02:00
parent bc62174566
commit abe1b496a2
34 changed files with 194 additions and 545 deletions

View File

@@ -1,21 +1,16 @@
import { defineStore } from "pinia";
import { useLocalStorage } from "@vueuse/core";
import { ThemeEnum } from "../enums/themeEnums";
import { LanguageEnum } from "../enums/languageEnum";
import { defineStore } from "pinia";
import { AccountModel } from "../models/accountModel";
import { loginAccount, registerAccount, updateAccount } from "../api/accountApi";
import { useFeedbackStore } from "./feedbackStore";
import { BannerStateEnum } from "../enums/bannerStateEnum";
import { OrderModel } from "../models/orderModel";
import { useFeedbackStore } from "./feedbackStore";
import { loginAccount, registerAccount, updateAccount } from "../api/accountApi";
import { getUserOrders } from "../api/orderApi";
import { BannerStateEnum } from "../enums/bannerStateEnum";
export const useUserStore = defineStore('userStore', {
export const useAccountStore = defineStore("accountStore", {
state: () => ({
theme: useLocalStorage<ThemeEnum>("hackmycart/userStore/theme", ThemeEnum.DARKRED),
language: useLocalStorage<LanguageEnum>("hackmycart/userStore/language", LanguageEnum.GERMAN),
userAccount: useLocalStorage<AccountModel>("hackmycart/userStore/userAccount", new AccountModel()),
loggedIn: useLocalStorage<Boolean>("hackmycart/userStore/loggedIn", false),
orders: useLocalStorage<Array<OrderModel>>("hackmycart/userStore/orders", [])
userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountModel()),
orders: useLocalStorage<Array<OrderModel>>("hackmycart/accountStore/orders", [ new OrderModel() ])
}),
actions: {

View File

@@ -4,11 +4,10 @@ import { calcProductPrice } from "@/scripts/productScripts";
import { BasketItemModel } from "../models/basketItemModel";
import { useFeedbackStore } from "./feedbackStore";
import { BannerStateEnum } from "../enums/bannerStateEnum";
import { OrderModel } from "../models/orderModel";
import { useUserStore } from "./userStore";
import { addOrder } from "../api/orderApi";
import { useAccountStore } from "./accountStore";
export const useBasketStore = defineStore('basket', {
export const useBasketStore = defineStore('basketStore', {
state: () => ({
itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", [])
}),
@@ -31,7 +30,7 @@ export const useBasketStore = defineStore('basket', {
feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTREMOVED)
this.itemsInBasket = this.itemsInBasket.filter((basketItemModel: BasketItemModel) =>
basketItemModel.productId != item.productId
basketItemModel.product.id != item.product.id
)
},
@@ -40,15 +39,16 @@ export const useBasketStore = defineStore('basket', {
feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTADDED)
// Product is already in the basket, increase number of items
if (this.itemsInBasket.find((basketItem) => basketItem.productId == item.productId)) {
this.itemsInBasket.find((basketItem) => basketItem.productId == item.productId).quantity += item.quantity
if (this.itemsInBasket.find((basketItem) => basketItem.productId == item.product.id)) {
this.itemsInBasket.find((basketItem) =>
basketItem.productId == item.product.id).quantity += item.quantity
} else {
this.itemsInBasket.push(item)
}
},
takeOrder() {
const userStore = useUserStore()
const accountStore = useAccountStore()
//
// const order = new OrderModel()
// order.accountId = userStore.userAccount.id
@@ -56,7 +56,7 @@ export const useBasketStore = defineStore('basket', {
//
// console.log(order)
addOrder(userStore.userAccount.id, this.itemsInBasket)
addOrder(accountStore.userAccount.id, this.itemsInBasket)
}
}
})

View File

@@ -0,0 +1,11 @@
import { defineStore } from "pinia";
import { useLocalStorage } from "@vueuse/core";
import { ThemeEnum } from "../enums/themeEnums";
import { LanguageEnum } from "../enums/languageEnum";
export const usePreferencesStore = defineStore('preferencesStore', {
state: () => ({
theme: useLocalStorage<ThemeEnum>("hackmycart/preferencesStore/theme", ThemeEnum.DARKRED),
language: useLocalStorage<LanguageEnum>("hackmycart/preferencesStore/language", LanguageEnum.GERMAN)
}),
})

View File

@@ -3,13 +3,13 @@ import { defineStore } from "pinia";
import { getAllProducts } from "../api/productApi";
import { SortOrder } from "../enums/sortOrderEnum";
import { CategoryModel } from "../models/categoryModel";
import { ProductWithCategoryModel } from "../models/productWithCategoryModel";
import { ProductModel } from "../models/productModel";
export const useProductStore = defineStore("productStore", {
state: () => ({
products: useLocalStorage<Array<ProductWithCategoryModel>>("hackmycart/productStore/products", []),
filteredProducts: useLocalStorage<Array<ProductWithCategoryModel>>("hackmycart/productStore/filteredProducts", []),
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)
@@ -28,20 +28,20 @@ export const useProductStore = defineStore("productStore", {
if (this.filteredCategory.id == -1 || this.filteredCategory.id == 0) {
this.filteredProducts = this.products
} else {
this.filteredProducts = this.products.filter((product: ProductWithCategoryModel) =>
this.filteredProducts = this.products.filter((product: ProductModel) =>
product.category.id == this.filteredCategory.id
)
}
if (this.onlyDiscounts) {
this.filteredProducts = this.filteredProducts.filter((product: ProductWithCategoryModel) =>
this.filteredProducts = this.filteredProducts.filter((product: ProductModel) =>
product.discount > 0
)
}
},
sortProducts() {
this.filteredProducts.sort((a: ProductWithCategoryModel, b: ProductWithCategoryModel) => {
this.filteredProducts.sort((a: ProductModel, b: ProductModel) => {
switch (this.sortOrder)
{
case SortOrder.PRICELOWTOHIGH: {