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

Added CustomerEditDialog in admin panel.

Browse Source
This commit is contained in:
FlorianSpeicher
2025-06-18 15:24:28 +02:00
parent 9204c0a490
commit f985dae234
4 changed files with 171 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
01-frontend/public/locales/de/translation.json
View File

@@ -141,5 +141,6 @@
"ISSUES": "Probleme",
"DELIVERED": "Zugesendet",
"CANCELLED": "Storniert",
"fsImage": "FS-Bild"
"fsImage": "FS-Bild",
"changeCustomer": "Kundendaten ändern"
}

3
01-frontend/public/locales/en/translation.json
View File

@@ -141,5 +141,6 @@
"ISSUES": "Issues",
"DELIVERED": "Delivered",
"CANCELLED": "Cancelled",
"fsImage": "FS-Image"
"fsImage": "FS-Image",
"changeCustomer": "Change Customer Data"
}

42
01-frontend/src/helper/adminpanel/AccountsInfo.tsx
View File

@@ -7,27 +7,25 @@ import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import AccountType, { AdminAccountOperation, CustomerType } from "../../components/Account";
import { useAccount } from "../AccountProvider";
import { deleteAccountAdmin, fetchAccounts, updateCustomer } from "../query/Queries";
import { deleteAccountAdmin, fetchAccounts } from "../query/Queries";
import CustomerEditDialog from "./CustomerEditDialog";
export default function AccountsInfo() {
const theme = useTheme();
const { t } = useTranslation();
const changeCustomer = useMutation({
mutationFn: (customer: CustomerType) =>
updateCustomer(customer),
const [customerData, setCustomerData] = useState<CustomerType>({
id: 0,
name: "",
surname: "",
address: "",
zip: "",
country: ""
});
async function handleCustomerEdit(account: AccountType) {
const customer: CustomerType = {
id: account.customer.id,
name: account.customer.name,
surname: account.customer.surname,
address: account.customer.address,
zip: account.customer.zip,
country: account.customer.country,
};
await changeCustomer.mutateAsync(customer);
setCustomerData(account.customer);
setOpen(true);
}
const [rows, setRows] = useState<AccountType[]>([]);
@@ -35,7 +33,7 @@ export default function AccountsInfo() {
const { user: loginData } = useAccount();
const { data } = useQuery({
const { data, refetch } = useQuery({
queryKey: ["fetchAccounts", loginData],
queryFn: () => fetchAccounts(loginData ? loginData : { email: "", password: "", session: "", customerId: -1, isAdmin: false }),
retry: 3,
@@ -97,7 +95,15 @@ export default function AccountsInfo() {
}
];
const [open, setOpen] = useState(false);
const handleCustomerEditSubmit = async () => {
setOpen(false);
await refetch();
};
return (
<>
<Box
className="page-table"
sx={{
@@ -137,5 +143,13 @@ export default function AccountsInfo() {
}}
/>
</Box>
<CustomerEditDialog
open={open}
onClose={() => setOpen(false)}
onSubmit={handleCustomerEditSubmit}
customerData={customerData}
setCustomerData={setCustomerData}
/>
</>
);
}

102
01-frontend/src/helper/adminpanel/CustomerEditDialog.tsx Normal file
View File

@@ -0,0 +1,102 @@
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@mui/material";
import { useMutation } from "@tanstack/react-query";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { CustomerType } from "../../components/Account";
import { updateCustomer } from "../query/Queries"; // Importiere die Funktion für die Registrierung
type CustomerDialogProps = {
open: boolean;
onClose: () => void;
onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
customerData: CustomerType;
setCustomerData: React.Dispatch<React.SetStateAction<CustomerType>>;
};
const CustomerEditDialog: React.FC<CustomerDialogProps> = ({ open, onClose, customerData, setCustomerData, onSubmit }) => {
const { t } = useTranslation();
useEffect(() => {
if (open) {
const active = document.activeElement as HTMLElement | null;
if (active && typeof active.blur === "function") {
active.blur();
}
}
}, [open]);
const changeCustomer = useMutation({
mutationFn: (customer: CustomerType) =>
updateCustomer(customer),
});
const handleSave = async () => {
const customer: CustomerType = {
id: customerData.id,
name: customerData.name,
surname: customerData.surname,
address: customerData.address,
zip: customerData.zip,
country: customerData.country,
};
await changeCustomer.mutateAsync(customer);
onSubmit(); // Rufe die onSubmit-Funktion auf, um den Dialog zu schließen und die Änderungen zu übernehmen
onClose(); // Schließe den Dialog
}
return (
<Dialog open={open} onClose={onClose} disableEnforceFocus>
<DialogTitle>{t('changeCustomer')}</DialogTitle>
<DialogContent>
<TextField
margin="dense"
label={t("name")}
type="text"
fullWidth
value={customerData.name}
onChange={e => setCustomerData(prev => ({ ...prev, name: e.target.value }))}
/>
<TextField
margin="dense"
label={t("surname")}
type="text"
fullWidth
value={customerData.surname}
onChange={e => setCustomerData(prev => ({ ...prev, surname: e.target.value }))}
/>
<TextField
margin="dense"
label={t("address")}
type="text"
fullWidth
value={customerData.address}
onChange={e => setCustomerData(prev => ({ ...prev, address: e.target.value }))}
/>
<TextField
margin="dense"
label={t("zip")}
type="text"
fullWidth
value={customerData.zip}
onChange={e => setCustomerData(prev => ({ ...prev, zip: e.target.value }))}
/>
<TextField
margin="dense"
label={t("country")}
type="text"
fullWidth
value={customerData.country}
onChange={e => setCustomerData(prev => ({ ...prev, country: e.target.value }))}
/>
</DialogContent>
<DialogActions>
<Button variant="contained" color="primary" onClick={handleSave}>
{t("save")}
</Button>
</DialogActions>
</Dialog>
);
};
export default CustomerEditDialog;