@cryptlex/web-components 5.1.0 → 5.2.0

package/lib/components/data-table/data-table-filter.tsx

@@ -0,0 +1,220 @@
+import type { CalendarDateTime } from "@internationalized/date";
+import { useDataTable, type OperationKeys } from "lib/components/data-table/data-table";
+import { type ApiFilters } from "lib/components/data-table/table-commons";
+import { TfDatePicker } from "lib/components/inputs/date-picker";
+import { TfIdSearchInput } from "lib/components/inputs/id-search";
+import type { MultiSelectProps } from "lib/components/inputs/multi-select";
+import { Button } from "lib/components/ui/button";
+import { EasyMenu, MenuItem } from "lib/components/ui/menu";
+import { Popover, PopoverTrigger } from "lib/components/ui/popover";
+import { useAppForm } from "lib/utils/form-hook";
+import { cn } from "lib/utils/primitives";
+import { useResourceFormatter } from "lib/utils/resource-names";
+import { Filter, Trash } from "lucide-react";
+import { useRef } from "react";
+
+export const FILTER_COMPARISON_OPERATORS = [
+    'eq',
+    'ne',
+    'cn',
+    'nc',
+    'sw',
+    'ew',
+    'in',
+    'nin',
+    'gt',
+    'gte',
+    'lt',
+    'lte',
+] as const;
+export type FilterComparisonOperator =
+    (typeof FILTER_COMPARISON_OPERATORS)[number];
+
+export const COMPARISON_OPERATOR_LABELS: Record<
+    FilterComparisonOperator,
+    string
+> = {
+    eq: 'equal to',
+    ne: 'not equal to',
+    cn: 'contains',
+    nc: 'does not contain',
+    sw: 'starts with',
+    ew: 'ends with',
+    in: 'includes',
+    nin: 'does not include',
+    gt: 'greater than',
+    gte: 'greater than or equal to',
+    lt: 'less than',
+    lte: 'less than or equal to',
+};
+
+type BaseLocalFilter<T extends FilterType, V> = {
+    id: string;
+    type: T;
+    property: string;
+    operator: FilterComparisonOperator;
+    value: V | undefined;
+    displayValue?: string;
+};
+type EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;
+type IdLocalFilter = BaseLocalFilter<'id', string>;
+type BoolLocalFilter = BaseLocalFilter<'bool', boolean>;
+type StringLocalFilter = BaseLocalFilter<'string', string>;
+type DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;
+type IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;
+
+type LocalFilter = EnumLocalFilter
+    | IdLocalFilter
+    | BoolLocalFilter
+    | StringLocalFilter
+    | DateLocalFilter
+    | IdSearchLocalFilter;
+
+export type FilterConfig =
+    | { type: 'enum'; options: MultiSelectProps['items'] }
+    | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }
+    | { type: 'id' }
+    | { type: 'bool' }
+    | { type: 'string' }
+    | { type: 'date' }
+
+export type FilterType = FilterConfig['type'];
+
+const FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {
+    'bool': ['eq'],
+    'enum': ['in', 'nin'],
+    'id': ['in', 'nin'],
+    'id-search': ['in', 'nin'],
+    'string': ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],
+    'date': ['lt', 'gt'],
+}
+
+export type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>
+
+export function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {
+    const { filters, query, setFilters, filterConfig } = useDataTable();
+    // TODO focus
+    // const localFilterRefs = useRef([]);
+    const addFilterButtonRef = useRef<HTMLButtonElement>(null);
+
+    const resourceFormatter = useResourceFormatter();
+
+    const DEFAULT_VALUES: { filters: LocalFilter[] } = {
+        // TODO, initialize with filters from tableState
+        filters: []
+    };
+    const form = useAppForm({
+        defaultValues: DEFAULT_VALUES,
+        onSubmit: ({ value }) => {
+            // TODO, instead of generic transformation, use type based tranform()
+            setFilters(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } } }))
+        }
+    })
+
+    // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870
+    const filterKeys = Object.keys(filterConfig).sort();
+
+    return (
+        <section {...props} className={cn("flex gap-icon items-center", className)}>
+            <PopoverTrigger onOpenChange={(o) => {
+                // Set filters when the popover closes
+                if (!o) {
+                    form.handleSubmit();
+                } else {
+                    addFilterButtonRef.current?.focus();
+                }
+            }}>
+                <Button active={filters.length > 0} isDisabled={query.isPending || filterKeys.length === 0} type="button" size={'icon'} variant={'neutral'}><Filter /></Button>
+                {/* TODO, icon maps with dynamic imports? */}
+                {/* TODO open popover with form for property specific filter */}
+                {/* TODO, icons here??? */}
+                <Popover className="w-full p-icon">
+                    {/* const h3Styles = "body mb-icon text-muted-foreground"; */}
+                    {/* <h3 className={h3Styles}>{isFiltersActive ? "Active filters" : "Add filters"}</h3> */}
+                    <form onSubmit={(e) => { e.preventDefault(); }} className="flex flex-col gap-icon max-h-table overflow-auto ">
+                        <form.Field mode="array" name={"filters"}>
+                            {
+                                (field) => {
+                                    return <>
+                                        {field.state.value.map((lf, i) => {
+                                            return (
+                                                <div key={lf.id} className="flex gap-icon items-center justify-normal">
+                                                    <span className="text-sm">{resourceFormatter(lf.property)}</span>
+                                                    <form.AppField
+                                                        key={lf.id}
+                                                        name={`filters[${i}].operator`}
+                                                    >
+                                                        {(sf) => (<sf.TfSingleSelect items={FilterOperations[lf.type].map(op => ({ id: op, label: <>{COMPARISON_OPERATOR_LABELS[op]}</> }))} />)}
+                                                    </form.AppField>
+
+                                                    {lf.type === 'bool' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfCheckbox />)}</form.AppField>}
+                                                    {lf.type === 'date' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfDatePicker />)}</form.AppField>}
+                                                    {lf.type === 'id' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}
+                                                    {lf.type === 'string' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}
+                                                    {/* @ts-ignore */}
+                                                    {lf.type === 'enum' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect items={filterConfig[lf.property].options} />)}</form.AppField>}
+                                                    {/* @ts-ignore */}
+                                                    {lf.type === 'id-search' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfIdSearchInput multiple accessor="id" searchFn={filterConfig[lf.property].search} />)}</form.AppField>}
+
+                                                    <Button type="button" variant="destructive" size="icon" onPress={() => field.removeValue(i)}><Trash /></Button>
+                                                </div>
+                                            )
+                                        })}
+                                        <div className="flex w-full items-center justify-end gap-2 not-first:mt-icon">
+                                            <EasyMenu label="Add Filter">
+                                                {filterKeys.map(k => <MenuItem key={k} onAction={() => {
+                                                    //@ts-ignore
+                                                    const type = filterConfig[k].type as FilterType;
+
+                                                    const defaultValue = (t: FilterType) => {
+                                                        // TODO, ensure exhaustive???
+                                                        switch (t) {
+                                                            case 'bool':
+                                                                return true;
+                                                            case 'string':
+                                                                return '';
+                                                            case 'date':
+                                                                return new Date().toISOString();
+                                                            case 'id':
+                                                                return '';
+                                                            case 'id-search':
+                                                                return [] as string[];
+                                                            case 'enum':
+                                                                return [] as string[];
+                                                        }
+                                                    }
+
+                                                    const newFilter: LocalFilter = {
+                                                        id: `${k}-${Date.now()}`,
+                                                        operator: FilterOperations[type][0],
+                                                        //@ts-ignore
+                                                        value: defaultValue(type),
+                                                        type: type,
+                                                        property: k,
+                                                    };
+
+                                                    field.pushValue(newFilter);
+                                                    // TODO Focus to ref
+
+                                                }} className="dropdown-item">{resourceFormatter(k)}</MenuItem>)}
+                                            </EasyMenu>
+                                            {field.state.value.length > 0 ? (
+                                                <Button
+                                                    type="button"
+                                                    variant="neutral"
+                                                    onPress={() => { field.setValue([]) }}
+                                                >
+                                                    Reset filters
+                                                </Button>
+                                            ) : null}
+                                        </div>
+                                    </>
+                                }
+                            }
+                        </form.Field >
+                    </form>
+                </Popover>
+            </PopoverTrigger>
+        </section>
+    );
+};