Skip to content

Feature/booking filters#6099

Merged
PeerRich merged 54 commits intomainfrom
feature/booking-filters
Dec 22, 2022
Merged

Feature/booking filters#6099
PeerRich merged 54 commits intomainfrom
feature/booking-filters

Conversation

@sean-brydon
Copy link
Copy Markdown
Member

@sean-brydon sean-brydon commented Dec 19, 2022

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:

  • Detect which side of the screen the popover is opening on
  • Open on the correct start/end alignment based on which 1/2 the trigger is present on.

Left side -> Opens on the correct side to not overflow
CleanShot 2022-12-22 at 09 58 58@2x

Right side
CleanShot 2022-12-22 at 09 59 33@2x

Type of change

  • New feature (non-breaking change which adds functionality)

How should this be tested?

  • Add multiple bookings to teams / users
  • Filter them using the popovers

TODOS:

  • Mobile View
  • Add filter button
  • Support more filters
  • Move from checkboxes to a custom "Select style" component

@vercel
Copy link
Copy Markdown

vercel Bot commented Dec 19, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
cal ✅ Ready (Inspect) Visit Preview Dec 22, 2022 at 0:22AM (UTC)

Comment on lines +1 to +24
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;
}[]
>;
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This filter is not used just yet - need to figure out the add filter button

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. And it's also not working yet? Because the checkbox doesn't have any names or handlers attached 😁

Comment on lines +3 to +18
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
);
}
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines -43 to -47
<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">
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Always horizontal tabs for now

Comment on lines +13 to +15
export function useFilterQuery() {
return useTypedQuery(filterQuerySchema);
}
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Saves typing this every time

Comment thread packages/lib/hooks/useTypedQuery.ts Outdated
@emrysal
Copy link
Copy Markdown
Contributor

emrysal commented Dec 21, 2022

@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

@emrysal emrysal dismissed JeroenReumkens’s stale review December 21, 2022 17:17

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 emrysal self-requested a review December 21, 2022 17:19
Copy link
Copy Markdown
Contributor

@emrysal emrysal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Blocking until mobile is fixed.

@github-actions github-actions Bot added automerge ♻️ autoupdate tells kodiak to keep this branch up-to-date labels Dec 22, 2022
@kodiakhq
Copy link
Copy Markdown
Contributor

kodiakhq Bot commented Dec 22, 2022

This PR currently has a merge conflict. Please resolve this and then re-add the automerge label.

@kodiakhq kodiakhq Bot removed the automerge label Dec 22, 2022
# Conflicts:
#	packages/ui/components/index.ts
Copy link
Copy Markdown
Contributor

@emrysal emrysal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@PeerRich PeerRich merged commit cefcb1e into main Dec 22, 2022
@PeerRich PeerRich deleted the feature/booking-filters branch December 22, 2022 12:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

automerge ♻️ autoupdate tells kodiak to keep this branch up-to-date

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants