namirasoft-site-react 1.3.266 → 1.3.268

package/src/components/NSTable.tsx

@@ -1,183 +1,183 @@
-"use client";
-
-import NSButton from './NSButton';
-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';
-import { NSLoading } from './NSLoading';
-
-export interface INSTableProps<RowType> extends IBaseComponentProps
-{
-	columns: { [key: string]: string };
-	totalItems: number;
-	reload: (page: number, size: 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;
-	model: {
-		show: boolean;
-		description?: string;
-	}
-}
-
-export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
-{
-	NSPagination = React.createRef<NSPagination>();
-	constructor(props: INSTableProps<RowType>)
-	{
-		super(props);
-		this.state = { columns: props.columns, rows: null, model: { show: false } };
-		this.setColumns = this.setColumns.bind(this);
-		this.setRows = this.setRows.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[] | null)
-	{
-		this.setState({ rows });
-	}
-	showModal(description: string, title?: string)
-	{
-		this.setState({ model: { show: true, description }, title });
-	}
-	hideModal()
-	{
-		this.setState({ model: { show: false } });
-	}
-	onPageChange = (page: number, size: number) =>
-	{
-		this.props.reload(page, size);
-	}
-	override render()
-	{
-		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, columnIndex);
-				if (res === undefined)
-				{
-					overided = true;
-				} else
-				{
-					overided = res;
-				}
-			}
-			if (!overided)
-			{
-				this.showModal(getCell(row, column, rowIndex, columnIndex), this.state.columns[column]);
-			}
-		};
-		let content;
-		if (this.state.rows === null)
-		{
-			content = (
-				<div className={Styles.ns_table_loading}>
-					<NSLoading />
-				</div>
-			);
-		}
-		else if (this.state.rows.length === 0)
-		{
-			content = (
-				<div className={Styles.ns_table_no_data}>
-					<img src='https://static.namirasoft.com/image/concept/no_data/white.png' alt='No Data' />
-				</div>
-			);
-		}
-		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}>
-				<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">
-								{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 ref={this.NSPagination} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
-					<NSSpace size={NSSpaceSizeType.SMALL} />
-					<div className={Styles.ns_button}>
-						<NSButton title='Print' 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='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={() =>
-						{
-							if (this.NSPagination.current)
-								this.props.reload(this.NSPagination.current.getCurrentPage(), this.NSPagination.current.getPageSize());
-						}} 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}
-				/>
-			</div >
-		);
-	}
+"use client";
+
+import NSButton from './NSButton';
+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';
+import { NSLoading } from './NSLoading';
+
+export interface INSTableProps<RowType> extends IBaseComponentProps
+{
+	columns: { [key: string]: string };
+	totalItems: number;
+	reload: (page: number, size: 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;
+	model: {
+		show: boolean;
+		description?: string;
+	}
+}
+
+export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
+{
+	NSPagination = React.createRef<NSPagination>();
+	constructor(props: INSTableProps<RowType>)
+	{
+		super(props);
+		this.state = { columns: props.columns, rows: null, model: { show: false } };
+		this.setColumns = this.setColumns.bind(this);
+		this.setRows = this.setRows.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[] | null)
+	{
+		this.setState({ rows });
+	}
+	showModal(description: string, title?: string)
+	{
+		this.setState({ model: { show: true, description }, title });
+	}
+	hideModal()
+	{
+		this.setState({ model: { show: false } });
+	}
+	onPageChange = (page: number, size: number) =>
+	{
+		this.props.reload(page, size);
+	}
+	override render()
+	{
+		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, columnIndex);
+				if (res === undefined)
+				{
+					overided = true;
+				} else
+				{
+					overided = res;
+				}
+			}
+			if (!overided)
+			{
+				this.showModal(getCell(row, column, rowIndex, columnIndex), this.state.columns[column]);
+			}
+		};
+		let content;
+		if (this.state.rows === null)
+		{
+			content = (
+				<div className={Styles.ns_table_loading}>
+					<NSLoading />
+				</div>
+			);
+		}
+		else if (this.state.rows.length === 0)
+		{
+			content = (
+				<div className={Styles.ns_table_no_data}>
+					<img src='https://static.namirasoft.com/image/concept/no_data/white.png' alt='No Data' />
+				</div>
+			);
+		}
+		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}>
+				<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">
+								{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 ref={this.NSPagination} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
+					<NSSpace size={NSSpaceSizeType.SMALL} />
+					<div className={Styles.ns_button}>
+						<NSButton title='Print' 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='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={() =>
+						{
+							if (this.NSPagination.current)
+								this.props.reload(this.NSPagination.current.getCurrentPage(), this.NSPagination.current.getPageSize());
+						}} 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}
+				/>
+			</div >
+		);
+	}
 }

