Fixed ORders Page

2025-06-15 21:29:48 +02:00
parent f8bb5fc82a
commit 570b64750e
5 changed files with 58 additions and 41 deletions
--- a/01-frontend/src/components/Item.tsx
+++ b/01-frontend/src/components/Item.tsx
@@ -1,5 +1,5 @@
 type Item = {
-    id: string;
+    id: number;
    uuid: string;
    name: string;
    description: string;
--- a/01-frontend/src/components/Order.tsx
+++ b/01-frontend/src/components/Order.tsx
@@ -1,18 +1,18 @@
-export const enum OrderStatusEnum {
-    CANCELLED,
-    ISSUES,
-    DELIVERED,
-    ORDERED,
-    IN_PROGRESS
+export enum OrderStatusEnum {
+    CANCELLED = 'CANCELLED',
+    ISSUES = 'ISSUES',
+    DELIVERED = 'DELIVERED',
+    ORDERED = 'ORDERED',
+    IN_PROGRESS = 'IN_PROGRESS',
 };

 type OrderType = {
-    id: string;
-    date: string;
+    id: number;
+    customerId: number;
+    time: number;
    status: OrderStatusEnum;
-    items: { name: string; quantity: number; price: number }[];
+    orderItems: { id: number; amount: number; article: string }[];
    total: number;
-    address: string;
 };

 export default OrderType;
@@ -34,10 +34,7 @@ export type OrderItem = {
    article: string; // UUID of the item
 };

-export type SubmitOrder = {
-  id: number;
-  customerId: number;
-  time: number;
-  status: OrderStatusEnum;
-  orderItems: OrderItem[];
-}
+export type OrderPatch = {
+    id: number;
+    status: OrderStatusEnum;
+    };
--- a/01-frontend/src/helper/query/Queries.tsx
+++ b/01-frontend/src/helper/query/Queries.tsx
@@ -1,7 +1,7 @@
 // api/queries.js

 import AccountType, { CustomerType, SubmitLogin, User } from "../../components/Account";
-import { SubmitOrder } from "../../components/Order";
+import OrderType, { OrderPatch } from "../../components/Order";
 import RatingSubmitType from "../../components/RatingSubmit";

 export const fetchItemList = async () => {
@@ -39,7 +39,7 @@ export const fetchRatingList = async (itemId: string) => {
    return data;
 };

-export const submitOrder = async (data: SubmitOrder) => {
+export const submitOrder = async (data: OrderType) => {
    const response = await fetch('http://localhost:8085/order', {
        method: 'POST',
        headers: {
@@ -143,7 +143,7 @@ export const deleteAccount = async (user: User) => {
 };

 export const fetchOrders = async (customerId: number) => {
-    const response = await fetch('http://localhost:8085/order/all?sutomerId=' + customerId);
+    const response = await fetch('http://localhost:8085/order/all?customerId=' + customerId);
    if (!response.ok) {
        throw new Error('Fehler beim Laden des Customers');
    }
@@ -180,3 +180,14 @@ export const editAccount = async (customer: CustomerType) => {
    }
    return await response.json();
 };
+
+export const orderPatch = async (order: OrderPatch) => {
+    const response = await fetch("http://localhost:8085/order?id=" + order.id + "&status=" + order.status, {
+        method: "PATCH",
+    }
+    );
+    if (!response.ok) {
+        throw new Error("Order patch failed");
+    }
+    return response.json();
+};
--- a/01-frontend/src/pages/Orders.tsx
+++ b/01-frontend/src/pages/Orders.tsx
@@ -5,14 +5,14 @@ import { useTranslation } from "react-i18next";
 import OrderType, { OrderStatusEnum } from "../components/Order";
 import "./pages.css";
 import { useAccount } from "../helper/AccountProvider";
-import { fetchOrders } from "../helper/query/Queries";
+import { fetchOrders, orderPatch } from "../helper/query/Queries";

 export default function Orders() {

    const {user} = useAccount();
    const [orders, setOrders] = useState<OrderType[]>([])

-    const { data: accountOrders } = useQuery<OrderType[]>({
+    const { data: accountOrders, refetch } = useQuery<OrderType[]>({
        queryKey: ['fetchOrders', user?.customerId], // Hier sollte die tatsächliche Kunden-ID verwendet werden
        queryFn: () => user ? fetchOrders(user.customerId) : Promise.resolve([]), // Simulierte API-Antwort
        enabled: !!user, // Nur ausführen, wenn user existiert
@@ -22,6 +22,7 @@ export default function Orders() {

    useEffect(() => {
        setOrders(accountOrders ?? []);
+        console.log("Orders fetched:", accountOrders);
    }, [accountOrders]);

    const { t } = useTranslation();
@@ -34,10 +35,19 @@ export default function Orders() {

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

-    const handleCancelOrder = (orderId: string) => {
-        // Hier API-Call zum Stornieren einbauen
-        alert(`${t('orderCancelled')} #${orderId}`);
+
+    const { refetch: cancleOrder } = useQuery({
+            queryKey: ["orderPatch", {id: selectedOrder?.id || -1, status: OrderStatusEnum.CANCELLED}],
+            queryFn: () => orderPatch({id: selectedOrder?.id || -1, status: OrderStatusEnum.CANCELLED}),
+            retry: 0,
+            retryDelay: 1000,
+            enabled: false,
+        });
+
+    const handleCancelOrder = async() => {
+        await cancleOrder();
        setSelectedOrder(null);
+        refetch();
    };

    return (
@@ -57,8 +67,8 @@ export default function Orders() {
                            {activeOrders.map(order => (
                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
                                    <ListItemText
-                                        primary={`${t('order')} #${order.id} • ${order.date}`}
-                                        secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
+                                        primary={`${t('order')} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
+                                        secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.orderItems.length} ${t('items')}`}
                                    />
                                </ListItemButton>
                            ))}
@@ -72,8 +82,8 @@ export default function Orders() {
                            {inactiveOrders.map(order => (
                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
                                    <ListItemText
-                                        primary={`${t('order')} #${order.id} • ${order.date}`}
-                                        secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
+                                        primary={`${t('order')} #${order.id} • ${order.status} • ${order.time}`}
+                                        secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.orderItems.length} ${t('items')}`}
                                    />
                                </ListItemButton>
                            ))}
@@ -90,16 +100,14 @@ export default function Orders() {
                    <DialogContent dividers>
                        {selectedOrder && (
                            <Stack spacing={2}>
-                                <Typography variant="subtitle1">{`${t('orderDate')}: ${selectedOrder.date}`}</Typography>
-                                <Typography variant="subtitle1">{`${t('shippingAddress')}: ${selectedOrder.address}`}</Typography>
+                                <Typography variant="subtitle1">{`${t('orderDate')}: ${selectedOrder.time}`}</Typography>
                                <Divider />
                                <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
                                <List dense>
-                                    {selectedOrder.items.map((item, idx) => (
+                                    {selectedOrder.orderItems.map((item, idx) => (
                                        <ListItemText
                                            key={idx}
-                                            primary={`${item.name} x${item.quantity}`}
-                                            secondary={`${t('pricePerItem')}: ${item.price.toFixed(2)} €`}
+                                            primary={`${item.article} x${item.amount}`}
                                        />
                                    ))}
                                </List>
@@ -109,8 +117,8 @@ export default function Orders() {
                        )}
                    </DialogContent>
                    <DialogActions>
-                        {selectedOrder?.status === OrderStatusEnum.IN_PROGRESS && (
-                            <Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
+                        {(selectedOrder?.status === OrderStatusEnum.ISSUES || selectedOrder?.status === OrderStatusEnum.IN_PROGRESS || selectedOrder?.status === OrderStatusEnum.ORDERED) && (
+                            <Button color="error" onClick={() => handleCancelOrder()}>
                                {t('cancelOrder')}
                            </Button>
                        )}
--- a/01-frontend/src/pages/Payment.tsx
+++ b/01-frontend/src/pages/Payment.tsx
@@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from 'react-router-dom';
 import { CustomerType } from '../components/Account';
 import Item from '../components/Item';
-import { OrderStatusEnum, SubmitOrder } from '../components/Order';
+import OrderType, { OrderStatusEnum } from '../components/Order';
 import { useAccount } from '../helper/AccountProvider';
 import { BasketItem, useBasket } from '../helper/BasketProvider';
 import { fetchCustomer, submitCustomer, submitOrder } from '../helper/query/Queries';
@@ -82,7 +82,7 @@ export default function Payment() {
    const steps = [t('reviewCart'), t('shippingDetails'), t('payment'), t('orderSummary')];
    const { user } = useAccount();

-    const submitOrderData: SubmitOrder = {
+    const submitOrderData: OrderType = {
        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(),
@@ -92,6 +92,7 @@ export default function Payment() {
            amount: item.quantity,
            article: item.item.uuid, // Assuming UUID is the identifier for the item
        })),
+        total: basket.reduce((total, item) => total + (item.quantity * getDiscountedPrice(item.item)), 0),
    };

    const { refetch: refetchCustomer } = useQuery({
@@ -132,7 +133,7 @@ export default function Payment() {

    // Verwende useMutation statt useQuery für submitOrder
    const { mutateAsync: submitOrderMutation } = useMutation({
-        mutationFn: (orderData: SubmitOrder) => submitOrder(orderData),
+        mutationFn: (orderData: OrderType) => submitOrder(orderData),
    });

    const handleNext = async () => {
@@ -150,7 +151,7 @@ export default function Payment() {
            }

            // Erzeuge die Orderdaten mit der richtigen customerId
-            const orderData: SubmitOrder = {
+            const orderData: OrderType = {
                ...submitOrderData,
                customerId,
            };