@cryptlex/web-components 5.2.0 → 5.3.0

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

@@ -1,220 +0,0 @@
-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>
-    );
-};