namirasoft-site-react 1.3.149 → 1.3.151

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.149",
+    "version": "1.3.151",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -22,13 +22,13 @@
     },
     "dependencies": {
         "@types/node": "^20.12.12",
-        "@types/react": "^18.3.2",
+        "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "antd": "^5.17.3",
         "bootstrap": "^5.3.3",
         "copyfiles": "^2.4.1",
         "link-react": "^3.0.0",
-        "namirasoft-api-link": "^1.3.9",
+        "namirasoft-api-link": "^1.3.10",
         "namirasoft-core": "^1.3.34",
         "path-browserify": "^1.0.1",
         "react": "^18.3.1",
@@ -36,7 +36,7 @@
         "react-bootstrap": "^2.10.2",
         "react-dom": "^18.3.1",
         "react-phone-input-2": "^2.15.1",
-        "react-phone-number-input": "^3.4.1",
+        "react-phone-number-input": "^3.4.3",
         "react-router-dom": "^6.23.1",
         "react-scripts": "5.0.1"
     },

package/src/App.tsx

@@ -1,191 +1,86 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSLayoutAction } from './components/NSLayoutAction';
-import { NSFilterBox } from './components/NSFilterBox';
-import { FilterItemColumnType } from 'namirasoft-core';
-
-const actions = [
-	{
-		group: "test-1",
-		items: [
-			{
-				id: "1",
-				menu_item: "View",
-				handler()
-				{
-					console.log("View")
-				},
-				isActive()
-				{
-					return true
-				}
-			},
-			{
-				id: "2",
-				menu_item: "View History",
-				handler()
-				{
-					console.log("View History")
-				},
-				isActive()
-				{
-					return true
-				}
-			},
-			{
-				id: "3",
-				menu_item: "Edit",
-				handler()
-				{
-					console.log("Edit")
-				},
-				isActive()
-				{
-					return true
-				}
-			},
-			{
-				id: "4",
-				menu_item: "Delete",
-				handler()
-				{
-					console.log("Delete")
-				},
-				isActive()
-				{
-					return true
-				}
-			},
-		]
-	}
-]
+import { NSBoxTextArea, NSTable } from './main';
+import { useRef } from 'react';
 
+export function App()
+{
 
-const suggest_items = [
-	{
-		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
-			},
-		]
+	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"
 	},
 	{
-		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: 2,
+		project: "Namirasoft Account",
+		level: "Debug",
+		message: "Lorem ipsum dolor sit amet, consetetur ",
+		cent: "24",
+		status: "Done"
 	},
 	{
-		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
-			},
-		]
-	},
+		id: 3,
+		project: "Namirasoft Account",
+		level: "Debug",
+		message: "Lorem ipsum dolor sit amet, consetetur ",
+		cent: "24",
+		status: "Done"
+	}
+	]
+	interface App
 	{
-		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()
-{
+		id: number,
+		project: string,
+		level: string,
+		message: string,
+		cent: string,
+		status: string
+	}
+	function getCell(row: App, column: string): any
+	{
+		return (row as any)[column];
+	}
+	function getRows(page: number): void
+	{
+		console.log(page);
+	}
+	function onChange(): void
+	{ }
 
 	return (
 		<>
-			<NSLayoutAction
-				notifications={[]}
-				actions={actions}
-				title='Test2 test2'
-				description='Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem '
-				scope='Namirasoft Account Console'
-				logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png'
-			>
-				<NSFilterBox
-					tables={suggest_items}
-					placeholder='placeholder' />
-			</NSLayoutAction>
+			<NSTable
+				ref={table}
+				columns={columns}
+				rows={rows}
+				getCell={getCell}
+				getColumnAttributes={() => { return {} }}
+				getRowKey={row => row.id.toString()}
+				onChanged={onChange}
+				pageSize={3}
+				totalItems={100}
+				getRows={getRows}
+			/>
+			<NSBoxTextArea
+				rows={10}
+				cols={24}
+				title='Description'
+				placeholder=''
+				required={false}
+			/>
 		</>
 	);
 }

