diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx index 2a8c527a6a..6a86e8d0f2 100644 --- a/apps/web/modules/bookings/views/bookings-listing-view.tsx +++ b/apps/web/modules/bookings/views/bookings-listing-view.tsx @@ -1,12 +1,6 @@ "use client"; -import { - useReactTable, - getCoreRowModel, - getFilteredRowModel, - getSortedRowModel, - createColumnHelper, -} from "@tanstack/react-table"; +import { useReactTable, getCoreRowModel, getSortedRowModel, createColumnHelper } from "@tanstack/react-table"; import { useMemo, useRef } from "react"; import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components"; @@ -146,7 +140,6 @@ function BookingsContent({ status }: BookingsProps) { enableColumnFilter: true, enableSorting: false, cell: () => null, - filterFn: () => true, meta: { filter: { type: ColumnFilterType.MULTI_SELECT, @@ -159,7 +152,6 @@ function BookingsContent({ status }: BookingsProps) { enableColumnFilter: true, enableSorting: false, cell: () => null, - filterFn: () => true, meta: { filter: { type: ColumnFilterType.MULTI_SELECT, @@ -172,7 +164,6 @@ function BookingsContent({ status }: BookingsProps) { enableColumnFilter: true, enableSorting: false, cell: () => null, - filterFn: () => true, meta: { filter: { type: ColumnFilterType.MULTI_SELECT, @@ -185,7 +176,6 @@ function BookingsContent({ status }: BookingsProps) { enableColumnFilter: true, enableSorting: false, cell: () => null, - filterFn: () => true, meta: { filter: { type: ColumnFilterType.TEXT, @@ -198,7 +188,6 @@ function BookingsContent({ status }: BookingsProps) { enableColumnFilter: true, enableSorting: false, cell: () => null, - filterFn: () => true, meta: { filter: { type: ColumnFilterType.TEXT, @@ -211,7 +200,6 @@ function BookingsContent({ status }: BookingsProps) { enableColumnFilter: true, enableSorting: false, cell: () => null, - filterFn: () => true, meta: { filter: { type: ColumnFilterType.DATE_RANGE, @@ -346,7 +334,6 @@ function BookingsContent({ status }: BookingsProps) { }, }, getCoreRowModel: getCoreRowModel(), - getFilteredRowModel: getFilteredRowModel(), getSortedRowModel: getSortedRowModel(), getFacetedUniqueValues, }); diff --git a/packages/features/data-table/components/DataTablePagination.tsx b/packages/features/data-table/components/DataTablePagination.tsx index 42da0519cc..592db49509 100644 --- a/packages/features/data-table/components/DataTablePagination.tsx +++ b/packages/features/data-table/components/DataTablePagination.tsx @@ -20,7 +20,7 @@ export function DataTablePagination({ const { pageIndex, pageSize, setPageIndex, setPageSize } = useDataTable(); if (paginationMode === "infinite") { - const loadedCount = table.getFilteredRowModel().rows.length; + const loadedCount = table.getRowModel().rows.length; return (

