131 lines
4.2 KiB
TypeScript
131 lines
4.2 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 { Icon } from "@calcom/ui/Icon";
|
|
import { Button } from "@calcom/ui/components";
|
|
import { showToast } from "@calcom/ui/v2/core";
|
|
import Meta from "@calcom/ui/v2/core/Meta";
|
|
import { getLayout } from "@calcom/ui/v2/core/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="Team Members" description="Users that are in the group" />
|
|
{!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,
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
{isAdmin && (
|
|
<div className="relative mb-5 flex w-full items-center ">
|
|
<Button
|
|
type="button"
|
|
color="primary"
|
|
StartIcon={Icon.FiPlus}
|
|
className="ml-auto"
|
|
onClick={() => setShowMemberInvitationModal(true)}
|
|
data-testid="new-member-button">
|
|
{t("add")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
<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.value,
|
|
usernameOrEmail: values.emailOrUsername,
|
|
sendEmailInvitation: values.sendInviteEmail,
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
MembersView.getLayout = getLayout;
|
|
|
|
export default MembersView;
|