package/src/components/NSBox.module.css

@@ -69,7 +69,7 @@
 
 @media only screen and (min-width: 380px) {
 	.ns_input_phone_parent input {
-		width: 206px !important;
+		width: 272px !important;
 	}
 }
 

package/src/components/NSBoxDate.module.css

@@ -1,7 +1,7 @@
 .ns_input_parent {
 	display: flex;
 	flex-direction: column;
-	width: 206px;
+	width: 272px;
 	color: #141B5C;
 	position: relative;
 	max-width: 100%;

package/src/components/NSBoxTextArea.module.css

@@ -0,0 +1,38 @@
+.ns_text_area_parent {
+	display: flex;
+	flex-direction: column;
+	width: fit-content;
+	color: #141B5C;
+	position: relative;
+	justify-content: center;
+	width: 100%;
+	max-width: 560px;
+}
+
+.ns_text_area_container {
+	display: flex;
+	align-items: center;
+	position: relative;
+	width: 100%;
+}
+
+.ns_text_area_icon_container {
+	margin: 0 !important;
+	position: absolute;
+	right: 12px;
+	top: 10px;
+}
+
+.ns_text_area {
+	border-radius: 8px;
+	padding: 10px 12px 10px 12px;
+	font-size: 16px;
+	font-weight: 400;
+	border: 1px solid rgba(0, 0, 0, 1) !important;
+	width: 100%;
+}
+
+.ns_text_area_title {
+	font-size: 16px;
+	font-weight: 400;
+}

package/src/components/NSBoxTextArea.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBoxTextArea.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { Validator } from "../Validator";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+
+export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: () => void;
+	placeholder?: string;
+	cols: number;
+	rows: number;
+}
+
+export interface INSBoxTextAreaState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTextAreaState>
+{
+	constructor(props: INSBoxTextAreaProps)
+	{
+		super(props);
+		this.state = { value: props.defaultValue ?? "" };
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+		// this.onChanged = this.onChanged.bind(this);
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props) &&
+			Validator.getErrorString(this.props.title, this.state.value, this.props)
+		);
+	}
+	getValue(): string
+	{
+		let error = this.getError();
+		if (error)
+		{
+			this.setState({ error });
+			throw new Error(error);
+		}
+		return this.state.value;
+
+	}
+	setValue(value: string): void
+	{
+		this.setState({ value });
+	}
+	// private onChanged = async (e: React.ChangeEventHandler<HTMLTextAreaElement>): Promise<void> =>
+	// {
+	// 	await this.setValue(e.value);
+	// 	if (this.props.onChanged)
+	// 		this.props.onChanged();
+	// }
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+					<span className={Styles.ns_text_area_title}> {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title} </span>
+					<div className={Styles.ns_text_area_container}>
+						<figure className={Styles.ns_text_area_icon_container}>
+							<img
+								src="https://static.namirasoft.com/image/concept/magnifier/blue.svg"
+								alt="input-icon"
+								width={24}
+								height={24}
+							/>
+						</figure>
+						<textarea
+							id={this.props.id}
+							value={this.state.value}
+							className={Styles.ns_text_area}
+							placeholder={this.props.placeholder}
+							rows={this.props.rows}
+							cols={this.props.cols}
+						/>
+
+
+					</div>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSFilterBox.tsx

@@ -20,6 +20,7 @@ interface INSFilterBoxProps extends IBaseComponentProps
 			type: FilterItemColumnType
 		}[];
 	}[];
+	getData: (column: string) => string[];
 }
 
 interface INSFilterBoxState
@@ -70,6 +71,8 @@ export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
 			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);
@@ -81,6 +84,7 @@ export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
 		return this.state.searchValue;
 	}
 
