Refactor: Properties in der react app geändert.

This commit is contained in:
OlgunR 2025-07-28 10:29:05 +02:00
parent 4b3c5907ae
commit c9cb3f6aa8
3 changed files with 29 additions and 30 deletions

View File

@ -15,23 +15,23 @@ import { Iconify } from 'src/components/iconify';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
export type UserProps = { export type EnvelopeProps = {
id: string; title: string;
name: string;
role: string;
status: string; status: string;
company: string; type: string;
avatarUrl: string; isPartiallySigned: boolean;
isVerified: boolean; isTotallySigned: boolean;
addedWhen: Date;
changedWhen: Date;
}; };
type UserTableRowProps = { type EnvelopeTableRowProps = {
row: UserProps; row: EnvelopeProps;
selected: boolean; selected: boolean;
onSelectRow: () => void; onSelectRow: () => void;
}; };
export function UserTableRow({ row, selected, onSelectRow }: UserTableRowProps) { export function EnvelopeTableRow({ row, selected, onSelectRow }: EnvelopeTableRowProps) {
const [openPopover, setOpenPopover] = useState<HTMLButtonElement | null>(null); const [openPopover, setOpenPopover] = useState<HTMLButtonElement | null>(null);
const handleOpenPopover = useCallback((event: React.MouseEvent<HTMLButtonElement>) => { const handleOpenPopover = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
@ -57,27 +57,26 @@ export function UserTableRow({ row, selected, onSelectRow }: UserTableRowProps)
alignItems: 'center', alignItems: 'center',
}} }}
> >
<Avatar alt={row.name} src={row.avatarUrl} /> {row.title}
{row.name}
</Box> </Box>
</TableCell> </TableCell>
<TableCell>{row.company}</TableCell> {/* TODO: arrange the status, type */}
<TableCell>{row.role}</TableCell>
<TableCell align="center">
{row.isVerified ? (
<Iconify width={22} icon="solar:check-circle-bold" sx={{ color: 'success.main' }} />
) : (
'-'
)}
</TableCell>
<TableCell> <TableCell>
<Label color={(row.status === 'banned' && 'error') || 'success'}>{row.status}</Label> <Label color={(row.status === 'banned' && 'error') || 'success'}>{row.status}</Label>
</TableCell> </TableCell>
<TableCell>{row.type}</TableCell>
<TableCell align="center">
{row.isTotallySigned
? <Iconify width={22} icon="solar:check-circle-bold" sx={{ color: 'success.main' }} />
: row.isPartiallySigned
? <Iconify width={22} icon="solar:check-circle-bold" sx={{ color: 'warning.main' }} />
: <Iconify width={22} icon="eva:more-vertical-fill" sx={{ color: 'error.main' }} />
}
</TableCell>
<TableCell align="right"> <TableCell align="right">
<IconButton onClick={handleOpenPopover}> <IconButton onClick={handleOpenPopover}>
<Iconify icon="eva:more-vertical-fill" /> <Iconify icon="eva:more-vertical-fill" />

View File

@ -1,4 +1,4 @@
import type { UserProps } from './user-table-row'; import type { EnvelopeProps } from './user-table-row';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
@ -53,7 +53,7 @@ export function getComparator<Key extends keyof any>(
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
type ApplyFilterProps = { type ApplyFilterProps = {
inputData: UserProps[]; inputData: EnvelopeProps[];
filterName: string; filterName: string;
comparator: (a: any, b: any) => number; comparator: (a: any, b: any) => number;
}; };

View File

@ -16,13 +16,13 @@ import { Iconify } from 'src/components/iconify';
import { Scrollbar } from 'src/components/scrollbar'; import { Scrollbar } from 'src/components/scrollbar';
import { TableNoData } from '../table-no-data'; import { TableNoData } from '../table-no-data';
import { UserTableRow } from '../user-table-row'; import { EnvelopeTableRow } from '../user-table-row';
import { UserTableHead } from '../user-table-head'; import { UserTableHead } from '../user-table-head';
import { TableEmptyRows } from '../table-empty-rows'; import { TableEmptyRows } from '../table-empty-rows';
import { UserTableToolbar } from '../user-table-toolbar'; import { UserTableToolbar } from '../user-table-toolbar';
import { emptyRows, applyFilter, getComparator } from '../utils'; import { emptyRows, applyFilter, getComparator } from '../utils';
import type { UserProps } from '../user-table-row'; import type { EnvelopeProps } from '../user-table-row';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
@ -31,7 +31,7 @@ export function UserView() {
const [filterName, setFilterName] = useState(''); const [filterName, setFilterName] = useState('');
const dataFiltered: UserProps[] = applyFilter({ const dataFiltered: EnvelopeProps[] = applyFilter({
inputData: _users, inputData: _users,
comparator: getComparator(table.order, table.orderBy), comparator: getComparator(table.order, table.orderBy),
filterName, filterName,
@ -101,7 +101,7 @@ export function UserView() {
table.page * table.rowsPerPage + table.rowsPerPage table.page * table.rowsPerPage + table.rowsPerPage
) )
.map((row) => ( .map((row) => (
<UserTableRow <EnvelopeTableRow
key={row.id} key={row.id}
row={row} row={row}
selected={table.selected.includes(row.id)} selected={table.selected.includes(row.id)}