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

Fix Tim Coding at Order Admin DnD

Browse Source
This commit is contained in:
FlorianSpeicher
2025-06-18 13:00:31 +02:00
parent d521142f3e
commit 135a2d71e7
1 changed files with 61 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
01-frontend/src/helper/adminpanel/OrdersInfo.tsx
View File

@@ -1,27 +1,25 @@
import { import {
Box,
Button, Button,
Card, CardContent,
Dialog, Dialog,
DialogActions,
DialogContent, DialogContent,
DialogTitle, DialogTitle,
DialogActions,
List, ListItemText,
Typography,
useTheme,
Card, CardContent,
Stack,
Divider, Divider,
Snackbar List, ListItemText,
Snackbar,
Stack,
Typography,
useTheme
} from "@mui/material"; } from "@mui/material";
import React, { useState, useEffect, PropsWithChildren } from "react"; import { useMutation, useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next"; import React, { PropsWithChildren, useEffect, useState } from "react";
import OrderType, { OrderStatusEnum } from "../../components/Order"; import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { useDrag, useDrop, DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend'; import { HTML5Backend } from 'react-dnd-html5-backend';
import { useQuery } from "@tanstack/react-query"; import { useTranslation } from "react-i18next";
import { fetchOrdersAdmin, orderPatch } from "../query/Queries"; import OrderType, { OrderPatch, OrderStatusEnum } from "../../components/Order";
import { useAccount } from "../AccountProvider"; import { useAccount } from "../AccountProvider";
import { useQueryClient } from "@tanstack/react-query"; import { fetchOrdersAdmin, orderPatch } from "../query/Queries";
// The order in which the statuses are displayed // The order in which the statuses are displayed
const statusOrder: OrderStatusEnum[] = [ const statusOrder: OrderStatusEnum[] = [
@@ -36,8 +34,7 @@ const statusOrder: OrderStatusEnum[] = [
const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({ order, onClick }) => { const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({ order, onClick }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme();
const [{ isDragging }, drag] = useDrag(() => ({ const [{ isDragging }, drag] = useDrag(() => ({
type: 'order', type: 'order',
item: { id: order.id }, item: { id: order.id },
@@ -54,10 +51,10 @@ const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({ order,
Order: {order.id} Order: {order.id}
</Typography> </Typography>
<Typography> <Typography>
{t('date') + ": " + new Date(order.time).toUTCString()} {t('date') + ": " + new Date(order.time).toUTCString()}
</Typography> </Typography>
<Typography> <Typography>
{t('total') + ": " + order.total} {t('total') + ": " + order.total}
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
@@ -90,39 +87,38 @@ const Column: React.FC<PropsWithChildren<{ status: OrderStatusEnum; onDrop: (id:
); );
}; };
const EditOrder: React.FC<{ open: boolean; order: OrderType | null; onClose: () => void}> = ({ open, order, onClose }) => { const EditOrder: React.FC<{ open: boolean; order: OrderType | null; onClose: () => void }> = ({ open, order, onClose }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme(); if (order === null)
if(order === null)
return ""; return "";
return ( return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth> <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle> <DialogTitle>
{`${t(order.status)} #${order?.id}`} {`${t(order.status)} #${order?.id}`}
</DialogTitle> </DialogTitle>
<DialogContent dividers> <DialogContent dividers>
{order && ( {order && (
<Stack spacing={2}> <Stack spacing={2}>
<Typography variant="subtitle1">{`${t('orderDate')}: ${new Date(order.time).toDateString()}`}</Typography> <Typography variant="subtitle1">{`${t('orderDate')}: ${new Date(order.time).toDateString()}`}</Typography>
<Divider /> <Divider />
<Typography variant="subtitle2">{t('orderedItems')}:</Typography> <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
<List dense> <List dense>
{order.orderItems.map((item, idx) => ( {order.orderItems.map((item, idx) => (
<ListItemText <ListItemText
key={idx} key={idx}
primary={`${item.article} x${item.amount}`} primary={`${item.article} x${item.amount}`}
/> />
))} ))}
</List> </List>
<Divider /> <Divider />
<Typography variant="h6">{`${t('sum')}: ${(order.total/100).toFixed(2)} €`}</Typography> <Typography variant="h6">{`${t('sum')}: ${(order.total / 100).toFixed(2)} €`}</Typography>
</Stack> </Stack>
)} )}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={onClose}>{t('close')}</Button> <Button onClick={onClose}>{t('close')}</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
); );
}; };
@@ -133,16 +129,21 @@ export default function OrdersInfo() {
const [editOrder, setEditOrder] = useState<OrderType | null>(null); const [editOrder, setEditOrder] = useState<OrderType | null>(null);
const [openSnackbar, setOpenSnackbar] = useState(false); const [openSnackbar, setOpenSnackbar] = useState(false);
const {user: loginData} = useAccount(); const { user: loginData } = useAccount();
const queryClient = useQueryClient()
const { data, refetch } = useQuery({ const { data, refetch } = useQuery({
queryKey: ["fetchOrdersAdmin", loginData], queryKey: ["fetchOrdersAdmin", loginData],
queryFn: () => fetchOrdersAdmin(loginData? loginData : {email: "", password: "", session: "", customerId: -1, isAdmin: false}), queryFn: () => fetchOrdersAdmin(loginData ? loginData : { email: "", password: "", session: "", customerId: -1, isAdmin: false }),
retry: 3, retry: 3,
retryDelay: 1000, retryDelay: 1000,
}); });
const patchOrderMutation = useMutation({
mutationFn: (order: OrderPatch) =>
orderPatch({ id: order.id, status: order.status }),
});
useEffect(() => { useEffect(() => {
console.log("data", data); console.log("data", data);
if (data) { if (data) {
@@ -150,30 +151,21 @@ export default function OrdersInfo() {
} }
}, [data]); }, [data]);
const handleDrop = async (id: number, status: OrderStatusEnum) => { const handleDrop = async (id: number, status: OrderStatusEnum) => {
if(orders.length < 1) { const obj = orders.find((o) => o.id === id);
const resp = await refetch(); if (!obj) {
setOrders(resp.data); // i dont know
}
const obj = orders.find((o) => {
return o.id === id
})
if(!obj) {
setOpenSnackbar(true); setOpenSnackbar(true);
return; return;
} }
obj.status = status try {
const resp = await queryClient.fetchQuery({ await patchOrderMutation.mutateAsync({ id: obj.id, status: obj.status });
queryKey: ["orderPatch", {id: obj.id, status: obj.status}], refetch();
queryFn: () => orderPatch({id: obj.id, status: obj.status}), setOrders(orders.map((o) => (o.id === id ? { ...o, status } : o)));
retry: 0, // eslint-disable-next-line @typescript-eslint/no-unused-vars
retryDelay: 1000, } catch (error) {
}) setOpenSnackbar(true);
refetch(); }
setOrders(orders.map((o) => (o.id === id ? obj : o )));
}; };
const handleEdit = (order: OrderType) => setEditOrder(order); const handleEdit = (order: OrderType) => setEditOrder(order);
return ( return (