cal.pub0.org/packages/features/ee/teams/pages/team-members-view.tsx

134 lines
4.0 KiB
TypeScript

import { MembershipRole } from "@prisma/client";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, Meta, showToast } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import { getLayout } from "../../../settings/layouts/SettingsLayout";
import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
import MemberInvitationModal from "../components/MemberInvitationModal";
import MemberListItem from "../components/MemberListItem";
import TeamInviteList from "../components/TeamInviteList";
const MembersView = () => {
const { t, i18n } = useLocale();
const router = useRouter();
const session = useSession();
const utils = trpc.useContext();
const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false);
const teamId = Number(router.query.id);
const { data: team, isLoading } = trpc.viewer.teams.get.useQuery(
{ teamId },
{
onError: () => {
router.push("/settings");
},
}
);
const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({
async onSuccess() {
await utils.viewer.teams.get.invalidate();
setShowMemberInvitationModal(false);
},
onError: (error) => {
showToast(error.message, "error");
},
});
const isInviteOpen = !team?.membership.accepted;
const isAdmin =
team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN);
return (
<>
<Meta
title={t("team_members")}
description={t("members_team_description")}
CTA={
isAdmin ? (
<Button
type="button"
color="primary"
StartIcon={FiPlus}
className="ml-auto"
onClick={() => setShowMemberInvitationModal(true)}
data-testid="new-member-button">
{t("add")}
</Button>
) : (
<></>
)
}
/>
{!isLoading && (
<>
<div>
{team && (
<>
{isInviteOpen && (
<TeamInviteList
teams={[
{
id: team.id,
accepted: team.membership.accepted || false,
logo: team.logo,
name: team.name,
slug: team.slug,
role: team.membership.role,
},
]}
/>
)}
</>
)}
<div>
<ul className="divide-y divide-gray-200 rounded-md border ">
{team?.members.map((member) => {
return <MemberListItem key={member.id} team={team} member={member} />;
})}
</ul>
</div>
<hr className="my-8 border-gray-200" />
{team && session.data && (
<DisableTeamImpersonation
teamId={team.id}
memberId={session.data.user.id}
disabled={isInviteOpen}
/>
)}
<hr className="my-8 border-gray-200" />
</div>
{showMemberInvitationModal && team && (
<MemberInvitationModal
isOpen={showMemberInvitationModal}
members={team.members}
onExit={() => setShowMemberInvitationModal(false)}
onSubmit={(values) => {
inviteMemberMutation.mutate({
teamId,
language: i18n.language,
role: values.role,
usernameOrEmail: values.emailOrUsername,
sendEmailInvitation: values.sendInviteEmail,
});
}}
/>
)}
</>
)}
</>
);
};
MembersView.getLayout = getLayout;
export default MembersView;