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

147 lines
5.1 KiB
TypeScript
Raw Normal View History

V2 settings teams (Profil, Members, Appearance View) (#4350) * add team profile * first version for team members page * finish up design of member list item * fix dialog buttons * add missing seats and upgrading information * add v2 dialog for changing role * finish basic version of member's schedule * remove modalContainer * design fixes team profile page * show only team info to non admins * allow all member to check availabilities * make time available heading sticky * add dropdown for mobile view * create team appearance view * finish appearance page * use settings layout and add danger zone for member * add fallback logo * Add teams to sidebar and fix UI * add team invitations * Clean up * code clean up * add impersontation and disable autofocus on calendar * improve team info * refactor teaminvitelist code and fix leaving a team * add team pages to settings shell * add link to create new team * small fixes * clean up comments * V2 Multi-select (Team Select) (#4324) * --init * design improved * further fine tuning * more fixes * removed extra JSX tag * added story * NIT * revert to use of CheckedTeamSelect * Removes comments Co-authored-by: Peer Richelsen <peeroke@gmail.com> * fix: toggle alligment (#4361) * fix: add checked tranform for switch (#4357) * fixed input size on mobile, fixed settings (#4360) * fix image uploader button in safari * code clean up * fixing type errors * Moved v2 team components to features Adds deprecation notices * Update SettingsLayout.tsx * Migrated to features and build fixes Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2022-09-12 22:04:33 +00:00
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 { Alert, Button } 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";
import { UpgradeToFlexibleProModal } from "../components/UpgradeToFlexibleProModal";
const MembersView = () => {
const { t } = useLocale();
const router = useRouter();
const session = useSession();
const { data: team, isLoading } = trpc.useQuery(["viewer.teams.get", { teamId: Number(router.query.id) }], {
onError: () => {
router.push("/settings");
},
});
const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false);
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" />
V2 settings teams (Profil, Members, Appearance View) (#4350) * add team profile * first version for team members page * finish up design of member list item * fix dialog buttons * add missing seats and upgrading information * add v2 dialog for changing role * finish basic version of member's schedule * remove modalContainer * design fixes team profile page * show only team info to non admins * allow all member to check availabilities * make time available heading sticky * add dropdown for mobile view * create team appearance view * finish appearance page * use settings layout and add danger zone for member * add fallback logo * Add teams to sidebar and fix UI * add team invitations * Clean up * code clean up * add impersontation and disable autofocus on calendar * improve team info * refactor teaminvitelist code and fix leaving a team * add team pages to settings shell * add link to create new team * small fixes * clean up comments * V2 Multi-select (Team Select) (#4324) * --init * design improved * further fine tuning * more fixes * removed extra JSX tag * added story * NIT * revert to use of CheckedTeamSelect * Removes comments Co-authored-by: Peer Richelsen <peeroke@gmail.com> * fix: toggle alligment (#4361) * fix: add checked tranform for switch (#4357) * fixed input size on mobile, fixed settings (#4360) * fix image uploader button in safari * code clean up * fixing type errors * Moved v2 team components to features Adds deprecation notices * Update SettingsLayout.tsx * Migrated to features and build fixes Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2022-09-12 22:04:33 +00:00
{!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,
},
]}
/>
)}
{team.membership.role === MembershipRole.OWNER &&
team.membership.isMissingSeat &&
team.requiresUpgrade ? (
<Alert
severity="warning"
title={t("hidden_team_member_title")}
message={
<>
{t("hidden_team_owner_message")} <UpgradeToFlexibleProModal teamId={team.id} />
</>
}
className="mb-4 "
/>
) : (
<>
{team.membership.isMissingSeat && (
<Alert
severity="warning"
title={t("hidden_team_member_title")}
message={t("hidden_team_member_message")}
className="mb-4 "
/>
)}
{team.membership.role === MembershipRole.OWNER && team.requiresUpgrade && (
<Alert
severity="warning"
title={t("upgrade_to_flexible_pro_title")}
message={
<span>
{t("upgrade_to_flexible_pro_message")} <br />
<UpgradeToFlexibleProModal teamId={team.id} />
</span>
}
className="mb-4"
/>
)}
</>
)}
</>
)}
{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}
team={team}
currentMember={team.membership.role}
onExit={() => setShowMemberInvitationModal(false)}
/>
)}
</>
)}
</>
);
};
MembersView.getLayout = getLayout;
export default MembersView;