namirasoft-account-react 1.5.0 → 1.5.2

package/src/components/NSATable.tsx

@@ -1,7 +1,7 @@
-import { FilterItem, FilterItemColumnType, NamingConvention, ObjectService, SearchOperation, SortItem } from "namirasoft-core";
+import { EncodingOperation, FilterItem, FilterItemColumnType, NamingConvention, ObjectService, SearchOperation, SortItem } from "namirasoft-core";
 import { CategoryRow, FieldRow } from "namirasoft-field";
 import { FilterItemColumnTypeBuilder, VariableType } from "namirasoft-schema";
-import { IBaseComponentProps, NSButtonProps, NSFilterBox, NSFilterBoxItems, NSFilterBoxProps_Table, NSTable, TableColumnInfo, TableRowInfo } from "namirasoft-site-react";
+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";
@@ -12,488 +12,536 @@ import { NSASortDialog } from "./NSASortDialog";
 
 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;
-		}
-	};
+    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;
-		fields: FieldRow[] | null;
-		categories: CategoryRow[] | null;
-	};
-	url: { getQuery(name: string, base64?: boolean, remove?: boolean): string };
-	ui?: NSATableUIProps<RowType>;
-	checkbox?: boolean;
-	buttons?: NSButtonProps[];
-	onSelectionChanged?: () => void;
+    entity: IEntityInfo<RowType, RowTypeInput>;
+    ctf: {
+        enabled: boolean;
+        fields: FieldRow[] | null;
+        categories: CategoryRow[] | 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;
-	sorts: SortItem[];
-	visible_column_keys: string[];
-	quick_filter_configs: QuickFilterConfig[];
-	show_sort_dialog: boolean;
-	show_reorder_dialog: boolean;
-	show_quick_filter_dialog: boolean;
-	filter_revision: number;
+    res: { rows: RowType[]; count: number; } | null;
+    sorts: SortItem[];
+    visible_column_keys: string[];
+    quick_filter_configs: QuickFilterConfig[];
+    show_sort_dialog: boolean;
+    show_reorder_dialog: boolean;
+    show_quick_filter_dialog: boolean;
+    filter_revision: number;
 }
 
 export class NSATable<RowType extends { id: string }, RowTypeInput = RowType>
-	extends Component<NSATableProps<RowType, RowTypeInput>, NSATableState<RowType>>
+    extends Component<NSATableProps<RowType, RowTypeInput>, NSATableState<RowType>>
 {
-	public NSTable_Main = createRef<NSTable<RowType>>();
-	public NSFilterBox_Top = createRef<NSFilterBox>();
-	public NSAQuickFilterBar_Ref = createRef<NSAQuickFilterBar>();
+    public NSTable_Main = createRef<NSTable<RowType>>();
+    public NSFilterBox_Top = createRef<NSFilterBox>();
+    public NSAQuickFilterBar_Ref = createRef<NSAQuickFilterBar>();
 
-	constructor(props: NSATableProps<RowType, RowTypeInput>)
-	{
-		super(props);
-		this.state = {
-			res: null,
-			sorts: [],
-			visible_column_keys: [],
-			quick_filter_configs: [],
-			show_sort_dialog: false,
-			show_reorder_dialog: false,
-			show_quick_filter_dialog: false,
-			filter_revision: 0,
-		};
-	}
+    constructor(props: NSATableProps<RowType, RowTypeInput>)
+    {
+        super(props);
 
-	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) });
+        let quick_filter_configs = NSACacheService.loadQuickFilters(props.entity.name);
+        if (quick_filter_configs.length === 0)
+            quick_filter_configs = this.buildDefaultQuickFilters();
+        this.state = {
+            res: null,
+            sorts: [],
+            visible_column_keys: [],
+            quick_filter_configs,
+            show_sort_dialog: false,
+            show_reorder_dialog: false,
+            show_quick_filter_dialog: false,
+            filter_revision: 0,
+        };
+    }
 
