From 0b34174ce9e18b365c1db15b19ccd9b6d927c80b Mon Sep 17 00:00:00 2001 From: TobiZog Date: Tue, 24 Sep 2024 13:12:44 +0200 Subject: [PATCH] Matching UI with improved API --- misc/.$database.drawio.bkp | 378 ------------------ software/backend/data/accountRoles.json | 8 +- software/backend/data/accounts.json | 14 +- software/backend/routes/account.routes.ts | 18 +- software/backend/routes/category.routes.ts | 10 +- software/backend/routes/order.routes.ts | 20 +- software/backend/routes/product.routes.ts | 10 +- software/src/App.vue | 10 +- software/src/components/navigationItems.vue | 12 +- software/src/data/models/accountModel.ts | 15 +- software/src/data/models/accountRole.ts | 5 + software/src/data/models/addressModel.ts | 6 + software/src/data/models/basketItemModel.ts | 9 +- software/src/data/models/brandModel.ts | 4 + software/src/data/models/categoryModel.ts | 2 - software/src/data/models/orderModel.ts | 5 +- software/src/data/models/paymentModel.ts | 4 + software/src/data/models/productModel.ts | 15 +- .../data/models/productWithCategoryModel.ts | 15 - .../stores/{userStore.ts => accountStore.ts} | 19 +- software/src/data/stores/basketStore.ts | 16 +- software/src/data/stores/preferencesStore.ts | 11 + software/src/data/stores/productStore.ts | 12 +- .../src/pages/accountPage/accountDataCard.vue | 26 +- software/src/pages/basketPage/index.vue | 6 +- software/src/pages/loginPage/loginForm.vue | 6 +- software/src/pages/loginPage/registerForm.vue | 14 +- software/src/pages/ordersPage/index.vue | 6 +- software/src/pages/ordersPage/ordersCard.vue | 8 +- .../src/pages/preferencesPage/pageSetup.vue | 12 +- software/src/pages/productsPage/index.vue | 6 +- .../src/pages/productsPage/productCard.vue | 12 +- .../productsPage/productDetailsDialog.vue | 20 +- software/src/scripts/productScripts.ts | 5 +- 34 files changed, 194 insertions(+), 545 deletions(-) delete mode 100644 misc/.$database.drawio.bkp create mode 100644 software/src/data/models/accountRole.ts create mode 100644 software/src/data/models/addressModel.ts create mode 100644 software/src/data/models/brandModel.ts create mode 100644 software/src/data/models/paymentModel.ts delete mode 100644 software/src/data/models/productWithCategoryModel.ts rename software/src/data/stores/{userStore.ts => accountStore.ts} (79%) create mode 100644 software/src/data/stores/preferencesStore.ts diff --git a/misc/.$database.drawio.bkp b/misc/.$database.drawio.bkp deleted file mode 100644 index 4326bf8..0000000 --- a/misc/.$database.drawio.bkp +++ /dev/null @@ -1,378 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/software/backend/data/accountRoles.json b/software/backend/data/accountRoles.json index 9b4ad2c..e795819 100644 --- a/software/backend/data/accountRoles.json +++ b/software/backend/data/accountRoles.json @@ -2,12 +2,18 @@ "data": [ { "id": 0, + "name": "Unregistered", + "privilegeBuy": false, + "privilegeAdminPanel": false + }, + { + "id": 1, "name": "User", "privilegeBuy": true, "privilegeAdminPanel": false }, { - "id": 1, + "id": 2, "name": "Admin", "privilegeBuy": true, "privilegeAdminPanel": true diff --git a/software/backend/data/accounts.json b/software/backend/data/accounts.json index 9ba39d3..8ac9104 100644 --- a/software/backend/data/accounts.json +++ b/software/backend/data/accounts.json @@ -22,7 +22,7 @@ "iban": "DE92500105175721645777" } ], - "accountRoleId": 1 + "accountRoleId": 2 }, { "id": 1, @@ -46,7 +46,7 @@ "iban": "DE12500105179557939114" } ], - "accountRoleId": 0 + "accountRoleId": 1 }, { "id": 2, @@ -77,7 +77,7 @@ "iban": "DE31500105175417833272" } ], - "accountRoleId": 0 + "accountRoleId": 1 }, { "id": 3, @@ -101,7 +101,7 @@ "iban": "DE41500105172184936679" } ], - "accountRoleId": 0 + "accountRoleId": 1 }, { "id": 4, @@ -125,7 +125,7 @@ "iban": "DE85500105172283979774" } ], - "accountRoleId": 0 + "accountRoleId": 1 }, { "id": 5, @@ -149,7 +149,7 @@ "iban": "DE45500105178862417577" } ], - "accountRoleId": 0 + "accountRoleId": 1 }, { "id": 6, @@ -180,7 +180,7 @@ "iban": "DE51500105177526222196" } ], - "accountRoleId": 0 + "accountRoleId": 1 } ] } \ No newline at end of file diff --git a/software/backend/routes/account.routes.ts b/software/backend/routes/account.routes.ts index e4f3cb3..c35466d 100644 --- a/software/backend/routes/account.routes.ts +++ b/software/backend/routes/account.routes.ts @@ -22,20 +22,20 @@ account.post("/login", (req: Request, res: Response) => { if (account != null) { if (account.dataValues.password == req.body.password) { // Status: 200 OK - res.status(200).json(account).send() + res.status(200).json(account) } else { // Status: 401 Unauthorized res.status(401).json({ code: 401, message: "Unauthorized" - }).send() + }) } } else { // Status: 400 Bad request res.status(400).json({ code: 400, message: "Bad Request" - }).send() + }) } } ) @@ -50,7 +50,7 @@ account.post("/", (req: Request, res: Response) => { res.status(400).json({ code: 400, message: "Username too short!" - }).send() + }) } // Check if password is valid @@ -60,20 +60,20 @@ account.post("/", (req: Request, res: Response) => { res.status(400).json({ code: 400, message: "Password too short!" - }).send() + }) } // Create account Account.create(req.body) .then(account => { // Status: 201 Created - res.status(201).json(account).send() + res.status(201).json(account) }).catch(reason => { // Status: 409 Conflict res.status(409).json({ code: 409, message: "Username already in use" - }).send() + }) }) }) @@ -84,13 +84,13 @@ account.patch("/", (req: Request, res: Response) => { }) .then(account => { // Status: 200 OK - res.status(200).json(account).send() + res.status(200).json(account) }) .catch(error => { // Status: 400 Bad request res.status(400).json({ code: 400, message: error - }).send() + }) }) }) diff --git a/software/backend/routes/category.routes.ts b/software/backend/routes/category.routes.ts index 89e21f4..655bb6f 100644 --- a/software/backend/routes/category.routes.ts +++ b/software/backend/routes/category.routes.ts @@ -7,7 +7,7 @@ export const category = Router() category.get("/", (req: Request, res: Response, next: NextFunction) => { Category.findAll() .then(categories => { - res.status(200).json(categories).send() + res.status(200).json(categories) }) }) @@ -15,13 +15,13 @@ category.get("/", (req: Request, res: Response, next: NextFunction) => { category.post("/", (req: Request, res: Response, next: NextFunction) => { Category.create(req.body) .then(category => { - res.status(201).json(category).send() + res.status(201).json(category) }) .catch(error => { res.status(400).json({ code: 400, message: error - }).send() + }) }) }) @@ -31,12 +31,12 @@ category.delete("/:id", (req: Request, res: Response, next: NextFunction) => { where: { id: req.params.id } }) .then(category => { - res.status(200).json(category).send() + res.status(200).json(category) }) .catch(error => { res.status(400).json({ code: 400, message: error - }).send() + }) }) }) \ No newline at end of file diff --git a/software/backend/routes/order.routes.ts b/software/backend/routes/order.routes.ts index 6ef02af..5ac82cc 100644 --- a/software/backend/routes/order.routes.ts +++ b/software/backend/routes/order.routes.ts @@ -2,6 +2,8 @@ import { Router, Request, Response } from "express"; import { Order } from "../models/order.model"; import { Product } from "../models/product.model"; import { OrderItem } from "../models/orderItem.model"; +import { Brand } from "../models/brand.model"; +import { Category } from "../models/category.model"; export const order = Router() @@ -10,7 +12,21 @@ order.get("/:id", (req: Request, res: Response) => { Order.findAll({ where: { accountId: req.params.id }, include: [ - { model: OrderItem, include: [ Product ] } + { + model: OrderItem, + include: [ + { + model: Product, + include: [ Brand, Category ], + attributes: { + exclude: [ + "categoryId", + "brandId" + ] + } + }, + ] + } ] }) .then(orders => { @@ -42,6 +58,6 @@ order.post("/", (req: Request, res: Response) => { } // Created - res.status(201).json(order).send() + res.status(201).json(order) }) }) \ No newline at end of file diff --git a/software/backend/routes/product.routes.ts b/software/backend/routes/product.routes.ts index 1523521..ce3293a 100644 --- a/software/backend/routes/product.routes.ts +++ b/software/backend/routes/product.routes.ts @@ -36,7 +36,7 @@ product.get("/:productId", (req: Request, res: Response) => { } ) .then(product => { - res.status(200).json(product).send() + res.status(200).json(product) }) }) @@ -44,13 +44,13 @@ product.get("/:productId", (req: Request, res: Response) => { product.post("/", (req: Request, res: Response) => { Product.create(req.body) .then(product => { - res.status(201).json(product).send() + res.status(201).json(product) }) .catch(error => { res.status(400).json({ code: 400, message: error - }).send() + }) }) }) @@ -60,12 +60,12 @@ product.delete("/:id", (req: Request, res: Response) => { where: { id: req.params.id } }) .then(product => { - res.status(200).json(product).send() + res.status(200).json(product) }) .catch(error => { res.status(400).json({ code: 400, message: error - }).send() + }) }) }) \ No newline at end of file diff --git a/software/src/App.vue b/software/src/App.vue index cd33737..8bae8fe 100644 --- a/software/src/App.vue +++ b/software/src/App.vue @@ -1,27 +1,27 @@ diff --git a/software/src/components/navigationItems.vue b/software/src/components/navigationItems.vue index 28dec75..745f273 100644 --- a/software/src/components/navigationItems.vue +++ b/software/src/components/navigationItems.vue @@ -1,8 +1,8 @@ @@ -36,16 +36,16 @@ const navRail = defineModel("navRail", { type: Boolean }) -
- +
+
-
+
- +
diff --git a/software/src/data/models/accountModel.ts b/software/src/data/models/accountModel.ts index a92e85f..64293b0 100644 --- a/software/src/data/models/accountModel.ts +++ b/software/src/data/models/accountModel.ts @@ -1,15 +1,14 @@ +import { AccountRole } from "./accountRole" +import { AddressModel } from "./addressModel" +import { PaymentModel } from "./paymentModel" + export class AccountModel { id: number username: string = "" password: string = "" - street: string = "" - houseNumber: number = 0 - postalCode: number = 0 - city: string = "" firstName: string = "" lastName: string = "" - createdAt: string = "" - updatedAt: string = "" - bankName: string = "" - iban: string = "" + addresses: Array = [ new AddressModel() ] + payments: Array = [ new PaymentModel() ] + accountRole: AccountRole = new AccountRole() } \ No newline at end of file diff --git a/software/src/data/models/accountRole.ts b/software/src/data/models/accountRole.ts new file mode 100644 index 0000000..0cb8d47 --- /dev/null +++ b/software/src/data/models/accountRole.ts @@ -0,0 +1,5 @@ +export class AccountRole { + name: string = "" + privilegeBuy: boolean = false + privilegeAdminPanel: boolean = false +} \ No newline at end of file diff --git a/software/src/data/models/addressModel.ts b/software/src/data/models/addressModel.ts new file mode 100644 index 0000000..6349eec --- /dev/null +++ b/software/src/data/models/addressModel.ts @@ -0,0 +1,6 @@ +export class AddressModel { + street: string = "" + houseNumber: number = 0 + postalCode: number = 0 + city: string = "" +} \ No newline at end of file diff --git a/software/src/data/models/basketItemModel.ts b/software/src/data/models/basketItemModel.ts index e924cd1..cb41176 100644 --- a/software/src/data/models/basketItemModel.ts +++ b/software/src/data/models/basketItemModel.ts @@ -1,10 +1,7 @@ +import { ProductModel } from "./productModel" + export class BasketItemModel { id: number = -1 - brand: string = "" - name: string = "" - categoryName: string = "" - categoryIcon: string = "" - price: number = 0 - discount: number = 0 quantity: number = 1 + product: ProductModel = new ProductModel() } \ No newline at end of file diff --git a/software/src/data/models/brandModel.ts b/software/src/data/models/brandModel.ts new file mode 100644 index 0000000..b30244c --- /dev/null +++ b/software/src/data/models/brandModel.ts @@ -0,0 +1,4 @@ +export class BrandModel { + id: number = 0 + name: string = "" +} \ No newline at end of file diff --git a/software/src/data/models/categoryModel.ts b/software/src/data/models/categoryModel.ts index 1829b21..31d829e 100644 --- a/software/src/data/models/categoryModel.ts +++ b/software/src/data/models/categoryModel.ts @@ -2,6 +2,4 @@ export class CategoryModel { id: number = -1 name: string icon: string - createdAt: string = "" - updatedAt: string = "" } \ No newline at end of file diff --git a/software/src/data/models/orderModel.ts b/software/src/data/models/orderModel.ts index 7923d13..29666df 100644 --- a/software/src/data/models/orderModel.ts +++ b/software/src/data/models/orderModel.ts @@ -2,8 +2,7 @@ import { OrderedItemModel } from "./orderedItemModel" export class OrderModel { accountId: number - totalPrice: number shippingProgress: number - orderItem: Array - createdAt: string + orderItems: Array + orderedAt: string } \ No newline at end of file diff --git a/software/src/data/models/paymentModel.ts b/software/src/data/models/paymentModel.ts new file mode 100644 index 0000000..c27c5df --- /dev/null +++ b/software/src/data/models/paymentModel.ts @@ -0,0 +1,4 @@ +export class PaymentModel { + bankName: string = "" + iban: string = "" +} \ No newline at end of file diff --git a/software/src/data/models/productModel.ts b/software/src/data/models/productModel.ts index a61fec0..825cd63 100644 --- a/software/src/data/models/productModel.ts +++ b/software/src/data/models/productModel.ts @@ -1,13 +1,16 @@ +import { BrandModel } from "./brandModel" +import { CategoryModel } from "./categoryModel" + export class ProductModel { - id: number = -1 - brand: string - name: string + id: number = 0 + category: CategoryModel = new CategoryModel() + brand: BrandModel = new BrandModel() + name: string = "" description: string = "" - specs: Array = [] - categoryId: number price: number = 0 discount: number = 0 rating: number = 1 + inStock: number + specs: Array = [] images: Array = [""] - storedItems: number } \ No newline at end of file diff --git a/software/src/data/models/productWithCategoryModel.ts b/software/src/data/models/productWithCategoryModel.ts deleted file mode 100644 index 94dd1a8..0000000 --- a/software/src/data/models/productWithCategoryModel.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { CategoryModel } from "./categoryModel" - -export class ProductWithCategoryModel { - id: number = -1 - brand: string - name: string - description: string = "" - specs: Array = [] - category: CategoryModel = new CategoryModel() - price: number = 0 - discount: number = 0 - rating: number = 1 - images: Array = [""] - storedItems: number -} \ No newline at end of file diff --git a/software/src/data/stores/userStore.ts b/software/src/data/stores/accountStore.ts similarity index 79% rename from software/src/data/stores/userStore.ts rename to software/src/data/stores/accountStore.ts index 96b0672..d0cf73e 100644 --- a/software/src/data/stores/userStore.ts +++ b/software/src/data/stores/accountStore.ts @@ -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("hackmycart/userStore/theme", ThemeEnum.DARKRED), - language: useLocalStorage("hackmycart/userStore/language", LanguageEnum.GERMAN), - userAccount: useLocalStorage("hackmycart/userStore/userAccount", new AccountModel()), - loggedIn: useLocalStorage("hackmycart/userStore/loggedIn", false), - orders: useLocalStorage>("hackmycart/userStore/orders", []) + userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountModel()), + orders: useLocalStorage>("hackmycart/accountStore/orders", [ new OrderModel() ]) }), actions: { diff --git a/software/src/data/stores/basketStore.ts b/software/src/data/stores/basketStore.ts index b20803f..004ca85 100644 --- a/software/src/data/stores/basketStore.ts +++ b/software/src/data/stores/basketStore.ts @@ -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>("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) } } }) diff --git a/software/src/data/stores/preferencesStore.ts b/software/src/data/stores/preferencesStore.ts new file mode 100644 index 0000000..1681380 --- /dev/null +++ b/software/src/data/stores/preferencesStore.ts @@ -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("hackmycart/preferencesStore/theme", ThemeEnum.DARKRED), + language: useLocalStorage("hackmycart/preferencesStore/language", LanguageEnum.GERMAN) + }), +}) \ No newline at end of file diff --git a/software/src/data/stores/productStore.ts b/software/src/data/stores/productStore.ts index a2eef64..6ab31d5 100644 --- a/software/src/data/stores/productStore.ts +++ b/software/src/data/stores/productStore.ts @@ -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>("hackmycart/productStore/products", []), - filteredProducts: useLocalStorage>("hackmycart/productStore/filteredProducts", []), + products: useLocalStorage>("hackmycart/productStore/products", []), + filteredProducts: useLocalStorage>("hackmycart/productStore/filteredProducts", []), sortOrder: useLocalStorage("hackmycart/productStore/sortOrder", SortOrder.NAMEATOZ), filteredCategory: useLocalStorage("hackmycart/productStore/filteredCategory", new CategoryModel()), onlyDiscounts: useLocalStorage("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: { diff --git a/software/src/pages/accountPage/accountDataCard.vue b/software/src/pages/accountPage/accountDataCard.vue index 2ccb985..de1a23b 100644 --- a/software/src/pages/accountPage/accountDataCard.vue +++ b/software/src/pages/accountPage/accountDataCard.vue @@ -1,9 +1,9 @@