tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Improved user feedback system, improved Product detail view

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-09-20 12:57:19 +02:00
parent ed264ff026
commit 54d13686cf
24 changed files with 1113 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
software/src/data/api/accountApi.ts
View File

@@ -3,13 +3,17 @@ import { AccountModel } from "../models/accountModel"
const BASE_URL = "http://localhost:3000/accounts"
export async function login(username: string, password: string) {
export async function loginAccount(username: string, password: string) {
return await axios.post(BASE_URL + "/login", {
username: username,
password: password
})
}
export async function register(account: AccountModel) {
return await axios.post(BASE_URL + "/register", account)
export async function registerAccount(account: AccountModel) {
return await axios.post(BASE_URL, account)
}
export async function updateAccount(account: AccountModel) {
return await axios.patch(BASE_URL, account)
}

81
software/src/data/enums/bannerStateEnum.ts
View File

@@ -1,8 +1,79 @@
export enum BannerStateEnum {
DATABASERESETSUCCESSFUL,
////////// System feedback //////////
// Some error
ERROR,
WRONGLOGIN,
LOGINSUCCESSFUL,
REGISTERSUCCESSFUL,
USERNAMEINUSE
BASKETPRODUCTADDED,
BASKETPRODUCTREMOVED,
////////// API Endpoint /api //////////
// Status: 200 OK
DATABASERESETSUCCESSFUL,
////////// API Endpoint /accounts //////////
// Status: 200 OK
ACCOUNTLOGINSUCCESSFUL,
// Status: 400 Bad request
ACCOUNTLOGINERROR,
// Status: 401 Unauthorized
ACCOUNTLOGINWRONGLOGIN,
// Status: 201 Created
ACCOUNTREGISTERSUCCESSFUL,
// Status: 400 Bad request
ACCOUNTREGISTERERROR,
// Status: 409 Conflict
ACCOUNTREGISTERUSERNAMEINUSE,
// Status: 200 OK
ACCOUNTUPDATESUCCESSFUL,
// No status code, runs in local cache
ACCOUNTLOGOUTSUCCESSFUL,
////////// API Endpoint /categories //////////
// Status: 201 Created
CATEGORYCREATESUCCESSFUL,
// Status: 200 OK
CATEGORYDELETESUCESSFUL,
// Status: 400 Bad request
CATEGORYCREATEERROR,
// Status: 400 Bad request
CATEGORYDELETEERROR,
////////// API Endpoint /orders //////////
// Status: 201 Created
ORDERPLACESUCCESSFUL,
////////// API Endpoint /products //////////
// Status: 201 Created
PRODUCTCREATESUCCESSFUL,
// Status: 400 Bad request
PRODUCTCREATEERROR,
// Status: 200 OK
PRODUCTDELETESUCCESSFUL,
// Status: 400 Bad request
PRODUCTDELETEERROR
}

8
software/src/data/stores/basketStore.ts
View File

@@ -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

95
software/src/data/stores/feedbackStore.ts
View File

@@ -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

48
software/src/data/stores/userStore.ts
View File

@@ -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)
}
}
})