diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx index 647965d38c1631..f483139a06a27f 100644 --- a/apps/web/modules/event-types/views/event-types-listing-view.tsx +++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx @@ -20,21 +20,21 @@ import Shell from "@calcom/features/shell/Shell"; import { parseEventTypeColor } from "@calcom/lib"; import { APP_NAME } from "@calcom/lib/constants"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; +import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery"; import { useGetTheme } from "@calcom/lib/hooks/useTheme"; import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery"; import { HttpError } from "@calcom/lib/http-error"; -import type { User } from "@calcom/prisma/client"; import type { MembershipRole } from "@calcom/prisma/enums"; import { SchedulingType } from "@calcom/prisma/enums"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc, TRPCClientError } from "@calcom/trpc/react"; -import type { UserProfile } from "@calcom/types/UserProfile"; import { Alert, Badge, Button, + Input, ButtonGroup, ConfirmationDialogContent, CreateButton, @@ -73,13 +73,6 @@ type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eve type EventTypeGroup = EventTypeGroups[number]; type EventType = EventTypeGroup["eventTypes"][number]; -type DeNormalizedEventType = Omit & { - users: (Pick & { - nonProfileUsername: string | null; - profile: UserProfile; - })[]; -}; - const LIMIT = 10; interface InfiniteEventTypeListProps { @@ -103,9 +96,13 @@ const InfiniteTeamsTab: FC = (props) => { const { activeEventTypeGroup } = props; const { t } = useLocale(); + const [searchTerm, setSearchTerm] = useState(""); + const debouncedSearchTerm = useDebounce(searchTerm, 500); + const query = trpc.viewer.eventTypes.getEventTypesFromGroup.useInfiniteQuery( { limit: LIMIT, + searchQuery: debouncedSearchTerm, group: { teamId: activeEventTypeGroup?.teamId, parentId: activeEventTypeGroup?.parentId }, }, { @@ -124,6 +121,14 @@ const InfiniteTeamsTab: FC = (props) => { return (
+ { + setSearchTerm(e.target.value); + }} + /> {!!activeEventTypeGroup && ( ; diff --git a/packages/trpc/server/routers/viewer/eventTypes/getEventTypesFromGroup.handler.ts b/packages/trpc/server/routers/viewer/eventTypes/getEventTypesFromGroup.handler.ts index c97ac40cda6e22..e9508d52f26962 100644 --- a/packages/trpc/server/routers/viewer/eventTypes/getEventTypesFromGroup.handler.ts +++ b/packages/trpc/server/routers/viewer/eventTypes/getEventTypesFromGroup.handler.ts @@ -25,7 +25,7 @@ export const getEventTypesFromGroup = async ({ ctx, input }: GetByViewerOptions) }); const userProfile = ctx.user.profile; - const { group, limit, cursor, filters } = input; + const { group, limit, cursor, filters, searchQuery } = input; const { teamId, parentId } = group; const isFilterSet = (filters && hasFilter(filters)) || !!teamId; @@ -46,6 +46,7 @@ export const getEventTypesFromGroup = async ({ ctx, input }: GetByViewerOptions) { where: { teamId: null, + ...(searchQuery ? { title: { contains: searchQuery, mode: "insensitive" } } : {}), }, orderBy: [ { @@ -77,6 +78,7 @@ export const getEventTypesFromGroup = async ({ ctx, input }: GetByViewerOptions) schedulingType: { in: filters.schedulingTypes }, } : null), + ...(searchQuery ? { title: { contains: searchQuery, mode: "insensitive" } } : {}), }, orderBy: [ {