Connect Orders database table with Payments and Addresses, visualize it in the frontend

This commit is contained in:
2024-09-24 23:41:35 +02:00
parent 531f964841
commit 6dd49f630d
19 changed files with 517 additions and 223 deletions

View File

@@ -8,10 +8,14 @@ import { addOrder } from "../api/orderApi";
import { useAccountStore } from "./accountStore";
import { ProductModel } from "../models/productModel";
import { useProductStore } from "./productStore";
import { AddressModel } from "../models/addressModel";
import { PaymentModel } from "../models/paymentModel";
export const useBasketStore = defineStore('basketStore', {
state: () => ({
itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", [])
itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", []),
usedAddress: useLocalStorage("hackmycart/basketStore/usedAddress", new AddressModel()),
usedPayment: useLocalStorage("hackmycart/basketStore/usedPayment", new PaymentModel())
}),
getters: {
@@ -73,12 +77,20 @@ export const useBasketStore = defineStore('basketStore', {
async takeOrder() {
const accountStore = useAccountStore()
const productStore = useProductStore()
const feedbackStore = useFeedbackStore()
await addOrder(accountStore.userAccount.id, this.itemsInBasket)
this.itemsInBasket = []
await addOrder(accountStore.userAccount.id, this.itemsInBasket, this.usedPayment.id, this.usedAddress.id)
.then(async result => {
if (result.status == 201) {
await accountStore.refreshOrders()
await productStore.fetchAllProducts()
await accountStore.refreshOrders()
await productStore.fetchAllProducts()
this.itemsInBasket = []
feedbackStore.changeBanner(BannerStateEnum.ORDERPLACESUCCESSFUL)
} else {
feedbackStore.changeBanner(BannerStateEnum.ERROR)
}
})
}
}
})

View File

@@ -20,6 +20,7 @@ export const useFeedbackStore = defineStore("feedbackStore", {
actions: {
changeBanner(bannerState: BannerStateEnum) {
// Banner message
switch (bannerState) {
////////// System feedback //////////
@@ -107,6 +108,8 @@ export const useFeedbackStore = defineStore("feedbackStore", {
}
}
// Banner color
switch (bannerState) {
case BannerStateEnum.ERROR:
case BannerStateEnum.ACCOUNTLOGINERROR:
@@ -118,9 +121,9 @@ export const useFeedbackStore = defineStore("feedbackStore", {
case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
case BannerStateEnum.PRODUCTDELETEERROR:
this.color = "red"
this.icon = "mdi-alert-circle"
break;
case BannerStateEnum.BASKETPRODUCTADDED:
case BannerStateEnum.DATABASERESETSUCCESSFUL:
case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL:
case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL:
@@ -132,10 +135,74 @@ export const useFeedbackStore = defineStore("feedbackStore", {
case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
case BannerStateEnum.PRODUCTCREATEERROR:
this.color = "green"
this.icon = "mdi-check-circle"
break
break;
case BannerStateEnum.BASKETPRODUCTREMOVED:
this.color = "blue"
}
// Banner icon
switch (bannerState) {
case BannerStateEnum.ERROR:
this.icon = "mdi-alert-circle"
break;
case BannerStateEnum.ACCOUNTLOGINERROR:
case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN:
case BannerStateEnum.ACCOUNTREGISTERERROR:
case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE:
this.icon = "mdi-account"
break;
case BannerStateEnum.CATEGORYCREATEERROR:
case BannerStateEnum.CATEGORYDELETEERROR:
case BannerStateEnum.CATEGORYCREATESUCCESSFUL:
case BannerStateEnum.CATEGORYDELETESUCESSFUL:
this.icon = "mdi-label"
break;
case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
case BannerStateEnum.PRODUCTDELETEERROR:
case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
case BannerStateEnum.PRODUCTCREATEERROR:
this.icon = "mdi-store"
break;
case BannerStateEnum.DATABASERESETSUCCESSFUL:
this.icon = "mdi-database-refresh"
break;
case BannerStateEnum.BASKETPRODUCTADDED:
case BannerStateEnum.BASKETPRODUCTREMOVED:
this.icon = "mdi-basket"
break;
case BannerStateEnum.ORDERPLACESUCCESSFUL:
this.icon = "mdi-basket-check"
break;
case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL:
this.icon = "mdi-logout"
break;
case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL:
this.icon = "mdi-login"
break;
case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL:
this.icon = "mdi-account-plus"
break;
case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL:
this.icon = "mdi-account-reactivate"
break;
}
this.showBanner = true
}
}