namirasoft-site-react 1.3.252 → 1.3.255

package/src/components/NSBoxTextArea.tsx

@@ -18,6 +18,7 @@ export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationPro
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxTextArea) => void;
+	onClicked?: (e: NSBoxTextArea) => void;
 	cols?: number;
 	rows?: number;
 }
@@ -53,15 +54,9 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
-			// throw new Error(error);
-			return '';
+			throw new Error(error);
 		}
 		return this.state.value;
-
 	}
 	setValue(value: string): void
 	{
@@ -84,7 +79,7 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style} onClick={this.state.isFullScreen ? () => { } : () => { }}>
+				<div id={this.props.id} className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style} onClick={this.state.isFullScreen ? () => { } : () => { }}>
 					<div className="d-flex justify-content-between align-items-center">
 						<span className={Styles.ns_input_title}>
 							{this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
@@ -118,17 +113,15 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
 							}}
 							cols={this.props.cols}
 							rows={this.props.rows}
-							id={this.props.id}
 							value={this.state.value}
 							className={Styles.ns_text_area}
 							placeholder={this.props.placeholder}
 							onChange={this.onChanged}
+							onClick={() => this.props.onClicked}
 						/>
-
-
 					</div>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxTime.tsx

@@ -15,6 +15,7 @@ export interface INSBoxTimeProps extends IBaseComponentProps, IValidationProps,
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxTime) => void;
+	onClicked?: (e: NSBoxTime) => void;
 }
 
 export interface INSBoxTimeState
