namirasoft-site-react 1.5.9 → 1.5.11

package/src/components/NSTable.tsx

@@ -10,6 +10,8 @@ import { NSDialogPageSelection } from './NSDialogPageSelection';
 import { NSLoading } from './NSLoading';
 import { NSNoData } from './NSNoData';
 import { NSPagination } from './NSPagination';
+import { NSReorderDialog } from './NSReorderDialog';
+import { NSSortDialog } from './NSSortDialog';
 import { NSTableChart } from './NSTableChart';
 import Styles from './NSTable.module.css';
 
@@ -69,12 +71,22 @@ export interface NSTableProps<RowType> extends IBaseComponentProps
 	onSelectedIDsChanged?: () => void;
 	onSortChanged?: (items: SortItem[] | null) => void;
 	onVisibleColumnsChanged?: (visible_columns: { table: string, column: string }[]) => void;
+	sort?: NSTableSortConfig;
 	ui?: {
 		pagination?: boolean;
-		button_panel?: boolean;
+		button_panel?: boolean | NSTableButtonPanelConfig;
 	};
 }
 
+export interface NSTableSortConfig
+{
+	enabled?: boolean;
+	onSort?: (items: SortItem[] | null) => void;
+}
+
+export type NSTableButtonKey = "reorder" | "sort" | "fullscreen" | "chart" | "export" | "print" | "refresh";
+export type NSTableButtonPanelConfig = { [key in NSTableButtonKey]?: boolean };
+
 interface NSTableState<RowType>
 {
 	columns: TableColumnInfo[];
@@ -94,6 +106,8 @@ interface NSTableState<RowType>
 	columnWidths: { [key: string]: number };
 	fullscreen: boolean;
 	showChart: boolean;
+	showSortDialog: boolean;
+	showReorderDialog: boolean;
 }
 
 enum PageSelectionMode
@@ -129,6 +143,8 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 			columnWidths: this.loadColumnWidths(),
 			fullscreen: false,
 			showChart: false,
+			showSortDialog: false,
+			showReorderDialog: false,
 		};
 		this.getSortItemsKey = this.getSortItemsKey.bind(this);
 		this.getSortItems = this.getSortItems.bind(this);
@@ -172,15 +188,58 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 		}
 		return [];
 	}
+	isSortEnabled(): boolean
+	{
+		return this.props.sort?.enabled ?? true;
+	}
+	private hasCustomSort(): boolean
+	{
+		return !!this.props.sort?.onSort;
+	}
 	setSortItems(items: SortItem[] | null)
 	{
+		if (!this.isSortEnabled())
+			return;
 		let storage = new IStorageLocal();
 		storage.set(this.getSortItemsKey(), SortItem.stringify(items));
 		this.setState({ sortItems: items }, () =>
 		{
 			this.props.onSortChanged?.(items);
-			this.reload(null, null);
+			this.props.sort?.onSort?.(items);
+		});
+	}
+	private compareRowsBySortItems(a: RowType, b: RowType, items: SortItem[]): number
+	{
+		for (let item of items)
+		{
+			let column = this.state.columns.find(c => c.table.name === item.table.name && c.name === item.column.name);
+			let va = (a as any)[item.column.name];
+			let vb = (b as any)[item.column.name];
+			let cmp = column ? column.formatter.compare(va, vb) : BaseColumnFormatter.smartCompare(va, vb);
+			if (cmp !== 0)
+				return item.ascending ? cmp : -cmp;
+		}
+		return 0;
+	}
+	private sortRowsClient(rows: RowType[]): RowType[]
+	{
+		let items = this.state.sortItems;
+		if (!items || items.length === 0)
+			return rows;
+		let decorated = rows.map((row, index) => ({ row, index }));
+		decorated.sort((x, y) =>
+		{
+			let cmp = this.compareRowsBySortItems(x.row, y.row, items!);
+			return cmp !== 0 ? cmp : x.index - y.index;
 		});
+		return decorated.map(d => d.row);
+	}
+	private getDisplayRows(): RowType[] | null
+	{
+		let rows = this.state.rows;
+		if (!rows || !this.isSortEnabled() || this.hasCustomSort())
+			return rows;
+		return this.sortRowsClient(rows);
 	}
 	private getVisibleColumnsKey(): string
 	{
@@ -383,13 +442,14 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 	}
 	getRowsInRange(fromIndex: number, toIndex: number)
 	{
-		if (!this.state.rows)
+		let rows = this.getDisplayRows();
+		if (!rows)
 			return [];
 
 		let start = Math.min(fromIndex, toIndex);
 		let end = Math.max(fromIndex, toIndex);
 
-		return this.state.rows?.slice(start, end + 1);
+		return rows.slice(start, end + 1);
 	}
 	getSelectedIDs(): string[]
 	{
@@ -420,13 +480,13 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 			return v === null || v === undefined ? "" : String(v);
 		}).join("
");
 	}
