namirasoft-site-react 1.3.216 → 1.3.218

package/src/components/NSFilterBox.tsx

@@ -1,278 +1,278 @@
-"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 from './NSGroupedList';
-
-interface INSFilterBoxProps extends IBaseComponentProps
-{
-	placeholder?: string;
-	onChanged?: () => void;
-	tables: {
-		name: string,
-		text: string
-		columns: {
-			name: string,
-			text: string,
-			type: FilterItemColumnType
-		}[];
-	}[];
-	getData: (column: string) => string[];
-}
-
-interface INSFilterBoxState
-{
-	filterItems: FilterItem[];
-	showSuggestList: boolean;
-	searchValue: string;
-	groupListState: GroupListState;
-	selectedColumns: {
-		name: string,
-		text: string
-		columns: {
-			name: string,
-			text: string,
-			type: FilterItemColumnType
-		}[];
-	}[];
-	selectedOperators: {
-		name: string;
-		operator: FilterItemOperator
-	};
-	selectedValues: [];
-}
-
-enum GroupListState
-{
-	Normal = 'Normal',
-	Column = 'Column',
-	Opertor = 'Opertor',
-	Value = 'Value'
-}
-
-export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
-{
-	constructor(props: INSFilterBoxProps)
-	{
-		super(props);
-		this.state = {
-			filterItems: [],
-			groupListState: GroupListState.Normal,
-			showSuggestList: false,
-			searchValue: "",
-			selectedColumns: [],
-			selectedOperators: {
-				name: "",
-				operator: FilterItemOperator.all.Empty
-			},
-			selectedValues: []
-		}
-		this.selectColumn = this.selectColumn.bind(this);
-		this.selectOperator = this.selectOperator.bind(this);
-		this.selectValue = this.selectValue.bind(this);
-		this.removeSelected = this.removeSelected.bind(this);
-		this.onChanged = this.onChanged.bind(this);
-		this.getValue = this.getValue.bind(this);
-		this.setValue = this.setValue.bind(this);
-	}
-
-	getValue(): string
-	{
-		return this.state.searchValue;
-	}
-
-	//show and hide list ui
-	setValue(value: string): void
-	{
-		if (value !== "")
-			this.setState({
-				showSuggestList: true,
-				groupListState: GroupListState.Column,
-				searchValue: value
-			})
-		else
-			this.setState({
-				showSuggestList: false,
-				groupListState: GroupListState.Normal,
-				searchValue: ""
-			})
-	}
-
-
-	selectColumn(groupe: string, item: string): void
-	{
-		console.log("item", groupe);
-		console.log("item", item);
-		this.setState({
-			groupListState: GroupListState.Opertor,
-			searchValue: item
-			//selectedOperators
-		})
-	}
-
-	selectOperator(group: string, item: string): void
-	{
-		console.log("item", item);
-		console.log("group", group);
-		debugger
-		this.setState({
-			groupListState: GroupListState.Value,
-		})
-
-	}
-
-	selectValue(group: string, item: string): void
-	{
-		console.log("item", item);
-		console.log("group", group);
-		// let filterItems = new FilterItem("", false, this.state.selectedOperators.operator, this.state.selectedOperators.name)
-		// console.log(filterItems)
-		// this.setState({ 
-		// 	filterItems
-		// })
-	}
-
-	removeSelected(text: string): void
-	{
-		let selectedArray = [...this.state.filterItems];
-		selectedArray = selectedArray.filter(item => item.column !== text)
-		this.setState({
-			filterItems: selectedArray
-		})
-	}
-
-	private onChanged = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> =>
-	{
-		await this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged();
-	}
-
-	override render()
-	{
-		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
-							// id={this.props.id}
-							value={this.state.searchValue}
-							onChange={this.onChanged}
-							type="text"
-							className={Styles.ns_input}
-							placeholder={this.props.placeholder}
-						/>
-						{this.state.showSuggestList &&
-							<figure className={Styles.ns_input_close_icon}
-								onClick={() => this.setState({
-									showSuggestList: false,
-									groupListState: GroupListState.Normal,
-									searchValue: ""
-								})}
-							>
-								<img
-									src="https://static.namirasoft.com/image/concept/close/blue.svg"
-									alt="input-icon"
-									width={24}
-									height={24}
-								/>
-							</figure>
-						}
-					</div>
-					{
-						this.state.groupListState == GroupListState.Column &&
-						<NSGroupedList
-							onClick={this.selectColumn}
-							groups={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
-										}
-									})
-								}
-							})}
-						/>
-					}
-
-					{
-						this.state.groupListState == GroupListState.Opertor &&
-						<NSGroupedList
-							onClick={this.selectOperator}
-							groups={
-								[
-									{
-										name: "operators",
-										text: "Operators",
-										items:
-											FilterItemOperator.getAllByType(FilterItemColumnType.String).map((operator) =>			
-											{
-												return {
-													name: operator.name,
-													text: operator.name,
-												}
-
-											})
-									}
-								]
-
-							}
-						/>
-					}
-
-					{
-						this.state.groupListState == GroupListState.Value &&
-						<NSGroupedList
-							onClick={this.selectValue}
-							groups={
-								[{
-									name: "value",
-									text: "Value",
-									items: 
-									this.props.getData(this.state.searchValue).map((data) =>
-									{
-										return {
-											name: data,
-											text: data
-										}
-									})
-								}
-								]
-							}
-						/>
-					}
-
-
-				</div>
-				<div className={Styles.ns_selected_list_parent}>
-					{this.state.filterItems.map((item, index) =>
-						<NSFilterItem
-							item={item}
-							key={index}
-							removeSelected={() => this.removeSelected(item.column)}
-						/>
-					)
-					}
-				</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 from './NSGroupedList';
+
+interface INSFilterBoxProps extends IBaseComponentProps
+{
+	placeholder?: string;
+	onChanged?: () => void;
+	tables: {
+		name: string,
+		text: string
+		columns: {
+			name: string,
+			text: string,
+			type: FilterItemColumnType
+		}[];
+	}[];
+	getData: (column: string) => string[];
+}
+
+interface INSFilterBoxState
+{
+	filterItems: FilterItem[];
+	showSuggestList: boolean;
+	searchValue: string;
+	groupListState: GroupListState;
+	selectedColumns: {
+		name: string,
+		text: string
+		columns: {
+			name: string,
+			text: string,
+			type: FilterItemColumnType
+		}[];
+	}[];
+	selectedOperators: {
+		name: string;
+		operator: FilterItemOperator
+	};
+	selectedValues: [];
+}
+
+enum GroupListState
+{
+	Normal = 'Normal',
+	Column = 'Column',
+	Opertor = 'Opertor',
+	Value = 'Value'
+}
+
+export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
+{
+	constructor(props: INSFilterBoxProps)
+	{
+		super(props);
+		this.state = {
+			filterItems: [],
+			groupListState: GroupListState.Normal,
+			showSuggestList: false,
+			searchValue: "",
+			selectedColumns: [],
+			selectedOperators: {
+				name: "",
+				operator: FilterItemOperator.all.Empty
+			},
+			selectedValues: []
+		}
+		this.selectColumn = this.selectColumn.bind(this);
+		this.selectOperator = this.selectOperator.bind(this);
+		this.selectValue = this.selectValue.bind(this);
+		this.removeSelected = this.removeSelected.bind(this);
+		this.onChanged = this.onChanged.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+	}
+
+	getValue(): string
+	{
+		return this.state.searchValue;
+	}
+
+	//show and hide list ui
+	setValue(value: string): void
+	{
+		if (value !== "")
+			this.setState({
+				showSuggestList: true,
+				groupListState: GroupListState.Column,
+				searchValue: value
+			})
+		else
+			this.setState({
+				showSuggestList: false,
+				groupListState: GroupListState.Normal,
+				searchValue: ""
+			})
+	}
+
+
+	selectColumn(groupe: string, item: string): void
+	{
+		console.log("item", groupe);
+		console.log("item", item);
+		this.setState({
+			groupListState: GroupListState.Opertor,
+			searchValue: item
+			//selectedOperators
+		})
+	}
+
+	selectOperator(group: string, item: string): void
+	{
+		console.log("item", item);
+		console.log("group", group);
+		debugger
+		this.setState({
+			groupListState: GroupListState.Value,
+		})
+
+	}
+
+	selectValue(group: string, item: string): void
+	{
+		console.log("item", item);
+		console.log("group", group);
+		// let filterItems = new FilterItem("", false, this.state.selectedOperators.operator, this.state.selectedOperators.name)
+		// console.log(filterItems)
+		// this.setState({ 
+		// 	filterItems
+		// })
+	}
+
+	removeSelected(text: string): void
+	{
+		let selectedArray = [...this.state.filterItems];
+		selectedArray = selectedArray.filter(item => item.column !== text)
+		this.setState({
+			filterItems: selectedArray
+		})
+	}
+
+	private onChanged = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> =>
+	{
+		await this.setValue(e.target.value);
+		if (this.props.onChanged)
+			this.props.onChanged();
+	}
+
+	override render()
+	{
+		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
+							// id={this.props.id}
+							value={this.state.searchValue}
+							onChange={this.onChanged}
+							type="text"
+							className={Styles.ns_input}
+							placeholder={this.props.placeholder}
+						/>
+						{this.state.showSuggestList &&
+							<figure className={Styles.ns_input_close_icon}
+								onClick={() => this.setState({
+									showSuggestList: false,
+									groupListState: GroupListState.Normal,
+									searchValue: ""
+								})}
+							>
+								<img
+									src="https://static.namirasoft.com/image/concept/close/blue.svg"
+									alt="input-icon"
+									width={24}
+									height={24}
+								/>
+							</figure>
+						}
+					</div>
+					{
+						this.state.groupListState == GroupListState.Column &&
+						<NSGroupedList
+							onClick={this.selectColumn}
+							groups={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
+										}
+									})
+								}
+							})}
+						/>
+					}
+
+					{
+						this.state.groupListState == GroupListState.Opertor &&
+						<NSGroupedList
+							onClick={this.selectOperator}
+							groups={
+								[
+									{
+										name: "operators",
+										text: "Operators",
+										items:
+											FilterItemOperator.getAllByType(FilterItemColumnType.String).map((operator) =>			
+											{
+												return {
+													name: operator.name,
+													text: operator.name,
+												}
+
+											})
+									}
+								]
+
+							}
+						/>
+					}
+
+					{
+						this.state.groupListState == GroupListState.Value &&
+						<NSGroupedList
+							onClick={this.selectValue}
+							groups={
+								[{
+									name: "value",
+									text: "Value",
+									items: 
+									this.props.getData(this.state.searchValue).map((data) =>
+									{
+										return {
+											name: data,
+											text: data
+										}
+									})
+								}
+								]
+							}
+						/>
+					}
+
+
+				</div>
+				<div className={Styles.ns_selected_list_parent}>
+					{this.state.filterItems.map((item, index) =>
+						<NSFilterItem
+							item={item}
+							key={index}
+							removeSelected={() => this.removeSelected(item.column)}
+						/>
+					)
+					}
+				</div>
+
+			</>
+		);
+	}
 }

package/src/components/NSFilterBoxDialog.module.css

@@ -1,37 +1,37 @@
-.ns_dialog_holder {
-	background: #Fff;
-	width: 100%;
-	max-width: 358px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-	color: #141B5C;
-	gap: 16px;
-	z-index: 9;
-	padding: 16px;
-	border-radius: 8px;
-	border: solid 1px #A1A4B0;
-}
-
-.ns_dialog_close {
-	position: absolute;
-	top: 16px;
-	right: 16px;
-	background: none;
-	border: none;
-
-}
-
-.ns_dialog_title {}
-
-.ns_dialog_btn_container {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	gap: 16px;
-}
-.ns_dialog_btn_container button { 
-	width: 128px !important;
+.ns_dialog_holder {
+	background: #Fff;
+	width: 100%;
+	max-width: 358px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	color: #141B5C;
+	gap: 16px;
+	z-index: 9;
+	padding: 16px;
+	border-radius: 8px;
+	border: solid 1px #A1A4B0;
+}
+
+.ns_dialog_close {
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	background: none;
+	border: none;
+
+}
+
+.ns_dialog_title {}
+
+.ns_dialog_btn_container {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 16px;
+}
+.ns_dialog_btn_container button { 
+	width: 128px !important;
 }