Skip to content

Commit 7fb53c5

Browse files
committed
fix: re-implement team filter & people filter components
1 parent 80aac06 commit 7fb53c5

18 files changed

+366
-181
lines changed

apps/web/public/icons/sprite.svg

+11
Loading

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2075,7 +2075,7 @@
20752075
"looking_for_more_analytics": "Looking for more analytics?",
20762076
"looking_for_more_insights": "Looking for more Insights?",
20772077
"filters": "Filters",
2078-
"add_filter": "Add filter",
2078+
"add_filter": "Filter",
20792079
"add_rule": "Add rule",
20802080
"add_rule_group": "Add rule group",
20812081
"remove_filters": "Clear all filters",

packages/features/data-table/components/DataTableWrapper.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function DataTableWrapper<TData, TValue>({
5454
<DataTableToolbar.Root>
5555
<div className="flex w-full flex-col gap-2 sm:flex-row">
5656
<div className="flex w-full flex-wrap items-center justify-between gap-2">
57-
<div className="flex justify-start gap-2">{ToolbarLeft}</div>
57+
<div className="flex items-center justify-start gap-2">{ToolbarLeft}</div>
5858
<div className="grow" />
5959
<div className="flex justify-end gap-2">{ToolbarRight}</div>
6060
</div>

packages/features/data-table/components/filters/FilterOptions.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
"use client";
22

3+
import React from "react";
4+
35
import type { FilterableColumn } from "../../lib/types";
46
import { MultiSelectFilterOptions } from "./MultiSelectFilterOptions";
57
import { NumberFilterOptions } from "./NumberFilterOptions";
68
import { SingleSelectFilterOptions } from "./SingleSelectFilterOptions";
79
import { TextFilterOptions } from "./TextFilterOptions";
810

11+
const customFilterComponents: React.ComponentType<{ column: FilterableColumn }> = {};
12+
13+
export type CustomFilterComponent = keyof typeof customFilterComponents;
14+
915
export type FilterOptionsProps = {
1016
column: FilterableColumn;
1117
};
@@ -19,6 +25,9 @@ export function FilterOptions({ column }: FilterOptionsProps) {
1925
return <SingleSelectFilterOptions column={column} />;
2026
} else if (column.type === "number") {
2127
return <NumberFilterOptions column={column} />;
28+
} else if (column.type === "custom" && customFilterComponents[column.component]) {
29+
const Component = customFilterComponents[column.component];
30+
return <Component column={column} />;
2231
} else {
2332
return null;
2433
}

packages/features/data-table/components/filters/MultiSelectFilterOptions.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function MultiSelectFilterOptions({ column }: MultiSelectFilterOptionsPro
2929

3030
return (
3131
<Command>
32-
<CommandInput placeholder={t("search_options")} />
32+
<CommandInput placeholder={t("search")} />
3333
<CommandList>
3434
<CommandEmpty>{t("no_options_found")}</CommandEmpty>
3535
{Array.from(column.options.keys()).map((option) => {

packages/features/data-table/components/filters/SingleSelectFilterOptions.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function SingleSelectFilterOptions({ column }: SingleSelectFilterOptionsP
2929

3030
return (
3131
<Command>
32-
<CommandInput placeholder={t("search_options")} />
32+
<CommandInput placeholder={t("search")} />
3333
<CommandList>
3434
<CommandEmpty>{t("no_options_found")}</CommandEmpty>
3535
{Array.from(column.options.keys()).map((option) => {

packages/features/data-table/components/filters/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -148,14 +148,14 @@ function AddFilterButtonComponent<TData>(
148148
<div className="flex items-center space-x-2">
149149
<Popover>
150150
<PopoverTrigger asChild>
151-
<Button ref={ref} color="secondary" className="border-dashed">
152-
<Icon name="filter" className="mr-2 h-4 w-4" />
151+
<Button ref={ref} color="secondary">
152+
<Icon name="sliders-horizontal" className="mr-2 h-4 w-4" />
153153
{t("add_filter")}
154154
</Button>
155155
</PopoverTrigger>
156156
<PopoverContent className="w-[200px] p-0" align="start">
157157
<Command>
158-
<CommandInput placeholder={t("search_columns")} />
158+
<CommandInput placeholder={t("search")} />
159159
<CommandList>
160160
<CommandEmpty>{t("no_columns_found")}</CommandEmpty>
161161
{filterableColumns.map((column) => {

packages/features/data-table/lib/context.tsx

+2-19
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import type { SortingState, OnChangeFn } from "@tanstack/react-table";
44
import { useQueryState, parseAsArrayOf, parseAsJson } from "nuqs";
5-
import { createContext, useCallback, useState, type Dispatch, type SetStateAction } from "react";
5+
import { createContext, useCallback } from "react";
66
import { z } from "zod";
77

88
import { type FilterValue, ZFilterValue, ZSorting } from "./types";
@@ -23,10 +23,6 @@ export type DataTableContextType = {
2323

2424
sorting: SortingState;
2525
setSorting: OnChangeFn<SortingState>;
26-
27-
displayedExternalFilters: string[];
28-
setDisplayedExternalFilters: Dispatch<SetStateAction<string[]>>;
29-
removeDisplayedExternalFilter: (key: string) => void;
3026
};
3127

3228
export const DataTableContext = createContext<DataTableContextType | null>(null);
@@ -41,19 +37,9 @@ export function DataTableProvider({ children }: { children: React.ReactNode }) {
4137
parseAsArrayOf(parseAsJson(ZSorting.parse)).withDefault([])
4238
);
4339

44-
const [displayedExternalFilters, setDisplayedExternalFilters] = useState<string[]>([]);
45-
46-
const removeDisplayedExternalFilter = useCallback(
47-
(key: string) => {
48-
setDisplayedExternalFilters((prev) => prev.filter((f) => f !== key));
49-
},
50-
[setDisplayedExternalFilters]
51-
);
52-
5340
const clearAll = useCallback(() => {
5441
setActiveFilters([]);
55-
setDisplayedExternalFilters([]);
56-
}, [setActiveFilters, setDisplayedExternalFilters]);
42+
}, [setActiveFilters]);
5743

5844
const updateFilter = useCallback(
5945
(columnId: string, value: FilterValue) => {
@@ -81,9 +67,6 @@ export function DataTableProvider({ children }: { children: React.ReactNode }) {
8167
removeFilter,
8268
sorting,
8369
setSorting,
84-
displayedExternalFilters,
85-
setDisplayedExternalFilters,
86-
removeDisplayedExternalFilter,
8770
}}>
8871
{children}
8972
</DataTableContext.Provider>

packages/features/data-table/lib/types.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export type TextFilterOperator = z.infer<typeof ZTextFilterOperator>;
1717

1818
export const ZSingleSelectFilterValue = z.object({
1919
type: z.literal("single_select"),
20-
data: z.string(),
20+
data: z.union([z.string(), z.number()]),
2121
});
2222

2323
export type SingleSelectFilterValue = z.infer<typeof ZSingleSelectFilterValue>;
@@ -74,6 +74,10 @@ export type ColumnFilterType = "single_select" | "multi_select" | "text" | "numb
7474
export type ColumnFilterMeta = {
7575
type?: ColumnFilterType;
7676
icon?: IconName;
77+
} & {
78+
type: "custom";
79+
icon?: IconName;
80+
component: CustomFilterComponent;
7781
};
7882

7983
export type FilterableColumn = {

0 commit comments

Comments
 (0)