Conversation
# Conflicts: # apps/web/public/static/locales/en/common.json
…into util/typed-query
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| import { useSession } from "next-auth/react"; | ||
| import { Fragment, useState, useEffect } from "react"; | ||
|
|
||
| import { useLocale } from "@calcom/lib/hooks/useLocale"; | ||
| import { trpc, RouterOutputs } from "@calcom/trpc/react"; | ||
| import { AnimatedPopover } from "@calcom/ui"; | ||
|
|
||
| import { groupBy } from "../groupBy"; | ||
|
|
||
| export type IEventTypesFilters = RouterOutputs["viewer"]["eventTypes"]["listWithTeam"]; | ||
| export type IEventTypeFilter = IEventTypesFilters[0]; | ||
|
|
||
| type GroupedEventTypeState = Record< | ||
| string, | ||
| { | ||
| team: { | ||
| id: number; | ||
| name: string; | ||
| } | null; | ||
| id: number; | ||
| title: string; | ||
| slug: string; | ||
| }[] | ||
| >; |
There was a problem hiding this comment.
This filter is not used just yet - need to figure out the add filter button
There was a problem hiding this comment.
Right. And it's also not working yet? Because the checkbox doesn't have any names or handlers attached 😁
| export function groupBy<T>(array: Iterable<T>, keySelector: KeySelector<T>): Record<string, T[]> { | ||
| return Array.from(array).reduce( | ||
| (acc: Record<string, T[]>, item: T) => { | ||
| const key = keySelector(item); | ||
| if (key in acc) { | ||
| // found key, push new item into existing array | ||
| acc[key].push(item); | ||
| } else { | ||
| // did not find key, create new array | ||
| acc[key] = [item]; | ||
| } | ||
| return acc; | ||
| }, | ||
| {} // start with empty object | ||
| ); | ||
| } |
There was a problem hiding this comment.
This groups a array of objects by a single key.
And will be used in the eventtype filter to show all event types per team
| <div className="flex flex-col sm:space-x-2 xl:flex-row"> | ||
| <div className="hidden xl:block"> | ||
| <VerticalTabs tabs={tabs} sticky /> | ||
| </div> | ||
| <div className="block xl:hidden"> |
There was a problem hiding this comment.
Always horizontal tabs for now
| export function useFilterQuery() { | ||
| return useTypedQuery(filterQuerySchema); | ||
| } |
There was a problem hiding this comment.
Saves typing this every time
|
@JeroenReumkens I think the OR behaviour is acceptable, doesn't feel weird to me; but we can of course revisit at a later time. For now it's good to go if your other feedback has been addressed - @sean-brydon |
I think the OR behaviour is acceptable, doesn't feel weird to me; but we can of course revisit at a later time. For now it's good to go if your other feedback has been addressed
emrysal
left a comment
There was a problem hiding this comment.
Blocking until mobile is fixed.
|
This PR currently has a merge conflict. Please resolve this and then re-add the |
# Conflicts: # packages/ui/components/index.ts
What does this PR do?
Booking filters working for teams and users
Loom Video: https://www.loom.com/share/1924b26e62e540ca81a870b2ce80b684
Mobile mode has been fixed:
Left side -> Opens on the correct side to not overflow

Right side

Type of change
How should this be tested?
TODOS: