blob: 9f2abd5cdf654483e9e043662369f60ab8265372 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import { DataColumn, DataTable, Dialog, Icon, MenuItem, Modal, Row, Text } from '@umami/react-zen';
import Link from 'next/link';
import { useState } from 'react';
import { DateDistance } from '@/components/common/DateDistance';
import { useMessages } from '@/components/hooks';
import { Edit, Trash } from '@/components/icons';
import { MenuButton } from '@/components/input/MenuButton';
import { TeamDeleteForm } from '../../teams/[teamId]/TeamDeleteForm';
export function AdminTeamsTable({
data = [],
showActions = true,
}: {
data: any[];
showActions?: boolean;
}) {
const { formatMessage, labels } = useMessages();
const [deleteTeam, setDeleteTeam] = useState(null);
return (
<>
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)} width="1fr">
{(row: any) => <Link href={`/admin/teams/${row.id}`}>{row.name}</Link>}
</DataColumn>
<DataColumn id="websites" label={formatMessage(labels.members)} width="140px">
{(row: any) => row?._count?.members}
</DataColumn>
<DataColumn id="members" label={formatMessage(labels.websites)} width="140px">
{(row: any) => row?._count?.websites}
</DataColumn>
<DataColumn id="owner" label={formatMessage(labels.owner)}>
{(row: any) => {
const name = row?.members?.[0]?.user?.username;
return (
<Text title={name} truncate>
<Link href={`/admin/users/${row?.members?.[0]?.user?.id}`}>{name}</Link>
</Text>
);
}}
</DataColumn>
<DataColumn id="created" label={formatMessage(labels.created)} width="160px">
{(row: any) => <DateDistance date={new Date(row.createdAt)} />}
</DataColumn>
{showActions && (
<DataColumn id="action" align="end" width="50px">
{(row: any) => {
const { id } = row;
return (
<MenuButton>
<MenuItem href={`/admin/teams/${id}`} data-test="link-button-edit">
<Row alignItems="center" gap>
<Icon>
<Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
<MenuItem
id="delete"
onAction={() => setDeleteTeam(id)}
data-test="link-button-delete"
>
<Row alignItems="center" gap>
<Icon>
<Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Row>
</MenuItem>
</MenuButton>
);
}}
</DataColumn>
)}
</DataTable>
<Modal isOpen={!!deleteTeam}>
<Dialog style={{ width: 400 }}>
<TeamDeleteForm teamId={deleteTeam} onClose={() => setDeleteTeam(null)} />
</Dialog>
</Modal>
</>
);
}
|