Added CustomerEditDialog in admin panel.

01-frontend/public/locales/de/translation.json

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

01-frontend/public/locales/en/translation.json

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

01-frontend/src/helper/adminpanel/AccountsInfo.tsx

@@ -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,45 +95,61 @@ export default function AccountsInfo() {
         }
     ];
 
+    const [open, setOpen] = useState(false);
+
+    const handleCustomerEditSubmit = async () => {
+        setOpen(false);
+        await refetch();
+    };
+
     return (
-        <Box
-            className="page-table"
-            sx={{
-                backgroundColor: theme.palette.background.paper,
-                color: theme.palette.text.secondary
-            }}
-        >
-            <DataGrid
-                rows={rows}
-                columns={columns}
-                initialState={{}}
-                checkboxSelection
-                disableRowSelectionOnClick
-                onRowSelectionModelChange={handleSelectionChange}
-                slots={{
-                    toolbar: () => (
-                        <Toolbar>
-                            <Button
-                                variant="contained"
-                                color="error"
-                                startIcon={<DeleteIcon />}
-                                onClick={handleDeleteSelected}
-                                disabled={selectedRows.size === 0}
-                                sx={{
-                                    marginRight: 1
-                                }}
-                            >
-                                {t('deleteAccount')}
-                            </Button>
-                        </Toolbar>
-                    )
-                }}
-                showToolbar
-                processRowUpdate={(updatedRow) => {
-                    setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
-                    return updatedRow;
+        <>
+            <Box
+                className="page-table"
+                sx={{
+                    backgroundColor: theme.palette.background.paper,
+                    color: theme.palette.text.secondary
                 }}
+            >
+                <DataGrid
+                    rows={rows}
+                    columns={columns}
+                    initialState={{}}
+                    checkboxSelection
+                    disableRowSelectionOnClick
+                    onRowSelectionModelChange={handleSelectionChange}
+                    slots={{
+                        toolbar: () => (
+                            <Toolbar>
+                                <Button
+                                    variant="contained"
+                                    color="error"
+                                    startIcon={<DeleteIcon />}
+                                    onClick={handleDeleteSelected}
+                                    disabled={selectedRows.size === 0}
+                                    sx={{
+                                        marginRight: 1
+                                    }}
+                                >
+                                    {t('deleteAccount')}
+                                </Button>
+                            </Toolbar>
+                        )
+                    }}
+                    showToolbar
+                    processRowUpdate={(updatedRow) => {
+                        setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
+                        return updatedRow;
+                    }}
+                />
+            </Box>
+            <CustomerEditDialog
+                open={open}
+                onClose={() => setOpen(false)}
+                onSubmit={handleCustomerEditSubmit}
+                customerData={customerData}
+                setCustomerData={setCustomerData}
             />
-        </Box>
+            </>
     );
 }

01-frontend/src/helper/adminpanel/CustomerEditDialog.tsx

@@ -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;