update view for EventType

event-type-list
Ryukemeister 2023-10-19 02:48:50 +05:30
parent d0960ff55c
commit b394975199
1 changed files with 43 additions and 1 deletions

View File

@ -1,7 +1,9 @@
import { memo } from "react";
import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { SchedulingType } from "@calcom/prisma/enums";
import { ArrowButton } from "@calcom/ui";
import { ArrowButton, AvatarGroup } from "@calcom/ui";
const Item = ({ type, group, readOnly }: { type: any; group: any; readonly: boolean }) => {
const content = () => (
@ -68,6 +70,9 @@ export function EventType({
lastItem: { id: string };
moveEventType: (index: number, increment: 1 | -1) => void;
}) {
const isManagedEventType = type.schedulingType === SchedulingType.MANAGED;
const orgBranding = useOrgBranding();
return (
<li>
<div className="hover:bg-muted flex w-full items-center justify-between">
@ -79,6 +84,43 @@ export function EventType({
<ArrowButton arrowDirection="down" onClick={() => moveEventType(index, 1)} />
)}
<MemoizedItem />
<div className="mt-4 hidden sm:mt-0 sm:flex">
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
{type.team && !isManagedEventType && (
<AvatarGroup
className="relative right-3 top-1"
size="sm"
truncateAfter={4}
items={
type?.users
? type.users.map((organizer: { name: string | null; username: string | null }) => ({
alt: organizer.name || "",
image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${organizer.username}/avatar.png`,
title: organizer.name || "",
}))
: []
}
/>
)}
{isManagedEventType && type?.children && type.children?.length > 0 && (
<AvatarGroup
className="relative right-3 top-1"
size="sm"
truncateAfter={4}
items={type?.children
.flatMap((ch) => ch.users)
.map((user: Pick<User, "name" | "username">) => ({
alt: user.name || "",
image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${user.username}/avatar.png`,
title: user.name || "",
}))}
/>
)}
<div className="flex items-center justify-between space-x-2 rtl:space-x-reverse">
{isManagedEventType && <>{type.hidden && <>Return badge here </>}</>}
</div>
</div>
</div>
</div>
<div className="min-w-9 mx-5 flex sm:hidden" />
</div>