-	private buildChildrenMap(): Map<string, RowType[]> | null
+	private buildChildrenMap(rows: RowType[] | null): Map<string, RowType[]> | null
 	{
 		let h = this.props.hierarchy;
-		if (!h || !this.state.rows)
+		if (!h || !rows)
 			return null;
 		let map = new Map<string, RowType[]>();
-		for (let r of this.state.rows)
+		for (let r of rows)
 		{
 			let pid = (r as any)[h.parent];
 			let pidKey = pid === null || pid === undefined ? "" : String(pid);
@@ -590,7 +650,14 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 	{
 
 		let show_pagination = this.props.ui?.pagination ?? true;
-		let show_button_panel = this.props.ui?.button_panel ?? true;
+		let button_panel_config = this.props.ui?.button_panel;
+		let show_button_panel = button_panel_config !== false;
+		let isButtonEnabled = (key: NSTableButtonKey): boolean =>
+		{
+			if (button_panel_config === undefined || typeof button_panel_config === "boolean")
+				return true;
+			return button_panel_config[key] ?? true;
+		};
 		let getRowAttributes = (row_value: RowType, row_index: number) =>
 		{
 			if (this.props.getRowAttributes)
@@ -656,10 +723,11 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 		}
 		else
 		{
+			let displayRows = this.getDisplayRows() ?? [];
 			let hierarchical = !!this.props.hierarchy;
-			let childrenMap = this.buildChildrenMap();
+			let childrenMap = this.buildChildrenMap(displayRows);
 			let indexOfRow = new Map<RowType, number>();
-			this.state.rows.forEach((r, i) => indexOfRow.set(r, i));
+			displayRows.forEach((r, i) => indexOfRow.set(r, i));
 			let INDENT = 16;
 			let lineColor = "rgba(20, 27, 92, 0.35)";
 			let renderRow = (rowValue: RowType, rowIndex: number, depth: number, parentKey: string, ancestorHasNext: boolean[], isLastChild: boolean): React.ReactNode[] =>
@@ -852,8 +920,8 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 			{
 				let parentCol = this.props.hierarchy.parent;
 				let ids = new Set<string>();
-				this.state.rows.forEach(r => ids.add(this.getRowIdValue(r) + "" + this.getGroupKey(r)));
-				topLevel = this.state.rows.filter(r =>
+				displayRows.forEach(r => ids.add(this.getRowIdValue(r) + "" + this.getGroupKey(r)));
+				topLevel = displayRows.filter(r =>
 				{
 					let pid = (r as any)[parentCol];
 					let pidKey = pid === null || pid === undefined ? "" : String(pid);
@@ -864,7 +932,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 			}
 			else
 			{
-				topLevel = this.state.rows;
+				topLevel = displayRows;
 			}
 			content = topLevel.flatMap((rowValue, i) => renderRow(rowValue, indexOfRow.get(rowValue) ?? 0, 0, "", [], i === topLevel.length - 1));
 		}
@@ -924,6 +992,30 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 						onClose={() => this.setState({ pageSelectionMode: PageSelectionMode.Hidden })}
 					/>
 				}
+				{
+					isButtonEnabled("reorder") &&
+					<NSButton
+						attributes={{ title: 'Reorder' }}
+						icon={{ src: "https://static.namirasoft.com/image/concept/grip-vertical/blue.svg", alt: "reorder" }}
+						onClick={{
+							action: () => this.setState({ showReorderDialog: true }),
+							showLoading: false
+						}}
+						classList={[Styles.ns_table_button]}
+					/>
+				}
+				{
+					isButtonEnabled("sort") && this.isSortEnabled() &&
+					<NSButton
+						attributes={{ title: 'Sort' }}
+						icon={{ src: "https://static.namirasoft.com/image/concept/arrow-down-short-wide/blue.svg", alt: "sort" }}
+						onClick={{
+							action: () => this.setState({ showSortDialog: true }),
+							showLoading: false
+						}}
+						classList={[Styles.ns_table_button]}
+					/>
+				}
 				{
 					this.props.buttons?.map((button, index) => (
 						<NSButton
@@ -933,60 +1025,75 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 						/>
 					))
 				}
-				<NSButton
-					icon={{ src: `https://static.namirasoft.com/image/concept/full-screen/blue.svg` }}
-					classList={[Styles.ns_table_button, Styles.ns_fullscreen_button]}
-					onClick={{
-						action: this.toggleFullscreen,
-						showLoading: false
-					}}
-					attributes={{ title: this.state.fullscreen ? 'Minimize' : 'Maximize' }}
-				/>
-				<NSButton
-					attributes={{ title: 'Chart' }}
-					icon={{ src: "https://static.namirasoft.com/image/concept/chart/blue.svg" }}
-					onClick={{
-						action: () =>
-						{
-							if (!this.state.rows || this.state.rows.length === 0)
-								this.showModal(" ", "There is no data to display as a chart.");
-							else
-								this.setState({ showChart: true });
-						},
-						showLoading: false
-					}}
-					classList={[Styles.ns_table_button]}
-				/>
-				<NSButton
-					icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }}
-					onClick={{
-						action: () => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); },
-						showLoading: false
-					}}
-					classList={[Styles.ns_table_button]}
-					attributes={{ title: 'Export' }}
-				/>
-				<NSButton
-					attributes={{ title: 'Print' }}
-					icon={{ src: "https://static.namirasoft.com/image/concept/print/blue.svg" }}
-					onClick={{
-						action: () => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); },
-						showLoading: false
-					}}
-					classList={[Styles.ns_table_button]}
-				/>
-				<NSButton
-					attributes={{ title: 'Refresh' }}
-					icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }}
-					onClick={{
-						action: async (onFinished) =>
-						{
-							this.reload(null, null).then(onFinished).catch(onFinished);
-						}
-					}}
-					classList={[Styles.ns_table_button]}
-					style={{ border: '1px solid rgb(3, 119, 255)' }}
-				/>
+				{
+					isButtonEnabled("fullscreen") &&
+					<NSButton
+						icon={{ src: `https://static.namirasoft.com/image/concept/full-screen/blue.svg` }}
+						classList={[Styles.ns_table_button, Styles.ns_fullscreen_button]}
+						onClick={{
+							action: this.toggleFullscreen,
+							showLoading: false
+						}}
+						attributes={{ title: this.state.fullscreen ? 'Minimize' : 'Maximize' }}
+					/>
+				}
+				{
+					isButtonEnabled("chart") &&
+					<NSButton
+						attributes={{ title: 'Chart' }}
+						icon={{ src: "https://static.namirasoft.com/image/concept/chart/blue.svg" }}
+						onClick={{
+							action: () =>
+							{
+								if (!this.state.rows || this.state.rows.length === 0)
+									this.showModal(" ", "There is no data to display as a chart.");
+								else
+									this.setState({ showChart: true });
+							},
+							showLoading: false
+						}}
+						classList={[Styles.ns_table_button]}
+					/>
+				}
+				{
+					isButtonEnabled("export") &&
+					<NSButton
+						icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }}
+						onClick={{
+							action: () => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); },
+							showLoading: false
+						}}
+						classList={[Styles.ns_table_button]}
+						attributes={{ title: 'Export' }}
+					/>
+				}
+				{
+					isButtonEnabled("print") &&
+					<NSButton
+						attributes={{ title: 'Print' }}
+						icon={{ src: "https://static.namirasoft.com/image/concept/print/blue.svg" }}
+						onClick={{
+							action: () => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); },
+							showLoading: false
+						}}
+						classList={[Styles.ns_table_button]}
+					/>
+				}
+				{
+					isButtonEnabled("refresh") &&
+					<NSButton
+						attributes={{ title: 'Refresh' }}
+						icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }}
+						onClick={{
+							action: async (onFinished) =>
+							{
+								this.reload(null, null).then(onFinished).catch(onFinished);
+							}
+						}}
+						classList={[Styles.ns_table_button]}
+						style={{ border: '1px solid rgb(3, 119, 255)' }}
+					/>
+				}
 			</div>
 		);
 
