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

101 lines
2.8 KiB
JavaScript
Raw Normal View History

import Link from 'next/link';
import {
Table,
TableHeader,
TableBody,
TableRow,
TableCell,
TableColumn,
Button,
Icon,
2023-01-25 16:42:46 +01:00
Flexbox,
Icons,
Text,
2023-02-02 20:59:38 +01:00
ModalTrigger,
Modal,
} from 'react-basics';
2023-01-25 16:42:46 +01:00
import { useIntl } from 'react-intl';
import { labels } from 'components/messages';
2023-02-02 03:39:54 +01:00
import { ROLES } from 'lib/constants';
2023-02-02 20:59:38 +01:00
import TeamDeleteForm from './TeamDeleteForm';
2023-02-02 20:59:38 +01:00
export default function TeamsTable({ data = [], onDelete }) {
2023-01-25 16:42:46 +01:00
const { formatMessage } = useIntl();
const columns = [
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
2023-02-02 03:39:54 +01:00
{ name: 'owner', label: formatMessage(labels.owner) },
2023-01-25 16:42:46 +01:00
{ name: 'action', label: ' ' },
];
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) => {
const { id } = row;
2023-02-02 03:39:54 +01:00
const rowData = {
...row,
2023-02-02 11:54:43 +01:00
owner: row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username,
2023-02-02 03:39:54 +01:00
action: (
2023-02-02 20:59:38 +01:00
<Flexbox flex={1} gap={10} justifyContent="end">
2023-02-02 03:39:54 +01:00
<Link href={`/settings/teams/${id}`}>
<a>
<Button>
<Icon>
2023-02-04 17:59:52 +01:00
<Icons.Edit />
2023-02-02 03:39:54 +01:00
</Icon>
2023-02-04 17:59:52 +01:00
<Text>{formatMessage(labels.edit)}</Text>
2023-02-02 03:39:54 +01:00
</Button>
</a>
</Link>
2023-02-02 20:59:38 +01:00
<ModalTrigger>
<Button>
<Icon>
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal title={formatMessage(labels.deleteTeam)}>
2023-02-04 17:59:52 +01:00
{close => (
<TeamDeleteForm
teamId={row.id}
teamName={row.name}
onSave={onDelete}
onClose={close}
/>
)}
2023-02-02 20:59:38 +01:00
</Modal>
</ModalTrigger>
2023-02-02 03:39:54 +01:00
</Flexbox>
),
};
return (
2023-02-02 03:39:54 +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 }}>
<Flexbox flex={1} alignItems="center">
{data[key]}
</Flexbox>
</TableCell>
);
}}
</TableRow>
);
}}
</TableBody>
</Table>
);
}