112 lines
4.6 KiB
TypeScript
112 lines
4.6 KiB
TypeScript
import type { Dispatch } from "react";
|
|
import { shallow } from "zustand/shallow";
|
|
|
|
import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
|
|
import { WEBAPP_URL } from "@calcom/lib/constants";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import { Sheet, SheetContent, SheetFooter, Avatar, Skeleton, Loader } from "@calcom/ui";
|
|
|
|
import type { State, Action } from "../UserListTable";
|
|
import { DisplayInfo } from "./DisplayInfo";
|
|
import { EditForm } from "./EditUserForm";
|
|
import { SheetFooterControls } from "./SheetFooterControls";
|
|
import { useEditMode } from "./store";
|
|
|
|
export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dispatch<Action> }) {
|
|
const { t } = useLocale();
|
|
const { user: selectedUser } = state.editSheet;
|
|
const orgBranding = useOrgBranding();
|
|
const [editMode, setEditMode] = useEditMode((state) => [state.editMode, state.setEditMode], shallow);
|
|
const { data: loadedUser, isLoading } = trpc.viewer.organizations.getUser.useQuery({
|
|
userId: selectedUser?.id,
|
|
});
|
|
|
|
const avatarURL = `${orgBranding?.fullDomain ?? WEBAPP_URL}/${loadedUser?.username}/avatar.png`;
|
|
|
|
const schedulesNames = loadedUser?.schedules && loadedUser?.schedules.map((s) => s.name);
|
|
const teamNames =
|
|
loadedUser?.teams && loadedUser?.teams.map((t) => `${t.name} ${!t.accepted ? "(pending)" : ""}`);
|
|
|
|
return (
|
|
<Sheet
|
|
open={true}
|
|
onOpenChange={() => {
|
|
setEditMode(false);
|
|
dispatch({ type: "CLOSE_MODAL" });
|
|
}}>
|
|
<SheetContent position="right" size="default">
|
|
{!isLoading && loadedUser ? (
|
|
<div className="flex h-full flex-col">
|
|
{!editMode ? (
|
|
<div className="flex-grow">
|
|
<div className="mt-4 flex items-center gap-2">
|
|
<Avatar
|
|
asChild
|
|
className="h-[36px] w-[36px]"
|
|
alt={`${loadedUser?.name} avatar`}
|
|
imageSrc={avatarURL}
|
|
gravatarFallbackMd5="fallback"
|
|
/>
|
|
<div className="space-between flex flex-col leading-none">
|
|
<Skeleton loading={isLoading} as="p" waitForTranslation={false}>
|
|
<span className="text-emphasis text-lg font-semibold">
|
|
{loadedUser?.name ?? "Nameless User"}
|
|
</span>
|
|
</Skeleton>
|
|
<Skeleton loading={isLoading} as="p" waitForTranslation={false}>
|
|
<p className="subtle text-sm font-normal">
|
|
{orgBranding?.fullDomain ?? WEBAPP_URL}/{loadedUser?.username}
|
|
</p>
|
|
</Skeleton>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 flex flex-col space-y-5">
|
|
<DisplayInfo label={t("email")} value={loadedUser?.email ?? ""} displayCopy />
|
|
<DisplayInfo
|
|
label={t("bio")}
|
|
badgeColor="gray"
|
|
value={loadedUser?.bio ? loadedUser?.bio : t("user_has_no_bio")}
|
|
/>
|
|
<DisplayInfo label={t("role")} value={loadedUser?.role ?? ""} asBadge badgeColor="blue" />
|
|
<DisplayInfo label={t("timezone")} value={loadedUser?.timeZone ?? ""} />
|
|
<DisplayInfo
|
|
label={t("availability_schedules")}
|
|
value={
|
|
schedulesNames && schedulesNames?.length === 0
|
|
? [t("user_has_no_schedules")]
|
|
: schedulesNames ?? "" // TS wtf
|
|
}
|
|
/>
|
|
<DisplayInfo
|
|
label={t("teams")}
|
|
displayCount={teamNames?.length ?? 0}
|
|
value={
|
|
teamNames && teamNames?.length === 0 ? [t("user_isnt_in_any_teams")] : teamNames ?? "" // TS wtf
|
|
}
|
|
asBadge={teamNames && teamNames?.length > 0}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex-grow">
|
|
<EditForm
|
|
selectedUser={loadedUser}
|
|
avatarUrl={avatarURL}
|
|
domainUrl={orgBranding?.fullDomain ?? WEBAPP_URL}
|
|
dispatch={dispatch}
|
|
/>
|
|
</div>
|
|
)}
|
|
<SheetFooter className="mt-auto">
|
|
<SheetFooterControls />
|
|
</SheetFooter>
|
|
</div>
|
|
) : (
|
|
<Loader />
|
|
)}
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|