From eaee07ebc07ea8666973eb168a1e2faa98a49fb7 Mon Sep 17 00:00:00 2001 From: FlorianSpeicher Date: Wed, 18 Jun 2025 13:55:42 +0200 Subject: [PATCH] Added Account delete admin button. --- 01-frontend/src/components/Account.tsx | 6 ++ .../src/helper/adminpanel/AccountsInfo.tsx | 69 ++++++++++--------- 01-frontend/src/helper/query/Queries.tsx | 12 +++- 3 files changed, 55 insertions(+), 32 deletions(-) diff --git a/01-frontend/src/components/Account.tsx b/01-frontend/src/components/Account.tsx index 9e18395..b987124 100644 --- a/01-frontend/src/components/Account.tsx +++ b/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; diff --git a/01-frontend/src/helper/adminpanel/AccountsInfo.tsx b/01-frontend/src/helper/adminpanel/AccountsInfo.tsx index 7fcb374..3bf7a51 100644 --- a/01-frontend/src/helper/adminpanel/AccountsInfo.tsx +++ b/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([]); const [selectedRows, setSelectedRows] = useState>(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 => handleCustomerEdit(params.row)}> , + renderCell: params => handleCustomerEdit(params.row)}> , } ]; @@ -96,22 +101,24 @@ export default function AccountsInfo() { checkboxSelection disableRowSelectionOnClick onRowSelectionModelChange={handleSelectionChange} - slots={{ toolbar: () => ( - - - - )}} + slots={{ + toolbar: () => ( + + + + ) + }} showToolbar processRowUpdate={(updatedRow) => { setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row)); diff --git a/01-frontend/src/helper/query/Queries.tsx b/01-frontend/src/helper/query/Queries.tsx index 3059732..49d7b6d 100644 --- a/01-frontend/src/helper/query/Queries.tsx +++ b/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) {