Added Account delete admin button.

01-frontend/src/components/Account.tsx

@@ -36,6 +36,12 @@ export type SubmitLoginSession = {
   session: string;
 };
 
+export type AdminAccountOperation = {
+  email: string;
+  session: string;
+  accountId: number;
+}
+
 export type User = {
   password: string;
   email: string;

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

@@ -1,17 +1,17 @@
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
-import {Box, Button, IconButton, Toolbar, useTheme} from "@mui/material";
-import AccountType from "../../components/Account";
-import {useTranslation} from "react-i18next";
-import {DataGrid, GridColDef, GridRowId, GridRowSelectionModel} from "@mui/x-data-grid";
-import {useEffect, useState} from "react";
-import { useQuery } from "@tanstack/react-query";
-import { fetchAccounts } from "../query/Queries";
+import { Box, Button, IconButton, Toolbar, useTheme } from "@mui/material";
+import { DataGrid, GridColDef, GridRowId, GridRowSelectionModel } from "@mui/x-data-grid";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import AccountType, { AdminAccountOperation } from "../../components/Account";
 import { useAccount } from "../AccountProvider";
+import { deleteAccountAdmin, fetchAccounts } from "../query/Queries";
 
 export default function AccountsInfo() {
     const theme = useTheme();
-    const {t} = useTranslation();
+    const { t } = useTranslation();
 
     function handleCustomerEdit(account: AccountType) {
         //TODO: implement
@@ -21,15 +21,20 @@ export default function AccountsInfo() {
     const [rows, setRows] = useState<AccountType[]>([]);
     const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
 
-    const {user: loginData} = useAccount();
+    const { user: loginData } = useAccount();
 
     const { data } = useQuery({
         queryKey: ["fetchAccounts", loginData],
-        queryFn: () => fetchAccounts(loginData? loginData : {email: "", password: "", session: "", customerId: -1, isAdmin: false}),
+        queryFn: () => fetchAccounts(loginData ? loginData : { email: "", password: "", session: "", customerId: -1, isAdmin: false }),
         retry: 3,
         retryDelay: 1000,
     });
 
+    const deleteAccount = useMutation({
+        mutationFn: (user: AdminAccountOperation) =>
+            deleteAccountAdmin(user),
+    });
+
     useEffect(() => {
         if (data) {
             setRows(data);
@@ -41,16 +46,16 @@ export default function AccountsInfo() {
     };
 
     const handleDeleteSelected = async () => {
-        selectedRows.forEach((row) => {
-            //TODO: send delete command, or send deleteall
-            console.log(row);
+        selectedRows.forEach(async (row) => {
+            
+                await deleteAccount.mutateAsync({ email: loginData?.email || '', session: loginData?.session || '', accountId: row.id as number });
         })
 
         setRows(rows.filter((row) => !selectedRows.has(row.id)));
     };
 
     const columns: GridColDef<(typeof rows)[number]>[] = [
-        {field: 'id', headerName: 'ID', width: 60},
+        { field: 'id', headerName: 'ID', width: 60 },
         {
             field: 'admin',
             headerName: t('admin'),
@@ -77,7 +82,7 @@ export default function AccountsInfo() {
             sortable: false,
             disableReorder: true,
             disableColumnMenu: true,
-            renderCell: params => <IconButton onClick={() => handleCustomerEdit(params.row)}> <EditIcon/> </IconButton>,
+            renderCell: params => <IconButton onClick={() => handleCustomerEdit(params.row)}> <EditIcon /> </IconButton>,
         }
     ];
 
@@ -96,22 +101,24 @@ export default function AccountsInfo() {
                 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>
-                    )}}
+                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));

01-frontend/src/helper/query/Queries.tsx

@@ -1,6 +1,6 @@
 // api/queries.js
 
-import AccountType, { CustomerType, SubmitLogin, User } from "../../components/Account";
+import AccountType, { AdminAccountOperation, CustomerType, SubmitLogin, User } from "../../components/Account";
 import OrderType, { OrderPatch } from "../../components/Order";
 import RatingSubmitType from "../../components/RatingSubmit";
 
@@ -151,6 +151,16 @@ export const deleteAccount = async (user: User) => {
     return await response.json();
 };
 
+export const deleteAccountAdmin = async (user: AdminAccountOperation) => {
+    const response = await fetch('http://localhost:8085/account/admin?email=' + user.email + '&session=' + user.session + '&accountId=' + user.accountId, {
+        method: 'DELETE',
+    });
+    if (!response.ok) {
+        throw new Error('Fehler beim Löschen des Accounts');
+    }
+    return await response.json();
+};
+
 export const fetchOrders = async (customerId: number) => {
     const response = await fetch('http://localhost:8085/order/all?customerId=' + customerId);
     if (!response.ok) {