+	//show and hide list ui
 	setValue(value: string): void
 	{
 		if (value !== "")
@@ -91,21 +95,46 @@ export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
 			})
 		else
 			this.setState({
-				showSuggestList: false
+				showSuggestList: false,
+				groupListState: GroupListState.Normal,
+				searchValue: ""
 			})
 	}
 
 
 	selectColumn(groupe: string, item: string): void
 	{
-		console.log(item);
-		let columns = this.props.tables.filter((table) => table.name === groupe)
+		console.log("item", groupe);
+		console.log("item", item);
 		this.setState({
-			selectedColumns: columns,
-			groupListState: GroupListState.Opertor
+			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];
@@ -139,7 +168,7 @@ export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
 						<input
 							// id={this.props.id}
 							value={this.state.searchValue}
-							onChange={(e) => this.onChanged(e)}
+							onChange={this.onChanged}
 							type="text"
 							className={Styles.ns_input}
 							placeholder={this.props.placeholder}
@@ -148,6 +177,7 @@ export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
 							<figure className={Styles.ns_input_close_icon}
 								onClick={() => this.setState({
 									showSuggestList: false,
+									groupListState: GroupListState.Normal,
 									searchValue: ""
 								})}
 							>
@@ -185,44 +215,49 @@ export class NSFilterBox extends Component<INSFilterBoxProps, INSFilterBoxState>
 					{
 						this.state.groupListState == GroupListState.Opertor &&
 						<NSGroupedList
+							onClick={this.selectOperator}
 							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,
-											}
-										})
+								[
+									{
+										name: "operators",
+										text: "Operators",
+										items:
+											FilterItemOperator.getAllByType(FilterItemColumnType.String).map((operator) =>			
+											{
+												return {
+													name: operator.name,
+													text: operator.name,
+												}
+
+											})
 									}
-								}
-								)
+								]
+
 							}
-							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)
-							}}
+							onClick={this.selectValue}
+							groups={
+								[{
+									name: "value",
+									text: "Value",
+									items: 
+									this.props.getData(this.state.searchValue).map((data) =>
+									{
+										return {
+											name: data,
+											text: data
+										}
+									})
+								}
+								]
+							}
 						/>
-					} */}
+					}
 
 
 				</div>

package/src/components/NSGroupedList.module.css

@@ -5,7 +5,7 @@
 	border: solid 1px #B2BBD9;
 	background-color: #fff;
 	padding-bottom: 16px;
-	height: 250px;
+	height: 360px;
 	overflow: auto;
 }
 

package/src/components/NSGroupedList.tsx

@@ -19,9 +19,7 @@ interface INSGroupedListProps extends IBaseComponentProps
 }
 
 interface INSGroupedListState
-{
-
-}
+{ }
 
 class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState>
 {
@@ -31,13 +29,13 @@ class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState>
 			<div className={Styles.ns_group_list_parent}>
 				{this.props.groups.map((group, index) =>
 					<ul key={index} className={Styles.ns_group_list}>
-						<span className={Styles.ns_group_category}> {group.name} </span>
+						<span className={Styles.ns_group_category}> {group.text} </span>
 						{
 							group.items.map((item, index) =>
 								<li key={index} onClick={() => this.props.onClick(group.name, item.name)}>
 									<div className={Styles.ns_group_item}>
 										<span>
-											{item.name} {" "}
+											{item.text} {" "}
 											{group.sign && <span>  {group.sign} </span>}
 										</span>
 										{

package/src/components/NSLayoutAction.tsx

@@ -47,9 +47,6 @@ export function NSLayoutAction(props: INSLayoutActionProps)
 						onClose={() => setState({ show: false })}
 					/>
 				</div>
-
-
-
 				<div className={Styles.ns_actions_hodler}>
 					{filtered_actions.map((action) =>
 						<NSActionMenu
@@ -59,7 +56,6 @@ export function NSLayoutAction(props: INSLayoutActionProps)
 						/>
 					)}
 				</div>
-
 			</div>
 			<NSSpace size={NSSpaceSizeType.SMALL} />
 			{/* Mobile  */}

package/src/components/NSPanel.module.css

@@ -9,6 +9,7 @@
     margin: 0 auto;
     border: 1px solid rgba(161, 164, 176, 1);
     box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+    justify-content: center;
 }
 
 .ns_panel_column {