@@ -47,10 +48,6 @@ export class NSBoxTime extends React.Component<INSBoxTimeProps, INSBoxTimeState>
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
@@ -71,20 +68,21 @@ export class NSBoxTime extends React.Component<INSBoxTimeProps, INSBoxTimeState>
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="time"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						step="2"
 						style={{ background: `url(${IconInputTime}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSPagination.tsx

@@ -1,154 +1,191 @@
-import { useRef, useState } from 'react';
+import { Component } from 'react';
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import { NSBoxEnum } from './NSBoxEnum';
 import Styles from './NSPagination.module.css';
+import React from "react";
 
 export interface INSPaginationProps extends IBaseComponentProps
 {
     totalItems: number;
-    currentPage: number;
     onPageChange: (page: number, size: number) => void;
 }
 
 interface INSPaginationState
 {
+    currentPage: number;
     pageSize: number;
 }
 
 let pageSizes = [25, 50, 100, 200, 500];
 
-export function NSPagination(props: INSPaginationProps)
+export class NSPagination extends Component<INSPaginationProps, INSPaginationState>
 {
-    const PageSize = useRef<NSBoxEnum>(null);
-
-    let [state, setState] = useState<INSPaginationState>({ pageSize: pageSizes[0] });
-    let pageSize = state.pageSize;
+    PageSize = React.createRef<NSBoxEnum>();
+    constructor(props: INSPaginationProps)
+    {
+        super(props);
+        this.state = { currentPage: 1, pageSize: pageSizes[0] };
+    }
+    getCurrentPage(): number
+    {
+        return this.state.currentPage;
+    }
+    getPageSize(): number
+    {
+        return this.state.pageSize;
+    }
+    override render()
+    {
+        let pageSize = this.state.pageSize;
 
-    const { totalItems, currentPage, onPageChange } = props;
-    const totalPages = Math.ceil(totalItems / pageSize);
-    const windowSize = 2;
-    const minPage = Math.max(2, currentPage - windowSize);
-    const maxPage = Math.min(currentPage + windowSize, totalPages - 1);
-    const current_min = Math.min(totalItems, (currentPage - 1) * pageSize + 1);
-    const current_max = Math.min(totalItems, currentPage * pageSize);
-    const pages = [];
+        const { totalItems, onPageChange } = this.props;
+        const totalPages = Math.ceil(totalItems / pageSize);
+        const windowSize = 2;
+        const minPage = Math.max(2, this.state.currentPage - windowSize);
+        const maxPage = Math.min(this.state.currentPage + windowSize, totalPages - 1);
+        const current_min = Math.min(totalItems, (this.state.currentPage - 1) * pageSize + 1);
+        const current_max = Math.min(totalItems, this.state.currentPage * pageSize);
+        const pages = [];
 
-    const pushPage = (page: number) =>
-    {
+        const pushPage = (page: number) =>
+        {
+            pages.push(
+                <div key={page} className={`${Styles.ns_select_number_parent}`}>
+                    <a
+                        href="#"
+                        className={`${Styles.ns_paginate_link} ${page === this.state.currentPage ? Styles.ns_select_number : ''}`}
+                        onClick={(e) =>
+                        {
+                            e.preventDefault();
+                            let currentPage = page;
+                            let pageSize = this.state.pageSize;
+                            this.setState({ currentPage, pageSize }, () =>
+                            {
+                                onPageChange(currentPage, pageSize);
+                            });
+                        }}
+                    >
+                        {page}
+                    </a>
+                </div>
+            );
+        };
+        //prev
         pages.push(
-            <div key={page} className={`${Styles.ns_select_number_parent}`}>
+            <div key="prev">
                 <a
                     href="#"
-                    className={`${Styles.ns_paginate_link} ${page === currentPage ? Styles.ns_select_number : ''}`}
                     onClick={(e) =>
                     {
                         e.preventDefault();
-                        onPageChange(page, state.pageSize);
+                        if (this.state.currentPage > 1)
+                        {
+                            let currentPage = this.state.currentPage - 1;
+                            let pageSize = this.state.pageSize;
+                            this.setState({ currentPage, pageSize }, () =>
+                            {
+                                onPageChange(currentPage, pageSize);
+                            });
+                        }
                     }}
                 >
-                    {page}
+                    <img
+                        style={{ margin: "0 8px 0 0" }}
+                        src="https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg"
+                        alt="left_vector"
+                        width={32}
+                        height={32}
+                    />
                 </a>
             </div>
         );
-    };
-    //prev
-    pages.push(
-        <div key="prev">
-            <a
-                href="#"
-                onClick={(e) =>
-                {
-                    e.preventDefault();
-                    if (currentPage > 1)
-                        onPageChange(currentPage - 1, state.pageSize);
-                }}
-            >
-                <img
-                    style={{ margin: "0 8px 0 0" }}
-                    src="https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg"
-                    alt="left_vector"
-                    width={32}
-                    height={32}
-                />
-            </a>
-        </div>
-    );
-    //FirstPage
-    pushPage(1);
-    if (currentPage > windowSize + 2)
-    {
-        pages.push(
-            <div key="ellipsis1" className={Styles.ns_pagination_left_ellipses}>
-                <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
-            </div>
-        );
-    }
-    for (let i = minPage; i <= maxPage; i++)
-        pushPage(i);
-    if (currentPage < totalPages - windowSize - 1)
-    {
+        //FirstPage
+        pushPage(1);
+        if (this.state.currentPage > windowSize + 2)
+        {
+            pages.push(
+                <div key="ellipsis1" className={Styles.ns_pagination_left_ellipses}>
+                    <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
+                </div>
+            );
+        }
+        for (let i = minPage; i <= maxPage; i++)
+            pushPage(i);
+        if (this.state.currentPage < totalPages - windowSize - 1)
+        {
+            pages.push(
+                <div key="ellipsis2" className={Styles.ns_pagination_right_ellipses}>
+                    <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
+                </div>
+            );
+        }
+        //LastPage
+        if (totalPages > 1)
+        {
+            pushPage(totalPages);
+        }
+        //next
         pages.push(
-            <div key="ellipsis2" className={Styles.ns_pagination_right_ellipses}>
-                <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
+            <div key="next">
+                <a
+                    href="#"
+                    onClick={(e) =>
+                    {
+                        e.preventDefault();
+                        if (this.state.currentPage < totalPages)
+                        {
+                            let currentPage = this.state.currentPage + 1;
+                            let pageSize = this.state.pageSize;
+                            this.setState({ currentPage, pageSize }, () =>
+                            {
+                                onPageChange(currentPage, pageSize);
+                            });
+                        }
+                    }}
+                >
+                    <img
+                        style={{ margin: "0 0 0 8px" }}
+                        src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg"
+                        width={32}
+                        height={32}
+                        alt="right_vector"
+                    />
+                </a>
             </div>
         );
-    }
-    //LastPage
-    if (totalPages > 1)
-    {
-        pushPage(totalPages);
-    }
-    //next
-    pages.push(
-        <div key="next">
-            <a
-                href="#"
-                onClick={(e) =>
-                {
-                    e.preventDefault();
-                    if (currentPage < totalPages)
-                        onPageChange(currentPage + 1, state.pageSize);
-                }}
-            >
-                <img
-                    style={{ margin: "0 0 0 8px" }}
-                    src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg"
-                    width={32}
-                    height={32}
-                    alt="right_vector"
-                />
-            </a>
-        </div>
-    );
-    return (
-        <>
-            <div
-                id={props.id}
-                className={`${Styles.ns_pagination_container} ${props.classList?.join(' ')}`}
-                style={props.style}
-            >
-                {pages}
-                <div className={Styles.ns_pagination_info}>
-                    <div style={{ width: 70 }}>
-                        <NSBoxEnum
-                            ref={PageSize}
-                            title=''
-                            multiple={false}
-                            required={false}
-                            options={pageSizes.map(pagesize => { return { desc: pagesize.toString(), value: pagesize.toString() } })}
-                            onChanged={() =>
-                            {
-                                setState({ pageSize: parseInt(PageSize.current?.getValue() ?? pageSizes[0].toString()) });
-                                onPageChange(currentPage + 1, state.pageSize);
-                            }}
-                        />
+        return (
+            <>
+                <div
+                    id={this.props.id}
+                    className={`${Styles.ns_pagination_container} ${this.props.classList?.join(' ')}`}
+                    style={this.props.style}
+                >
+                    {pages}
+                    <div className={Styles.ns_pagination_info}>
+                        <div style={{ width: 70 }}>
+                            <NSBoxEnum
+                                ref={this.PageSize}
+                                title=''
+                                multiple={false}
+                                required={false}
+                                options={pageSizes.map(pagesize => { return { desc: pagesize.toString(), value: pagesize.toString() } })}
+                                onChanged={() =>
+                                {
+                                    let currentPage = this.state.currentPage;
+                                    let pageSize = parseInt(this.PageSize.current?.getValue() ?? pageSizes[0].toString());
+                                    this.setState({ currentPage, pageSize }, () =>
+                                    {
+                                        onPageChange(currentPage, pageSize);
+                                    });
+                                }}
+                            />
+                        </div>
+                        <h6>
+                            {`(${current_min} - ${current_max}) of ${totalItems}`}
+                        </h6>
                     </div>
-                    <h6>
-                        {`(${current_min} - ${current_max}) of ${totalItems}`}
-                    </h6>
                 </div>
-            </div>
-
-        </>
-    );
+            </>
+        );
+    }
 }

package/src/components/NSTable.tsx

@@ -14,7 +14,7 @@ export interface INSTableProps<RowType> extends IBaseComponentProps
 {
 	columns: { [key: string]: string };
 	totalItems: number;
-	reload: (page: number) => void
+	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;
@@ -28,7 +28,6 @@ export interface NSTableState<RowType>
 	columns: { [key: string]: string };
 	rows: RowType[] | null;
 	title?: string;
-	currentPage: number,
 	model: {
 		show: boolean;
 		description?: string;
@@ -37,10 +36,11 @@ export interface NSTableState<RowType>
 
 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, currentPage: 1, model: { show: false } };
+		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);
@@ -63,10 +63,9 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
 	{
 		this.setState({ model: { show: false } });
 	}
-	onPageChange = (page: number) =>
+	onPageChange = (page: number, size: number) =>
 	{
-		this.setState({ currentPage: page });
-		this.props.reload(page);
+		this.props.reload(page, size);
 	}
 	override render()
 	{
@@ -159,14 +158,15 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
 				</table>
 				<NSSpace size={NSSpaceSizeType.MICRO} />
 				<section className={Styles.ns_pagination_button}>
-					<NSPagination currentPage={this.state.currentPage} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
+					<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={() =>
 						{
-							this.props.reload(this.state.currentPage);
+							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>

package/src/pages/NSLoginPage.tsx

@@ -1,33 +1,16 @@
 import Styles from './NSLoginPage.module.css'
 import { NSLinkBlue } from '../components/NSLinkBlue';
 import { NSSpace, NSSpaceSizeType } from '../components/NSSpace';
-import NSButton from '../components/NSButton';
 
 export interface INSLoginPageProps
 {
     title: string;
     logo: string;
     background: string;
-    href?: string;
-    onClick?: () => void;
 }
 
 export function NSLoginPage(props: INSLoginPageProps)
 {
-    let button = <></>;
-    if (props.href)
-        button = <NSLinkBlue title="Login" href={props.href ?? ""} />;
-    else if (props.onClick)
-        button = <NSButton title="Login" onClick={props.onClick}
-            style=
-            {{
-                color: "#fff",
-                border: "none",
-                backgroundColor: "rgba(3, 119, 255, 1)",
-                width: "358px",
-                height: "48px",
-                boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
-            }} />;
     return (
         <div style={{ backgroundImage: props.background, width: "100%", backgroundSize: "cover", backgroundAttachment: "fixed" }}>
             <div className={`${Styles.ns_login_container}`} style={{ minHeight: "100vh" }}>
@@ -35,10 +18,12 @@ export function NSLoginPage(props: INSLoginPageProps)
                     <img width={256} height={256} src={props.logo} alt={`${props.title} Logo`}></img>
                 </div>
                 <NSSpace size={NSSpaceSizeType.SMALL} />
-                <div><h1 className={`${Styles.ns_title}`}>{props.title}</h1></div>
+                <div>
+                    <h1 className={`${Styles.ns_title}`}>{props.title}</h1>
+                </div>
                 <NSSpace size={NSSpaceSizeType.SMALL} />
                 <div className={`${Styles.ns_button}`}>
-                    {button}
+                    <NSLinkBlue title="Login" href="https://account.namirasoft.com" target='_blank' />
                 </div>
             </div>
         </div >

package/src/props/IBaseComponentProps.ts

@@ -3,6 +3,7 @@ import React from "react";
 export interface IBaseComponentProps
 {
     id?: string;
+    name?: string;
     classList?: string[]
     style?: React.CSSProperties
 }