Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added translations for order history

Browse Source
This commit is contained in:
Laura Dolibois
2025-05-25 19:39:14 +02:00
parent 9d8a675998
commit 1b1924b0b7
3 changed files with 65 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
01-frontend/src/pages/Orders.tsx
View File

@@ -1,11 +1,12 @@
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
import { useState } from "react";
import "./pages.css";
import {useTranslation} from "react-i18next";
type Order = {
id: string;
date: string;
status: "laufend" | "abgeschlossen";
status: "laufend" | "inactive";
items: { name: string; quantity: number; price: number }[];
total: number;
address: string;
@@ -15,7 +16,7 @@ const mockOrders: Order[] = [
{
id: "1001",
date: "2025-05-20",
status: "laufend",
status: "active",
items: [
{ name: "Tomatensamen", quantity: 2, price: 3.99 },
{ name: "Blumenerde", quantity: 1, price: 7.49 }
@@ -26,7 +27,7 @@ const mockOrders: Order[] = [
{
id: "1000",
date: "2025-05-10",
status: "abgeschlossen",
status: "inactive",
items: [
{ name: "Gießkanne", quantity: 1, price: 12.99 }
],
@@ -36,17 +37,20 @@ const mockOrders: Order[] = [
];
export default function Orders() {
const { t } = useTranslation();
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 activeOrders = mockOrders.filter(o => o.status === "active");
const inactiveOrders = mockOrders.filter(o => o.status === "inactive");
const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);
const handleCancelOrder = (orderId: string) => {
// Hier API-Call zum Stornieren einbauen
alert(`Bestellung ${orderId} wurde storniert.`);
alert(`${t('orderCancelled')} #${orderId}`);
setSelectedOrder(null);
};
@@ -54,80 +58,80 @@ export default function Orders() {
<Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
<Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}>
<Typography variant="h4" gutterBottom>
Meine Bestellungen
{t('myOrders')}
</Typography>
<Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
<Tab label="Laufende Bestellungen" />
<Tab label="Vergangene Bestellungen" />
<Tab label={t('active')} />
<Tab label={t('previous')} />
</Tabs>
<Divider sx={{ mb: 2 }} />
{tab === 0 ? (
laufendeBestellungen.length > 0 ? (
activeOrders.length > 0 ? (
<List>
{laufendeBestellungen.map(order => (
{activeOrders.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`}
primary={`${t('order')} #${order.id} • ${order.date}`}
secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
/>
</ListItemButton>
))}
</List>
) : (
<Typography color="text.secondary">Keine laufenden Bestellungen.</Typography>
<Typography color="text.secondary">{t('noActiveOrders')}</Typography>
)
) : (
vergangeneBestellungen.length > 0 ? (
inactiveOrders.length > 0 ? (
<List>
{vergangeneBestellungen.map(order => (
{inactiveOrders.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`}
primary={`${t('order')} #${order.id} • ${order.date}`}
secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
/>
</ListItemButton>
))}
</List>
) : (
<Typography color="text.secondary">Keine vergangenen Bestellungen.</Typography>
<Typography color="text.secondary">{t('noPreviousOrders')}</Typography>
)
)}
<Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
<DialogTitle>
{selectedOrder?.status === "laufend" ? "Laufende Bestellung" : "Vergangene Bestellung"} #{selectedOrder?.id}
{`${selectedOrder?.status === "active" ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
</DialogTitle>
<DialogContent dividers>
{selectedOrder && (
<Stack spacing={2}>
<Typography variant="subtitle1">Bestelldatum: {selectedOrder.date}</Typography>
<Typography variant="subtitle1">Lieferadresse: {selectedOrder.address}</Typography>
<Typography variant="subtitle1">{`${t('orderDate')}: ${selectedOrder.date}`}</Typography>
<Typography variant="subtitle1">{`${t('shippingAddress')}: ${selectedOrder.address}`}</Typography>
<Divider />
<Typography variant="subtitle2">Artikel:</Typography>
<Typography variant="subtitle2">{t('orderedItems')}:</Typography>
<List dense>
{selectedOrder.items.map((item, idx) => (
<ListItemText
key={idx}
primary={`${item.name} x${item.quantity}`}
secondary={`Einzelpreis: ${item.price.toFixed(2)} €`}
secondary={`${t('pricePerItem')}: ${item.price.toFixed(2)} €`}
/>
))}
</List>
<Divider />
<Typography variant="h6">Gesamtsumme: {selectedOrder.total.toFixed(2)} €</Typography>
<Typography variant="h6">{`${t('sum')}: ${selectedOrder.total.toFixed(2)} €`}</Typography>
</Stack>
)}
</DialogContent>
<DialogActions>
{selectedOrder?.status === "laufend" && (
{selectedOrder?.status === "active" && (
<Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
Bestellung stornieren
{t('cancelOrder')}
</Button>
)}
<Button onClick={() => setSelectedOrder(null)}>Schließen</Button>
<Button onClick={() => setSelectedOrder(null)}>{t('close')}</Button>
</DialogActions>
</Dialog>
</Paper>
</Box>
);
}
}