namirasoft-site-react 1.3.113 → 1.3.114

package/src/components/NSBoxText.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBox.module.css";
+import IconInputText from '../assets/images/icon-input-text.svg';
+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 INSBoxTextProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxTextState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
+{
+	constructor(props: INSBoxTextProps)
+	{
+		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(e: React.ChangeEvent<HTMLInputElement>): void
+	{
+		this.setValue(e.target.value);
+		if (this.props.onChanged)
+			this.props.onChanged(e);
+	}
+	override render()
+	{
+		return (
+			<>
+				<div 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>
+					<img
+						className={Styles.ns_input_icon}
+						src={IconInputText}
+						alt="Text Icon"
+						width={24}
+						height={24}
+					/>
+					<input
+						id={this.props.id}
+						value={this.state.value}
+						onChange={this.onChanged}
+						type="text"
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder}
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSBoxTime.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBox.module.css";
+import IconInputTime from '../assets/images/icon-input-time.svg';
+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 INSBoxTimeProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxTimeState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxTime extends React.Component<INSBoxTimeProps, INSBoxTimeState>
+{
+	constructor(props: INSBoxTimeProps)
+	{
+		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) &&
+			Validator.getErrorTime(this.props.title, this.state.value)
+		);
+	}
+	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(e: React.ChangeEvent<HTMLInputElement>): void
+	{
+		this.setValue(e.target.value);
+		if (this.props.onChanged)
+			this.props.onChanged(e);
+	}
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_input_parent} p-2 ${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>
+					<img
+						className={Styles.ns_input_icon}
+						src={IconInputTime}
+						alt="Time Icon"
+						width={24}
+						height={24}
+					/>
+					<input
+						id={this.props.id}
+						value={this.state.value}
+						onChange={this.onChanged}
+						type="time"
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder}
+						step="2"
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSSelectBox.tsx

@@ -7,108 +7,109 @@ import IconSelectBox from '../assets/images/icon-select-box.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { Validator } from "../Validator";
-import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 
 export interface INSSelectBoxProps extends IBaseComponentProps, IValidationProps
 {
-    title: string;
-    options: SelectProps['options'];
-    multiple: boolean;
+	title: string;
+	options: SelectProps['options'];
+	multiple: boolean;
+	placeHolder?: string;
 }
 
 export interface NSSelectBoxState
 {
-    value: string | null;
-    values: string[];
-    error?: string;
+	value: string | null;
+	values: string[];
+	error?: string;
 }
 
 export class NSSelectBox extends React.Component<INSSelectBoxProps, NSSelectBoxState>
 {
-    constructor(props: INSSelectBoxProps)
-    {
-        super(props);
-        this.state = {
-            value: null,
-            values: [],
-        };
-        this.getValues = this.getValues.bind(this);
-        this.setValues = this.setValues.bind(this);
-        this.setValue = this.setValue.bind(this);
-        this.getValue = this.getValue.bind(this);
-        this.handleChange = this.handleChange.bind(this);
-    }
-    getError(value: string): string | null
-    {
-        return (
-            Validator.getError(this.props.title, value, this.props)
-        );
-    }
-    getValue(): string | null
-    {
-        let error = this.getError(this.state.value || "");
-        if (error)
-        {
-            this.setState({ error });
-            throw new Error(error);
-        }
-        return this.state.value;
-    }
-    getValues(): string[]
-    {
-        this.state.values.forEach(value =>
-        {
-            let error = this.getError(value || "");
-            if (error)
-            {
-                this.setState({ error });
-                throw new Error(error);
-            }
-        });
-        return this.state.values;
-    }
-    setValue(value: string | null): void
-    {
-        this.setState({ value });
-    }
-    setValues(values: string[]): void
-    {
-        this.setState({ values });
-    }
-    handleChange(value: string | null | string[]): void
-    {
-        if (this.props.multiple)
-        {
-            this.setValues(value as string[]); 
-        } else
-        {
-            this.setValue(value as string | null); 
-        }
-    }
-    override render()
-    {
-        return (
-            <>
-                <div className={`${Styles.ns_input_parent}`}>
-                    <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-                    <Select
-                        mode={this.props.multiple ? "multiple" : undefined}
-                        style={{ width: '100%' }}
-                        className={Styles.ns_input_select}
-                        placeholder="Combo Box"
-                        onChange={this.handleChange}
-                        optionLabelProp="label"
-                        options={this.props.options}
-                        optionRender={(option) => (
-                            <Space className={Styles.ns_input_select_option}>
-                                {option.data.desc}
-                            </Space>
-                        )}
-                        suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
-                    />
-                </div>
-                <NSInputErrorNotifier error={this.state.error} />
-            </>
-        );
-    }
+	constructor(props: INSSelectBoxProps)
+	{
+		super(props);
+		this.state = {
+			value: null,
+			values: [],
+		};
+		this.getValues = this.getValues.bind(this);
+		this.setValues = this.setValues.bind(this);
+		this.setValue = this.setValue.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+	}
+	getError(value: string): string | null
+	{
+		return (
+			Validator.getError(this.props.title, value, this.props)
+		);
+	}
+	getValue(): string | null
+	{
+		let error = this.getError(this.state.value || "");
+		if (error)
+		{
+			this.setState({ error });
+			throw new Error(error);
+		}
+		return this.state.value;
+	}
+	getValues(): string[]
+	{
+		this.state.values.forEach(value =>
+		{
+			let error = this.getError(value || "");
+			if (error)
+			{
+				this.setState({ error });
+				throw new Error(error);
+			}
+		});
+		return this.state.values;
+	}
+	setValue(value: string | null): void
+	{
+		this.setState({ value });
+	}
+	setValues(values: string[]): void
+	{
+		this.setState({ values });
+	}
+	handleChange(value: string | null | string[]): void
+	{
+		if (this.props.multiple)
+		{
+			this.setValues(value as string[]);
+		} else
+		{
+			this.setValue(value as string | null);
+		}
+	}
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_input_parent}`}>
+					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+					<Select
+						mode={this.props.multiple ? "multiple" : undefined}
+						style={{ width: '100%' }}
+						className={Styles.ns_input_select}
+						placeholder={this.props.placeHolder ?? "Combo Box"}
+						onChange={this.handleChange}
+						optionLabelProp="label"
+						options={this.props.options}
+						optionRender={(option) => (
+							<Space className={Styles.ns_input_select_option}>
+								{option.data.desc}
+							</Space>
+						)}
+						suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
 }

package/src/components/NSTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import NSButton from './NSButton';
-import { NSInputSearch } from './NSInputSearch';
+import { NSBoxSearch } from './NSBoxSearch';
 import { NSPagination } from './NSPagination';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import Styles from './NSTable.module.css';
@@ -12,142 +12,142 @@ import { NSModal } from './NSModal';
 
 export interface INSTableProps<RowType> extends IBaseComponentProps
 {
-    columns: { [key: string]: string };
-    rows: RowType[];
-    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
+	columns: { [key: string]: string };
+	rows: RowType[];
+	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
-    model: {
-        show: boolean;
-        description?: string;
-    }
+	columns: { [key: string]: string };
+	rows: RowType[];
+	title?: string
+	model: {
+		show: boolean;
+		description?: string;
+	}
 }
 
 export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
 {
-    private search?: React.RefObject<NSInputSearch>;
+	private search?: React.RefObject<NSBoxSearch>;
 
-    constructor(props: INSTableProps<RowType>)
-    {
-        super(props);
-        this.state = { columns: props.columns, rows: props.rows, model: { show: false } };
-        this.search = React.createRef<NSInputSearch>();
-    }
-    setColumns(columns: { [key: string]: string })
-    {
-        this.setState({ columns });
-    }
-    setRows(rows: RowType[])
-    {
-        this.setState({ rows });
-    }
-    getSearchValue(): string 
-    {
-        return this.search?.current?.getValue() ?? "";
-    }
-    showModal(description: string)
-    {
-        this.setState({ model: { show: true, description } });
-    }
-    hideModal()
-    {
-        this.setState({ model: { show: false } });
-    }
-    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 (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));
-        };
-        return (
-            <div id={this.props.id}
-                className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
-                style={this.props.style}>
-                <NSInputSearch 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)} 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 size={50} page={5} />
-                    <NSSpace size={NSSpaceSizeType.SMALL} />
-                    <div className={Styles.ns_button}>
-                        <NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
-                        <NSButton title='Refresh' icon={{ src: "/assets/images/refresh-vector.png" }} 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}
-                />
-            </div >
-        )
-    }
+	constructor(props: INSTableProps<RowType>)
+	{
+		super(props);
+		this.state = { columns: props.columns, rows: props.rows, 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)
+	{
+		this.setState({ model: { show: true, description } });
+	}
+	hideModal()
+	{
+		this.setState({ model: { show: false } });
+	}
+	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 (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));
+		};
+		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)} 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 size={50} page={5} />
+					<NSSpace size={NSSpaceSizeType.SMALL} />
+					<div className={Styles.ns_button}>
+						<NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
+						<NSButton title='Refresh' icon={{ src: "/assets/images/refresh-vector.png" }} 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}
+				/>
+			</div >
+		)
+	}
 }