umami/components/pages/settings/teams/TeamMembersTable.js

72 lines
2.1 KiB
JavaScript
Raw Normal View History

2023-04-02 21:24:50 +02:00
import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser';
import { ROLES } from 'lib/constants';
import {
2023-04-02 21:24:50 +02:00
Flexbox,
Table,
TableBody,
TableCell,
TableColumn,
2023-04-02 21:24:50 +02:00
TableHeader,
TableRow,
} from 'react-basics';
2023-04-02 21:24:50 +02:00
import TeamMemberRemoveButton from './TeamMemberRemoveButton';
2023-01-10 08:59:26 +01:00
export default function TeamMembersTable({ data = [], onSave, readOnly }) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
2023-01-31 06:44:07 +01:00
const { user } = useUser();
2023-01-25 16:42:46 +01:00
const columns = [
2023-01-31 06:44:07 +01:00
{ name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
{ name: 'role', label: formatMessage(labels.role), style: { flex: 1 } },
{ name: 'action', label: '', style: { flex: 1 } },
2023-01-25 16:42:46 +01:00
];
return (
2023-01-25 16:42:46 +01:00
<Table columns={columns} rows={data}>
<TableHeader>
{(column, index) => {
return (
<TableColumn key={index} style={{ ...column.style }}>
{column.label}
</TableColumn>
);
}}
</TableHeader>
<TableBody>
{(row, keys, rowIndex) => {
2023-01-25 16:42:46 +01:00
const rowData = {
username: row?.user?.username,
role: formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
),
2023-02-02 20:59:38 +01:00
action: !readOnly && (
2023-01-31 06:44:07 +01:00
<Flexbox flex={1} justifyContent="end">
2023-04-02 21:24:50 +02:00
<TeamMemberRemoveButton
teamUserId={row.id}
disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
2023-04-02 21:24:50 +02:00
onSave={onSave}
></TeamMemberRemoveButton>
2023-01-31 06:44:07 +01:00
</Flexbox>
2023-01-25 16:42:46 +01:00
),
};
return (
2023-01-25 16:42:46 +01:00
<TableRow key={rowIndex} data={rowData} keys={keys}>
{(data, key, colIndex) => {
return (
2023-01-25 16:42:46 +01:00
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
2023-01-31 06:44:07 +01:00
<Flexbox flex={1} alignItems="center">
2023-01-25 16:42:46 +01:00
{data[key]}
</Flexbox>
</TableCell>
);
}}
</TableRow>
);
}}
</TableBody>
</Table>
);
}