Refactored OrderStatus to Enum type.

2025-06-14 22:20:11 +02:00
parent 8eea799f5b
commit e3007d6fc1
5 changed files with 34 additions and 19 deletions
--- a/01-frontend/src/components/Order.tsx
+++ b/01-frontend/src/components/Order.tsx
@@ -1,7 +1,15 @@
+export const enum OrderStatusEnum {
+    CANCELLED,
+    ISSUES,
+    DELIVERED,
+    ORDERED,
+    IN_PROGRESS
+};
+
 type OrderType = {
    id: string;
    date: string;
-    status:"CANCELLED"| "ISSUES"| "DELIVERED"| "ORDERED" | "IN_PROGRESS";
+    status: OrderStatusEnum;
    items: { name: string; quantity: number; price: number }[];
    total: number;
    address: string;
@@ -30,6 +38,6 @@ export type SubmitOrder = {
  id: number;
  customerId: number;
  time: number;
-  status: "CANCELLED"| "ISSUES"| "DELIVERED"| "ORDERED" | "IN_PROGRESS";
+  status: OrderStatusEnum;
  orderItems: OrderItem[];
 }
--- a/01-frontend/src/helper/adminpanel/DroppableContainer.tsx
+++ b/01-frontend/src/helper/adminpanel/DroppableContainer.tsx
@@ -1,9 +1,10 @@
 import { useDroppable } from "@dnd-kit/core";
 import { Box, useTheme } from "@mui/material";
 import { ReactNode } from "react";
+import { OrderStatusEnum } from "../../components/Order";

 type DroppableContainerProps = {
-    id: string;
+    id: OrderStatusEnum;
    children: ReactNode;
 };

--- a/01-frontend/src/helper/adminpanel/OrdersInfo.tsx
+++ b/01-frontend/src/helper/adminpanel/OrdersInfo.tsx
@@ -13,13 +13,13 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DroppableContainer } from "./DroppableContainer";
 import SortableItem from "./SortableItem";
