Refactor: Properties in der react app geändert.
This commit is contained in:
parent
4b3c5907ae
commit
c9cb3f6aa8
@ -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" />
|
||||||
|
|||||||
@ -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;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user