public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

split event type into smaller components

event-type-list
Ryukemeister 2023-11-01 00:23:01 +05:30
parent d1c2fd2c9c
commit 57d1de4709
1 changed files with 61 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
packages/atoms/EventTypeList/EventType.tsx
View File

@ -1,20 +1,13 @@
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Switch } from "@/components/ui/switch";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { MoreHorizontal, ExternalLink, LinkIcon, Edit2, Copy, Trash, Code } from "lucide-react";
import { EventTypeDialog } from "EventTypeList/components/controls/Dialog";
import { EventTypeDropdown } from "EventTypeList/components/controls/Dropdown";
import { EventTypeTooltip } from "EventTypeList/components/controls/Tooltip";
import { ExternalLink, LinkIcon } from "lucide-react";
import { memo, useState } from "react";
import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
import { EventTypeEmbedButton } from "@calcom/features/embed/EventTypeEmbed";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { SchedulingType } from "@calcom/prisma/enums";
import { ArrowButton, AvatarGroup, ButtonGroup } from "@calcom/ui";
@ -152,9 +145,8 @@ export function EventType({
{isManagedEventType && (
<>
{type.hidden && <Badge>Hidden</Badge>}
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<EventTypeTooltip
trigger={
<div className="self-center rounded-md p-2">
<Switch
name="hidden"
@ -164,21 +156,16 @@ export function EventType({
}}
/>
</div>
</TooltipTrigger>
<TooltipContent>
{type.hidden ? "Show on profile" : "Hide from profile"}
</TooltipContent>
</Tooltip>
</TooltipProvider>
}
content={type.hidden ? "Show on profile" : "Hide from profile"}
/>
</>
)}
<ButtonGroup combined>
{!isManagedEventType && (
<>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
{/* TODO: add toast */}
<EventTypeTooltip
trigger={
<Button
data-testid="preview-link-button"
className="bg-secondary color-secondary"
@ -187,13 +174,11 @@ export function EventType({
}}>
<ExternalLink />
</Button>
</TooltipTrigger>
<TooltipContent>Preview</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
}
content="Preview"
/>
<EventTypeTooltip
trigger={
<Button
className="bg-secondary color-secondary"
onClick={() => {
@ -201,95 +186,33 @@ export function EventType({
}}>
<LinkIcon />
</Button>
</TooltipTrigger>
<TooltipContent>Copy link to event</TooltipContent>
</Tooltip>
</TooltipProvider>
}
content="Copy link to event"
/>
</>
)}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
type="button"
className="bg-secondary text-secondary ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md">
<MoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{!readOnly && (
<DropdownMenuItem>
<Button
type="button"
data-testid={`event-type-edit-${type.id}`}
onClick={() => {
onEdit(type.id);
}}>
<Edit2 />
Edit
</Button>
</DropdownMenuItem>
)}
{!isManagedEventType && !isChildrenManagedEventType && (
<>
<DropdownMenuItem className="outline-none">
<Button
type="button"
data-testid={`event-type-duplicate-${type.id}`}
onClick={() => {
onDuplicate(type.id);
}}>
<Copy />
Duplicate
</Button>
</DropdownMenuItem>
</>
)}
{!isManagedEventType && (
<DropdownMenuItem>
<EventTypeEmbedButton
// Add embedLink here
className="w-full rounded-none"
eventId={type.id}
type="button"
StartIcon={Code}
embedUrl={encodeURIComponent(embedLink)}>
Embed
</EventTypeEmbedButton>
</DropdownMenuItem>
)}
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
!isChildrenManagedEventType && (
<>
<DropdownMenuSeparator />
<DropdownMenuItem>
{/* Button type should be destructive here */}
<Button
onClick={() => {
// Add handler for destruction
console.log("Hi");
}}
className="w-full rounded-none">
<Trash /> Delete
</Button>
</DropdownMenuItem>
</>
)}
</DropdownMenuContent>
</DropdownMenu>
<EventTypeDropdown
group={group}
isReadOnly={readOnly}
isManagedEventType={isManagedEventType}
isChildrenManagedEventType={isChildrenManagedEventType}
embedLink={embedLink}
id={type.id}
onEdit={onEdit}
onDuplicate={onDuplicate}
/>
</ButtonGroup>
</div>
</div>
</div>
</div>
</div>
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete event type?</DialogTitle>
<DialogDescription>
Anyone who you&apos;ve shared this link with will no longer be able to book using it.
</DialogDescription>
</DialogHeader>
<EventTypeDialog
open={deleteDialogOpen}
onOpenChange={setDeleteDialogOpen}
title="Delete event type?"
description="Anyone who you've shared this link with will no longer be able to book using it."
content={
<div className="flex items-center justify-end">
<Button
onClick={() => {
@ -306,8 +229,8 @@ export function EventType({
Yes, delete
</Button>
</div>
</DialogContent>
</Dialog>
}
/>
</li>
);
}