namirasoft-site-react 1.3.202 → 1.3.203

package/src/components/NSTable.tsx

@@ -1,180 +1,193 @@
-"use client";
-
-import NSButton from './NSButton';
-import { NSBoxSearch } from './NSBoxSearch';
-import { NSPagination } from './NSPagination';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import Styles from './NSTable.module.css';
-import { Component } from 'react';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import React from "react";
-import { NSModal } from './NSModal';
-
-export interface INSTableProps<RowType> extends IBaseComponentProps
-{
-	columns: { [key: string]: string };
-	pageSize: number;
-	totalItems: number;
-	reload: (page: number) => void
-	getRowKey: (row: RowType, rowIndex: number) => string;
-	getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
-	getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
-	onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
-	onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
-	onChanged?: () => void;
-}
-
-export interface NSTableState<RowType>
-{
-	columns: { [key: string]: string };
-	rows: RowType[];
-	title?: string;
-	currentPage: number,
-	model: {
-		show: boolean;
-		description?: string;
-		columnName?: string;
-	}
-}
-
-export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
-{
-	private search?: React.RefObject<NSBoxSearch>;
-
-	constructor(props: INSTableProps<RowType>)
-	{
-		super(props);
-		this.state = { columns: props.columns, rows: [], currentPage: 1, model: { show: false } };
-		this.search = React.createRef<NSBoxSearch>();
-		this.setColumns = this.setColumns.bind(this);
-		this.setRows = this.setRows.bind(this);
-		this.getSearchValue = this.getSearchValue.bind(this);
-		this.showModal = this.showModal.bind(this);
-		this.hideModal = this.hideModal.bind(this);
-		this.onPageChange = this.onPageChange.bind(this);
-	}
-	setColumns(columns: { [key: string]: string })
-	{
-		this.setState({ columns });
-	}
-	setRows(rows: RowType[])
-	{
-		this.setState({ rows });
-	}
-	getSearchValue(): string 
-	{
-		return this.search?.current?.getValue() ?? "";
-	}
-	showModal(description: string, columnName: string)
-	{
-		this.setState({ model: { show: true, description, columnName } });
-	}
-	hideModal()
-	{
-		this.setState({ model: { show: false } });
-	}
-	onPageChange = (page: number) =>
-	{
-		this.setState({ currentPage: page });
-		this.props.reload(page);
-	}
-	override render()
-	{
-		let modalTitle = (e: any) =>
-		{
-			this.setState({ title: e.currentTarget.innerText });
-		}
-		let column_keys = Object.keys(this.state.columns);
-		let getColumnAttributes = (column: string, columnIndex: number) => 
-		{
-			if (this.props.getColumnAttributes)
-				return this.props.getColumnAttributes(column, columnIndex);
-			return {};
-		}
-		let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
-		{
-			if (this.props.getCell)
-				return this.props.getCell(row, column, rowIndex, columnIndex);
-			return (row as any)[column];
-		}
-		let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
-		{
-			if (this.props.onRowClick)
-				this.props.onRowClick(e, row, rowIndex);
-		};
-		let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
-		{
-			let overided = false;
-			if (column === "check")
-			{
-				overided = true;
-			} else if (this.props.onCellClick)
-			{
-				let res = this.props.onCellClick(e, row, column, rowIndex, rowIndex);
-				if (res === undefined)
-				{
-					overided = true;
-				} else
-				{
-					overided = res;
-				}
-			}
-			if (!overided)
-			{
-				this.showModal(getCell(row, column, rowIndex, columnIndex), column);
-			}
-		};
-		return (
-			<div id={this.props.id}
-				className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
-				style={this.props.style}>
-				<NSBoxSearch title="Search" required={false} onChanged={this.props.onChanged} ref={this.search} />
-				<NSSpace size={NSSpaceSizeType.SMALL} />
-				<table className={Styles.ns_table} >
-					<thead className={Styles.ns_thead}>
-						<tr>
-							{column_keys.map(column_key => <th key={column_key} scope="col"
-								onClick={(e) => modalTitle(e)}>
-								{this.state.columns[column_key]}
-							</th>)}
-						</tr>
-					</thead>
-					<tbody className={Styles.ns_tbody}>
-						{
-							this.state.rows.map((row, rowIndex) =>
-								<tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
-									{
-										column_keys.map((column, columnIndex) => (
-											<td {...getColumnAttributes(column, columnIndex)} key={this.props.getRowKey(row, rowIndex)} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex); }}>
-												{getCell(row, column, rowIndex, columnIndex)}
-											</td>
-										))
-									}
-								</tr>)
-						}
-					</tbody >
-				</table>
-				<NSSpace size={NSSpaceSizeType.MICRO} />
-				<section className={Styles.ns_pagination_button}>
-					<NSPagination pageSize={this.props.pageSize} currentPage={this.state.currentPage} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
-					<NSSpace size={NSSpaceSizeType.SMALL} />
-					<div className={Styles.ns_button}>
-						<NSButton title='Export' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
-						<NSButton title='Refresh' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() =>
-						{
-							this.props.reload(this.state.currentPage);
-						}} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
-					</div>
-				</section>
-				<NSSpace size={NSSpaceSizeType.SMALL} />
-				<NSModal
-					show={this.state.model.show}
-					description={this.state.model.description}
-					onClose={() => { this.hideModal(); }}
-					title={this.state.title}
-					column={this.state.model.columnName}
-				/>
-			</div >
-		)
-	}
+"use client";
+
+import NSButton from './NSButton';
+import { NSBoxSearch } from './NSBoxSearch';
+import { NSPagination } from './NSPagination';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import Styles from './NSTable.module.css';
+import { Component } from 'react';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import React from "react";
+import { NSModal } from './NSModal';
+
+export interface INSTableProps<RowType> extends IBaseComponentProps
+{
+	columns: { [key: string]: string };
+	pageSize: number;
+	totalItems: number;
+	reload: (page: number) => void
+	getRowKey: (row: RowType, rowIndex: number) => string;
+	getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
+	getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
+	onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
+	onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
+	onChanged?: () => void;
+}
+
+export interface NSTableState<RowType>
+{
+	columns: { [key: string]: string };
+	rows: RowType[] | null;
+	title?: string;
+	currentPage: number,
+	model: {
+		show: boolean;
+		description?: string;
+		columnName?: string;
+	}
+}
+
+export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
+{
+	private search?: React.RefObject<NSBoxSearch>;
+
+	constructor(props: INSTableProps<RowType>)
+	{
+		super(props);
+		this.state = { columns: props.columns, rows: null, currentPage: 1, model: { show: false } };
+		this.search = React.createRef<NSBoxSearch>();
+		this.setColumns = this.setColumns.bind(this);
+		this.setRows = this.setRows.bind(this);
+		this.getSearchValue = this.getSearchValue.bind(this);
+		this.showModal = this.showModal.bind(this);
+		this.hideModal = this.hideModal.bind(this);
+		this.onPageChange = this.onPageChange.bind(this);
+	}
+	setColumns(columns: { [key: string]: string })
+	{
+		this.setState({ columns });
+	}
+	setRows(rows: RowType[])
+	{
+		this.setState({ rows });
+	}
+	getSearchValue(): string 
+	{
+		return this.search?.current?.getValue() ?? "";
+	}
+	showModal(description: string, columnName: string)
+	{
+		this.setState({ model: { show: true, description, columnName } });
+	}
+	hideModal()
+	{
+		this.setState({ model: { show: false } });
+	}
+	onPageChange = (page: number) =>
+	{
+		this.setState({ currentPage: page });
+		this.props.reload(page);
+	}
+	override render()
+	{
+		let modalTitle = (e: any) =>
+		{
+			this.setState({ title: e.currentTarget.innerText });
+		}
+		let column_keys = Object.keys(this.state.columns);
+		let getColumnAttributes = (column: string, columnIndex: number) => 
+		{
+			if (this.props.getColumnAttributes)
+				return this.props.getColumnAttributes(column, columnIndex);
+			return {};
+		}
+		let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
+		{
+			if (this.props.getCell)
+				return this.props.getCell(row, column, rowIndex, columnIndex);
+			return (row as any)[column];
+		}
+		let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
+		{
+			if (this.props.onRowClick)
+				this.props.onRowClick(e, row, rowIndex);
+		};
+		let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
+		{
+			let overided = false;
+			if (column === "check")
+			{
+				overided = true;
+			} else if (this.props.onCellClick)
+			{
+				let res = this.props.onCellClick(e, row, column, rowIndex, rowIndex);
+				if (res === undefined)
+				{
+					overided = true;
+				} else
+				{
+					overided = res;
+				}
+			}
+			if (!overided)
+			{
+				this.showModal(getCell(row, column, rowIndex, columnIndex), column);
+			}
+		};
+		let content;
+		if (this.state.rows == null)
+		{
+			// todo
+			content = <></>
+		}
+		else if (this.state.rows.length == 0)
+		{
+			// todo
+			content = <></>
+		}
+		else
+		{
+			content = this.state.rows.map((row, rowIndex) =>
+				<tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
+					{
+						column_keys.map((column, columnIndex) => (
+							<td {...getColumnAttributes(column, columnIndex)} key={this.props.getRowKey(row, rowIndex)} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex); }}>
+								{getCell(row, column, rowIndex, columnIndex)}
+							</td>
+						))
+					}
+				</tr>)
+		}
+		return (
+			<div id={this.props.id}
+				className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
+				style={this.props.style}>
+				<NSBoxSearch title="Search" required={false} onChanged={this.props.onChanged} ref={this.search} />
+				<NSSpace size={NSSpaceSizeType.SMALL} />
+				<table className={Styles.ns_table} >
+					<thead className={Styles.ns_thead}>
+						<tr>
+							{column_keys.map(column_key => <th key={column_key} scope="col"
+								onClick={(e) => modalTitle(e)}>
+								{this.state.columns[column_key]}
+							</th>)}
+						</tr>
+					</thead>
+					<tbody className={Styles.ns_tbody}>
+						{content}
+					</tbody >
+				</table>
+				<NSSpace size={NSSpaceSizeType.MICRO} />
+				<section className={Styles.ns_pagination_button}>
+					<NSPagination pageSize={this.props.pageSize} currentPage={this.state.currentPage} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
+					<NSSpace size={NSSpaceSizeType.SMALL} />
+					<div className={Styles.ns_button}>
+						<NSButton title='Export' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
+						<NSButton title='Refresh' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() =>
+						{
+							this.props.reload(this.state.currentPage);
+						}} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
+					</div>
+				</section>
+				<NSSpace size={NSSpaceSizeType.SMALL} />
+				<NSModal
+					show={this.state.model.show}
+					description={this.state.model.description}
+					onClose={() => { this.hideModal(); }}
+					title={this.state.title}
+					column={this.state.model.columnName}
+				/>
+			</div >
+		);
+	}
 }

