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

import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
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, CustomerType } from "../../components/Account";
import { useAccount } from "../AccountProvider";
import { deleteAccountAdmin, fetchAccounts } from "../query/Queries";
import CustomerEditDialog from "./CustomerEditDialog";

export default function AccountsInfo() {
    const theme = useTheme();
    const { t } = useTranslation();

    const [customerData, setCustomerData] = useState<CustomerType>({
        id: 0,
        name: "",
        surname: "",
        address: "",
        zip: "",
        country: ""
    });

    async function handleCustomerEdit(account: AccountType) {
        setCustomerData(account.customer);
        setOpen(true);
    }

    const [rows, setRows] = useState<AccountType[]>([]);
    const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());

    const { user: loginData } = useAccount();

    const { data, refetch } = useQuery({
        queryKey: ["fetchAccounts", loginData],
        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);
        }
    }, [data]);

    const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
        setSelectedRows(newSelection.ids);
    };

    const handleDeleteSelected = async () => {
        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: 'admin',
            headerName: t('admin'),
            type: "boolean",
            width: 90,
            editable: true
        },
        {
            field: 'email',
            headerName: t('email'),
            width: 150,
            editable: true,
        },
        {
            field: 'langI18n',
            headerName: t('language'),
            width: 150,
            editable: true,
        },
        { //edit billing information button
            field: "customer",
            headerName: t('address'),
            width: 90,
            sortable: false,
            disableReorder: true,
            disableColumnMenu: true,
            renderCell: params => <IconButton onClick={() => handleCustomerEdit(params.row)}> <EditIcon /> </IconButton>,
        }
    ];

    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>
            <CustomerEditDialog
                open={open}
                onClose={() => setOpen(false)}
                onSubmit={handleCustomerEditSubmit}
                customerData={customerData}
                setCustomerData={setCustomerData}
            />
            </>
    );
}