@@ -1005,7 +1112,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 						}
 						{
 							show_pagination &&
-							<NSPagination ref={this.NSPagination} totalItems={this.state.totalItems} onPageChange={this.onPageChange} style={{ marginRight: "auto" }} />
+							<NSPagination ref={this.NSPagination} totalItems={this.state.totalItems} onPageChange={this.onPageChange} />
 						}
 						{buttonPanel}
 					</div>
@@ -1048,6 +1155,8 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                                         {
                                             if ((e.target as HTMLElement).closest('[data-resize-handle]'))
                                                 return;
+                                            if (!this.isSortEnabled())
+                                                return;
                                             let t = new BaseMetaTable(null, column.table.name, column.table.text);
                                             let c = new BaseMetaColumn(t, column.name, column.text, "", false);
                                             let items = this.getSortItems();
@@ -1104,6 +1213,36 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 						onClose={() => this.setState({ showChart: false })}
 					/>
 				}
+				{
+					this.state.showSortDialog && this.isSortEnabled() &&
+					<NSSortDialog
+						sorts={this.getSortItems()}
+						getColumns={() => this.getColumns(null)}
+						onCancel={() => this.setState({ showSortDialog: false })}
+						onApply={sorts =>
+						{
+							this.setSortItems(sorts);
+							this.setState({ showSortDialog: false });
+						}}
+					/>
+				}
+				{
+					this.state.showReorderDialog &&
+					<NSReorderDialog
+						visibleColumnKeys={this.getVisibleColumns().map(c => c.table + "." + c.column)}
+						getColumns={() => this.getColumns(null)}
+						onCancel={() => this.setState({ showReorderDialog: false })}
+						onApply={orderedKeys =>
+						{
+							const all = this.getColumns(null);
+							const cs = orderedKeys
+								.map(k => all.find(c => c.table.name + "." + c.name === k))
+								.filter((c): c is TableColumnInfo => !!c);
+							this.setVisibleColumns(cs.map(c => ({ table: c.table.name, column: c.name })));
+							this.setState({ showReorderDialog: false });
+						}}
+					/>
+				}
 			</div>
 		);
 	}

