namirasoft-account-react 1.5.20 → 1.5.21

package/src/components/NSATable.tsx

@@ -1,495 +1,495 @@
-import { EncodingOperation, FilterItem, FilterItemColumnType, NamingConvention, ObjectService, SearchOperation, SortItem } from "namirasoft-core";
-import { EntityResolveResponseRow } from "namirasoft-field";
-import { FilterItemColumnTypeBuilder, VariableType } from "namirasoft-schema";
-import { IBaseComponentProps, NSButtonProps, NSFilterBox, NSFilterBoxItems, NSFilterBoxProps_Table, NSSpace, NSSpaceSizeType, NSTable, TableColumnInfo, TableRowInfo } from "namirasoft-site-react";
-import { Component, ReactNode, createRef } from "react";
-import { IEntityInfo } from "../IEntityInfo";
-import { NSACacheService } from "../NSACacheService";
-import { NSAQuickFilterBar } from "./quickfilter/NSAQuickFilterBar";
-import { NSAQuickFilterDialog, QuickFilterConfig } from "./quickfilter/NSAQuickFilterDialog";
-
-export interface NSATableUIProps<RowType>
-{
-    getRowAttributes?: (row_value: RowType, row_index: number, res: { rows: RowType[]; count: number; } | null) => { [key: string]: any };
-    getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: any };
-    getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) => any;
-    search_box?: {
-        exclude?: {
-            show?: {
-                table?: (table: string) => boolean;
-                column?: (table: string, column: string) => boolean;
-            },
-            load_value?: (table: string, column: string) => boolean;
-        }
-    };
-}
-
-export interface NSATableProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps
-{
-    entity: IEntityInfo<RowType, RowTypeInput>;
-    ctf: {
-        enabled: boolean;
-        rows: EntityResolveResponseRow | null;
-    };
-    url: { getQuery(name: string, base64?: boolean, remove?: boolean): string };
-    ui?: NSATableUIProps<RowType>;
-    checkbox?: boolean;
-    buttons?: NSButtonProps[];
-    onSelectionChanged?: () => void;
-}
-
-interface NSATableState<RowType>
-{
-    res: { rows: RowType[]; count: number; } | null;
-    visible_column_keys: string[];
-    quick_filter_configs: QuickFilterConfig[];
-    show_quick_filter_dialog: boolean;
-    filter_revision: number;
-}
-
-export class NSATable<RowType extends { id: string }, RowTypeInput = RowType>
-    extends Component<NSATableProps<RowType, RowTypeInput>, NSATableState<RowType>>
-{
-    public NSTable_Main = createRef<NSTable<RowType>>();
-    public NSFilterBox_Top = createRef<NSFilterBox>();
-    public NSAQuickFilterBar_Ref = createRef<NSAQuickFilterBar>();
-
-    constructor(props: NSATableProps<RowType, RowTypeInput>)
-    {
-        super(props);
-
-        let quick_filter_configs = NSACacheService.loadQuickFilters(props.entity.name);
-        if (quick_filter_configs.length === 0)
-            quick_filter_configs = this.buildDefaultQuickFilters();
-        this.state = {
-            res: null,
-            visible_column_keys: [],
-            quick_filter_configs,
-            show_quick_filter_dialog: false,
-            filter_revision: 0,
-        };
-    }
-
-    override componentDidMount()
-    {
-        const visible = this.NSTable_Main.current?.getVisibleColumns() ?? [];
-        if (visible.length > 0)
-            this.setState({ visible_column_keys: visible.map(v => v.table + "." + v.column) });
-
-        this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
-    }
-
-    private getColumns(): TableColumnInfo[]
-    {
-        let columns = Object.values(this.props.entity.client.getColumns()).flat();
-        columns.forEach(col =>
-        {
-            col.text = NamingConvention.auto.convert(col.text, NamingConvention.Pascal_Case_Space);
-        });
-        return columns;
-    }
-
-    private buildDefaultQuickFilters(): QuickFilterConfig[]
-    {
-        const getDefaults = this.props.entity.client.getQuickFilters;
-        if (!getDefaults)
-            return [];
-
-        const columns = this.getColumns();
-        const ans: QuickFilterConfig[] = [];
-        for (const def of getDefaults())
-        {
-            const col = columns.find(c => c.name === def.column);
-            if (!col)
-                continue;
-            const columnType = new ObjectService(col.type).getEnum(VariableType, VariableType.Any);
-            ans.push({
-                id: `default-${col.table.name}-${col.name}`,
-                column: {
-                    table: { name: col.table.name, text: col.table.text },
-                    name: col.name,
-                    text: col.text,
-                    type: col.type,
-                    columnType,
-                },
-                operatorName: (def as { operator?: string }).operator,
-            });
-        }
-        return ans;
-    }
-
-    private filterItemTypeConverter(type: string): FilterItemColumnType
-    {
-        let t = new ObjectService(type).getEnum(VariableType, VariableType.Any);
-        let builder = new FilterItemColumnTypeBuilder(t);
-        return builder.runSynch(() => { }) ?? FilterItemColumnType.Unknown;
-    }
-
-    private getIncomingFilterItems(): FilterItem[] | undefined
-    {
-        try
-        {
-            let encoded = this.props.url.getQuery("filters");
-            if (encoded)
-                return FilterItem.decode(encoded) ?? undefined;
-        } catch (error)
-        {
-        }
-        return undefined;
-    }
-
-    private itemMatchesQuickFilter(item: FilterItem): boolean
-    {
-        return this.state.quick_filter_configs.some(c =>
-            c.column.table.name === item.table.name && c.column.name === item.column.name);
-    }
-    private getIncomingBoxItems(): FilterItem[] | undefined
-    {
-        let items = this.getIncomingFilterItems();
-        if (!items)
-            return undefined;
-        return items.filter(i => !this.itemMatchesQuickFilter(i));
-    }
-    private getIncomingQuickItems(): FilterItem[]
-    {
-        let items = this.getIncomingFilterItems();
-        if (!items)
-            return [];
-        return items.filter(i => this.itemMatchesQuickFilter(i));
-    }
-
-    private encodeFilters(items: FilterItem[]): string
-    {
-        let command = items.map(item =>
-        {
-            let key = item.operator.name.replace(/\s+/g, "").toLowerCase();
-            let values = item.values.map(v => (v ?? "").toString().replace(/;/g, "\\;"));
-            return [item.table.name, item.column.name, item.not ? "1" : "0", key, ...values].join(";");
-        }).join(";");
-        return EncodingOperation.Base64Encode(command);
-    }
-
-    private syncQueryFromFilters()
-    {
-        let items = this.getFilterItems();
-        let url = new URL(window.location.href);
-        let encoded = items.length > 0 ? this.encodeFilters(items) : "";
-        if (encoded)
-            url.searchParams.set("filters", encoded);
-        else
-            url.searchParams.delete("filters");
-        window.history.replaceState({}, "", url.toString());
-    }
-
-    public reload(page: number | null, size: number | null): Promise<void> | undefined
-    {
-        return this.NSTable_Main.current?.reload(page, size);
-    }
-    public getSelectedIDs(): string[]
-    {
-        return this.NSTable_Main.current?.getSelectedIDs() ?? [];
-    }
-    public getSelectedRows(): RowType[]
-    {
-        return this.NSTable_Main.current?.getSelectedRows() ?? [];
-    }
-    public setSelectedIDs(ids: string[], rows: RowType[], callback?: () => void)
-    {
-        this.NSTable_Main.current?.setSelectedIDs(ids, rows, callback);
-    }
-    public getSortItems(): SortItem[]
-    {
-        return this.NSTable_Main.current?.getSortItems() ?? [];
-    }
-    public setSortItems(items: SortItem[] | null)
-    {
-        this.NSTable_Main.current?.setSortItems(items);
-    }
-    public getVisibleColumns(): { table: string, column: string }[]
-    {
-        return this.NSTable_Main.current?.getVisibleColumns() ?? [];
-    }
-    public setVisibleColumns(visible_columns: { table: string, column: string }[])
-    {
-        this.NSTable_Main.current?.setVisibleColumns(visible_columns);
-    }
-    public getFilterBoxItems(): FilterItem[]
-    {
-        return this.NSFilterBox_Top.current?.getFilterItems() ?? [];
-    }
-    public getQuickFilterItems(): FilterItem[]
-    {
-        return this.NSAQuickFilterBar_Ref.current?.getFilterItems() ?? [];
-    }
-    public getFilterItems(): FilterItem[]
-    {
-        return [...this.getFilterBoxItems(), ...this.getQuickFilterItems()];
-    }
-
-    private reloadFromFilters()
-    {
-        this.syncQueryFromFilters();
-        this.NSTable_Main.current?.setSelectedIDs([], []);
-        this.NSTable_Main.current?.reload(null, null);
-    }
-
-    private onFilterBoxChanged = () =>
-    {
-        this.reloadFromFilters();
-        this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
-    };
-
-    private buildButtons(): NSButtonProps[]
-    {
-        const buttons: NSButtonProps[] = [
-            {
-                title: "",
-                icon: { src: "https://static.namirasoft.com/image/concept/sliders/blue.svg", alt: "filter" },
-                attributes: { title: "Quick Filters" },
-                onClick: {
-                    action: () => this.setState({ show_quick_filter_dialog: true }),
-                    showLoading: false,
-                },
-            },
-        ];
-        return [...buttons, ...(this.props.buttons ?? [])];
-    }
-
-    private renderFilterHeader(): ReactNode
-    {
-        return (
-            <NSFilterBox
-                ref={this.NSFilterBox_Top}
-                filterItems={this.getIncomingBoxItems()}
-                getTables={() =>
-                {
-                    return this.props.entity.tables.map(table =>
-                    {
-                        let columns = table.table.getColumns().map(c => ({ id: c.name, ...c, type: this.filterItemTypeConverter(c.type) }));
-                        columns = columns.filter(c =>
-                        {
-                            if (this.props.ui?.search_box?.exclude?.show?.column)
-                                if (this.props.ui?.search_box?.exclude.show?.column(table.table.name, c.name))
-                                    return false;
-                            return true;
-                        });
-                        return { name: table.table.name, text: table.table.text, columns, required: table.required };
-                    }).filter(t =>
-                    {
-                        if (this.props.ui?.search_box?.exclude?.show?.table)
-                            if (this.props.ui?.search_box?.exclude.show.table(t.name))
-                                return false;
-                        return true;
-                    });
-                }}
-                getMoreTables={async () =>
-                {
-                    let ans: NSFilterBoxProps_Table[] = [];
-                    if (this.props.ctf.enabled)
-                        try
-                        {
-                            if (this.props.ctf.rows?.fields)
-                                if (this.props.ctf.rows.fields.length > 0)
-                                {
-                                    let name = this.props.entity.name + "_field";
-                                    ans.push({
-                                        name,
-                                        text: "Fields",
-                                        columns: [{
-                                            id: "field_id",
-                                            name: "field_id",
-                                            text: "ID",
-                                            type: FilterItemColumnType.Unknown,
-                                            getValues: async (search) =>
-                                            {
-                                                return this.props.ctf.rows?.fields?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
-                                            }
-                                        }, {
-                                            id: "field_name",
-                                            name: "field_id",
-                                            text: "Name",
-                                            type: FilterItemColumnType.Unknown,
-                                            getValues: async (search) =>
-                                            {
-                                                return this.props.ctf.rows?.fields?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
-                                            }
-                                        }, {
-                                            id: "field_value",
-                                            name: "value",
-                                            text: "Value",
-                                            type: FilterItemColumnType.Unknown
-                                        },
-                                        ...this.props.ctf.rows?.fields.map(f =>
-                                        {
-                                            return {
-                                                id: f.id,
-                                                name: f.id,
-                                                text: f.name,
-                                                type: this.filterItemTypeConverter(f.type.type.type),
-                                                getValues: async (search: string) =>
-                                                {
-                                                    let values = await this.props.entity.server.value_list(name, "value", search, f.id, null);
-                                                    return values.map(v => { return { value: v, title: v } });
-                                                }
-                                            };
-                                        }),],
-                                        required: false
-                                    });
-                                }
-
-                            if (this.props.ctf.rows?.categories)
-                                if (this.props.ctf.rows?.categories.length > 0)
-                                    ans.push({
-                                        name: this.props.entity.name + "_category",
-                                        text: "Categories",
-                                        columns: [{
-                                            id: "category_id",
-                                            name: "category_id",
-                                            text: "ID",
-                                            type: FilterItemColumnType.Unknown,
-                                            getValues: async (search) =>
-                                            {
-                                                return this.props.ctf.rows?.categories?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
-                                            }
-                                        }, {
-                                            id: "category_name",
-                                            name: "category_id",
-                                            text: "Name",
-                                            type: FilterItemColumnType.Unknown,
-                                            getValues: async (search) =>
-                                            {
-                                                return this.props.ctf.rows?.categories?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
-                                            }
-                                        }],
-                                        required: false
-                                    });
-
-                        } catch (error)
-                        {
-                        }
-                    // todo add tags
-                    return ans;
-                }}
-                getValues={async (table, column, value) =>
-                {
-                    if (this.props.ui?.search_box?.exclude?.load_value)
-                        if (this.props.ui?.search_box?.exclude?.load_value(table.name, column.name))
-                            return [];
-                    if (column.type === FilterItemColumnType.Boolean)
-                    {
-                        const col = this.getColumns().find(c => c.table.name === table.name && c.name === column.name);
-                        return [true, false].map(b =>
-                        {
-                            const formatted = col ? col.formatter.format(b, col, { value: {} } as any, true) : null;
-                            return { value: String(b), title: formatted != null ? String(formatted) : String(b) };
-                        });
-                    }
-                    let values = await this.props.entity.server.value_list(table.name, column.name, value, null, null);
-                    return values.map(v => { return { value: v, title: v } });
-                }}
-                onChanged={this.onFilterBoxChanged}
-            />
-        );
-    }
-
-    private getOrderedColumns(): TableColumnInfo[]
-    {
-        const all = this.getColumns();
-        const vk = this.state.visible_column_keys;
-        if (vk.length === 0)
-            return all;
-        const ordered = vk.map(k => all.find(c => c.table.name + "." + c.name === k)).filter((c): c is TableColumnInfo => !!c);
-        const rest = all.filter(c => !vk.includes(c.table.name + "." + c.name));
-        return [...ordered, ...rest];
-    }
-
-    override render(): ReactNode
-    {
-        const filterBoxItems = this.NSFilterBox_Top.current?.getFilterItems() ?? [];
-        const filterChips = filterBoxItems.length > 0 && (
-            <>
-                <NSFilterBoxItems
-                    filterItems={filterBoxItems}
-                    onClearFilterItems={() => this.NSFilterBox_Top.current?.setFilterItems([])}
-                    onRemoveFilterItem={(item) => this.NSFilterBox_Top.current?.removeFilterItem(item)}
-                />
-                <NSSpace size={NSSpaceSizeType.MINI} />
-            </>
-        );
-
-        const quickFilterBar = this.state.quick_filter_configs.length > 0 && (
-            <NSAQuickFilterBar
-                key={this.state.quick_filter_configs.map(c => c.id).join("-")}
-                ref={this.NSAQuickFilterBar_Ref}
-                configs={this.state.quick_filter_configs}
-                initialItems={this.getIncomingQuickItems()}
-                getValues={async (tableName, columnName, search) =>
-                {
-                    const values = await this.props.entity.server.value_list(tableName, columnName, search, null, null);
-                    const col = this.getColumns().find(c => c.table.name === tableName && c.name === columnName);
-                    return values.map(v =>
-                    {
-                        const formatted = col ? col.formatter.format(v, col, { value: {} } as any, true) : null;
-                        return { value: v, title: formatted != null ? String(formatted) : v };
-                    });
-                }}
-                onChanged={() => this.reloadFromFilters()}
-            />
-        );
-
-        return (
-            <>
-                <NSTable<RowType>
-                    id={this.props.id}
-                    classList={this.props.classList}
-                    style={this.props.style}
-                    ref={this.NSTable_Main}
-                    name={NamingConvention.lower_case_dash.convert(this.props.entity.name, NamingConvention.Pascal_Case_Space)}
-                    checkbox={this.props.checkbox ?? true}
-                    headerChildren={this.renderFilterHeader()}
-                    buttons={this.buildButtons()}
-                    columns={this.getOrderedColumns()}
-                    getRows={async (page, size, sorts) =>
-                    {
-                        let res: { rows: RowType[], count: number } = { rows: [], count: 0 };
-                        if (this.props.entity.server.list)
-                            res = await this.props.entity.server.list(this.getFilterItems(), page, size, sorts, null);
-                        this.setState({ res });
-                        return res;
-                    }}
-                    getRowKey={(row) => row.value.id.toString()}
-                    sort={{
-                        onSort: () => { this.NSTable_Main.current?.reload(null, null); },
-                    }}
-                    getRowAttributes={(row_value, row_index) => this.props.ui?.getRowAttributes?.(row_value, row_index, this.state.res) ?? {}}
-                    getColumnAttributes={this.props.ui?.getColumnAttributes}
-                    getCellFormattedValue={this.props.ui?.getCellFormattedValue}
-                    onVisibleColumnsChanged={(visible_columns) => this.setState({ visible_column_keys: visible_columns.map(c => c.table + "." + c.column) })}
-                    onSelectedIDsChanged={() => this.props.onSelectionChanged?.()}
-                >
-                    {filterChips}
-                    {quickFilterBar}
-                </NSTable>
-                {
-                    this.state.show_quick_filter_dialog &&
-                    <NSAQuickFilterDialog
-                        configs={this.state.quick_filter_configs}
-                        getColumns={() => this.getColumns()}
-                        typeConverter={(type: string) => new ObjectService(type).getEnum(VariableType, VariableType.Any)}
-                        onSave={configs =>
-                        {
-                            NSACacheService.saveQuickFilters(this.props.entity.name, configs);
-                            this.setState({ quick_filter_configs: configs }, () => this.reloadFromFilters());
-                        }}
-                        onConfirm={configs =>
-                        {
-                            NSACacheService.saveQuickFilters(this.props.entity.name, configs);
-                            this.setState({ quick_filter_configs: configs, show_quick_filter_dialog: false }, () => this.reloadFromFilters());
-                        }}
-                        onClose={() => this.setState({ show_quick_filter_dialog: false })}
-                    />
-                }
-            </>
-        );
-    }
+import { EncodingOperation, FilterItem, FilterItemColumnType, NamingConvention, ObjectService, SearchOperation, SortItem } from "namirasoft-core";
+import { EntityResolveResponseRow } from "namirasoft-field";
+import { FilterItemColumnTypeBuilder, VariableType } from "namirasoft-schema";
+import { IBaseComponentProps, NSButtonProps, NSFilterBox, NSFilterBoxItems, NSFilterBoxProps_Table, NSSpace, NSSpaceSizeType, NSTable, TableColumnInfo, TableRowInfo } from "namirasoft-site-react";
+import { Component, ReactNode, createRef } from "react";
+import { IEntityInfo } from "../IEntityInfo";
+import { NSACacheService } from "../NSACacheService";
+import { NSAQuickFilterBar } from "./quickfilter/NSAQuickFilterBar";
+import { NSAQuickFilterDialog, QuickFilterConfig } from "./quickfilter/NSAQuickFilterDialog";
+
+export interface NSATableUIProps<RowType>
+{
+    getRowAttributes?: (row_value: RowType, row_index: number, res: { rows: RowType[]; count: number; } | null) => { [key: string]: any };
+    getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: any };
+    getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) => any;
+    search_box?: {
+        exclude?: {
+            show?: {
+                table?: (table: string) => boolean;
+                column?: (table: string, column: string) => boolean;
+            },
+            load_value?: (table: string, column: string) => boolean;
+        }
+    };
+}
+
+export interface NSATableProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps
+{
+    entity: IEntityInfo<RowType, RowTypeInput>;
+    ctf: {
+        enabled: boolean;
+        rows: EntityResolveResponseRow | null;
+    };
+    url: { getQuery(name: string, base64?: boolean, remove?: boolean): string };
+    ui?: NSATableUIProps<RowType>;
+    checkbox?: boolean;
+    buttons?: NSButtonProps[];
+    onSelectionChanged?: () => void;
+}
+
+interface NSATableState<RowType>
+{
+    res: { rows: RowType[]; count: number; } | null;
+    visible_column_keys: string[];
+    quick_filter_configs: QuickFilterConfig[];
+    show_quick_filter_dialog: boolean;
+    filter_revision: number;
+}
+
+export class NSATable<RowType extends { id: string }, RowTypeInput = RowType>
+    extends Component<NSATableProps<RowType, RowTypeInput>, NSATableState<RowType>>
+{
+    public NSTable_Main = createRef<NSTable<RowType>>();
+    public NSFilterBox_Top = createRef<NSFilterBox>();
+    public NSAQuickFilterBar_Ref = createRef<NSAQuickFilterBar>();
+
+    constructor(props: NSATableProps<RowType, RowTypeInput>)
+    {
+        super(props);
+
+        let quick_filter_configs = NSACacheService.loadQuickFilters(props.entity.name);
+        if (quick_filter_configs.length === 0)
+            quick_filter_configs = this.buildDefaultQuickFilters();
+        this.state = {
+            res: null,
+            visible_column_keys: [],
+            quick_filter_configs,
+            show_quick_filter_dialog: false,
+            filter_revision: 0,
+        };
+    }
+
+    override componentDidMount()
+    {
+        const visible = this.NSTable_Main.current?.getVisibleColumns() ?? [];
+        if (visible.length > 0)
+            this.setState({ visible_column_keys: visible.map(v => v.table + "." + v.column) });
+
+        this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
+    }
+
+    private getColumns(): TableColumnInfo[]
+    {
+        let columns = Object.values(this.props.entity.client.getColumns()).flat();
+        columns.forEach(col =>
+        {
+            col.text = NamingConvention.auto.convert(col.text, NamingConvention.Pascal_Case_Space);
+        });
+        return columns;
+    }
+
+    private buildDefaultQuickFilters(): QuickFilterConfig[]
+    {
+        const getDefaults = this.props.entity.client.getQuickFilters;
+        if (!getDefaults)
+            return [];
+
+        const columns = this.getColumns();
+        const ans: QuickFilterConfig[] = [];
+        for (const def of getDefaults())
+        {
+            const col = columns.find(c => c.name === def.column);
+            if (!col)
+                continue;
+            const columnType = new ObjectService(col.type).getEnum(VariableType, VariableType.Any);
+            ans.push({
+                id: `default-${col.table.name}-${col.name}`,
+                column: {
+                    table: { name: col.table.name, text: col.table.text },
+                    name: col.name,
+                    text: col.text,
+                    type: col.type,
+                    columnType,
+                },
+                operatorName: (def as { operator?: string }).operator,
+            });
+        }
+        return ans;
+    }
+
+    private filterItemTypeConverter(type: string): FilterItemColumnType
+    {
+        let t = new ObjectService(type).getEnum(VariableType, VariableType.Any);
+        let builder = new FilterItemColumnTypeBuilder(t);
+        return builder.runSynch(() => { }) ?? FilterItemColumnType.Unknown;
+    }
+
+    private getIncomingFilterItems(): FilterItem[] | undefined
+    {
+        try
+        {
+            let encoded = this.props.url.getQuery("filters");
+            if (encoded)
+                return FilterItem.decode(encoded) ?? undefined;
+        } catch (error)
+        {
+        }
+        return undefined;
+    }
+
+    private itemMatchesQuickFilter(item: FilterItem): boolean
+    {
+        return this.state.quick_filter_configs.some(c =>
+            c.column.table.name === item.table.name && c.column.name === item.column.name);
+    }
+    private getIncomingBoxItems(): FilterItem[] | undefined
+    {
+        let items = this.getIncomingFilterItems();
+        if (!items)
+            return undefined;
+        return items.filter(i => !this.itemMatchesQuickFilter(i));
+    }
+    private getIncomingQuickItems(): FilterItem[]
+    {
+        let items = this.getIncomingFilterItems();
+        if (!items)
+            return [];
+        return items.filter(i => this.itemMatchesQuickFilter(i));
+    }
+
+    private encodeFilters(items: FilterItem[]): string
+    {
+        let command = items.map(item =>
+        {
+            let key = item.operator.name.replace(/\s+/g, "").toLowerCase();
+            let values = item.values.map(v => (v ?? "").toString().replace(/;/g, "\\;"));
+            return [item.table.name, item.column.name, item.not ? "1" : "0", key, ...values].join(";");
+        }).join(";");
+        return EncodingOperation.Base64Encode(command);
+    }
+
+    private syncQueryFromFilters()
+    {
+        let items = this.getFilterItems();
+        let url = new URL(window.location.href);
+        let encoded = items.length > 0 ? this.encodeFilters(items) : "";
+        if (encoded)
+            url.searchParams.set("filters", encoded);
+        else
+            url.searchParams.delete("filters");
+        window.history.replaceState({}, "", url.toString());
+    }
+
+    public reload(page: number | null, size: number | null): Promise<void> | undefined
+    {
+        return this.NSTable_Main.current?.reload(page, size);
+    }
+    public getSelectedIDs(): string[]
+    {
+        return this.NSTable_Main.current?.getSelectedIDs() ?? [];
+    }
+    public getSelectedRows(): RowType[]
+    {
+        return this.NSTable_Main.current?.getSelectedRows() ?? [];
+    }
+    public setSelectedIDs(ids: string[], rows: RowType[], callback?: () => void)
+    {
+        this.NSTable_Main.current?.setSelectedIDs(ids, rows, callback);
+    }
+    public getSortItems(): SortItem[]
+    {
+        return this.NSTable_Main.current?.getSortItems() ?? [];
+    }
+    public setSortItems(items: SortItem[] | null)
+    {
+        this.NSTable_Main.current?.setSortItems(items);
+    }
+    public getVisibleColumns(): { table: string, column: string }[]
+    {
+        return this.NSTable_Main.current?.getVisibleColumns() ?? [];
+    }
+    public setVisibleColumns(visible_columns: { table: string, column: string }[])
+    {
+        this.NSTable_Main.current?.setVisibleColumns(visible_columns);
+    }
+    public getFilterBoxItems(): FilterItem[]
+    {
+        return this.NSFilterBox_Top.current?.getFilterItems() ?? [];
+    }
+    public getQuickFilterItems(): FilterItem[]
+    {
+        return this.NSAQuickFilterBar_Ref.current?.getFilterItems() ?? [];
+    }
+    public getFilterItems(): FilterItem[]
+    {
+        return [...this.getFilterBoxItems(), ...this.getQuickFilterItems()];
+    }
+
+    private reloadFromFilters()
+    {
+        this.syncQueryFromFilters();
+        this.NSTable_Main.current?.setSelectedIDs([], []);
+        this.NSTable_Main.current?.reload(null, null);
+    }
+
+    private onFilterBoxChanged = () =>
+    {
+        this.reloadFromFilters();
+        this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
+    };
+
+    private buildButtons(): NSButtonProps[]
+    {
+        const buttons: NSButtonProps[] = [
+            {
+                title: "",
+                icon: { src: "https://static.namirasoft.com/image/concept/sliders/blue.svg", alt: "filter" },
+                attributes: { title: "Quick Filters" },
+                onClick: {
+                    action: () => this.setState({ show_quick_filter_dialog: true }),
+                    showLoading: false,
+                },
+            },
+        ];
+        return [...buttons, ...(this.props.buttons ?? [])];
+    }
+
+    private renderFilterHeader(): ReactNode
+    {
+        return (
+            <NSFilterBox
+                ref={this.NSFilterBox_Top}
+                filterItems={this.getIncomingBoxItems()}
+                getTables={() =>
+                {
+                    return this.props.entity.tables.map(table =>
+                    {
+                        let columns = table.table.getColumns().map(c => ({ id: c.name, ...c, type: this.filterItemTypeConverter(c.type) }));
+                        columns = columns.filter(c =>
+                        {
+                            if (this.props.ui?.search_box?.exclude?.show?.column)
+                                if (this.props.ui?.search_box?.exclude.show?.column(table.table.name, c.name))
+                                    return false;
+                            return true;
+                        });
+                        return { name: table.table.name, text: table.table.text, columns, required: table.required };
+                    }).filter(t =>
+                    {
+                        if (this.props.ui?.search_box?.exclude?.show?.table)
+                            if (this.props.ui?.search_box?.exclude.show.table(t.name))
+                                return false;
+                        return true;
+                    });
+                }}
+                getMoreTables={async () =>
+                {
+                    let ans: NSFilterBoxProps_Table[] = [];
+                    if (this.props.ctf.enabled)
+                        try
+                        {
+                            if (this.props.ctf.rows?.fields)
+                                if (this.props.ctf.rows.fields.length > 0)
+                                {
+                                    let name = this.props.entity.name + "_field";
+                                    ans.push({
+                                        name,
+                                        text: "Fields",
+                                        columns: [{
+                                            id: "field_id",
+                                            name: "field_id",
+                                            text: "ID",
+                                            type: FilterItemColumnType.Unknown,
+                                            getValues: async (search) =>
+                                            {
+                                                return this.props.ctf.rows?.fields?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
+                                            }
+                                        }, {
+                                            id: "field_name",
+                                            name: "field_id",
+                                            text: "Name",
+                                            type: FilterItemColumnType.Unknown,
+                                            getValues: async (search) =>
+                                            {
+                                                return this.props.ctf.rows?.fields?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
+                                            }
+                                        }, {
+                                            id: "field_value",
+                                            name: "value",
+                                            text: "Value",
+                                            type: FilterItemColumnType.Unknown
+                                        },
+                                        ...this.props.ctf.rows?.fields.map(f =>
+                                        {
+                                            return {
+                                                id: f.id,
+                                                name: f.id,
+                                                text: f.name,
+                                                type: this.filterItemTypeConverter(f.type.type.type),
+                                                getValues: async (search: string) =>
+                                                {
+                                                    let values = await this.props.entity.server.value_list(name, "value", search, f.id, null);
+                                                    return values.map(v => { return { value: v, title: v } });
+                                                }
+                                            };
+                                        }),],
+                                        required: false
+                                    });
+                                }
+
+                            if (this.props.ctf.rows?.categories)
+                                if (this.props.ctf.rows?.categories.length > 0)
+                                    ans.push({
+                                        name: this.props.entity.name + "_category",
+                                        text: "Categories",
+                                        columns: [{
+                                            id: "category_id",
+                                            name: "category_id",
+                                            text: "ID",
+                                            type: FilterItemColumnType.Unknown,
+                                            getValues: async (search) =>
+                                            {
+                                                return this.props.ctf.rows?.categories?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
+                                            }
+                                        }, {
+                                            id: "category_name",
+                                            name: "category_id",
+                                            text: "Name",
+                                            type: FilterItemColumnType.Unknown,
+                                            getValues: async (search) =>
+                                            {
+                                                return this.props.ctf.rows?.categories?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
+                                            }
+                                        }],
+                                        required: false
+                                    });
+
+                        } catch (error)
+                        {
+                        }
+                    // todo add tags
+                    return ans;
+                }}
+                getValues={async (table, column, value) =>
+                {
+                    if (this.props.ui?.search_box?.exclude?.load_value)
+                        if (this.props.ui?.search_box?.exclude?.load_value(table.name, column.name))
+                            return [];
+                    if (column.type === FilterItemColumnType.Boolean)
+                    {
+                        const col = this.getColumns().find(c => c.table.name === table.name && c.name === column.name);
+                        return [true, false].map(b =>
+                        {
+                            const formatted = col ? col.formatter.format(b, col, { value: {} } as any, true) : null;
+                            return { value: String(b), title: formatted != null ? String(formatted) : String(b) };
+                        });
+                    }
+                    let values = await this.props.entity.server.value_list(table.name, column.name, value, null, null);
+                    return values.map(v => { return { value: v, title: v } });
+                }}
+                onChanged={this.onFilterBoxChanged}
+            />
+        );
+    }
+
+    private getOrderedColumns(): TableColumnInfo[]
+    {
+        const all = this.getColumns();
+        const vk = this.state.visible_column_keys;
+        if (vk.length === 0)
+            return all;
+        const ordered = vk.map(k => all.find(c => c.table.name + "." + c.name === k)).filter((c): c is TableColumnInfo => !!c);
+        const rest = all.filter(c => !vk.includes(c.table.name + "." + c.name));
+        return [...ordered, ...rest];
+    }
+
+    override render(): ReactNode
+    {
+        const filterBoxItems = this.NSFilterBox_Top.current?.getFilterItems() ?? [];
+        const filterChips = filterBoxItems.length > 0 && (
+            <>
+                <NSFilterBoxItems
+                    filterItems={filterBoxItems}
+                    onClearFilterItems={() => this.NSFilterBox_Top.current?.setFilterItems([])}
+                    onRemoveFilterItem={(item) => this.NSFilterBox_Top.current?.removeFilterItem(item)}
+                />
+                <NSSpace size={NSSpaceSizeType.MINI} />
+            </>
+        );
+
+        const quickFilterBar = this.state.quick_filter_configs.length > 0 && (
+            <NSAQuickFilterBar
+                key={this.state.quick_filter_configs.map(c => c.id).join("-")}
+                ref={this.NSAQuickFilterBar_Ref}
+                configs={this.state.quick_filter_configs}
+                initialItems={this.getIncomingQuickItems()}
+                getValues={async (tableName, columnName, search) =>
+                {
+                    const values = await this.props.entity.server.value_list(tableName, columnName, search, null, null);
+                    const col = this.getColumns().find(c => c.table.name === tableName && c.name === columnName);
+                    return values.map(v =>
+                    {
+                        const formatted = col ? col.formatter.format(v, col, { value: {} } as any, true) : null;
+                        return { value: v, title: formatted != null ? String(formatted) : v };
+                    });
+                }}
+                onChanged={() => this.reloadFromFilters()}
+            />
+        );
+
+        return (
+            <>
+                <NSTable<RowType>
+                    id={this.props.id}
+                    classList={this.props.classList}
+                    style={this.props.style}
+                    ref={this.NSTable_Main}
+                    name={NamingConvention.lower_case_dash.convert(this.props.entity.name, NamingConvention.Pascal_Case_Space)}
+                    checkbox={this.props.checkbox ?? true}
+                    headerChildren={this.renderFilterHeader()}
+                    buttons={this.buildButtons()}
+                    columns={this.getOrderedColumns()}
+                    getRows={async (page, size, sorts) =>
+                    {
+                        let res: { rows: RowType[], count: number } = { rows: [], count: 0 };
+                        if (this.props.entity.server.list)
+                            res = await this.props.entity.server.list(this.getFilterItems(), page, size, sorts, null);
+                        this.setState({ res });
+                        return res;
+                    }}
+                    getRowKey={(row) => row.value.id.toString()}
+                    sort={{
+                        onSort: () => { this.NSTable_Main.current?.reload(null, null); },
+                    }}
+                    getRowAttributes={(row_value, row_index) => this.props.ui?.getRowAttributes?.(row_value, row_index, this.state.res) ?? {}}
+                    getColumnAttributes={this.props.ui?.getColumnAttributes}
+                    getCellFormattedValue={this.props.ui?.getCellFormattedValue}
+                    onVisibleColumnsChanged={(visible_columns) => this.setState({ visible_column_keys: visible_columns.map(c => c.table + "." + c.column) })}
+                    onSelectedIDsChanged={() => this.props.onSelectionChanged?.()}
+                >
+                    {filterChips}
+                    {quickFilterBar}
+                </NSTable>
+                {
+                    this.state.show_quick_filter_dialog &&
+                    <NSAQuickFilterDialog
+                        configs={this.state.quick_filter_configs}
+                        getColumns={() => this.getColumns()}
+                        typeConverter={(type: string) => new ObjectService(type).getEnum(VariableType, VariableType.Any)}
+                        onSave={configs =>
+                        {
+                            NSACacheService.saveQuickFilters(this.props.entity.name, configs);
+                            this.setState({ quick_filter_configs: configs }, () => this.reloadFromFilters());
+                        }}
+                        onConfirm={configs =>
+                        {
+                            NSACacheService.saveQuickFilters(this.props.entity.name, configs);
+                            this.setState({ quick_filter_configs: configs, show_quick_filter_dialog: false }, () => this.reloadFromFilters());
+                        }}
+                        onClose={() => this.setState({ show_quick_filter_dialog: false })}
+                    />
+                }
+            </>
+        );
+    }
 }