63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import Link from 'next/link';
|
|
import { Column, Icon, Text, Row } from '@umami/react-zen';
|
|
import { useLoginQuery, useMessages, useNavigation, useTeam } from '@/components/hooks';
|
|
import { ROLES } from '@/lib/constants';
|
|
import { Users, ArrowRight } from '@/components/icons';
|
|
import { TeamLeaveButton } from '@/app/(main)/teams/TeamLeaveButton';
|
|
import { TeamManage } from './TeamManage';
|
|
import { TeamEditForm } from './TeamEditForm';
|
|
import { TeamMembersDataTable } from './TeamMembersDataTable';
|
|
import { PageHeader } from '@/components/common/PageHeader';
|
|
import { Panel } from '@/components/common/Panel';
|
|
|
|
export function TeamSettings({ teamId }: { teamId: string }) {
|
|
const team: any = useTeam();
|
|
const { user } = useLoginQuery();
|
|
const { formatMessage, labels } = useMessages();
|
|
const { pathname } = useNavigation();
|
|
|
|
const isAdmin = pathname.includes('/admin');
|
|
|
|
const isTeamOwner =
|
|
!!team?.members?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
|
|
user.role !== ROLES.viewOnly;
|
|
|
|
const canEdit =
|
|
user.isAdmin ||
|
|
(!!team?.members?.find(
|
|
({ userId, role }) =>
|
|
(role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
|
|
) &&
|
|
user.role !== ROLES.viewOnly);
|
|
|
|
return (
|
|
<>
|
|
<Link href="/settings/teams">
|
|
<Row marginTop="2" alignItems="center" gap>
|
|
<Icon rotate={180}>
|
|
<ArrowRight />
|
|
</Icon>
|
|
<Text>{formatMessage(labels.teams)}</Text>
|
|
</Row>
|
|
</Link>
|
|
|
|
<Column gap="6">
|
|
<PageHeader title={team?.name} icon={<Users />}>
|
|
{!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
|
|
</PageHeader>
|
|
<Panel>
|
|
<TeamEditForm teamId={teamId} allowEdit={canEdit} showAccessCode={canEdit} />
|
|
</Panel>
|
|
<Panel>
|
|
<TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
|
|
</Panel>
|
|
{isTeamOwner && (
|
|
<Panel>
|
|
<TeamManage teamId={teamId} />
|
|
</Panel>
|
|
)}
|
|
</Column>
|
|
</>
|
|
);
|
|
}
|