namirasoft-site-react 1.4.403 → 1.4.404

package/src/components/NSFilterBox.tsx

@@ -1,478 +1,478 @@
-"use client"
-
-import React, { Component } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { BaseMetaColumn, BaseMetaTable, FilterItem, FilterItemColumnType, FilterItemOperator, SetTimeouService } from 'namirasoft-core';
-import { NSListGrouped, NSListGroupedProps_Group, NSListGroupedProps_Item } from './NSListGrouped';
-import { NSBoxSearch } from './NSBoxSearch';
-import { NSLabel } from './NSLabel';
-import Styles from './NSFilterBox.module.css';
-
-export interface NSFilterBoxProps extends IBaseComponentProps
-{
-	placeholder?: string;
-	getTables: () => NSFilterBoxProps_Table[];
-	getMoreTables: () => Promise<NSFilterBoxProps_Table[]>;
-	getValues: ((table: NSFilterBoxProps_Table, column: NSFilterBoxProps_Column, value: string) => Promise<NSFilterBox_Group_Value[]>) | null;
-	onChanged?: () => void;
-	filterItems?: FilterItem[];
-}
-
-export interface NSFilterBoxProps_Table
-{
-	name: string;
-	text: string;
-	required: boolean;
-	columns: NSFilterBoxProps_Column[];
-}
-
-export interface NSFilterBoxProps_Column
-{
-	id: string,
-	name: string,
-	text: string,
-	type: FilterItemColumnType
-	getValues?: (search: string) => Promise<NSFilterBox_Group_Value[]>;
-}
-
-export interface NSFilterBox_Group_Column
-{
-	id: string;
-	name: string;
-	not: boolean;
-}
-export interface NSFilterBox_Group_Operator
-{
-	not: boolean;
-	sign: string;
-}
-export interface NSFilterBox_Group_Value
-{
-	value: string;
-	title: string;
-}
-
-interface NSFilterBoxState_Selection
-{
-	state: GroupListState;
-	column: { table: NSFilterBoxProps_Table, column: NSFilterBoxProps_Column } | null;
-	operator: FilterItemOperator | null;
-	not: boolean | null;
-	values: NSFilterBox_Group_Value[] | null;
-}
-
-interface NSFilterBoxState
-{
-	tables: NSFilterBoxProps_Table[];
-	filterItems: FilterItem[];
-	value: string;
-	selected: NSFilterBoxState_Selection;
-}
-
-enum GroupListState
-{
-	Normal = 'Normal',
-	Column = 'Column',
-	Opertor = 'Opertor',
-	Value = 'Value'
-}
-
-export class NSFilterBox extends Component<NSFilterBoxProps, NSFilterBoxState>
-{
-	private service: SetTimeouService = new SetTimeouService();
-	private NSBoxSearch_Main?: React.RefObject<NSBoxSearch> = React.createRef<NSBoxSearch>();
-	private use_all = {
-		value: "*",
-		text: "Use",
-	}
-	constructor(props: NSFilterBoxProps)
-	{
-		super(props);
-		this.state = {
-			tables: [],
-			filterItems: props.filterItems ?? [],
-			value: "",
-			selected: {
-				state: GroupListState.Normal,
-				column: null,
-				operator: null,
-				not: null,
-				values: [],
-			}
-		}
-
-		this.findTable = this.findTable.bind(this);
-		this.findColumn = this.findColumn.bind(this);
-
-		this.getFilterItems = this.getFilterItems.bind(this);
-		this.setFilterItems = this.setFilterItems.bind(this);
-		this.removeFilterItem = this.removeFilterItem.bind(this);
-
-		this.reloadData = this.reloadData.bind(this);
-		this.reloadTables = this.reloadTables.bind(this);
-		this.setSelected = this.setSelected.bind(this);
-		this.setSelectedValues = this.setSelectedValues.bind(this);
-
-		this.onSelected_Column = this.onSelected_Column.bind(this);
-		this.onSelected_Operator = this.onSelected_Operator.bind(this);
-		this.onSelected_Value = this.onSelected_Value.bind(this);
-	}
-
-	private findTable(name: string): NSFilterBoxProps_Table
-	{
-		let res = this.state.tables.filter(t => t.name === name);
-		if (res.length === 1)
-			return res[0];
-		throw new Error("Table not found: " + name);
-	}
-	private findColumn(table: NSFilterBoxProps_Table, id: string)
-	{
-		let res = table.columns.filter(c => c.id === id);
-		if (res.length === 1)
-			return res[0];
-		throw new Error("Column not found: " + id);
-	}
-	public getFilterItems(): FilterItem[]
-	{
-		return this.state.filterItems;
-	}
-	public setFilterItems(filterItems: FilterItem[] | null): void
-	{
-		this.setState({ filterItems: filterItems ?? [] }, () =>
-		{
-			this.props.onChanged?.();
-		});
-	}
-	public removeFilterItem(item: FilterItem): void
-	{
-		let filterItems = [...this.state.filterItems];
-		filterItems = filterItems.filter(i => i !== item)
-		this.setFilterItems(filterItems);
-	}
-	public reloadTables()
-	{
-		this.setState({ tables: this.props.getTables() }, () =>
-		{
-			this.props.getMoreTables().then(tables =>
-			{
-				this.setState({ tables: [...this.state.tables, ...tables] });
-			});
-		});
-	}
-	public reloadData()
-	{
-		if (this.state.selected.state === GroupListState.Value)
-			if (this.state.selected.column)
-			{
-				let search = this.NSBoxSearch_Main?.current?.getValue() ?? "";
-				this.setSelectedValues(null);
-				if (this.state.selected.column.column.getValues)
-				{
-					this.state.selected.column.column.getValues(search).then(values =>
-					{
-						this.setSelectedValues(values);
-					});
-				}
-				else if (this.props.getValues)
-				{
-					this.props.getValues(this.state.selected.column.table, this.state.selected.column.column, search).then(values =>
-					{
-						this.setSelectedValues(values);
-					}).catch(() => { });
-				}
-				else
-					this.setSelectedValues([]);
-			}
-	}
-
-	private setSelectedValues(values: NSFilterBox_Group_Value[] | null)
-	{
-		this.setSelected(this.state.selected.state, this.state.selected.column, this.state.selected.operator, this.state.selected.not, values, false);
-	}
-	private setSelected(state: GroupListState, column: { table: NSFilterBoxProps_Table, column: NSFilterBoxProps_Column } | null, operator: FilterItemOperator | null, not: boolean | null, values: NSFilterBox_Group_Value[] | null, reset: boolean, callback?: () => void)
-	{
-		this.setState({ selected: { state, column, operator, not, values } }, () =>
-		{
-			if (reset)
-				this.NSBoxSearch_Main?.current?.setValue("");
-			this.NSBoxSearch_Main?.current?.input.current?.focus();
-			callback?.();
-		});
-	}
-
-	override componentDidMount()
-	{
-		this.reloadTables();
-	}
-
-	private onSelected_Column(table: NSListGroupedProps_Group<NSFilterBox_Group_Column>, column: NSListGroupedProps_Item<NSFilterBox_Group_Column>) 
-	{
-		if (table.value === this.use_all.value)
-		{
-			this.onSelected_Value(column.value.not, [column.value.name]);
-		}
-		else
-		{
-			let t = this.findTable(table.value);
-			let c = this.findColumn(t, column.value.id);
-			this.setSelected(GroupListState.Opertor, { table: t, column: c }, null, null, [], false);
-		}
-	}
-	private onSelected_Operator(_: NSListGroupedProps_Group<NSFilterBox_Group_Operator>, operator: NSListGroupedProps_Item<NSFilterBox_Group_Operator>) 
-	{
-		if (this.state.selected.column)
-		{
-			let not = operator.value.not;
-			let o = FilterItemOperator.getBySign(operator.value.sign);
-			this.setSelected(GroupListState.Value, this.state.selected.column, o, not, [], false, () =>
-			{
-				if (o.count === 0)
-					this.onSelected_Value(not, []);
-				else if (o.count === 1)
-				{
-					if (this.state.selected.column)
-						this.reloadData();
-				}
-				else
-				{
-					alert("Operator is not supported: " + JSON.stringify(o));
-				}
-			});
-		}
-	}
-	private onSelected_Value(not: boolean, values: string[]) 
-	{
-		let filterItems = this.state.filterItems;
-		if (this.state.selected.column && this.state.selected.operator)
-		{
-			let table = new BaseMetaTable(null, this.state.selected.column.table.name, this.state.selected.column.table.text);
-			let column = new BaseMetaColumn(table, this.state.selected.column.column.name, this.state.selected.column.column.text, this.state.selected.column.column.type, false);
-			filterItems.push(new FilterItem(table, column, not, this.state.selected.operator, ...values));
-		}
-		else 
-		{
-			let t = this.state.tables[0];
-			let table = new BaseMetaTable(null, t.name, t.text);
-			let column = new BaseMetaColumn(table, "*", "", "", false);
-			filterItems.push(new FilterItem(table, column, not, FilterItemOperator.all.equals, ...values));
-		}
-		this.setState({ filterItems }, () =>
-		{
-			this.NSBoxSearch_Main?.current?.setValue("");
-			this.props.onChanged?.();
-		});
-		this.setSelected(GroupListState.Normal, null, null, null, [], true);
-	}
-
-	override render()
-	{
-		let getComputedValue = () =>
-		{
-			let ans = "";
-			if (this.state.selected.column)
-				ans += this.state.selected.column.table.text + "." + this.state.selected.column.column.text + " ";
-			if (this.state.selected.not)
-				ans += "!";
-			if (this.state.selected.operator)
-				ans += this.state.selected.operator.sign + " ";
-			return ans;
-		}
-		let computed_value = getComputedValue();
-		let value = this.NSBoxSearch_Main?.current?.getValue() ?? "";
-
-		let groups_column: NSListGroupedProps_Group<NSFilterBox_Group_Column>[] = [];
-		if (value)
-			groups_column.push({
-				...this.use_all,
-				items: [
-					{
-						value: { id: value, name: value, not: false },
-						text: computed_value,
-						text_bold: value,
-					}, {
-						value: { id: value, name: value, not: true },
-						text: "Not " + computed_value,
-						text_bold: value,
-					}
-				]
-			});
-		groups_column.push(...this.state.tables.map((table) =>
-		{
-			return {
-				value: table.name,
-				text: table.text,
-				items: table.columns.map((column) =>
-				{
-					return {
-						value: { id: column.id, name: column.name, not: false },
-						text: column.text,
-						type: column.type,
-					}
-				})
-			}
-		}))
-
-		let groups_operator: NSListGroupedProps_Group<NSFilterBox_Group_Operator>[] = [
-			{
-				value: "operators",
-				text: "Operators",
-				items: []
-			}
-		]
-		if (this.state.selected.column)
-			FilterItemOperator.getAllByType(this.state.selected.column.column.type, this.findTable(this.state.selected.column.table.name).required).forEach((operator) =>			
-			{
-				groups_operator[0].items?.push({
-					value: { sign: operator.sign, not: false },
-					text: this.state.selected.column?.column.text ?? "",
-					text_bold: operator.sign,
-					description: operator.name,
-				});
-				groups_operator[0].items?.push({
-					value: { sign: operator.sign, not: true },
-					text: this.state.selected.column?.column.text ?? "",
-					text_bold: "!" + operator.sign,
-					description: "Not " + operator.name
-				});
-			});
-
-		let groups_value: NSListGroupedProps_Group<NSFilterBox_Group_Value>[] = [];
-		if (value)
-			groups_value.push({
-				...this.use_all,
-				items: [
-					{
-						value: { value, title: value },
-						text: computed_value,
-						text_bold: value,
-					}
-				]
-			});
-		groups_value.push({
-			value: "value",
-			text: "Value",
-			items: this.state.selected.values?.map(value =>
-			{
-				return {
-					value: value,
-					text: computed_value,
-					text_bold: value.title,
-				};
-			}) ?? null
-		});
-
-		return (
-			<>
-				<div
-					id={this.props.id}
-					className={`${Styles.ns_filter_box_container} ${this.props.classList?.join(" ") ?? ""}`}
-					style={this.props.style}
-				>
-					<div style={{ display: "flex", width: "400px", maxWidth: "100%" }}
-					>
-						{
-							computed_value && <>
-								<NSLabel
-									title={computed_value}
-									style={{
-										borderLeft: "1px black solid",
-										borderTop: "1px black solid",
-										borderBottom: "1px black solid",
-										borderTopLeftRadius: "8px",
-										borderBottomLeftRadius: "8px",
-										display: "flex",
-										flexDirection: "row",
-										width: "max-content"
-									}}
-								/>
-							</>
-						}
-						<NSBoxSearch
-							ref={this.NSBoxSearch_Main}
-							required={false}
-							hideHeader
-							title=''
-							placeholder={this.props.placeholder}
-							onChanged={e =>
-							{
-								let value = e.getValue() ?? "";
-								if (value)
-									if (this.state.selected.state === GroupListState.Normal)
-										this.setSelected(GroupListState.Column, null, null, null, [], true);
-									else if (this.state.selected.state === GroupListState.Value)
-									{
-										this.setSelectedValues(null);
-										this.service.setTimeoutIfNotCalledAgain(this.reloadData, 1000);
-									}
-								this.setState({ value });
-							}}
-							onEnterPressed={() =>
-							{
-								let value = this.NSBoxSearch_Main?.current?.getValue() ?? "";
-								if (value)
-								{
-									if (this.state.selected.state === GroupListState.Value)
-										this.onSelected_Value(false, [value]);
-									else
-										this.onSelected_Column({ ...this.use_all, items: [] }, {
-											value: { id: value, name: value, not: false },
-											text: value
-										});
-								}
-							}}
-							onClicked={() =>
-							{
-								if (this.state.selected.state === GroupListState.Normal)
-									this.setSelected(GroupListState.Column, null, null, null, [], false);
-							}}
-							style={{
-								flexGrow: 1,
-								width: "10px"
-							}}
-						/>
-					</div>
-					{
-						this.state.selected.state === GroupListState.Column &&
-						<NSListGrouped<NSFilterBox_Group_Column>
-							groups={groups_column}
-							onClose={() =>
-							{
-								if (this.NSBoxSearch_Main?.current?.input.current !== document.activeElement)
-									this.setSelected(GroupListState.Normal, null, null, null, [], true)
-							}}
-							onClick={this.onSelected_Column}
-							style={{ zIndex: 10, position: "absolute" }}
-						/>
-					}
-					{
-						this.state.selected.state === GroupListState.Opertor && <>
-							<NSListGrouped<NSFilterBox_Group_Operator>
-								groups={groups_operator}
-								onClick={this.onSelected_Operator}
-								onClose={() =>
-								{
-									if (this.NSBoxSearch_Main?.current?.input.current !== document.activeElement)
-										this.setSelected(GroupListState.Normal, null, null, null, [], true)
-								}}
-								style={{ zIndex: 10, position: "absolute" }}
-							/>
-						</>
-					}
-					{
-						this.state.selected.state === GroupListState.Value &&
-						<NSListGrouped<NSFilterBox_Group_Value>
-							groups={groups_value}
-							onClick={(_, item) => this.onSelected_Value(this.state.selected.not ?? false, [item.value.value])}
-							onClose={() =>
-							{
-								if (this.NSBoxSearch_Main?.current?.input.current !== document.activeElement)
-									this.setSelected(GroupListState.Normal, null, null, null, [], true)
-							}}
-							style={{ zIndex: 10, position: "absolute" }}
-						/>
-					}
-				</div>
-			</>
-		);
-	}
+"use client"
+
+import React, { Component } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { BaseMetaColumn, BaseMetaTable, FilterItem, FilterItemColumnType, FilterItemOperator, SetTimeouService } from 'namirasoft-core';
+import { NSListGrouped, NSListGroupedProps_Group, NSListGroupedProps_Item } from './NSListGrouped';
+import { NSBoxSearch } from './NSBoxSearch';
+import { NSLabel } from './NSLabel';
+import Styles from './NSFilterBox.module.css';
+
+export interface NSFilterBoxProps extends IBaseComponentProps
+{
+	placeholder?: string;
+	getTables: () => NSFilterBoxProps_Table[];
+	getMoreTables: () => Promise<NSFilterBoxProps_Table[]>;
+	getValues: ((table: NSFilterBoxProps_Table, column: NSFilterBoxProps_Column, value: string) => Promise<NSFilterBox_Group_Value[]>) | null;
+	onChanged?: () => void;
+	filterItems?: FilterItem[];
+}
+
+export interface NSFilterBoxProps_Table
+{
+	name: string;
+	text: string;
+	required: boolean;
+	columns: NSFilterBoxProps_Column[];
+}
+
+export interface NSFilterBoxProps_Column
+{
+	id: string,
+	name: string,
+	text: string,
+	type: FilterItemColumnType
+	getValues?: (search: string) => Promise<NSFilterBox_Group_Value[]>;
+}
+
+export interface NSFilterBox_Group_Column
+{
+	id: string;
+	name: string;
+	not: boolean;
+}
+export interface NSFilterBox_Group_Operator
+{
+	not: boolean;
+	sign: string;
+}
+export interface NSFilterBox_Group_Value
+{
+	value: string;
+	title: string;
+}
+
+interface NSFilterBoxState_Selection
+{
+	state: GroupListState;
+	column: { table: NSFilterBoxProps_Table, column: NSFilterBoxProps_Column } | null;
+	operator: FilterItemOperator | null;
+	not: boolean | null;
+	values: NSFilterBox_Group_Value[] | null;
+}
+
+interface NSFilterBoxState
+{
+	tables: NSFilterBoxProps_Table[];
+	filterItems: FilterItem[];
+	value: string;
+	selected: NSFilterBoxState_Selection;
+}
+
+enum GroupListState
+{
+	Normal = 'Normal',
+	Column = 'Column',
+	Opertor = 'Opertor',
+	Value = 'Value'
+}
+
+export class NSFilterBox extends Component<NSFilterBoxProps, NSFilterBoxState>
+{
+	private service: SetTimeouService = new SetTimeouService();
+	private NSBoxSearch_Main?: React.RefObject<NSBoxSearch> = React.createRef<NSBoxSearch>();
+	private use_all = {
+		value: "*",
+		text: "Use",
+	}
+	constructor(props: NSFilterBoxProps)
+	{
+		super(props);
+		this.state = {
+			tables: [],
+			filterItems: props.filterItems ?? [],
+			value: "",
+			selected: {
+				state: GroupListState.Normal,
+				column: null,
+				operator: null,
+				not: null,
+				values: [],
+			}
+		}
+
+		this.findTable = this.findTable.bind(this);
+		this.findColumn = this.findColumn.bind(this);
+
+		this.getFilterItems = this.getFilterItems.bind(this);
+		this.setFilterItems = this.setFilterItems.bind(this);
+		this.removeFilterItem = this.removeFilterItem.bind(this);
+
+		this.reloadData = this.reloadData.bind(this);
+		this.reloadTables = this.reloadTables.bind(this);
+		this.setSelected = this.setSelected.bind(this);
+		this.setSelectedValues = this.setSelectedValues.bind(this);
+
+		this.onSelected_Column = this.onSelected_Column.bind(this);
+		this.onSelected_Operator = this.onSelected_Operator.bind(this);
+		this.onSelected_Value = this.onSelected_Value.bind(this);
+	}
+
+	private findTable(name: string): NSFilterBoxProps_Table
+	{
+		let res = this.state.tables.filter(t => t.name === name);
+		if (res.length === 1)
+			return res[0];
+		throw new Error("Table not found: " + name);
+	}
+	private findColumn(table: NSFilterBoxProps_Table, id: string)
+	{
+		let res = table.columns.filter(c => c.id === id);
+		if (res.length === 1)
+			return res[0];
+		throw new Error("Column not found: " + id);
+	}
+	public getFilterItems(): FilterItem[]
+	{
+		return this.state.filterItems;
+	}
+	public setFilterItems(filterItems: FilterItem[] | null): void
+	{
+		this.setState({ filterItems: filterItems ?? [] }, () =>
+		{
+			this.props.onChanged?.();
+		});
+	}
+	public removeFilterItem(item: FilterItem): void
+	{
+		let filterItems = [...this.state.filterItems];
+		filterItems = filterItems.filter(i => i !== item)
+		this.setFilterItems(filterItems);
+	}
+	public reloadTables()
+	{
+		this.setState({ tables: this.props.getTables() }, () =>
+		{
+			this.props.getMoreTables().then(tables =>
+			{
+				this.setState({ tables: [...this.state.tables, ...tables] });
+			});
+		});
+	}
+	public reloadData()
+	{
+		if (this.state.selected.state === GroupListState.Value)
+			if (this.state.selected.column)
+			{
+				let search = this.NSBoxSearch_Main?.current?.getValue() ?? "";
+				this.setSelectedValues(null);
+				if (this.state.selected.column.column.getValues)
+				{
+					this.state.selected.column.column.getValues(search).then(values =>
+					{
+						this.setSelectedValues(values);
+					});
+				}
+				else if (this.props.getValues)
+				{
+					this.props.getValues(this.state.selected.column.table, this.state.selected.column.column, search).then(values =>
+					{
+						this.setSelectedValues(values);
+					}).catch(() => { });
+				}
+				else
+					this.setSelectedValues([]);
+			}
+	}
+
+	private setSelectedValues(values: NSFilterBox_Group_Value[] | null)
+	{
+		this.setSelected(this.state.selected.state, this.state.selected.column, this.state.selected.operator, this.state.selected.not, values, false);
+	}
+	private setSelected(state: GroupListState, column: { table: NSFilterBoxProps_Table, column: NSFilterBoxProps_Column } | null, operator: FilterItemOperator | null, not: boolean | null, values: NSFilterBox_Group_Value[] | null, reset: boolean, callback?: () => void)
+	{
+		this.setState({ selected: { state, column, operator, not, values } }, () =>
+		{
+			if (reset)
+				this.NSBoxSearch_Main?.current?.setValue("");
+			this.NSBoxSearch_Main?.current?.input.current?.focus();
+			callback?.();
+		});
+	}
+
+	override componentDidMount()
+	{
+		this.reloadTables();
+	}
+
+	private onSelected_Column(table: NSListGroupedProps_Group<NSFilterBox_Group_Column>, column: NSListGroupedProps_Item<NSFilterBox_Group_Column>) 
+	{
+		if (table.value === this.use_all.value)
+		{
+			this.onSelected_Value(column.value.not, [column.value.name]);
+		}
+		else
+		{
+			let t = this.findTable(table.value);
+			let c = this.findColumn(t, column.value.id);
+			this.setSelected(GroupListState.Opertor, { table: t, column: c }, null, null, [], false);
+		}
+	}
+	private onSelected_Operator(_: NSListGroupedProps_Group<NSFilterBox_Group_Operator>, operator: NSListGroupedProps_Item<NSFilterBox_Group_Operator>) 
+	{
+		if (this.state.selected.column)
+		{
+			let not = operator.value.not;
+			let o = FilterItemOperator.getBySign(operator.value.sign);
+			this.setSelected(GroupListState.Value, this.state.selected.column, o, not, [], false, () =>
+			{
+				if (o.count === 0)
+					this.onSelected_Value(not, []);
+				else if (o.count === 1)
+				{
+					if (this.state.selected.column)
+						this.reloadData();
+				}
+				else
+				{
+					alert("Operator is not supported: " + JSON.stringify(o));
+				}
+			});
+		}
+	}
+	private onSelected_Value(not: boolean, values: string[]) 
+	{
+		let filterItems = this.state.filterItems;
+		if (this.state.selected.column && this.state.selected.operator)
+		{
+			let table = new BaseMetaTable(null, this.state.selected.column.table.name, this.state.selected.column.table.text);
+			let column = new BaseMetaColumn(table, this.state.selected.column.column.name, this.state.selected.column.column.text, this.state.selected.column.column.type, false);
+			filterItems.push(new FilterItem(table, column, not, this.state.selected.operator, ...values));
+		}
+		else 
+		{
+			let t = this.state.tables[0];
+			let table = new BaseMetaTable(null, t.name, t.text);
+			let column = new BaseMetaColumn(table, "*", "", "", false);
+			filterItems.push(new FilterItem(table, column, not, FilterItemOperator.all.equals, ...values));
+		}
+		this.setState({ filterItems }, () =>
+		{
+			this.NSBoxSearch_Main?.current?.setValue("");
+			this.props.onChanged?.();
+		});
+		this.setSelected(GroupListState.Normal, null, null, null, [], true);
+	}
+
+	override render()
+	{
+		let getComputedValue = () =>
+		{
+			let ans = "";
+			if (this.state.selected.column)
+				ans += this.state.selected.column.table.text + "." + this.state.selected.column.column.text + " ";
+			if (this.state.selected.not)
+				ans += "!";
+			if (this.state.selected.operator)
+				ans += this.state.selected.operator.sign + " ";
+			return ans;
+		}
+		let computed_value = getComputedValue();
+		let value = this.NSBoxSearch_Main?.current?.getValue() ?? "";
+
+		let groups_column: NSListGroupedProps_Group<NSFilterBox_Group_Column>[] = [];
+		if (value)
+			groups_column.push({
+				...this.use_all,
+				items: [
+					{
+						value: { id: value, name: value, not: false },
+						text: computed_value,
+						text_bold: value,
+					}, {
+						value: { id: value, name: value, not: true },
+						text: "Not " + computed_value,
+						text_bold: value,
+					}
+				]
+			});
+		groups_column.push(...this.state.tables.map((table) =>
+		{
+			return {
+				value: table.name,
+				text: table.text,
+				items: table.columns.map((column) =>
+				{
+					return {
+						value: { id: column.id, name: column.name, not: false },
+						text: column.text,
+						type: column.type,
+					}
+				})
+			}
+		}))
+
+		let groups_operator: NSListGroupedProps_Group<NSFilterBox_Group_Operator>[] = [
+			{
+				value: "operators",
+				text: "Operators",
+				items: []
+			}
+		]
+		if (this.state.selected.column)
+			FilterItemOperator.getAllByType(this.state.selected.column.column.type, this.findTable(this.state.selected.column.table.name).required).forEach((operator) =>			
+			{
+				groups_operator[0].items?.push({
+					value: { sign: operator.sign, not: false },
+					text: this.state.selected.column?.column.text ?? "",
+					text_bold: operator.sign,
+					description: operator.name,
+				});
+				groups_operator[0].items?.push({
+					value: { sign: operator.sign, not: true },
+					text: this.state.selected.column?.column.text ?? "",
+					text_bold: "!" + operator.sign,
+					description: "Not " + operator.name
+				});
+			});
+
+		let groups_value: NSListGroupedProps_Group<NSFilterBox_Group_Value>[] = [];
+		if (value)
+			groups_value.push({
+				...this.use_all,
+				items: [
+					{
+						value: { value, title: value },
+						text: computed_value,
+						text_bold: value,
+					}
+				]
+			});
+		groups_value.push({
+			value: "value",
+			text: "Value",
+			items: this.state.selected.values?.map(value =>
+			{
+				return {
+					value: value,
+					text: computed_value,
+					text_bold: value.title,
+				};
+			}) ?? null
+		});
+
+		return (
+			<>
+				<div
+					id={this.props.id}
+					className={`${Styles.ns_filter_box_container} ${this.props.classList?.join(" ") ?? ""}`}
+					style={this.props.style}
+				>
+					<div style={{ display: "flex", width: "400px", maxWidth: "100%" }}
+					>
+						{
+							computed_value && <>
+								<NSLabel
+									title={computed_value}
+									style={{
+										borderLeft: "1px black solid",
+										borderTop: "1px black solid",
+										borderBottom: "1px black solid",
+										borderTopLeftRadius: "8px",
+										borderBottomLeftRadius: "8px",
+										display: "flex",
+										flexDirection: "row",
+										width: "max-content"
+									}}
+								/>
+							</>
+						}
+						<NSBoxSearch
+							ref={this.NSBoxSearch_Main}
+							required={false}
+							hideHeader
+							title=''
+							placeholder={this.props.placeholder}
+							onChanged={e =>
+							{
+								let value = e.getValue() ?? "";
+								if (value)
+									if (this.state.selected.state === GroupListState.Normal)
+										this.setSelected(GroupListState.Column, null, null, null, [], true);
+									else if (this.state.selected.state === GroupListState.Value)
+									{
+										this.setSelectedValues(null);
+										this.service.setTimeoutIfNotCalledAgain(this.reloadData, 1000);
+									}
+								this.setState({ value });
+							}}
+							onEnterPressed={() =>
+							{
+								let value = this.NSBoxSearch_Main?.current?.getValue() ?? "";
+								if (value)
+								{
+									if (this.state.selected.state === GroupListState.Value)
+										this.onSelected_Value(false, [value]);
+									else
+										this.onSelected_Column({ ...this.use_all, items: [] }, {
+											value: { id: value, name: value, not: false },
+											text: value
+										});
+								}
+							}}
+							onClicked={() =>
+							{
+								if (this.state.selected.state === GroupListState.Normal)
+									this.setSelected(GroupListState.Column, null, null, null, [], false);
+							}}
+							style={{
+								flexGrow: 1,
+								width: "10px"
+							}}
+						/>
+					</div>
+					{
+						this.state.selected.state === GroupListState.Column &&
+						<NSListGrouped<NSFilterBox_Group_Column>
+							groups={groups_column}
+							onClose={() =>
+							{
+								if (this.NSBoxSearch_Main?.current?.input.current !== document.activeElement)
+									this.setSelected(GroupListState.Normal, null, null, null, [], true)
+							}}
+							onClick={this.onSelected_Column}
+							style={{ zIndex: 10, position: "absolute" }}
+						/>
+					}
+					{
+						this.state.selected.state === GroupListState.Opertor && <>
+							<NSListGrouped<NSFilterBox_Group_Operator>
+								groups={groups_operator}
+								onClick={this.onSelected_Operator}
+								onClose={() =>
+								{
+									if (this.NSBoxSearch_Main?.current?.input.current !== document.activeElement)
+										this.setSelected(GroupListState.Normal, null, null, null, [], true)
+								}}
+								style={{ zIndex: 10, position: "absolute" }}
+							/>
+						</>
+					}
+					{
+						this.state.selected.state === GroupListState.Value &&
+						<NSListGrouped<NSFilterBox_Group_Value>
+							groups={groups_value}
+							onClick={(_, item) => this.onSelected_Value(this.state.selected.not ?? false, [item.value.value])}
+							onClose={() =>
+							{
+								if (this.NSBoxSearch_Main?.current?.input.current !== document.activeElement)
+									this.setSelected(GroupListState.Normal, null, null, null, [], true)
+							}}
+							style={{ zIndex: 10, position: "absolute" }}
+						/>
+					}
+				</div>
+			</>
+		);
+	}
 }