-import OrderType from "../../components/Order";
+import OrderType, { OrderStatusEnum } from "../../components/Order";

 const mockOrders: OrderType[] = [
    {
        id: "1001",
        date: "2025-05-20",
-        status: "CANCELLED",
+        status: OrderStatusEnum.CANCELLED,
        items: [
            { name: "Tomatensamen", quantity: 2, price: 3.99 },
            { name: "Blumenerde", quantity: 1, price: 7.49 }
@@ -30,7 +30,7 @@ const mockOrders: OrderType[] = [
    {
        id: "1000",
        date: "2025-05-10",
-        status: "ISSUES",
+        status: OrderStatusEnum.ISSUES,
        items: [{ name: "Gießkanne", quantity: 1, price: 12.99 }],
        total: 12.99,
        address: "Musterstraße 1, 12345 Musterstadt"
@@ -38,7 +38,7 @@ const mockOrders: OrderType[] = [
    {
        id: "1002",
        date: "2025-05-15",
-        status: "DELIVERED",
+        status: OrderStatusEnum.DELIVERED,
        items: [{ name: "Pflanzendünger", quantity: 1, price: 8.99 }],
        total: 8.99,
        address: "Musterstraße 1, 12345 Musterstadt"
@@ -46,7 +46,7 @@ const mockOrders: OrderType[] = [
    {
        id: "1003",
        date: "2025-05-18",
-        status: "ORDERED",
+        status: OrderStatusEnum.ORDERED,
        items: [{ name: "Blumentopf", quantity: 2, price: 5.99 }],
        total: 11.98,
        address: "Musterstraße 1, 12345 Musterstadt"
@@ -54,14 +54,20 @@ const mockOrders: OrderType[] = [
    {
        id: "1004",
        date: "2025-05-18",
-        status: "IN_PROGRESS",
+        status: OrderStatusEnum.IN_PROGRESS,
        items: [{ name: "TimWall", quantity: 2, price: 5.99 }],
        total: 12.99,
        address: "Musterstraße 1, 12345 Musterstadt"
    }
 ];

-const statusOrder = ["CANCELLED", "ISSUES", "DELIVERED", "ORDERED", "IN_PROGRESS"];
+const statusOrder: OrderStatusEnum[] = [
+  OrderStatusEnum.CANCELLED,
+  OrderStatusEnum.ISSUES,
+  OrderStatusEnum.ORDERED,
+  OrderStatusEnum.IN_PROGRESS,
+    OrderStatusEnum.DELIVERED
+];

 export default function OrdersInfo() {
    const { t } = useTranslation();
@@ -95,7 +101,7 @@ export default function OrdersInfo() {
        }
    };

-    const renderOrders = (status: string) => {
+    const renderOrders = (status: OrderStatusEnum) => {
        const filtered = orders.filter((o) => o.status === status);

        return (
@@ -114,7 +120,7 @@ export default function OrdersInfo() {
                    gutterBottom
                    sx={{ color: theme.palette.text.primary }}
                >
-                    {t(status)}
+                    {t(status.toString())}
                </Typography>
                {filtered.map((order) => (
                    <SortableItem
--- a/01-frontend/src/pages/Orders.tsx
+++ b/01-frontend/src/pages/Orders.tsx
@@ -2,7 +2,7 @@ import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import OrderType from "../components/Order";
+import OrderType, { OrderStatusEnum } from "../components/Order";
 import "./pages.css";
 import { useAccount } from "../helper/AccountProvider";
 import { fetchOrders } from "../helper/query/Queries";
@@ -29,8 +29,8 @@ export default function Orders() {
    const [tab, setTab] = useState(0);
    const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);

-    const activeOrders = orders.filter(o => o.status === "ISSUES" || o.status === "IN_PROGRESS" || o.status === "ORDERED");
-    const inactiveOrders = orders.filter(o => o.status === "CANCELLED" || o.status === "DELIVERED");
+    const activeOrders = orders.filter(o => o.status === OrderStatusEnum.ISSUES || o.status === OrderStatusEnum.IN_PROGRESS || o.status === OrderStatusEnum.ORDERED);
+    const inactiveOrders = orders.filter(o => o.status === OrderStatusEnum.CANCELLED || o.status === OrderStatusEnum.DELIVERED);

    const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);

@@ -85,7 +85,7 @@ export default function Orders() {

                <Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
                    <DialogTitle>
-                        {`${selectedOrder?.status === "IN_PROGRESS" ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
+                        {`${selectedOrder?.status === OrderStatusEnum.IN_PROGRESS ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
                    </DialogTitle>
                    <DialogContent dividers>
                        {selectedOrder && (
@@ -109,7 +109,7 @@ export default function Orders() {
                        )}
                    </DialogContent>
                    <DialogActions>
-                        {selectedOrder?.status === "IN_PROGRESS" && (
+                        {selectedOrder?.status === OrderStatusEnum.IN_PROGRESS && (
                            <Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
                                {t('cancelOrder')}
                            </Button>
--- a/01-frontend/src/pages/Payment.tsx
+++ b/01-frontend/src/pages/Payment.tsx
@@ -21,7 +21,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from 'react-router-dom';
 import Item from '../components/Item';
 import { BasketItem, useBasket } from '../helper/BasketProvider';
-import { ShippingDetails, SubmitOrder } from '../components/Order';
+import { OrderStatusEnum, ShippingDetails, SubmitOrder } from '../components/Order';
 import { useAccount } from '../helper/AccountProvider';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { submitCustomer, submitOrder } from '../helper/query/Queries';
@@ -95,7 +95,7 @@ export default function Payment() {
        id: 0, // This will be set by the backend
        customerId: user ? user.customerId : 0, // Use user ID if logged in, otherwise 0
        time: Date.now(),
-        status: "ORDERED",
+        status: OrderStatusEnum.ORDERED, // Initial status when order is placed
        orderItems: basket.map(item => ({
            id: item.item.id,
            amount: item.quantity,