-		let quick_filter_configs = NSACacheService.loadQuickFilters(this.props.entity.name);
-		if (quick_filter_configs.length === 0)
-			quick_filter_configs = this.buildDefaultQuickFilters();
-		// Re-render so the filter chips reflect any incoming filter items.
-		this.setState(prev => ({ quick_filter_configs, filter_revision: prev.filter_revision + 1 }));
-	}
+    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) });
 
-	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;
-	}
+        this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
+    }
 
-	private buildDefaultQuickFilters(): QuickFilterConfig[]
-	{
-		const getDefaults = this.props.entity.client.getQuickFilters;
-		if (!getDefaults)
-			return [];
+    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;
+    }
 
-		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 buildDefaultQuickFilters(): QuickFilterConfig[]
+    {
+        const getDefaults = this.props.entity.client.getQuickFilters;
+        if (!getDefaults)
+            return [];
 
-	private filterItemTypeConverter(type: string): FilterItemColumnType
-	{
-		let t = new ObjectService(type).getEnum(VariableType, VariableType.Any);
-		let builder = new FilterItemColumnTypeBuilder(t);
-		return builder.runSynch(() => { }) ?? FilterItemColumnType.Unknown;
-	}
+        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 getIncomingFilterItems(): FilterItem[] | undefined
-	{
-		try
-		{
-			let encoded = this.props.url.getQuery("filters");
-			if (encoded)
-				return FilterItem.decode(encoded) ?? undefined;
-		} catch (error)
-		{
-		}
-		return undefined;
-	}
+    private filterItemTypeConverter(type: string): FilterItemColumnType
+    {
+        let t = new ObjectService(type).getEnum(VariableType, VariableType.Any);
+        let builder = new FilterItemColumnTypeBuilder(t);
+        return builder.runSynch(() => { }) ?? FilterItemColumnType.Unknown;
+    }
 
-	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 getIncomingFilterItems(): FilterItem[] | undefined
+    {
+        try
+        {
+            let encoded = this.props.url.getQuery("filters");
+            if (encoded)
+                return FilterItem.decode(encoded) ?? undefined;
+        } catch (error)
+        {
+        }
+        return undefined;
+    }
 
-	private reloadFromFilters()
-	{
-		this.NSTable_Main.current?.setSelectedIDs([], []);
-		this.NSTable_Main.current?.reload(null, null);
-	}
+    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 onFilterBoxChanged = () =>
-	{
-		this.reloadFromFilters();
-		this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
-	};
+    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 buildButtons(): NSButtonProps[]
-	{
-		const buttons: NSButtonProps[] = [
-			{
-				title: "",
-				icon: { src: "https://static.namirasoft.com/image/concept/grip-vertical/blue.svg", alt: "reorder" },
-				attributes: { title: "Reorder" },
-				onClick: {
-					action: () => this.setState({ show_reorder_dialog: true, visible_column_keys: this.getVisibleColumns().map(c => c.table + "." + c.column) }),
-					showLoading: false,
-				},
-			},
-			{
-				title: "",
-				icon: { src: "https://static.namirasoft.com/image/concept/arrow-down-short-wide/blue.svg", alt: "sort" },
-				attributes: { title: "Sort" },
-				onClick: {
-					action: () => this.setState({ show_sort_dialog: true, sorts: this.getSortItems() }),
-					showLoading: false,
-				},
-			},
-			{
-				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 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());
+    }
 
-	private renderFilterHeader(): ReactNode
-	{
-		return (
-			<NSFilterBox
-				ref={this.NSFilterBox_Top}
-				filterItems={this.getIncomingFilterItems()}
-				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.fields)
-								if (this.props.ctf.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.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.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.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
-									});
-								}
+    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()];
+    }
 
-							if (this.props.ctf.categories)
-								if (this.props.ctf.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.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.categories?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
-											}
-										}],
-										required: false
-									});
+    private reloadFromFilters()
+    {
+        this.syncQueryFromFilters();
+        this.NSTable_Main.current?.setSelectedIDs([], []);
+        this.NSTable_Main.current?.reload(null, null);
+    }
 