Loaded {loadedCount} of{" "} diff --git a/packages/features/data-table/components/filters/AddFilterButton.tsx b/packages/features/data-table/components/filters/AddFilterButton.tsx index e228a8f2f8..9c2dbf6bab 100644 --- a/packages/features/data-table/components/filters/AddFilterButton.tsx +++ b/packages/features/data-table/components/filters/AddFilterButton.tsx @@ -3,7 +3,7 @@ import { type Table } from "@tanstack/react-table"; // eslint-disable-next-line no-restricted-imports import startCase from "lodash/startCase"; -import { forwardRef, useCallback } from "react"; +import { forwardRef } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { @@ -39,19 +39,10 @@ function AddFilterButtonComponent( ref: React.Ref ) { const { t } = useLocale(); - const { activeFilters, setActiveFilters } = useDataTable(); + const { activeFilters, addFilter } = useDataTable(); const filterableColumns = useFilterableColumns(table); - const handleAddFilter = useCallback( - (columnId: string) => { - if (!activeFilters?.some((filter) => filter.f === columnId)) { - setActiveFilters([...activeFilters, { f: columnId, v: undefined }]); - } - }, - [activeFilters, setActiveFilters] - ); - if (hideWhenFilterApplied && activeFilters?.length > 0) { return null; } @@ -99,7 +90,7 @@ function AddFilterButtonComponent( return ( handleAddFilter(column.id)} + onSelect={() => addFilter(column.id)} className="flex items-center justify-between px-4 py-2" data-testid={`add-filter-item-${column.id}`}> {startCase(column.title)} diff --git a/packages/features/data-table/lib/context.tsx b/packages/features/data-table/lib/context.tsx index 285c4ba150..695f36369f 100644 --- a/packages/features/data-table/lib/context.tsx +++ b/packages/features/data-table/lib/context.tsx @@ -16,8 +16,8 @@ type ActiveFilter = z.infer; export type DataTableContextType = { activeFilters: ActiveFilter[]; - setActiveFilters: (filters: ActiveFilter[]) => void; clearAll: (exclude?: string[]) => void; + addFilter: (columnId: string) => void; updateFilter: (columnId: string, value: FilterValue) => void; removeFilter: (columnId: string) => void; @@ -65,8 +65,18 @@ export function DataTableProvider({ children, defaultPageSize = DEFAULT_PAGE_SIZ const [pageIndex, setPageIndex] = useQueryState("page", parseAsInteger.withDefault(0)); const [pageSize, setPageSize] = useQueryState("size", parseAsInteger.withDefault(defaultPageSize)); + const addFilter = useCallback( + (columnId: string) => { + if (!activeFilters?.some((filter) => filter.f === columnId)) { + setActiveFilters([...activeFilters, { f: columnId, v: undefined }]); + } + }, + [activeFilters, setActiveFilters] + ); + const clearAll = useCallback( (exclude?: string[]) => { + setPageIndex(0); setActiveFilters((prev) => prev.filter((filter) => exclude?.includes(filter.f))); }, [setActiveFilters] @@ -74,6 +84,7 @@ export function DataTableProvider({ children, defaultPageSize = DEFAULT_PAGE_SIZ const updateFilter = useCallback( (columnId: string, value: FilterValue) => { + setPageIndex(0); setActiveFilters((prev) => { let added = false; const newFilters = prev.map((item) => { @@ -94,6 +105,7 @@ export function DataTableProvider({ children, defaultPageSize = DEFAULT_PAGE_SIZ const removeFilter = useCallback( (columnId: string) => { + setPageIndex(0); setActiveFilters((prev) => prev.filter((filter) => filter.f !== columnId)); }, [setActiveFilters] @@ -111,7 +123,7 @@ export function DataTableProvider({ children, defaultPageSize = DEFAULT_PAGE_SIZ { data: emptyData, columns, getCoreRowModel: getCoreRowModel(), - getFilteredRowModel: getFilteredRowModel(), getSortedRowModel: getSortedRowModel(), getFacetedUniqueValues: getInsightsFacetedUniqueValues, }); diff --git a/packages/features/insights/hooks/useInsightsColumns.tsx b/packages/features/insights/hooks/useInsightsColumns.tsx index 3bac82aa6f..9791d50e56 100644 --- a/packages/features/insights/hooks/useInsightsColumns.tsx +++ b/packages/features/insights/hooks/useInsightsColumns.tsx @@ -5,7 +5,7 @@ import { useMemo } from "react"; import { z } from "zod"; import dayjs from "@calcom/dayjs"; -import { dataTableFilter, ColumnFilterType } from "@calcom/features/data-table"; +import { ColumnFilterType } from "@calcom/features/data-table"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useCopy } from "@calcom/lib/hooks/useCopy"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -49,10 +49,6 @@ export const useInsightsColumns = ({ filter: { type: ColumnFilterType.SINGLE_SELECT }, }, cell: () => null, - filterFn: (row, id, filterValue) => { - const cellValue = row.original.formId; - return dataTableFilter(cellValue, filterValue); - }, }), columnHelper.accessor("bookingUserId", { id: "bookingUserId", @@ -65,10 +61,6 @@ export const useInsightsColumns = ({ }, }, cell: () => null, - filterFn: (row, id, filterValue) => { - const cellValue = row.original.bookingUserId; - return dataTableFilter(cellValue, filterValue); - }, }), columnHelper.accessor("bookingUid", { id: "bookingUid", @@ -169,10 +161,6 @@ export const useInsightsColumns = ({ meta: { filter: { type: filterType }, }, - filterFn: (row, id, filterValue) => { - const cellValue = row.original.response[id]?.value; - return dataTableFilter(cellValue, filterValue); - }, }); }) ?? []), columnHelper.accessor("bookingStatusOrder", { @@ -187,15 +175,6 @@ export const useInsightsColumns = ({ meta: { filter: { type: ColumnFilterType.MULTI_SELECT, icon: "circle" }, }, - filterFn: (row, id, filterValue) => { - const cellValue = row.original.bookingStatusOrder; - return dataTableFilter(cellValue, filterValue); - }, - sortingFn: (rowA, rowB) => { - const statusA = rowA.original.bookingStatusOrder ?? 6; // put it at the end if bookingStatusOrder is null - const statusB = rowB.original.bookingStatusOrder ?? 6; - return statusA - statusB; - }, }), columnHelper.accessor("bookingCreatedAt", { id: "bookingCreatedAt", @@ -206,16 +185,6 @@ export const useInsightsColumns = ({ ), - sortingFn: (rowA, rowB) => { - const dateA = rowA.original.bookingCreatedAt; - const dateB = rowB.original.bookingCreatedAt; - if (!dateA && !dateB) return 0; - if (!dateA) return -1; - if (!dateB) return 1; - if (!(dateA instanceof Date) || !(dateB instanceof Date)) return 0; - - return dateA.getTime() - dateB.getTime(); - }, }), columnHelper.accessor("bookingAssignmentReason", { id: "bookingAssignmentReason", @@ -229,10 +198,6 @@ export const useInsightsColumns = ({ const assignmentReason = info.getValue(); return

