namirasoft-site-react 1.3.177 → 1.3.178

package/src/components/NSTable.module.css

@@ -1,166 +1,166 @@
-.ns_table {
-    display: flex;
-    flex-direction: column;
-    color: rgba(20, 27, 92, 1);
-}
-
-.ns_search_input {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    position: relative;
-    z-index: -1;
-}
-
-.ns_table thead {
-    clip: rect(0 0 0 0);
-    position: fixed;
-}
-
-.ns_table tr {
-    border-radius: 8px;
-    padding: 16px;
-    display: block;
-    background-color: rgba(255, 255, 255, 1);
-    margin: 24px 0;
-    transition: all 0.2s ease-in-out;
-}
-
-.ns_table td {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    padding: 8px 0;
-    font-size: 16px;
-    justify-content: left;
-    align-items: center;
-}
-
-.ns_table td::before {
-    content: attr(data-label);
-    font-weight: bold;
-    float: left;
-	min-width: 30%;
-}
-
-/* Button Group  */
-.ns_pagination_button {
-    display: flex;
-    flex-direction: column;
-}
-
-.ns_button {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.ns_modal a {
-    float: right;
-}
-
-.modal img {
-    width: 32px;
-    height: 32px;
-    right: 0;
-}
-
-@media screen and (min-width: 768px) {
-    .ns_table {
-        color: #000000;
-    }
-
-    .ns_table thead {
-        position: static;
-        background-color: rgba(20, 27, 92, 1);
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-    }
-
-    .ns_table tbody {
-        background-color: rgba(255, 255, 255, 1);
-    }
-
-    .ns_table tr {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
-        padding: 12px 16px;
-        margin: 0;
-        border-radius: 0;
-        border-bottom: 1px solid rgba(20, 27, 92, 0.3);
-        background-color: transparent;
-        align-items: center;
-    }
-
-    .ns_table tr:hover {
-        background-color: rgba(20, 27, 92, 0.5);
-        color: white;
-    }
-
-    .ns_table td {
-        text-align: left;
-        display: flex;
-        align-items: flex-start;
-        padding: 0;
-        margin: 0;
-    }
-
-    .ns_table th {
-        font-size: 16px;
-        font-weight: 300;
-        color: #ffffff;
-        margin: 0;
-        padding: 0;
-    }
-	
-    .ns_table td::before {
-        content: "";
-        float: left;
-        font-weight: bold;
-		min-width: unset;
-    }
-
-    /* Button Group  */
-    .ns_pagination_button {
-        display: flex;
-        flex-direction: row;
-        padding: 16px 0;
-    }
-
-    .ns_button {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        gap: 24px;
-    }
-}
-
-@media screen and (min-width: 1024px) {
-
-    .ns_table thead {
-        font-size: 24px;
-    }
-
-    .ns_table tr {
-        font-size: 24px;
-    }
-
-    /* Button Group  */
-    .ns_pagination_button {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        padding: 16px 0;
-    }
-}
-
-.ns_table th {
-    word-break: break-all;
-}
-
-.ns_table td {
-    word-break: break-all;
+.ns_table {
+    display: flex;
+    flex-direction: column;
+    color: rgba(20, 27, 92, 1);
+}
+
+.ns_search_input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: -1;
+}
+
+.ns_table thead {
+    clip: rect(0 0 0 0);
+    position: fixed;
+}
+
+.ns_table tr {
+    border-radius: 8px;
+    padding: 16px;
+    display: block;
+    background-color: rgba(255, 255, 255, 1);
+    margin: 24px 0;
+    transition: all 0.2s ease-in-out;
+}
+
+.ns_table td {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    padding: 8px 0;
+    font-size: 16px;
+    justify-content: left;
+    align-items: center;
+}
+
+.ns_table td::before {
+    content: attr(data-label);
+    font-weight: bold;
+    float: left;
+	min-width: 30%;
+}
+
+/* Button Group  */
+.ns_pagination_button {
+    display: flex;
+    flex-direction: column;
+}
+
+.ns_button {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ns_modal a {
+    float: right;
+}
+
+.modal img {
+    width: 32px;
+    height: 32px;
+    right: 0;
+}
+
+@media screen and (min-width: 768px) {
+    .ns_table {
+        color: #000000;
+    }
+
+    .ns_table thead {
+        position: static;
+        background-color: rgba(20, 27, 92, 1);
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
+
+    .ns_table tbody {
+        background-color: rgba(255, 255, 255, 1);
+    }
+
+    .ns_table tr {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+        padding: 12px 16px;
+        margin: 0;
+        border-radius: 0;
+        border-bottom: 1px solid rgba(20, 27, 92, 0.3);
+        background-color: transparent;
+        align-items: center;
+    }
+
+    .ns_table tr:hover {
+        background-color: rgba(20, 27, 92, 0.5);
+        color: white;
+    }
+
+    .ns_table td {
+        text-align: left;
+        display: flex;
+        align-items: flex-start;
+        padding: 0;
+        margin: 0;
+    }
+
+    .ns_table th {
+        font-size: 16px;
+        font-weight: 300;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+    }
+	
+    .ns_table td::before {
+        content: "";
+        float: left;
+        font-weight: bold;
+		min-width: unset;
+    }
+
+    /* Button Group  */
+    .ns_pagination_button {
+        display: flex;
+        flex-direction: row;
+        padding: 16px 0;
+    }
+
+    .ns_button {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: 24px;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+
+    .ns_table thead {
+        font-size: 24px;
+    }
+
+    .ns_table tr {
+        font-size: 24px;
+    }
+
+    /* Button Group  */
+    .ns_pagination_button {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        padding: 16px 0;
+    }
+}
+
+.ns_table th {
+    word-break: break-all;
+}
+
+.ns_table td {
+    word-break: break-all;
 }

package/src/components/NSTable.tsx

@@ -1,172 +1,172 @@
-"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 };
-	rows: RowType[];
-	pageSize: number;
-	totalItems: number;
-	getRows: (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: props.rows, currentPage: 1, model: { show: false } };
-		this.search = React.createRef<NSBoxSearch>();
-	}
-	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.getRows(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={() => { }} 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 };
+	rows: RowType[];
+	pageSize: number;
+	totalItems: number;
+	getRows: (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: props.rows, currentPage: 1, model: { show: false } };
+		this.search = React.createRef<NSBoxSearch>();
+	}
+	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.getRows(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={() => { }} 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 >
+		)
+	}
 }