Feature/booking filters (#6099)

* EventTypeFilter UI working

* Tidy + fix avatar + fix overflow

* Component store

* WIP - switchin to query filtering instead of state

* Push working

* Checkbox approach - weird conditional toggle for all bookings

* WIP

* the master query hook :O

* useTypedQuery

* Working typed query

* Typed query hook

* Add optional keys

* safeParse query params

* Add use callback

* Fix re-renders

* Remove local version of local query and use util branch

* Working team filters!

* working people filter!

* Tidy up

* NIT

Co-authored-by: zomars <zomars@me.com>

apps/web/components/booking/BookingListItem.tsx

@@ -30,7 +30,7 @@ import useMeQuery from "@lib/hooks/useMeQuery";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 
-type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"];
+type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["filters"]["status"];
 
 type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 

apps/web/pages/bookings/[status].tsx

@@ -5,9 +5,11 @@ import { Fragment } from "react";
 import { z } from "zod";
 
 import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
+import BookingLayout from "@calcom/features/bookings/layout/BookingLayout";
+import { filterQuerySchema, useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Alert, BookingLayout, Button, EmptyScreen, Icon } from "@calcom/ui";
+import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import { Alert, Button, EmptyScreen, Icon } from "@calcom/ui";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 
@@ -16,7 +18,7 @@ import SkeletonLoader from "@components/booking/SkeletonLoader";
 
 import { ssgInit } from "@server/lib/ssg";
 
-type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"];
+type BookingListingStatus = z.infer<typeof filterQuerySchema>["status"];
 type BookingOutput = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][0];
 
 type RecurringInfo = {
@@ -41,12 +43,19 @@ const querySchema = z.object({
 });
 
 export default function Bookings() {
+  const { data: filterQuery } = useFilterQuery();
   const router = useRouter();
   const { status } = router.isReady ? querySchema.parse(router.query) : { status: "upcoming" as const };
   const { t } = useLocale();
 
   const query = trpc.viewer.bookings.get.useInfiniteQuery(
-    { status, limit: 10 },
+    {
+      limit: 10,
+      filters: {
+        ...filterQuery,
+        status: filterQuery.status ?? status,
+      },
+    },
     {
       // first render has status `undefined`
       enabled: router.isReady,
@@ -165,7 +174,7 @@ export default function Bookings() {
           </>
         )}
         {query.status === "success" && isEmpty && (
-          <div className="flex items-center justify-center pt-2 xl:mx-6 xl:pt-0">
+          <div className="flex items-center justify-center pt-2 xl:pt-0">
             <EmptyScreen
               Icon={Icon.FiCalendar}
               headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}

apps/web/public/static/locales/en/common.json

@@ -1443,6 +1443,9 @@
   "enter_option": "Enter Option {{index}}",
   "add_an_option": "Add an option",
   "radio": "Radio",
+  "individual":"Individual",
+  "all_bookings_filter_label":"All Bookings",
+  "all_users_filter_label":"All Users",
   "meeting_url_workflow": "Meeting url",
   "meeting_url_info": "The event meeting conference url",
   "date_overrides": "Date overrides",