package/src/formatter/BaseColumnFormatter.ts

@@ -6,6 +6,74 @@ export abstract class BaseColumnFormatter
     public width: string = "100px";
     public onclick_overrided: boolean = false;
     abstract format(value: any, column: TableColumnInfo, row: TableRowInfo<any>, printable: boolean): any;
+
+    compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.smartCompare(a, b);
+    }
+
+    static isEmpty(v: any): boolean
+    {
+        return v === null || v === undefined || v === "";
+    }
+
+    static compareEmpty(a: any, b: any): number | null
+    {
+        const ae = BaseColumnFormatter.isEmpty(a);
+        const be = BaseColumnFormatter.isEmpty(b);
+        if (ae && be)
+            return 0;
+        if (ae) 
+            return 1;
+        if (be) 
+            return -1;
+        return null;
+    }
+
+    static numberCompare(a: any, b: any): number
+    {
+        const e = BaseColumnFormatter.compareEmpty(a, b);
+        if (e !== null) 
+            return e;
+        const na = Number(a);
+        const nb = Number(b);
+        if (isNaN(na) || isNaN(nb)) 
+            return BaseColumnFormatter.stringCompare(a, b);
+        return na - nb;
+    }
+
+    static dateCompare(a: any, b: any): number
+    {
+        const e = BaseColumnFormatter.compareEmpty(a, b);
+        if (e !== null) 
+            return e;
+        const ta = new Date(a).getTime();
+        const tb = new Date(b).getTime();
+        if (isNaN(ta) || isNaN(tb)) 
+            return BaseColumnFormatter.stringCompare(a, b);
+        return ta - tb;
+    }
+
+    static stringCompare(a: any, b: any): number
+    {
+        const e = BaseColumnFormatter.compareEmpty(a, b);
+        if (e !== null) 
+            return e;
+        return String(a).localeCompare(String(b));
+    }
+
+    static smartCompare(a: any, b: any): number
+    {
+        const e = BaseColumnFormatter.compareEmpty(a, b);
+        if (e !== null) 
+            return e;
+        const na = Number(a);
+        const nb = Number(b);
+        if (!isNaN(na) && !isNaN(nb)) 
+            return na - nb;
+        return String(a).localeCompare(String(b));
+    }
+
     static getColumn(column: BaseMetaColumn, formatter: BaseColumnFormatter, group?: string, defaults?: { hidden?: boolean }): TableColumnInfo
     {
         return {

package/src/formatter/BaseURLImageFormatter.tsx

@@ -31,4 +31,8 @@ export class BaseURLImageFormatter extends BaseColumnFormatter
         }
         return value.text;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.stringCompare(a?.text, b?.text);
+    }
 }