package/src/components/NSTag.module.css

@@ -1,45 +1,45 @@
-.ns_tag_container {
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    width: fit-content;
-    border-radius: 8px;
-    padding: 16px;
-    margin: 48px;
-}
-
-.ns_tag_title {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: left;
-}
-
-.ns_tag_title h2 {
-    color: #141B5C;
-    font-weight: 600;
-    font-size: 24px;
-    margin: 0;
-}
-
-.ns_tag_title h6 {
-    color: rgb(68, 182, 243);
-    font-weight: 600;
-    font-size: 16px;
-    margin: 0;
-}
-
-.ns_tag_input_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: left;
-    align-items: flex-start;
-    gap: 16px;
-}
-
-.ns_tag_input_group {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-
+.ns_tag_container {
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    width: fit-content;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 48px;
+}
+
+.ns_tag_title {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: left;
+}
+
+.ns_tag_title h2 {
+    color: #141B5C;
+    font-weight: 600;
+    font-size: 24px;
+    margin: 0;
+}
+
+.ns_tag_title h6 {
+    color: rgb(68, 182, 243);
+    font-weight: 600;
+    font-size: 16px;
+    margin: 0;
+}
+
+.ns_tag_input_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+.ns_tag_input_group {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+
 }

package/src/components/NSTag.tsx

@@ -1,50 +1,50 @@
-import { NSBoxString } from './NSBoxString';
-import NSButton from './NSButton';
-import Styles from './NSTag.module.css';
-
-function InputGroup()
-{
-    return (
-        <section className={Styles.ns_tag_input_container}>
-            <div className={Styles.ns_tag_input_group}>
-                <NSBoxString title='Key' required />
-                <NSBoxString title='Value' required />
-                <NSBoxString title='Option' required />
-                <NSButton
-                    title='Remove'
-                    onClick={() => { }}
-                    style={{
-                        backgroundColor: "transparent",
-                        border: "1px solid rgba(3, 119, 255, 1)",
-                        width: "145px",
-                        marginTop: "28px"
-                    }}
-                />
-            </div>
-        </section>
-    )
-}
-function NSTag()
-{
-    return (
-        <div className={Styles.ns_tag_container}>
-            <div className={Styles.ns_tag_title}>
-                <InputGroup />
-                <InputGroup />
-                <InputGroup />
-                <InputGroup />
-                <NSButton
-                    title='Add new tag'
-                    onClick={() => { }}
-                    style={{
-                        backgroundColor: "transparent",
-                        border: "1px solid rgba(3, 119, 255, 1)",
-                        width: "145px",
-                        marginTop: "24px"
-                    }} />
-            </div>
-        </div>
-    );
-}
-
+import { NSBoxString } from './NSBoxString';
+import NSButton from './NSButton';
+import Styles from './NSTag.module.css';
+
+function InputGroup()
+{
+    return (
+        <section className={Styles.ns_tag_input_container}>
+            <div className={Styles.ns_tag_input_group}>
+                <NSBoxString title='Key' required />
+                <NSBoxString title='Value' required />
+                <NSBoxString title='Option' required />
+                <NSButton
+                    title='Remove'
+                    onClick={() => { }}
+                    style={{
+                        backgroundColor: "transparent",
+                        border: "1px solid rgba(3, 119, 255, 1)",
+                        width: "145px",
+                        marginTop: "28px"
+                    }}
+                />
+            </div>
+        </section>
+    )
+}
+function NSTag()
+{
+    return (
+        <div className={Styles.ns_tag_container}>
+            <div className={Styles.ns_tag_title}>
+                <InputGroup />
+                <InputGroup />
+                <InputGroup />
+                <InputGroup />
+                <NSButton
+                    title='Add new tag'
+                    onClick={() => { }}
+                    style={{
+                        backgroundColor: "transparent",
+                        border: "1px solid rgba(3, 119, 255, 1)",
+                        width: "145px",
+                        marginTop: "24px"
+                    }} />
+            </div>
+        </div>
+    );
+}
+
 export default NSTag;

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;
 }