Replaced SettingsTable with DataTable.

This commit is contained in:
Mike Cao 2023-10-01 16:11:12 -07:00
parent 0d9b6e8355
commit 9bb89c7e8b
24 changed files with 134 additions and 381 deletions

View file

@ -1,67 +1,36 @@
import { GridColumn, GridTable } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import useUser from 'components/hooks/useUser';
import { ROLES } from 'lib/constants';
import TeamMemberRemoveButton from './TeamMemberRemoveButton';
import SettingsTable from 'components/common/SettingsTable';
export function TeamMembersTable({
data = [],
teamId,
onSave,
readOnly,
filterValue,
onFilterChange,
onPageChange,
onPageSizeChange,
}) {
export function TeamMembersTable({ data = [], teamId, readOnly, onChange }) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const columns = [
{ name: 'username', label: formatMessage(labels.username) },
{ name: 'role', label: formatMessage(labels.role) },
{ name: 'action', label: ' ' },
];
const cellRender = (row, data, key) => {
if (key === 'username') {
return row?.username;
}
if (key === 'role') {
return formatMessage(
labels[
Object.keys(ROLES).find(key => ROLES[key] === row?.teamUser[0]?.role) || labels.unknown
],
);
}
return data[key];
const roles = {
[ROLES.teamOwner]: formatMessage(labels.teamOwner),
[ROLES.teamMember]: formatMessage(labels.teamMember),
};
return (
<SettingsTable
data={data}
columns={columns}
cellRender={cellRender}
showSearch={true}
showPaging={true}
onFilterChange={onFilterChange}
onPageChange={onPageChange}
onPageSizeChange={onPageSizeChange}
filterValue={filterValue}
>
{row => {
return (
!readOnly && (
<TeamMemberRemoveButton
teamId={teamId}
userId={row.id}
disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
onSave={onSave}
/>
)
);
}}
</SettingsTable>
<GridTable data={data}>
<GridColumn name="username" label={formatMessage(labels.username)} />
<GridColumn name="role" label={formatMessage(labels.role)}>
{row => roles[row?.teamUser?.[0]?.role]}
</GridColumn>
<GridColumn name="action" label=" " alignment="end">
{row => {
return (
!readOnly &&
row?.teamUser?.[0]?.role !== ROLES.teamOwner &&
user?.id !== row?.id && (
<TeamMemberRemoveButton teamId={teamId} userId={row.id} onSave={onChange} />
)
);
}}
</GridColumn>
</GridTable>
);
}