package/src/formatter/BooleanFormatter.ts

@@ -20,4 +20,8 @@ export class BooleanFormatter extends BaseColumnFormatter
             return this.false_value;
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.numberCompare(a, b);
+    }
 }

package/src/formatter/BytesFormatter.tsx

@@ -13,4 +13,8 @@ export class BytesFormatter extends BaseColumnFormatter
     {
         return ByteOperation.format(bytes, ByteUnit.B);
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.numberCompare(a, b);
+    }
 }

package/src/formatter/DateFormatter.ts

@@ -20,4 +20,8 @@ export class DateFormatter extends BaseColumnFormatter
             }
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.dateCompare(a, b);
+    }
 }

package/src/formatter/DateTimeFormatter.ts

@@ -20,4 +20,8 @@ export class DateTimeFormatter extends BaseColumnFormatter
             }
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.dateCompare(a, b);
+    }
 }

package/src/formatter/DurationFormatter.ts

@@ -11,4 +11,8 @@ export class DurationFormatter extends BaseColumnFormatter
     {
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.numberCompare(a, b);
+    }
 }

package/src/formatter/EmailFormatter.tsx

@@ -19,4 +19,8 @@ export class EmailFormatter extends BaseColumnFormatter
             image: { url: "https://static.namirasoft.com/image/concept/type/email.png", alt: "phone" }
         }, column, row, printable);
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.stringCompare(a, b);
+    }
 }

package/src/formatter/EnumFormatter.ts

@@ -11,4 +11,8 @@ export class EnumFormatter extends BaseColumnFormatter
     {
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.smartCompare(a, b);
+    }
 }

package/src/formatter/FloatFormatter.ts

@@ -21,4 +21,8 @@ export class FloatFormatter extends BaseColumnFormatter
         }
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.numberCompare(a, b);
+    }
 }

package/src/formatter/IDFormatter.tsx

@@ -46,9 +46,13 @@ export class IDFormatter extends BaseColumnFormatter
                     />
                 ));
             }
-        } 
+        }
         catch (error) { }
 
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.smartCompare(a, b);
+    }
 }

package/src/formatter/IPFormatter.ts

@@ -11,4 +11,30 @@ export class IPFormatter extends BaseColumnFormatter
     {
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        const e = BaseColumnFormatter.compareEmpty(a, b);
+        if (e !== null)
+            return e;
+        const parse = (v: any): number[] | null =>
+        {
+            const parts = String(v).split(".");
+            if (parts.length !== 4)
+                return null;
+            const nums = parts.map(p => Number(p));
+            if (nums.some(n => isNaN(n)))
+                return null;
+            return nums;
+        };
+        const na = parse(a);
+        const nb = parse(b);
+        if (na && nb)
+        {
+            for (let i = 0; i < 4; i++)
+                if (na[i] !== nb[i])
+                    return na[i] - nb[i];
+            return 0;
+        }
+        return BaseColumnFormatter.stringCompare(a, b);
+    }
 }

package/src/formatter/IntegerFormatter.ts

@@ -21,4 +21,8 @@ export class IntegerFormatter extends BaseColumnFormatter
         }
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.numberCompare(a, b);
+    }
 }

package/src/formatter/JsonFormatter.tsx

@@ -56,4 +56,21 @@ export class JsonFormatter extends BaseColumnFormatter
             return value;
         }
     }
+    override compare(a: any, b: any): number
+    {
+        const toText = (v: any) => typeof v === "string" ?
+            v :
+            (() =>
+            {
+                try
+                {
+                    return JSON.stringify(v);
+                }
+                catch
+                {
+                    return String(v);
+                }
+            })();
+        return BaseColumnFormatter.stringCompare(toText(a), toText(b));
+    }
 }

package/src/formatter/MoneyFormatter.ts

@@ -33,4 +33,8 @@ export class MoneyFormatter extends BaseColumnFormatter
         }
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.numberCompare(a, b);
+    }
 }

package/src/formatter/PercentFormatter.tsx

@@ -37,4 +37,8 @@ export class PercentFormatter extends BaseColumnFormatter
 
         return value;
     }
+    override compare(a: any, b: any): number
+    {
+        return BaseColumnFormatter.numberCompare(a, b);
+    }
 }