Added Dummy orders page
This commit is contained in:
FlorianSpeicher
@@ -1,34 +1,133 @@
|
|||||||
import { Box, Typography, Button } from "@mui/material";
|
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useState } from "react";
|
||||||
import "./pages.css";
|
import "./pages.css";
|
||||||
|
|
||||||
export default function Orders() {
|
type Order = {
|
||||||
const navigate = useNavigate();
|
id: string;
|
||||||
|
date: string;
|
||||||
|
status: "laufend" | "abgeschlossen";
|
||||||
|
items: { name: string; quantity: number; price: number }[];
|
||||||
|
total: number;
|
||||||
|
address: string;
|
||||||
|
};
|
||||||
|
|
||||||
const handleGoHome = () => {
|
const mockOrders: Order[] = [
|
||||||
navigate("/");
|
{
|
||||||
|
id: "1001",
|
||||||
|
date: "2025-05-20",
|
||||||
|
status: "laufend",
|
||||||
|
items: [
|
||||||
|
{ name: "Tomatensamen", quantity: 2, price: 3.99 },
|
||||||
|
{ name: "Blumenerde", quantity: 1, price: 7.49 }
|
||||||
|
],
|
||||||
|
total: 15.47,
|
||||||
|
address: "Musterstraße 1, 12345 Musterstadt"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "1000",
|
||||||
|
date: "2025-05-10",
|
||||||
|
status: "abgeschlossen",
|
||||||
|
items: [
|
||||||
|
{ name: "Gießkanne", quantity: 1, price: 12.99 }
|
||||||
|
],
|
||||||
|
total: 12.99,
|
||||||
|
address: "Musterstraße 1, 12345 Musterstadt"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function Orders() {
|
||||||
|
const [tab, setTab] = useState(0);
|
||||||
|
const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
|
||||||
|
|
||||||
|
const laufendeBestellungen = mockOrders.filter(o => o.status === "laufend");
|
||||||
|
const vergangeneBestellungen = mockOrders.filter(o => o.status === "abgeschlossen");
|
||||||
|
|
||||||
|
const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);
|
||||||
|
|
||||||
|
const handleCancelOrder = (orderId: string) => {
|
||||||
|
// Hier API-Call zum Stornieren einbauen
|
||||||
|
alert(`Bestellung ${orderId} wurde storniert.`);
|
||||||
|
setSelectedOrder(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box className="no-page-container">
|
<Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
|
||||||
<Typography variant="h1" className="no-page-title">
|
<Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}>
|
||||||
Orders
|
<Typography variant="h4" gutterBottom>
|
||||||
</Typography>
|
Meine Bestellungen
|
||||||
<Typography variant="h5" className="no-page-subtitle">
|
</Typography>
|
||||||
Oops! The page you're looking for doesn't exist.
|
<Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
|
||||||
</Typography>
|
<Tab label="Laufende Bestellungen" />
|
||||||
<Typography variant="body1" className="no-page-description">
|
<Tab label="Vergangene Bestellungen" />
|
||||||
It seems you may have taken a wrong turn. Let's get you back on track.
|
</Tabs>
|
||||||
</Typography>
|
<Divider sx={{ mb: 2 }} />
|
||||||
<Button
|
{tab === 0 ? (
|
||||||
variant="contained"
|
laufendeBestellungen.length > 0 ? (
|
||||||
color="primary"
|
<List>
|
||||||
size="large"
|
{laufendeBestellungen.map(order => (
|
||||||
className="no-page-button"
|
<ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
|
||||||
onClick={handleGoHome}
|
<ListItemText
|
||||||
>
|
primary={`Bestellung #${order.id} • ${order.date}`}
|
||||||
Go Back to Home
|
secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`}
|
||||||
</Button>
|
/>
|
||||||
|
</ListItemButton>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
) : (
|
||||||
|
<Typography color="text.secondary">Keine laufenden Bestellungen.</Typography>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
vergangeneBestellungen.length > 0 ? (
|
||||||
|
<List>
|
||||||
|
{vergangeneBestellungen.map(order => (
|
||||||
|
<ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
|
||||||
|
<ListItemText
|
||||||
|
primary={`Bestellung #${order.id} • ${order.date}`}
|
||||||
|
secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`}
|
||||||
|
/>
|
||||||
|
</ListItemButton>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
) : (
|
||||||
|
<Typography color="text.secondary">Keine vergangenen Bestellungen.</Typography>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
|
||||||
|
<DialogTitle>
|
||||||
|
{selectedOrder?.status === "laufend" ? "Laufende Bestellung" : "Vergangene Bestellung"} #{selectedOrder?.id}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent dividers>
|
||||||
|
{selectedOrder && (
|
||||||
|
<Stack spacing={2}>
|
||||||
|
<Typography variant="subtitle1">Bestelldatum: {selectedOrder.date}</Typography>
|
||||||
|
<Typography variant="subtitle1">Lieferadresse: {selectedOrder.address}</Typography>
|
||||||
|
<Divider />
|
||||||
|
<Typography variant="subtitle2">Artikel:</Typography>
|
||||||
|
<List dense>
|
||||||
|
{selectedOrder.items.map((item, idx) => (
|
||||||
|
<ListItemText
|
||||||
|
key={idx}
|
||||||
|
primary={`${item.name} x${item.quantity}`}
|
||||||
|
secondary={`Einzelpreis: ${item.price.toFixed(2)} €`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
<Divider />
|
||||||
|
<Typography variant="h6">Gesamtsumme: {selectedOrder.total.toFixed(2)} €</Typography>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
{selectedOrder?.status === "laufend" && (
|
||||||
|
<Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
|
||||||
|
Bestellung stornieren
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button onClick={() => setSelectedOrder(null)}>Schließen</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Paper>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user