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

91 lines
2.8 KiB
JavaScript
Raw Normal View History

import Link from 'next/link';
2023-04-12 22:40:19 +02:00
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
2023-02-02 20:59:38 +01:00
import TeamDeleteForm from './TeamDeleteForm';
import TeamLeaveForm from './TeamLeaveForm';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser';
import { ROLES } from 'lib/constants';
2023-04-12 22:40:19 +02:00
import SettingsTable from 'components/common/SettingsTable';
2023-02-02 20:59:38 +01:00
export default function TeamsTable({ data = [], onDelete }) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
const { user } = useUser();
2023-01-25 16:42:46 +01:00
const columns = [
2023-04-12 22:40:19 +02:00
{ name: 'name', label: formatMessage(labels.name) },
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: ' ' },
];
2023-04-12 22:40:19 +02:00
const cellRender = (row, data, key) => {
if (key === 'owner') {
return row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username;
}
return data[key];
};
2023-04-12 22:40:19 +02:00
return (
<SettingsTable data={data} columns={columns} cellRender={cellRender}>
{row => {
const { id, teamUser } = row;
const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
const showDelete = user.id === owner?.userId;
2023-04-12 22:40:19 +02:00
return (
<>
<Link href={`/settings/teams/${id}`}>
<Button>
<Icon>
<Icons.Show />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</Link>
{showDelete && (
<ModalTrigger>
<Button>
<Icon>
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal title={formatMessage(labels.deleteTeam)}>
{close => (
<TeamDeleteForm
teamId={row.id}
teamName={row.name}
onSave={onDelete}
onClose={close}
/>
)}
</Modal>
</ModalTrigger>
)}
{!showDelete && (
<ModalTrigger>
<Button>
<Icon>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.leave)}</Text>
</Button>
<Modal title={formatMessage(labels.leaveTeam)}>
{close => (
<TeamLeaveForm
teamId={id}
userId={user.id}
teamName={row.name}
onSave={onDelete}
onClose={close}
/>
)}
</Modal>
</ModalTrigger>
)}
</>
);
}}
</SettingsTable>
);
}