2023-09-29 14:29:22 +02:00
|
|
|
'use client';
|
|
|
|
import useMessages from 'components/hooks/useMessages';
|
|
|
|
import useUser from 'components/hooks/useUser';
|
|
|
|
import { ROLES } from 'lib/constants';
|
|
|
|
import Link from 'next/link';
|
2023-10-13 01:13:14 +02:00
|
|
|
import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
|
2023-09-29 14:29:22 +02:00
|
|
|
import TeamDeleteButton from './TeamDeleteButton';
|
|
|
|
import TeamLeaveButton from './TeamLeaveButton';
|
|
|
|
|
2023-12-03 12:07:03 +01:00
|
|
|
export function TeamsTable({ data = [] }: { data: any[] }) {
|
2023-09-29 14:29:22 +02:00
|
|
|
const { formatMessage, labels } = useMessages();
|
|
|
|
const { user } = useUser();
|
2023-10-13 01:13:14 +02:00
|
|
|
const breakpoint = useBreakpoint();
|
2023-09-29 14:29:22 +02:00
|
|
|
|
|
|
|
return (
|
2023-10-13 01:13:14 +02:00
|
|
|
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
|
2023-09-29 14:29:22 +02:00
|
|
|
<GridColumn name="name" label={formatMessage(labels.name)} />
|
|
|
|
<GridColumn name="owner" label={formatMessage(labels.owner)}>
|
|
|
|
{row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
|
|
|
|
</GridColumn>
|
|
|
|
<GridColumn name="action" label=" " alignment="end">
|
|
|
|
{row => {
|
|
|
|
const { id, name, teamUser } = row;
|
|
|
|
const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
|
2023-10-08 07:42:49 +02:00
|
|
|
const isOwner = user.id === owner?.userId;
|
2023-09-29 14:29:22 +02:00
|
|
|
|
|
|
|
return (
|
2023-10-02 01:11:12 +02:00
|
|
|
<>
|
2023-10-08 07:42:49 +02:00
|
|
|
{isOwner && <TeamDeleteButton teamId={id} teamName={name} />}
|
|
|
|
{!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
|
2023-09-29 14:29:22 +02:00
|
|
|
<Link href={`/settings/teams/${id}`}>
|
|
|
|
<Button>
|
|
|
|
<Icon>
|
|
|
|
<Icons.Edit />
|
|
|
|
</Icon>
|
2023-10-08 07:42:49 +02:00
|
|
|
<Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
|
2023-09-29 14:29:22 +02:00
|
|
|
</Button>
|
|
|
|
</Link>
|
2023-10-02 01:11:12 +02:00
|
|
|
</>
|
2023-09-29 14:29:22 +02:00
|
|
|
);
|
|
|
|
}}
|
|
|
|
</GridColumn>
|
|
|
|
</GridTable>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TeamsTable;
|