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

Added Account delete admin button.

Browse Source
This commit is contained in:
FlorianSpeicher
2025-06-18 13:55:42 +02:00
parent abe9a76fc0
commit eaee07ebc0
3 changed files with 55 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
01-frontend/src/components/Account.tsx
View File

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

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

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

12
01-frontend/src/helper/query/Queries.tsx
View File

@@ -1,6 +1,6 @@
// api/queries.js // 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 OrderType, { OrderPatch } from "../../components/Order";
import RatingSubmitType from "../../components/RatingSubmit"; import RatingSubmitType from "../../components/RatingSubmit";
@@ -151,6 +151,16 @@ export const deleteAccount = async (user: User) => {
return await response.json(); 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) => { export const fetchOrders = async (customerId: number) => {
const response = await fetch('http://localhost:8085/order/all?customerId=' + customerId); const response = await fetch('http://localhost:8085/order/all?customerId=' + customerId);
if (!response.ok) { if (!response.ok) {