{assignmentReason}
; }, - filterFn: (row, id, filterValue) => { - const reason = row.original.bookingAssignmentReason; - return dataTableFilter(reason, filterValue); - }, }), columnHelper.accessor("createdAt", { id: "createdAt", @@ -245,10 +210,6 @@ export const useInsightsColumns = ({ {dayjs(info.getValue()).format("MMM D, YYYY HH:mm")} ), - filterFn: (row, id, filterValue) => { - const createdAt = row.original.createdAt; - return dataTableFilter(createdAt, filterValue); - }, }), ]; }, [isHeadersSuccess, headers]); diff --git a/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx index cfb36e2b2f..76607f5ef9 100644 --- a/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx +++ b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx @@ -155,10 +155,6 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps) ); }, - filterFn: (rows, id, filterValue) => { - const userEmail = rows.original.email; - return filterValue.includes(userEmail); - }, }, { id: "role", @@ -181,15 +177,6 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps) ); }, - filterFn: (rows, id, filterValue) => { - if (filterValue.includes("PENDING")) { - if (filterValue.length === 1) return !rows.original.accepted; - else return !rows.original.accepted || filterValue.includes(rows.getValue(id)); - } - - // Show only the selected roles - return filterValue.includes(rows.getValue(id)); - }, }, { id: "teams", @@ -230,10 +217,6 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps) ); }, - filterFn: (rows, _, filterValue: string[]) => { - const teamNames = rows.original.teams.map((team) => team.name); - return filterValue.some((value: string) => teamNames.includes(value)); - }, }, ]; return cols; diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx index a4cb586432..b89c85cf9d 100644 --- a/packages/features/users/components/UserTable/UserListTable.tsx +++ b/packages/features/users/components/UserTable/UserListTable.tsx @@ -13,12 +13,6 @@ import { DataTableSelectionBar, DataTableFilters, useColumnFilters, - textFilter, - isTextFilterValue, - isSingleSelectFilterValue, - isMultiSelectFilterValue, - singleSelectFilter, - multiSelectFilter, ColumnFilterType, convertFacetedValuesToMap, useDataTable, @@ -237,18 +231,6 @@ function UserListTableContent() { ); }, - filterFn: (row, id, filterValue) => { - const attributeValues = row.original.attributes?.filter((attr) => attr.attributeId === id); - - if (isTextFilterValue(filterValue)) { - return attributeValues?.some((attr) => textFilter(attr.value, filterValue)) ?? false; - } else if (isSingleSelectFilterValue(filterValue)) { - return singleSelectFilter(attributeValues?.map((attr) => attr.value) ?? [], filterValue); - } else if (isMultiSelectFilterValue(filterValue)) { - return multiSelectFilter(attributeValues?.map((attr) => attr.value) ?? [], filterValue); - } - return false; - }, }; }) ?? []; return attributeColumns; @@ -312,10 +294,6 @@ function UserListTableContent() { ); }, - filterFn: (rows, id, filterValue) => { - const userEmail = rows.original.email; - return filterValue.includes(userEmail); - }, }, { id: "role", @@ -335,15 +313,6 @@ function UserListTableContent() { ); }, - filterFn: (rows, id, filterValue) => { - if (filterValue.includes("PENDING")) { - if (filterValue.length === 1) return !rows.original.accepted; - else return !rows.original.accepted || filterValue.includes(rows.getValue(id)); - } - - // Show only the selected roles - return filterValue.includes(rows.getValue(id)); - }, }, { id: "teams", @@ -381,10 +350,6 @@ function UserListTableContent() { ); }, - filterFn: (rows, _, filterValue: string[]) => { - const teamNames = rows.original.teams.map((team) => team.name); - return filterValue.some((value: string) => teamNames.includes(value)); - }, }, ...generateAttributeColumns(), {