package/src/components/NSTitle.module.css

@@ -1,16 +1,16 @@
-.ns_title {
-	font-size: 24px;
-	font-weight: 700;
-	line-height: normal;
-	color: inherit;
-	margin-bottom: 16px;
-	width: 100%;
-	text-align: center;
-	font-family: inherit;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_title {
-		font-size: 32px;
-	}
+.ns_title {
+	font-size: 24px;
+	font-weight: 700;
+	line-height: normal;
+	color: inherit;
+	margin-bottom: 16px;
+	width: 100%;
+	text-align: center;
+	font-family: inherit;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_title {
+		font-size: 32px;
+	}
 }

package/src/components/NSTitle.tsx

@@ -1,20 +1,20 @@
-import Styles from './NSTitle.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSTitleProps extends IBaseComponentProps
-{
-	title: string;
-}
-
-export function NSTitle(props: INSTitleProps)
-{
-	return (
-		<h2
-			id={props.id}
-			className={`${Styles.ns_title} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			{props.title}
-		</h2>
-	);
+import Styles from './NSTitle.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSTitleProps extends IBaseComponentProps
+{
+	title: string;
+}
+
+export function NSTitle(props: INSTitleProps)
+{
+	return (
+		<h2
+			id={props.id}
+			className={`${Styles.ns_title} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.title}
+		</h2>
+	);
 }

package/src/components/NSVerification.module.css

@@ -1,23 +1,23 @@
-.ns_verification_container {
-    background-color: #FFF;
-    border: 1px solid #A1A4B0;
-    backdrop-filter: blur(5px);
-    border-radius: 8px;
-    width: 100%;
-    max-width: 594px;
-    padding: 16px;
-    color: #141B5C !important;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    align-items: center;
-}
-
-.ns_verification_container p{
-    text-align: center;
-}
-
-.ns_verification_vector{
-    width: 224px;
-    height: 224px;
+.ns_verification_container {
+    background-color: #FFF;
+    border: 1px solid #A1A4B0;
+    backdrop-filter: blur(5px);
+    border-radius: 8px;
+    width: 100%;
+    max-width: 594px;
+    padding: 16px;
+    color: #141B5C !important;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+}
+
+.ns_verification_container p{
+    text-align: center;
+}
+
+.ns_verification_vector{
+    width: 224px;
+    height: 224px;
 }

package/src/components/NSVerification.tsx

@@ -1,42 +1,42 @@
-import React, { useState } from "react";
-import vector from '../assets/images/verify.png'
-import { IBaseComponentProps, IImageProps } from '../main';
-import NSBoxOTP from './NSBoxOTP';
-import Styles from './NSVerification.module.css'
-
-interface INSVerificationProps extends IBaseComponentProps {
-    verificationType : string;
-    onChanged ?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    image ?: IImageProps;
-}
-
-
-
-function NSVerification(props:INSVerificationProps) {
-    const [values, setValue] = useState<string>('')
-
-    function onChanged(event: React.ChangeEvent<HTMLInputElement>): string | undefined
-	{
-		setValue(prevValues => [...prevValues , event.target.value].join(''));
-		if (props.onChanged)
-			props.onChanged(event);
-        console.log(values);
-        return (values);
-	}
-    return (
-        <div 
-            className={`${Styles.ns_verification_container} ${props.classList?.join(" ")}`}
-	    	style={props.style}
-            >
-            <img 
-            src={props.image?.src ?? vector} 
-            alt={props.image?.alt ?? 'verification vector'} 
-            className={Styles.ns_verification_vector}
-            />
-            <p>Please enter code sent to {props.verificationType}</p>
-            <NSBoxOTP onChanged={onChanged}/>
-        </div>
-    );
-}
-
+import React, { useState } from "react";
+import vector from '../assets/images/verify.png'
+import { IBaseComponentProps, IImageProps } from '../main';
+import NSBoxOTP from './NSBoxOTP';
+import Styles from './NSVerification.module.css'
+
+interface INSVerificationProps extends IBaseComponentProps {
+    verificationType : string;
+    onChanged ?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    image ?: IImageProps;
+}
+
+
+
+function NSVerification(props:INSVerificationProps) {
+    const [values, setValue] = useState<string>('')
+
+    function onChanged(event: React.ChangeEvent<HTMLInputElement>): string | undefined
+	{
+		setValue(prevValues => [...prevValues , event.target.value].join(''));
+		if (props.onChanged)
+			props.onChanged(event);
+        console.log(values);
+        return (values);
+	}
+    return (
+        <div 
+            className={`${Styles.ns_verification_container} ${props.classList?.join(" ")}`}
+	    	style={props.style}
+            >
+            <img 
+            src={props.image?.src ?? vector} 
+            alt={props.image?.alt ?? 'verification vector'} 
+            className={Styles.ns_verification_vector}
+            />
+            <p>Please enter code sent to {props.verificationType}</p>
+            <NSBoxOTP onChanged={onChanged}/>
+        </div>
+    );
+}
+
 export default NSVerification;

package/src/index.tsx

@@ -1,8 +1,8 @@
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import { App } from './App';
-
-const root = ReactDOM.createRoot(
-    document.getElementById('root') as HTMLElement
-);
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { App } from './App';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('root') as HTMLElement
+);
 root.render(<App />);