-						} 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 onFilterBoxChanged = () =>
+    {
+        this.reloadFromFilters();
+        this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
+    };
 
-	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];
-	}
+    private buildButtons(): NSButtonProps[]
+    {
+        const buttons: NSButtonProps[] = [
+            {
+                title: "",
+                icon: { src: "https://static.namirasoft.com/image/concept/grip-vertical/blue.svg", alt: "reorder" },
+                attributes: { title: "Reorder" },
+                onClick: {
+                    action: () => this.setState({ show_reorder_dialog: true, visible_column_keys: this.getVisibleColumns().map(c => c.table + "." + c.column) }),
+                    showLoading: false,
+                },
+            },
+            {
+                title: "",
+                icon: { src: "https://static.namirasoft.com/image/concept/arrow-down-short-wide/blue.svg", alt: "sort" },
+                attributes: { title: "Sort" },
+                onClick: {
+                    action: () => this.setState({ show_sort_dialog: true, sorts: this.getSortItems() }),
+                    showLoading: false,
+                },
+            },
+            {
+                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 ?? [])];
+    }
 
-	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)}
-			/>
-		);
+    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.fields)
+                                if (this.props.ctf.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.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.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.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
+                                    });
+                                }
 
-		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}
-				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()}
-			/>
-		);
+                            if (this.props.ctf.categories)
+                                if (this.props.ctf.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.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.categories?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
+                                            }
+                                        }],
+                                        required: false
+                                    });
 
-		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()}
-					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_sort_dialog &&
-					<NSASortDialog
-						sorts={this.state.sorts}
-						getColumns={() => this.getColumns()}
-						onCancel={() => this.setState({ show_sort_dialog: false })}
-						onApply={sorts =>
-						{
-							this.setSortItems(sorts);
-							this.setState({ show_sort_dialog: false, sorts: sorts ?? [] });
-						}}
-					/>
-				}
-				{
-					this.state.show_reorder_dialog &&
-					<NSAReorderDialog
-						visibleColumnKeys={this.state.visible_column_keys}
-						getColumns={() => this.getColumns()}
-						onCancel={() => this.setState({ show_reorder_dialog: false })}
-						onApply={orderedKeys =>
-						{
-							const cs_all = this.getColumns();
-							const cs = orderedKeys.map((v: string) => cs_all.find((c: TableColumnInfo) => v === c.table.name + "." + c.name)).filter(Boolean) as TableColumnInfo[];
-							this.setVisibleColumns(cs.map(c => ({ table: c.table.name, column: c.name })));
-							this.setState({ show_reorder_dialog: false, visible_column_keys: orderedKeys });
-						}}
-					/>
-				}
-				{
-					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 })}
-					/>
-				}
-			</>
-		);
-	}
+                        } 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()}
+                    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_sort_dialog &&
+                    <NSASortDialog
+                        sorts={this.state.sorts}
+                        getColumns={() => this.getColumns()}
+                        onCancel={() => this.setState({ show_sort_dialog: false })}
+                        onApply={sorts =>
+                        {
+                            this.setSortItems(sorts);
+                            this.setState({ show_sort_dialog: false, sorts: sorts ?? [] });
+                        }}
+                    />
+                }
+                {
+                    this.state.show_reorder_dialog &&
+                    <NSAReorderDialog
+                        visibleColumnKeys={this.state.visible_column_keys}
+                        getColumns={() => this.getColumns()}
+                        onCancel={() => this.setState({ show_reorder_dialog: false })}
+                        onApply={orderedKeys =>
+                        {
+                            const cs_all = this.getColumns();
+                            const cs = orderedKeys.map((v: string) => cs_all.find((c: TableColumnInfo) => v === c.table.name + "." + c.name)).filter(Boolean) as TableColumnInfo[];
+                            this.setVisibleColumns(cs.map(c => ({ table: c.table.name, column: c.name })));
+                            this.setState({ show_reorder_dialog: false, visible_column_keys: orderedKeys });
+                        }}
+                    />
+                }
+                {
+                    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 })}
+                    />
+                }
+            </>
+        );
+    }
 }