namirasoft-site-react 1.3.140 → 1.3.141

package/dist/components/NSLayoutAction.js

@@ -12,9 +12,9 @@ export function NSLayoutAction(props) {
         show: false
     });
     const filtered_actions = props.actions.filter((action) => action.group);
-    return (_jsxs(NSLayout, Object.assign({}, props, { children: [_jsxs("div", { className: Styles.ns_action_bar_holder, children: [_jsxs("div", { className: `d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), _jsxs("button", { className: Styles.ns_info_container, onClick: () => setState({ show: true }), children: [_jsx("img", { src: 'https://static.namirasoft.com/image/concept/info/white-blue.svg', alt: 'info-icon', width: 24, height: 24 }), _jsx("span", { children: " Info " })] }), _jsx(NSModal, { show: state.show, description: props.description, title: props.title, onClose: () => setState({ show: false }) })] }), _jsxs("div", { className: `d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description && lines &&
-                                _jsxs(_Fragment, { children: [_jsx("p", { className: Styles.description, children: lines.map((line, index) => {
-                                                return _jsxs(_Fragment, { children: [line.trim(), index != lines.length - 1 && _jsx("br", {})] });
-                                            }) }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI })] })] }), _jsx("div", { className: Styles.ns_actions_hodler, children: filtered_actions.map((action) => _jsx(NSActionMenu, { group: action.group, items: action.items }, action.id)) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), props.children] })));
+    return (_jsxs(NSLayout, Object.assign({}, props, { children: [_jsxs("div", { className: Styles.ns_action_bar_holder, children: [_jsxs("div", { className: `d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), _jsxs("button", { className: Styles.ns_info_container, onClick: () => setState({ show: true }), children: [_jsx("img", { src: 'https://static.namirasoft.com/image/concept/info/white-blue.svg', alt: 'info-icon', width: 24, height: 24 }), _jsx("span", { children: " Info " })] }), _jsx(NSModal, { show: state.show, description: props.description, title: props.title, onClose: () => setState({ show: false }) })] }), _jsx("div", { className: Styles.ns_actions_hodler, children: filtered_actions.map((action) => _jsx(NSActionMenu, { group: action.group, items: action.items }, action.id)) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: `container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description && lines &&
+                        _jsxs(_Fragment, { children: [_jsx("p", { className: Styles.description, children: lines.map((line, index) => {
+                                        return _jsxs(_Fragment, { children: [line.trim(), index != lines.length - 1 && _jsx("br", {})] });
+                                    }) }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), props.children] })));
 }
 //# sourceMappingURL=NSLayoutAction.js.map

package/dist/components/NSLayoutAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSLayoutAction.js","sourceRoot":"","sources":["../../src/components/NSLayoutAction.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAkB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,UAAU,cAAc,CAAC,KAA2B;;IAEzD,IAAI,KAAK,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IACzE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB;QACvD,IAAI,EAAE,KAAK;KACX,CAAC,CAAA;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAGvE,OAAO,CACN,MAAC,QAAQ,oBAAK,KAAK,eAElB,eAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,aAE1C,eAAK,SAAS,EAAE,oBAAoB,MAAM,CAAC,2BAA2B,EAAE,aACvE,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE/C,kBAAQ,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,aACnF,cAAK,GAAG,EAAC,iEAAiE,EAAC,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACpH,oCAAmB,IACX,EAET,KAAC,OAAO,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GACvC,IACG,EAGN,eAAK,SAAS,EAAE,qBAAqB,MAAM,CAAC,0BAA0B,EAAE,aACvE,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE9C,KAAK,CAAC,WAAW,IAAI,KAAK;gCAC1B,8BACC,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAE9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gDAEzB,OAAO,8BACL,IAAI,CAAC,IAAI,EAAE,EACX,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,cAAM,IAClC,CAAA;4CACJ,CAAC,CAAC,GAEA,EACJ,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAI,IACrC,IAEC,EAEN,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAChC,KAAC,YAAY,IAEZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,IAFd,MAAM,CAAC,EAAE,CAGb,CACF,GACI,IAED,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACvC,KAAK,CAAC,QAAQ,KACL,CACX,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSLayoutAction.js","sourceRoot":"","sources":["../../src/components/NSLayoutAction.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAkB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,UAAU,cAAc,CAAC,KAA2B;;IAEzD,IAAI,KAAK,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IACzE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB;QACvD,IAAI,EAAE,KAAK;KACX,CAAC,CAAA;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAGvE,OAAO,CACN,MAAC,QAAQ,oBAAK,KAAK,eAElB,eAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,aAE1C,eAAK,SAAS,EAAE,oBAAoB,MAAM,CAAC,2BAA2B,EAAE,aACvE,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE/C,kBAAQ,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,aACnF,cAAK,GAAG,EAAC,iEAAiE,EAAC,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACpH,oCAAmB,IACX,EAET,KAAC,OAAO,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GACvC,IACG,EAIN,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAChC,KAAC,YAAY,IAEZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,IAFd,MAAM,CAAC,EAAE,CAGb,CACF,GACI,IAED,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EAExC,eAAK,SAAS,EAAE,+BAA+B,MAAM,CAAC,0BAA0B,EAAE,aACjF,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE9C,KAAK,CAAC,WAAW,IAAI,KAAK;wBAC1B,8BACC,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAE9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wCAEzB,OAAO,8BACL,IAAI,CAAC,IAAI,EAAE,EACX,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,cAAM,IAClC,CAAA;oCACJ,CAAC,CAAC,GAEA,EACJ,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAI,IACrC,IAEC,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACvC,KAAK,CAAC,QAAQ,KACL,CACX,CAAC;AACH,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.140",
+    "version": "1.3.141",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",

package/src/App.tsx

@@ -1,11 +1,8 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSBoxIPV4, NSTable, NSTabPage } from './main';
-import { useRef } from 'react';
 import { NSLayoutAction } from './components/NSLayoutAction';
-import { NSBoxIPV6 } from './components/NSBoxIPV6';
-import { NSBoxBoolean } from './components/NSBoxBoolean';
 import { NSFilterBox } from './components/NSFilterBox';
+import { FilterItemColumnType } from 'namirasoft-core';
 
 const actions = [
 	{
@@ -63,70 +60,118 @@ const actions = [
 	}
 ]
 
-export function App()
-{
 
-	let table = useRef<NSTable<App>>(null);
-	let columns = {
-		"id": "ID",
-		"project": "Project",
-		"level": "Level",
-		"message": "Message",
-		"cent": "Cent",
-		"status": "Status",
-	}
-	let rows = [{
-		id: 1,
-		project: "Namirasoft Account",
-		level: "Debug",
-		message: "Lorem ipsum dolor sit amet, consetetur ",
-		cent: "26",
-		status: "pending"
-	},
+const suggest_items = [
 	{
-		id: 2,
-		project: "Namirasoft Account",
-		level: "Debug",
-		message: "Lorem ipsum dolor sit amet, consetetur ",
-		cent: "24",
-		status: "Done"
+		name: "test-category-1",
+		text: "test-category-1",
+		columns: [
+			{
+				name: "item-id-test-1",
+				text: "item-title-test-1",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2",
+				text: "item-title-test-2",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2",
+				text: "item-title-test-2",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2",
+				text: "item-title-test-2",
+				type: FilterItemColumnType.String
+			},
+		]
 	},
 	{
-		id: 3,
-		project: "Namirasoft Account",
-		level: "Debug",
-		message: "Lorem ipsum dolor sit amet, consetetur ",
-		cent: "24",
-		status: "Done"
-	}
-	]
-	interface App
-	{
-		id: number,
-		project: string,
-		level: string,
-		message: string,
-		cent: string,
-		status: string
-	}
-	function getCell(row: App, column: string): any
+		name: "test-category-1",
+		text: "test-category-1",
+		columns: [
+			{
+				name: "item-id-test-1",
+				text: "item-title-test-1",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2",
+				text: "item-title-test-2",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2",
+				text: "item-title-test-2",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2",
+				text: "item-title-test-2",
+				type: FilterItemColumnType.String
+			},
+		]
+	},
 	{
-		return (row as any)[column];
-	}
-	function getRows(page: number): void
+		name: "test-category-1",
+		text: "test-category-2",
+		columns: [
+			{
+				name: "item-id-test-2-1",
+				text: "item-title-test-2-1",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2-2",
+				text: "item-title-test-2-1",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2-3",
+				text: "item-title-test-2-3",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-2-4",
+				text: "item-title-test-2-4",
+				type: FilterItemColumnType.String
+			},
+		]
+	},
 	{
-		console.log(page);
-	}
-	function onChange(): void
-	{ }
-	let content1 = () => <p>Content for Tab</p>;
-	let content2 = () => <p>Content for Tab</p>;
-	let content3 = () => <p>Content for Tab</p>;
-	const tabs = [
-		{ title: 'Information', getContent: content1 },
-		{ title: 'Price History', getContent: content2 },
-		{ title: 'Price Estimator', getContent: content3 }
-	];
+		name: "test-category-3",
+		text: "test-category-3",
+		columns: [
+			{
+				name: "item-id-test-3-1",
+				text: "item-title-test-3-1",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-3-2",
+				text: "item-title-test-3-2",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-3-3",
+				text: "item-title-test-3-3",
+				type: FilterItemColumnType.String
+			},
+			{
+				name: "item-id-test-3-4",
+				text: "item-title-test-3-4",
+				type: FilterItemColumnType.String
+			},
+		]
+	},
+]
+
+
+export function App()
+{
+
 	return (
 		<>
 			<NSLayoutAction
@@ -137,36 +182,9 @@ export function App()
 				scope='Namirasoft Account Console'
 				logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png'
 			>
-				<div>
-					<NSTable
-						ref={table}
-						columns={columns}
-						rows={rows}
-						getCell={getCell}
-						getColumnAttributes={() => { return {} }}
-						getRowKey={row => row.id.toString()}
-						onChanged={onChange}
-						pageSize={10}
-						totalItems={100}
-						getRows={getRows}
-					/>
-				</div>
-				<NSBoxIPV6
-					title='IPV6'
-					required={false}
-				/>
-
-				<NSBoxIPV4
-					title='IPV4'
-					required={false}
-				/>
-				<NSBoxBoolean
-					title='I4'
-					required={false}
-					name='salam '
-				/>
-				<NSTabPage tabs={tabs} />
-				<NSFilterBox />
+				<NSFilterBox
+					tables={suggest_items}
+					placeholder='placeholder' />
 			</NSLayoutAction>
 		</>
 	);

package/src/components/NSButtonRed.module.css

@@ -1,5 +1,5 @@
 .ns_button_red {
     background-color: #FF3F3F;
     box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-	color: #fff !important;
+	color: #fff;
 }

package/src/components/NSFilterBox.module.css

@@ -26,4 +26,14 @@
 	margin: 0 !important;
 	position: absolute;
 	right: 16px;
+	cursor: pointer;
+}
+
+
+.ns_selected_list_parent {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	max-width: 560px;
+	gap: 8px;
 }

package/src/components/NSFilterBox.tsx

@@ -1,20 +1,127 @@
 "use client"
 
-import { Component } from 'react';
-import { NSFilterBoxDialog } from './NSFilterBoxDialog';
+import React, { Component } from 'react';
 import Styles from './NSFilterBox.module.css'
-interface INSFilterBoxProps
-{
+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
+		}[];
+	}[];
 }
 
 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.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;
+	}
+
+	setValue(value: string): void
+	{
+		if (value !== "")
+			this.setState({
+				showSuggestList: true,
+				groupListState: GroupListState.Column,
+				searchValue: value
+			})
+		else
+			this.setState({
+				showSuggestList: false
+			})
+	}
+
+
+	selectColumn(groupe: string, item: string): void
+	{
+		console.log(item);
+		let columns = this.props.tables.filter((table) => table.name === groupe)
+		this.setState({
+			selectedColumns: columns,
+			groupListState: GroupListState.Opertor
+		})
+	}
+
+	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 (
@@ -31,28 +138,105 @@ export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
 						</figure>
 						<input
 							// id={this.props.id}
-							// value={this.state.value}
-							// onChange={this.onChanged}
+							value={this.state.searchValue}
+							onChange={(e) => this.onChanged(e)}
 							type="text"
 							className={Styles.ns_input}
-							placeholder={"this.props.placeholder"}
+							placeholder={this.props.placeholder}
 						/>
-						<figure className={Styles.ns_input_close_icon}>
-							<img
-								src="https://static.namirasoft.com/image/concept/close/blue.svg"
-								alt="input-icon"
-								width={24}
-								height={24}
-							/>
-						</figure>
+						{this.state.showSuggestList &&
+							<figure className={Styles.ns_input_close_icon}
+								onClick={() => this.setState({
+									showSuggestList: false,
+									searchValue: ""
+								})}
+							>
+								<img
+									src="https://static.namirasoft.com/image/concept/close/blue.svg"
+									alt="input-icon"
+									width={24}
+									height={24}
+								/>
+							</figure>
+						}
 					</div>
-				</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
+							groups={
+								FilterItemOperator.getAllByType(FilterItemColumnType.String).map((operator) => 
+								{
+									return {
+										name: this.state.selectedColumns[0].name,
+										text: this.state.selectedColumns[0].text,
+										sign: operator.sign,
+										operator_name: operator.name,
+										items: this.state.selectedColumns[0]?.columns?.map((column) =>
+										{
+											return {
+												name: column.name,
+												text: column.text,
+											}
+										})
+									}
+								}
+								)
+							}
+							onClick={() =>
+							{ 
+								this.setState({ 
+									groupListState: GroupListState.Value, 
+									selectedOperators: {...this.state.selectedColumns[0], operator: this.state.selectedOperators.operator }
+								})
+							}}
+						/>
+					}
+
+					{/* {
+						this.state.groupListState == GroupListState.Value &&
+						<NSGroupedList
+							onClick={() =>
+							{
+								let filterItems = new FilterItem("", false, this.state.selectedOperators.operator, this.state.selectedOperators.name)
+							}}
+						/>
+					} */}
 
-				<ul>
 
-				</ul>
-				<NSFilterBoxDialog
-					title='Edit Filter' />
+				</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.tsx

@@ -8,7 +8,8 @@ import { NSButtonRed } from './NSButtonRed';
 
 interface INSFilterBoxDialogProps extends IBaseComponentProps
 {
-	title: string
+	title: string;
+	onCloseDialog: () => void;
 }
 
 interface INSFilterBoxDialogState
@@ -22,7 +23,8 @@ export class NSFilterBoxDialog extends Component<INSFilterBoxDialogProps, INSFil
 	{
 		return (
 			<div className={Styles.ns_dialog_holder}>
-				<button className={Styles.ns_dialog_close}>
+				<button className={Styles.ns_dialog_close}
+					onClick={this.props.onCloseDialog}>
 					<img src="https://static.namirasoft.com/image/concept/close/blue.svg" alt="close-dialog" width={24} height={24} />
 				</button>
 				<h3 className={Styles.ns_dialog_title}>
@@ -64,7 +66,7 @@ export class NSFilterBoxDialog extends Component<INSFilterBoxDialogProps, INSFil
 
 					<NSButtonBlue
 						title='Cancel'
-						onClick={() => { }}
+						onClick={this.props.onCloseDialog}
 					/>
 				</div>
 			</div>

package/src/components/NSFilterItem.module.css

@@ -0,0 +1,24 @@
+.ns_selected_holder { 
+	position: relative;
+}
+.ns_selected_item_parent {
+	padding: 6px;
+	border: solid 1px #0377FF;
+	border-radius: 8px;
+	background-color: #fff;
+	color: #141B5C;
+	cursor: pointer;
+}
+
+.ns_selected_close_icon {
+	outline: none;
+	border: none;
+	background: none;
+	padding-top: 4px;
+	border-left: solid 1px #0377FF;
+}
+
+.ns_dialog_parent { 
+position: absolute;
+
+}

package/src/components/NSFilterItem.tsx

@@ -0,0 +1,72 @@
+import { Component } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSFilterItem.module.css'
+import { NSFilterBoxDialog } from './NSFilterBoxDialog';
+import { FilterItem } from 'namirasoft-core';
+
+interface INSFilterItemProps extends IBaseComponentProps
+{
+	item: FilterItem
+	removeSelected: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, text: string) => void
+}
+
+interface INSFilterItemState
+{
+	showDialog: boolean
+}
+
+export class NSFilterItem extends Component<INSFilterItemProps, INSFilterItemState>
+{
+	constructor(props: INSFilterItemProps)
+	{
+		super(props);
+		this.state = {
+			showDialog: false
+		}
+		this.onClsoeDialog = this.onClsoeDialog.bind(this);
+		this.onShowDialog = this.onShowDialog.bind(this);
+	}
+
+	onShowDialog()
+	{
+		this.setState({
+			showDialog: true
+		})
+	}
+
+	onClsoeDialog()
+	{
+		this.setState({
+			showDialog: false
+		})
+	}
+
+	override render()
+	{
+		return (
+			<div className={Styles.ns_selected_holder}>
+				<div className={Styles.ns_selected_item_parent}
+					onClick={this.onShowDialog}
+				>
+					<span>{ this.props.item.column} </span>
+					<button
+						className={Styles.ns_selected_close_icon}
+						onClick={(e) => this.props.removeSelected(e, this.props.item.column)}
+					>
+						<img src="https://static.namirasoft.com/image/concept/close/blue.svg" alt="close" width={24} height={24} />
+					</button>
+				</div>
+
+				{this.state.showDialog &&
+					<div className={Styles.ns_dialog_parent}>
+						<NSFilterBoxDialog
+							onCloseDialog={this.onClsoeDialog}
+							title='Edit Filter'
+
+						/>
+					</div>
+				}
+			</div>
+		);
+	}
+}