namirasoft-site-react 1.3.228 → 1.3.232

package/src/components/NSFilterBox.tsx

@@ -1,331 +1,352 @@
-"use client"
-
-import React, { Component } from 'react';
-import Styles from './NSFilterBox.module.css'
-import { IBaseComponentProps } from '../main';
-import { NSFilterItem } from './NSFilterItem';
-import { FilterItem, FilterItemColumnType, FilterItemOperator } from 'namirasoft-core'
-import NSGroupedList, { INSGroupedListProps_Group } from './NSGroupedList';
-
-export interface INSFilterBoxProps extends IBaseComponentProps
-{
-	placeholder?: string;
-	tables: INSFilterBoxProps_Table[];
-	getData: (table: INSFilterBoxProps_Table, column: INSFilterBoxProps_Column) => Promise<string[]>;
-	onChanged?: () => void;
-}
-
-export interface INSFilterBoxProps_Table
-{
-	name: string,
-	text: string
-	columns: INSFilterBoxProps_Column[];
-}
-export interface INSFilterBoxProps_Column
-{
-	name: string,
-	text: string,
-	type: FilterItemColumnType
-}
-
-interface INSFilterBoxState
-{
-	state: GroupListState;
-	value: string;
-	computedValue: string;
-	selectedColumn: { table: INSFilterBoxProps_Table, column: INSFilterBoxProps_Column } | null;
-	selectedOperator: FilterItemOperator | null;
-	values: string[];
-	filterItems: FilterItem[];
-}
-
-enum GroupListState
-{
-	Normal = 'Normal',
-	Column = 'Column',
-	Opertor = 'Opertor',
-	Value = 'Value'
-}
-
-export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
-{
-	private input_value?: React.RefObject<HTMLInputElement>;
-
-	constructor(props: INSFilterBoxProps)
-	{
-		super(props);
-		this.state = {
-			state: GroupListState.Normal,
-			value: "",
-			computedValue: "",
-			selectedColumn: null,
-			selectedOperator: null,
-			values: [],
-			filterItems: []
-		}
-		this.input_value = React.createRef<HTMLInputElement>();
-		this.findTable = this.findTable.bind(this);
-		this.findColumn = this.findColumn.bind(this);
-		this.onInputValueChanged = this.onInputValueChanged.bind(this);
-		this.removeFilterItem = this.removeFilterItem.bind(this);
-		this.getFilterItems = this.getFilterItems.bind(this);
-	}
-	private findTable(name: string): INSFilterBoxProps_Table
-	{
-		let res = this.props.tables.filter(t => t.name === name);
-		if (res.length === 1)
-			return res[0];
-		throw new Error("Table not found: " + name);
-	}
-	private findColumn(table: INSFilterBoxProps_Table, name: string)
-	{
-		let res = table.columns.filter(c => c.name === name);
-		if (res.length === 1)
-			return res[0];
-		throw new Error("Column not found: " + name);
-	}
-	private removeFilterItem(text: FilterItem): void
-	{
-		let filterItems = [...this.state.filterItems];
-		filterItems = filterItems.filter(item => item !== text)
-		this.setState({ filterItems });
-	}
-	private onInputValueChanged = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> =>
-	{
-		let value = e.target.value;
-		if (this.state.computedValue && value.startsWith(this.state.computedValue))
-			this.setState({ value });
-		else
-			this.setState({ value, computedValue: "", selectedColumn: null, selectedOperator: null, state: GroupListState.Column });
-		if (this.props.onChanged)
-			this.props.onChanged();
-	}
-	public getFilterItems(): FilterItem[]
-	{
-		return this.state.filterItems;
-	}
-	override render()
-	{
-		let use = this.state.value;
-		let computed = false;
-		if (this.state.computedValue)
-		{
-			if (this.state.value.startsWith(this.state.computedValue))
-			{
-				let index = this.state.value.indexOf(this.state.computedValue);
-				if (index !== -1)
-				{
-					index += this.state.computedValue.length;
-					use = this.state.value.substring(index).trim();
-					computed = true;
-				}
-			}
-		}
-
-		let group_use = {
-			name: "use",
-			text: "Use",
-			items: [
-				{
-					name: use,
-					text: this.state.computedValue,
-					text_bold: use,
-				}
-			]
-		};
-
-		let groups_column: INSGroupedListProps_Group[] = [];
-		if (use && !computed)
-			groups_column.push(group_use);
-		groups_column.push(...this.props.tables.map((table) =>
-		{
-			return {
-				name: table.name,
-				text: table.text,
-				items: table.columns.map((column) =>
-				{
-					return {
-						name: column.name,
-						text: column.text,
-						type: column.type
-					}
-				})
-			}
-		}))
-
-		let groups_value: INSGroupedListProps_Group[] = [];
-		if (use && computed)
-			groups_value.push(group_use);
-		groups_value.push({
-			name: "value",
-			text: "Value",
-			items: this.state.values.map(v =>
-			{
-				return {
-					name: v,
-					text: this.state.computedValue,
-					text_bold: v,
-				};
-			})
-		});
-		return (
-			<>
-				<div>
-					<div className={Styles.ns_input_container}>
-						<figure className={Styles.ns_input_icon_container}>
-							<img
-								src="https://static.namirasoft.com/image/concept/magnifier/blue.svg"
-								alt="input-icon"
-								width={24}
-								height={24}
-							/>
-						</figure>
-						<input
-							ref={this.input_value}
-							value={this.state.value}
-							onChange={this.onInputValueChanged}
-							onClick={() =>
-							{
-								if (this.state.state === GroupListState.Normal)
-									this.setState({ state: GroupListState.Column });
-							}}
-							type="text"
-							className={Styles.ns_input}
-							placeholder={this.props.placeholder}
-						/>
-						{
-							this.state.value !== "" &&
-							<figure className={Styles.ns_input_close_icon}
-								onClick={() =>
-								{
-									this.setState({
-										state: GroupListState.Normal,
-										value: ""
-									});
-								}}
-							>
-								<img
-									src="https://static.namirasoft.com/image/concept/close/blue.svg"
-									alt="input-icon"
-									width={24}
-									height={24}
-								/>
-							</figure>
-						}
-					</div>
-					{
-						this.state.state === GroupListState.Column &&
-						<NSGroupedList
-							onClick={(table, name) =>
-							{
-								let t = this.findTable(table);
-								let c = this.findColumn(t, name);
-								let value = t.text + "." + c.text + " ";
-								this.setState({
-									state: GroupListState.Opertor,
-									selectedColumn: { table: t, column: c },
-									value,
-									computedValue: value
-								}, () =>
-								{
-									if (this.input_value?.current)
-										this.input_value?.current.focus();
-								});
-							}}
-							groups={groups_column}
-						/>
-					}
-					{
-						this.state.state === GroupListState.Opertor &&
-						<NSGroupedList
-							onClick={(_, operator) =>
-							{
-								if (this.state.selectedColumn)
-								{
-									let o = FilterItemOperator.getBySign(operator);
-									if (o.count === 0)
-									{
-										let filterItems = this.state.filterItems;
-										if (this.state.selectedColumn)
-											filterItems.push(new FilterItem(this.state.selectedColumn.table, this.state.selectedColumn.column, false, o))
-										this.setState({ value: "", computedValue: "", selectedColumn: null, selectedOperator: null, state: GroupListState.Normal, filterItems });
-									}
-									else if (o.count === 1)
-									{
-										let value = this.state.computedValue + operator + " ";
-										this.setState({
-											state: GroupListState.Value,
-											selectedOperator: o,
-											value,
-											computedValue: value
-										}, () =>
-										{
-											if (this.input_value?.current)
-												this.input_value?.current.focus();
-										});
-										this.props.getData(this.state.selectedColumn.table, this.state.selectedColumn.column).then(values =>
-										{
-											this.setState({
-												values
-											}, () =>
-											{
-												if (this.input_value?.current)
-													this.input_value?.current.focus();
-											});
-										});
-									}
-									else
-									{
-										alert("Operator is not supported: " + JSON.stringify(o));
-									}
-								}
-							}}
-							groups={
-								[
-									{
-										name: "operators",
-										text: "Operators",
-										items: this.state.selectedColumn ? FilterItemOperator.getAllByType(this.state.selectedColumn.column.type).map((operator) =>			
-										{
-											return {
-												name: operator.sign,
-												text: this.state.selectedColumn?.column.text ?? "",
-												text_bold: operator.sign,
-												description: operator.name
-											};
-										}) : []
-									}
-								]
-							}
-						/>
-					}
-					{
-						this.state.state === GroupListState.Value &&
-						<NSGroupedList
-							onClick={(_, value) =>
-							{
-								let filterItems = this.state.filterItems;
-								if (this.state.selectedColumn)
-									if (this.state.selectedOperator)
-										filterItems.push(new FilterItem(this.state.selectedColumn.table, this.state.selectedColumn.column, false, this.state.selectedOperator, value))
-								this.setState({ value: "", computedValue: "", selectedColumn: null, selectedOperator: null, state: GroupListState.Normal, filterItems });
-							}}
-							groups={groups_value}
-						/>
-					}
-				</div>
-				<div className={Styles.ns_selected_list_parent}>
-					{
-						this.state.filterItems.map((item, index) =>
-							<NSFilterItem
-								item={item}
-								key={index}
-								removeSelected={() => this.removeFilterItem(item)}
-							/>
-						)
-					}
-				</div>
-			</>
-		);
-	}
+"use client"
+
+import React, { Component } from 'react';
+import Styles from './NSFilterBox.module.css'
+import { IBaseComponentProps } from '../main';
+import { NSFilterItem } from './NSFilterItem';
+import { FilterItem, FilterItemColumnType, FilterItemOperator } from 'namirasoft-core'
+import NSGroupedList, { INSGroupedListProps_Group } from './NSGroupedList';
+
+export interface INSFilterBoxProps extends IBaseComponentProps
+{
+	placeholder?: string;
+	getTables: () => INSFilterBoxProps_Table[];
+	getMoreTables: () => Promise<INSFilterBoxProps_Table[]>;
+	getData: (table: INSFilterBoxProps_Table, column: INSFilterBoxProps_Column) => Promise<string[]>;
+	onChanged?: () => void;
+}
+
+export interface INSFilterBoxProps_Table
+{
+	name: string,
+	text: string
+	columns: INSFilterBoxProps_Column[];
+}
+
+export interface INSFilterBoxProps_Column
+{
+	name: string,
+	text: string,
+	type: FilterItemColumnType
+}
+
+interface INSFilterBoxState
+{
+	state: GroupListState;
+	value: string;
+	tables: INSFilterBoxProps_Table[]
+	computedValue: string;
+	selectedColumn: { table: INSFilterBoxProps_Table, column: INSFilterBoxProps_Column } | null;
+	selectedOperator: FilterItemOperator | null;
+	values: string[];
+	filterItems: FilterItem[];
+}
+
+enum GroupListState
+{
+	Normal = 'Normal',
+	Column = 'Column',
+	Opertor = 'Opertor',
+	Value = 'Value'
+}
+
+export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
+{
+	private input_value?: React.RefObject<HTMLInputElement>;
+	constructor(props: INSFilterBoxProps)
+	{
+		super(props);
+		this.state = {
+			state: GroupListState.Normal,
+			value: "",
+			tables: [],
+			computedValue: "",
+			selectedColumn: null,
+			selectedOperator: null,
+			values: [],
+			filterItems: []
+		}
+		this.input_value = React.createRef<HTMLInputElement>();
+		this.findTable = this.findTable.bind(this);
+		this.findColumn = this.findColumn.bind(this);
+		this.onInputValueChanged = this.onInputValueChanged.bind(this);
+		this.removeFilterItem = this.removeFilterItem.bind(this);
+		this.getFilterItems = this.getFilterItems.bind(this);
+	}
+	private findTable(name: string): INSFilterBoxProps_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: INSFilterBoxProps_Table, name: string)
+	{
+		let res = table.columns.filter(c => c.name === name);
+		if (res.length === 1)
+			return res[0];
+		throw new Error("Column not found: " + name);
+	}
+	private removeFilterItem(text: FilterItem): void
+	{
+		let filterItems = [...this.state.filterItems];
+		filterItems = filterItems.filter(item => item !== text)
+		this.setState({ filterItems }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged();
+		});
+	}
+	private onInputValueChanged = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> =>
+	{
+		let value = e.target.value;
+		if (this.state.computedValue && value.startsWith(this.state.computedValue))
+			this.setState({ value });
+		else
+			this.setState({ value, computedValue: "", selectedColumn: null, selectedOperator: null, state: GroupListState.Column });
+	}
+	public getFilterItems(): FilterItem[]
+	{
+		return this.state.filterItems;
+	}
+	override componentDidMount()
+	{
+		this.setState({ tables: this.props.getTables() });
+		this.props.getMoreTables().then(tables =>
+		{
+			this.setState({ tables: [...this.state.tables, ...tables] });
+		});
+	}
+	override render()
+	{
+		let use = this.state.value;
+		let computed = false;
+		if (this.state.computedValue)
+		{
+			if (this.state.value.startsWith(this.state.computedValue))
+			{
+				let index = this.state.value.indexOf(this.state.computedValue);
+				if (index !== -1)
+				{
+					index += this.state.computedValue.length;
+					use = this.state.value.substring(index).trim();
+					computed = true;
+				}
+			}
+		}
+
+		let group_use = {
+			name: "use",
+			text: "Use",
+			items: [
+				{
+					name: use,
+					text: this.state.computedValue,
+					text_bold: use,
+				}
+			]
+		};
+
+		let groups_column: INSGroupedListProps_Group[] = [];
+		if (use && !computed)
+			groups_column.push(group_use);
+		groups_column.push(...this.state.tables.map((table) =>
+		{
+			return {
+				name: table.name,
+				text: table.text,
+				items: table.columns.map((column) =>
+				{
+					return {
+						name: column.name,
+						text: column.text,
+						type: column.type
+					}
+				})
+			}
+		}))
+
+		let groups_value: INSGroupedListProps_Group[] = [];
+		if (use && computed)
+			groups_value.push(group_use);
+		groups_value.push({
+			name: "value",
+			text: "Value",
+			items: this.state.values.map(v =>
+			{
+				return {
+					name: v,
+					text: this.state.computedValue,
+					text_bold: v,
+				};
+			})
+		});
+		return (
+			<>
+				<div>
+					<div className={Styles.ns_input_container}>
+						<figure className={Styles.ns_input_icon_container}>
+							<img
+								src="https://static.namirasoft.com/image/concept/magnifier/blue.svg"
+								alt="input-icon"
+								width={24}
+								height={24}
+							/>
+						</figure>
+						<input
+							ref={this.input_value}
+							value={this.state.value}
+							onChange={this.onInputValueChanged}
+							onClick={() =>
+							{
+								if (this.state.state === GroupListState.Normal)
+									this.setState({ state: GroupListState.Column });
+							}}
+							type="text"
+							className={Styles.ns_input}
+							placeholder={this.props.placeholder}
+						/>
+						{
+							this.state.value !== "" &&
+							<figure className={Styles.ns_input_close_icon}
+								onClick={() =>
+								{
+									this.setState({
+										state: GroupListState.Normal,
+										value: ""
+									});
+								}}
+							>
+								<img
+									src="https://static.namirasoft.com/image/concept/close/blue.svg"
+									alt="input-icon"
+									width={24}
+									height={24}
+								/>
+							</figure>
+						}
+					</div>
+					{
+						this.state.state === GroupListState.Column &&
+						<NSGroupedList
+							onClick={(table, name) =>
+							{
+								let t = this.findTable(table);
+								let c = this.findColumn(t, name);
+								let value = t.text + "." + c.text + " ";
+								this.setState({
+									state: GroupListState.Opertor,
+									selectedColumn: { table: t, column: c },
+									value,
+									computedValue: value
+								}, () =>
+								{
+									if (this.input_value?.current)
+										this.input_value?.current.focus();
+								});
+							}}
+							groups={groups_column}
+						/>
+					}
+					{
+						this.state.state === GroupListState.Opertor &&
+						<NSGroupedList
+							onClick={(_, operator) =>
+							{
+								if (this.state.selectedColumn)
+								{
+									let o = FilterItemOperator.getBySign(operator);
+									if (o.count === 0)
+									{
+										let filterItems = this.state.filterItems;
+										if (this.state.selectedColumn)
+											filterItems.push(new FilterItem(this.state.selectedColumn.table, this.state.selectedColumn.column, false, o))
+										this.setState({ value: "", computedValue: "", selectedColumn: null, selectedOperator: null, state: GroupListState.Normal, filterItems }, () =>
+										{
+											if (this.props.onChanged)
+												this.props.onChanged();
+										});
+									}
+									else if (o.count === 1)
+									{
+										let value = this.state.computedValue + operator + " ";
+										this.setState({
+											state: GroupListState.Value,
+											selectedOperator: o,
+											value,
+											computedValue: value
+										}, () =>
+										{
+											if (this.input_value?.current)
+												this.input_value?.current.focus();
+										});
+										this.props.getData(this.state.selectedColumn.table, this.state.selectedColumn.column).then(values =>
+										{
+											this.setState({
+												values
+											}, () =>
+											{
+												if (this.input_value?.current)
+													this.input_value?.current.focus();
+											});
+										});
+									}
+									else
+									{
+										alert("Operator is not supported: " + JSON.stringify(o));
+									}
+								}
+							}}
+							groups={
+								[
+									{
+										name: "operators",
+										text: "Operators",
+										items: this.state.selectedColumn ? FilterItemOperator.getAllByType(this.state.selectedColumn.column.type).map((operator) =>			
+										{
+											return {
+												name: operator.sign,
+												text: this.state.selectedColumn?.column.text ?? "",
+												text_bold: operator.sign,
+												description: operator.name
+											};
+										}) : []
+									}
+								]
+							}
+						/>
+					}
+					{
+						this.state.state === GroupListState.Value &&
+						<NSGroupedList
+							onClick={(_, value) =>
+							{
+								let filterItems = this.state.filterItems;
+								if (this.state.selectedColumn)
+									if (this.state.selectedOperator)
+										filterItems.push(new FilterItem(this.state.selectedColumn.table, this.state.selectedColumn.column, false, this.state.selectedOperator, value))
+								this.setState({ value: "", computedValue: "", selectedColumn: null, selectedOperator: null, state: GroupListState.Normal, filterItems }, () =>
+								{
+									if (this.props.onChanged)
+										this.props.onChanged();
+								});
+							}}
+							groups={groups_value}
+						/>
+					}
+				</div>
+				<div className={Styles.ns_selected_list_parent}>
+					{
+						this.state.filterItems.map((item, index) =>
+							<NSFilterItem
+								item={item}
+								key={index}
+								removeSelected={() => this.removeFilterItem(item)}
+							/>
+						)
+					}
+				</div>
+			</>
+		);
+	}
 }