Improved user feedback system, improved Product detail view
This commit is contained in:
@@ -2,6 +2,8 @@ import { defineStore } from "pinia";
|
||||
import { useLocalStorage } from "@vueuse/core";
|
||||
import { calcProductPrice } from "@/scripts/productScripts";
|
||||
import { BasketItemModel } from "../models/basketItemModel";
|
||||
import { useFeedbackStore } from "./feedbackStore";
|
||||
import { BannerStateEnum } from "../enums/bannerStateEnum";
|
||||
|
||||
export const useBasketStore = defineStore('basket', {
|
||||
state: () => ({
|
||||
@@ -22,12 +24,18 @@ export const useBasketStore = defineStore('basket', {
|
||||
|
||||
actions: {
|
||||
removeItemFromBasket(item: BasketItemModel) {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTREMOVED)
|
||||
|
||||
this.itemsInBasket = this.itemsInBasket.filter((basketItemModel: BasketItemModel) =>
|
||||
basketItemModel.productId != item.productId
|
||||
)
|
||||
},
|
||||
|
||||
addItemToBasket(item: BasketItemModel) {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
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
|
||||
|
||||
@@ -21,37 +21,116 @@ export const useFeedbackStore = defineStore("feedbackStore", {
|
||||
actions: {
|
||||
changeBanner(bannerState: BannerStateEnum) {
|
||||
switch (bannerState) {
|
||||
////////// System feedback //////////
|
||||
|
||||
case BannerStateEnum.ERROR: {
|
||||
this.title = this.i18n.t('bannerMessages.error'); break;
|
||||
}
|
||||
|
||||
case BannerStateEnum.BASKETPRODUCTADDED: {
|
||||
this.title = this.i18n.t('bannerMessages.basketProductAdded'); break;
|
||||
}
|
||||
|
||||
case BannerStateEnum.BASKETPRODUCTREMOVED: {
|
||||
this.title = this.i18n.t("bannerMessages.basketProductRemoved"); break;
|
||||
}
|
||||
|
||||
|
||||
////////// API Endpoint /api //////////
|
||||
|
||||
case BannerStateEnum.DATABASERESETSUCCESSFUL: {
|
||||
this.title = this.i18n.t('bannerMessages.databaseResetSuccessful'); break;
|
||||
}
|
||||
case BannerStateEnum.LOGINSUCCESSFUL: {
|
||||
|
||||
|
||||
////////// API Endpoint /accounts //////////
|
||||
|
||||
case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL: {
|
||||
this.title = this.i18n.t('bannerMessages.loginSuccessful'); break;
|
||||
}
|
||||
case BannerStateEnum.WRONGLOGIN: {
|
||||
case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN: {
|
||||
this.title = this.i18n.t('bannerMessages.wrongLogin'); break;
|
||||
}
|
||||
case BannerStateEnum.REGISTERSUCCESSFUL: {
|
||||
case BannerStateEnum.ACCOUNTLOGINERROR: {
|
||||
this.title = this.i18n.t('bannerMessages.error'); break;
|
||||
}
|
||||
case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL: {
|
||||
this.title = this.i18n.t("bannerMessages.registerSuccessful"); break;
|
||||
}
|
||||
case BannerStateEnum.USERNAMEINUSE: {
|
||||
case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE: {
|
||||
this.title = this.i18n.t("bannerMessages.usernameInUse"); break;
|
||||
}
|
||||
case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL: {
|
||||
this.title = this.i18n.t("bannerMessages.accountUpdated"); break;
|
||||
}
|
||||
case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL: {
|
||||
this.title = this.i18n.t('bannerMessages.logoutSuccessful'); break;
|
||||
}
|
||||
|
||||
|
||||
////////// API Endpoint /categories //////////
|
||||
|
||||
case BannerStateEnum.CATEGORYCREATESUCCESSFUL: {
|
||||
this.title = this.i18n.t('bannerMessages.categoryCreateSuccessful'); break;
|
||||
}
|
||||
case BannerStateEnum.CATEGORYDELETESUCESSFUL: {
|
||||
this.title = this.i18n.t('bannerMessages.categoryDeleteSuccessful'); break;
|
||||
}
|
||||
case BannerStateEnum.CATEGORYCREATEERROR: {
|
||||
this.title = this.i18n.t('bannerMessages.categoryCreateError'); break;
|
||||
}
|
||||
case BannerStateEnum.CATEGORYDELETEERROR: {
|
||||
this.title = this.i18n.t('bannerMessages.categoryDeleteError'); break;
|
||||
}
|
||||
|
||||
|
||||
////////// API Endpoint /orders //////////
|
||||
|
||||
case BannerStateEnum.ORDERPLACESUCCESSFUL: {
|
||||
this.title = this.i18n.t('bannerMessages.orderPlaceSuccessfull'); break;
|
||||
}
|
||||
|
||||
|
||||
////////// API Endpoint /products //////////
|
||||
|
||||
case BannerStateEnum.PRODUCTCREATESUCCESSFUL: {
|
||||
this.title = this.i18n.t('bannerMessages.productCreateSuccessful'); break;
|
||||
}
|
||||
case BannerStateEnum.PRODUCTCREATEERROR: {
|
||||
this.title = this.i18n.t('bannerMessages.productCreateError'); break;
|
||||
}
|
||||
case BannerStateEnum.PRODUCTDELETESUCCESSFUL: {
|
||||
this.title = this.i18n.t('bannerMessages.productDeleteSuccessful'); break;
|
||||
}
|
||||
case BannerStateEnum.PRODUCTDELETEERROR: {
|
||||
this.title = this.i18n.t('bannerMessages.productDeleteError'); break;
|
||||
}
|
||||
}
|
||||
|
||||
switch (bannerState) {
|
||||
case BannerStateEnum.ERROR:
|
||||
case BannerStateEnum.WRONGLOGIN:
|
||||
case BannerStateEnum.USERNAMEINUSE:
|
||||
case BannerStateEnum.ACCOUNTLOGINERROR:
|
||||
case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN:
|
||||
case BannerStateEnum.ACCOUNTREGISTERERROR:
|
||||
case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE:
|
||||
case BannerStateEnum.CATEGORYCREATEERROR:
|
||||
case BannerStateEnum.CATEGORYDELETEERROR:
|
||||
case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
|
||||
case BannerStateEnum.PRODUCTDELETEERROR:
|
||||
this.color = "red"
|
||||
this.icon = "mdi-alert-circle"
|
||||
break;
|
||||
|
||||
case BannerStateEnum.DATABASERESETSUCCESSFUL:
|
||||
case BannerStateEnum.LOGINSUCCESSFUL:
|
||||
case BannerStateEnum.REGISTERSUCCESSFUL:
|
||||
case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL:
|
||||
case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL:
|
||||
case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL:
|
||||
case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL:
|
||||
case BannerStateEnum.CATEGORYCREATESUCCESSFUL:
|
||||
case BannerStateEnum.CATEGORYDELETESUCESSFUL:
|
||||
case BannerStateEnum.ORDERPLACESUCCESSFUL:
|
||||
case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
|
||||
case BannerStateEnum.PRODUCTCREATEERROR:
|
||||
this.color = "green"
|
||||
this.icon = "mdi-check-circle"
|
||||
break
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useLocalStorage } from "@vueuse/core";
|
||||
import { ThemeEnum } from "../enums/themeEnums";
|
||||
import { LanguageEnum } from "../enums/languageEnum";
|
||||
import { AccountModel } from "../models/accountModel";
|
||||
import { login, register } from "../api/accountApi";
|
||||
import { loginAccount, registerAccount, updateAccount } from "../api/accountApi";
|
||||
import { useFeedbackStore } from "./feedbackStore";
|
||||
import { BannerStateEnum } from "../enums/bannerStateEnum";
|
||||
|
||||
@@ -19,44 +19,60 @@ export const useUserStore = defineStore('userStore', {
|
||||
async login(username: string, password: string) {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
|
||||
await login(username, password)
|
||||
await loginAccount(username, password)
|
||||
.then(result => {
|
||||
if (result.data.loginSuccessful) {
|
||||
this.userAccount = result.data.account
|
||||
this.loggedIn = true
|
||||
this.userAccount = result.data.account
|
||||
this.loggedIn = true
|
||||
|
||||
feedbackStore.changeBanner(BannerStateEnum.LOGINSUCCESSFUL)
|
||||
}
|
||||
feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINSUCCESSFUL)
|
||||
})
|
||||
.catch(error => {
|
||||
this.userAccount = new AccountModel()
|
||||
this.loggedIn = false
|
||||
|
||||
feedbackStore.changeBanner(BannerStateEnum.WRONGLOGIN)
|
||||
if (error.status == 400) {
|
||||
feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINERROR)
|
||||
} else if (error.status == 401) {
|
||||
feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINWRONGLOGIN)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
async registerAccount(account: AccountModel) {
|
||||
async registerAccount(userAccount: AccountModel) {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
|
||||
await register(account)
|
||||
await registerAccount(userAccount)
|
||||
.then(res => {
|
||||
console.log(res)
|
||||
if (res.status == 200) {
|
||||
feedbackStore.changeBanner(BannerStateEnum.REGISTERSUCCESSFUL)
|
||||
if (res.status == 201) {
|
||||
feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
if (error.status == 400) {
|
||||
feedbackStore.changeBanner(BannerStateEnum.USERNAMEINUSE)
|
||||
feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERERROR)
|
||||
} else if (error.status == 409) {
|
||||
feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
async updateAccount() {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
|
||||
await updateAccount(this.userAccount)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
feedbackStore.changeBanner(BannerStateEnum.ACCOUNTUPDATESUCCESSFUL)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
logout() {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
|
||||
this.userAccount = new AccountModel()
|
||||
this.loggedIn = false
|
||||
|
||||
feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL)
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user