namirasoft-account-react 1.5.21 → 1.5.23

package/src/layouts/NSASectionList.tsx

@@ -1,148 +1,167 @@
-import { EntityResolveResponseRow } from "namirasoft-field";
-import { IBaseComponentProps, NSBoxCombo, NSRow, NSSpace, NSSpaceSizeType, NSSplitter } from "namirasoft-site-react";
-import { Component, ReactNode, createRef } from "react";
-import { IEntityInfo } from "../IEntityInfo";
-import { NSARouterMakerResult } from "../NSARouterMakerResult";
-import { NSATable, NSATableUIProps } from "../components/NSATable";
-import Styles from "./NSASectionList.module.css";
-import { NSASectionViewTabPage, NSASectionViewTabPageUIProps } from "./NSASectionViewTabPage";
-
-export interface NSASectionListCustomProps<RowType extends { id: string }, RowTypeInput = RowType>
-{
-	ui?: NSATableUIProps<RowType> & {
-		modes?: { [name: string]: { getChild: (entity: IEntityInfo<RowType, RowTypeInput>) => JSX.Element, show_view?: boolean } };
-		default_mode?: string;
-		tab_page_view?: NSASectionViewTabPageUIProps<RowType>;
-	};
-	onIDsChanged?: () => void;
-	children?: React.ReactNode;
-}
-
-export interface NSASectionListProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps, NSARouterMakerResult, NSASectionListCustomProps<RowType, RowTypeInput>
-{
-	entity: IEntityInfo<RowType, RowTypeInput>;
-	ctf: {
-		enabled: boolean;
-		rows: EntityResolveResponseRow | null;
-	};
-	children?: ReactNode;
-}
-
-export interface NSASectionListState
-{
-	mode: string;
-	selected_row_ids: string[];
-}
-
-export class NSASectionList<RowType extends { id: string }, RowTypeInput = RowType>
-	extends Component<NSASectionListProps<RowType, RowTypeInput>, NSASectionListState>
-{
-	public NSBoxCombo_Mode = createRef<NSBoxCombo>();
-	public NSATable_Main = createRef<NSATable<RowType, RowTypeInput>>();
-	public NSASectionViewTabPage_Ref = createRef<NSASectionViewTabPage<RowType, RowTypeInput>>();
-
-	constructor(props: NSASectionListProps<RowType, RowTypeInput>)
-	{
-		super(props);
-		this.state = { mode: props.ui?.default_mode ?? "", selected_row_ids: [] };
-	}
-
-	getSelectedIDs(): string[]
-	{
-		return this.NSATable_Main.current?.getSelectedIDs() ?? [];
-	}
-	getSelectedRows(): RowType[]
-	{
-		return this.NSATable_Main.current?.getSelectedRows() ?? [];
-	}
-
-	override render()
-	{
-		let table_renderer = () => (
-			<NSATable<RowType, RowTypeInput>
-				ref={this.NSATable_Main}
-				entity={this.props.entity}
-				ctf={this.props.ctf}
-				url={this.props.url}
-				ui={this.props.ui}
-				classList={[Styles.nsa_table]}
-				onSelectionChanged={() =>
-				{
-					this.props.onIDsChanged?.();
-					this.setState({ selected_row_ids: this.getSelectedIDs() });
-				}}
-			/>
-		);
-
-		let modes = this.props.ui?.modes ?? {};
-		if (!modes)
-			modes = {};
-		if (!modes["Table"])
-			modes = { Table: { getChild: table_renderer, show_view: true }, ...modes };
-
-		let mode_names = Object.keys(modes);
-		let mode_name_current = this.state.mode;
-		if (!mode_names.includes(mode_name_current))
-			mode_name_current = mode_names[0];
-		let mode_current = modes[mode_name_current];
-		let show_view = (mode_current.show_view ?? false);
-		return (
-			<>
-				<div
-					id={this.props.id}
-					className={`${this.props.classList?.join(" ") ?? ""}`}
-					style={{ ...this.props.style }}
-				>
-					{
-						mode_names.length > 1 &&
-						<>
-							<NSRow style={{ justifyContent: "flex-end", alignItems: "center" }}>
-								<div className={Styles.nsa_section_list_actions}>
-									<NSBoxCombo
-										ref={this.NSBoxCombo_Mode}
-										title="Mode"
-										hideHeader
-										required
-										searchable={false}
-										placeholder=""
-										defaultValue={mode_name_current}
-										getOptions={() => mode_names.map(m => ({ value: m, title: m }))}
-										multiple={false}
-										style={{ width: "100px" }}
-										onChanged={e =>
-										{
-											this.setState({ mode: e.getValueOne(false) ?? "" });
-										}}
-									/>
-								</div>
-							</NSRow>
-							<NSSpace size={NSSpaceSizeType.MINI} />
-						</>
-					}
-					{
-						show_view ?
-							<NSSplitter
-								storage_key={`ns-splitter-product:${this.props.entity.product_id}-entity:${this.props.entity.name}-height`}
-								master_content={mode_current.getChild(this.props.entity)}
-								detail_content={(
-									this.state.selected_row_ids.length === 1 &&
-									<NSASectionViewTabPage<RowType, RowTypeInput>
-										key={this.state.selected_row_ids[0]}
-										ref={this.NSASectionViewTabPage_Ref}
-										{...this.props}
-										ui={this.props.ui?.tab_page_view}
-										model={{
-											id: this.getSelectedIDs()[0],
-											row: this.getSelectedRows()[0]
-										}}
-									/>
-								)}
-							/> :
-							mode_current.getChild(this.props.entity)
-					}
-				</div>
-				{this.props.children}
-			</>
-		);
-	}
+import { EntityResolveResponseRow } from "namirasoft-field";
+import { IBaseComponentProps, NSBoxCombo, NSRow, NSSpace, NSSpaceSizeType, NSSplitter } from "namirasoft-site-react";
+import { Component, ReactNode, createRef } from "react";
+import { IEntityInfo } from "../IEntityInfo";
+import { NSARouterMakerResult } from "../NSARouterMakerResult";
+import { NSATable, NSATableUIProps } from "../components/NSATable";
+import Styles from "./NSASectionList.module.css";
+import { NSASectionViewTabPage, NSASectionViewTabPageUIProps } from "./NSASectionViewTabPage";
+
+export interface NSASectionListCustomProps<RowType extends { id: string }, RowTypeInput = RowType>
+{
+	ui?: NSATableUIProps<RowType> & {
+		modes?: { [name: string]: { getChild: (entity: IEntityInfo<RowType, RowTypeInput>) => JSX.Element, show_view?: boolean } };
+		default_mode?: string;
+		tab_page_view?: NSASectionViewTabPageUIProps<RowType>;
+		getChildrenBefore?: (id: string, row: RowType | null) => ReactNode;
+		getChildrenAfter?: (id: string, row: RowType | null) => ReactNode;
+	};
+	onIDsChanged?: () => void;
+	children?: React.ReactNode;
+}
+
+export interface NSASectionListProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps, NSARouterMakerResult, NSASectionListCustomProps<RowType, RowTypeInput>
+{
+	entity: IEntityInfo<RowType, RowTypeInput>;
+	ctf: {
+		enabled: boolean;
+		rows: EntityResolveResponseRow | null;
+	};
+	children?: ReactNode;
+}
+
+export interface NSASectionListState
+{
+	mode: string;
+	selected_row_ids: string[];
+}
+
+export class NSASectionList<RowType extends { id: string }, RowTypeInput = RowType>
+	extends Component<NSASectionListProps<RowType, RowTypeInput>, NSASectionListState>
+{
+	public NSBoxCombo_Mode = createRef<NSBoxCombo>();
+	public NSATable_Main = createRef<NSATable<RowType, RowTypeInput>>();
+	public NSASectionViewTabPage_Ref = createRef<NSASectionViewTabPage<RowType, RowTypeInput>>();
+
+	constructor(props: NSASectionListProps<RowType, RowTypeInput>)
+	{
+		super(props);
+		this.state = { mode: props.ui?.default_mode ?? "", selected_row_ids: [] };
+	}
+
+	getSelectedIDs(): string[]
+	{
+		return this.NSATable_Main.current?.getSelectedIDs() ?? [];
+	}
+	getSelectedRows(): RowType[]
+	{
+		return this.NSATable_Main.current?.getSelectedRows() ?? [];
+	}
+
+	override render()
+	{
+		let table_renderer = () => (
+			<NSATable<RowType, RowTypeInput>
+				ref={this.NSATable_Main}
+				entity={this.props.entity}
+				ctf={this.props.ctf}
+				url={this.props.url}
+				ui={this.props.ui}
+				classList={[Styles.nsa_table]}
+				onSelectionChanged={() =>
+				{
+					this.props.onIDsChanged?.();
+					this.setState({ selected_row_ids: this.getSelectedIDs() });
+				}}
+			/>
+		);
+
+		let modes = this.props.ui?.modes ?? {};
+		if (!modes)
+			modes = {};
+		if (!modes["Table"])
+			modes = { Table: { getChild: table_renderer, show_view: true }, ...modes };
+
+		let mode_names = Object.keys(modes);
+		let mode_name_current = this.state.mode;
+		if (!mode_names.includes(mode_name_current))
+			mode_name_current = mode_names[0];
+		let mode_current = modes[mode_name_current];
+		let show_view = (mode_current.show_view ?? false);
+		return (
+			<>
+				<div
+					id={this.props.id}
+					className={`${this.props.classList?.join(" ") ?? ""}`}
+					style={{ ...this.props.style }}
+				>
+					{
+						mode_names.length > 1 &&
+						<>
+							<NSRow style={{ justifyContent: "flex-end", alignItems: "center" }}>
+								<div className={Styles.nsa_section_list_actions}>
+									<NSBoxCombo
+										ref={this.NSBoxCombo_Mode}
+										title="Mode"
+										hideHeader
+										required
+										searchable={false}
+										placeholder=""
+										defaultValue={mode_name_current}
+										getOptions={() => mode_names.map(m => ({ value: m, title: m }))}
+										multiple={false}
+										style={{ width: "100px" }}
+										onChanged={e =>
+										{
+											this.setState({ mode: e.getValueOne(false) ?? "" });
+										}}
+									/>
+								</div>
+							</NSRow>
+							<NSSpace size={NSSpaceSizeType.MINI} />
+						</>
+					}
+					{
+						show_view ?
+							<NSSplitter
+								storage_key={`ns-splitter-product:${this.props.entity.product_id}-entity:${this.props.entity.name}-height`}
+								master_content={mode_current.getChild(this.props.entity)}
+								detail_content={
+									(() =>
+									{
+										let _id = this.getSelectedIDs()[0];
+										let _row = this.getSelectedRows()[0];
+
+										if (this.state.selected_row_ids.length === 1)
+											return <>
+												{
+													this.props.ui?.getChildrenBefore &&
+													this.props.ui?.getChildrenBefore(_id, _row)
+												}
+												<NSASectionViewTabPage<RowType, RowTypeInput>
+													key={this.state.selected_row_ids[0]}
+													ref={this.NSASectionViewTabPage_Ref}
+													{...this.props}
+													ui={this.props.ui?.tab_page_view}
+													model={{
+														id: _id,
+														row: _row
+													}}
+												/>
+												{
+													this.props.ui?.getChildrenAfter &&
+													this.props.ui?.getChildrenAfter(_id, _row)
+												}
+											</>;
+										return <></>;
+									})()
+								}
+							/> :
+							mode_current.getChild(this.props.entity)
+					}
+				</div>
+				{this.props.children}
+			</>
+		);
+	}
 }

package/src/layouts/NSASectionView.tsx

@@ -1,99 +1,99 @@
-import { EntityResolveResponseRow } from "namirasoft-field";
-import { IBaseComponentProps, NSLoading } from "namirasoft-site-react";
-import { Component, createRef, ReactNode } from "react";
-import { IEntityInfo } from "../IEntityInfo";
-import { NSARouterMakerResult } from "../NSARouterMakerResult";
-import { NSASectionViewTabPage, NSASectionViewTabPageUIProps } from "./NSASectionViewTabPage";
-
-export interface NSASectionViewCutomProps<RowType> extends IBaseComponentProps
-{
-	ui?: {
-		tab_page_view?: NSASectionViewTabPageUIProps<RowType>;
-		getChildrenBefore?: (id: string, row: RowType) => ReactNode;
-		getChildrenAfter?: (id: string, row: RowType) => ReactNode;
-	};
-	onRowLoaded?: (row: RowType) => void;
-	children?: React.ReactNode;
-}
-
-export interface NSASectionViewProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSARouterMakerResult, NSASectionViewCutomProps<RowType>
-{
-	entity: IEntityInfo<RowType, RowTypeInput>;
-	ctf: {
-		enabled: boolean;
-		rows: EntityResolveResponseRow | null;
-	};
-	model: {
-		id: string | null;
-		row: RowType | null;
-	};
-}
-
-interface NSASectionViewState<RowType>
-{
-	row: RowType | null;
-}
-
-export class NSASectionView<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionViewProps<RowType, RowTypeInput>, NSASectionViewState<RowType>>
-{
-	NSASectionViewTabPage_Ref = createRef<NSASectionViewTabPage<RowType, RowTypeInput>>();
-
-	constructor(props: NSASectionViewProps<RowType, RowTypeInput>)
-	{
-		super(props);
-
-		this.state = { row: this.props.model.row };
-
-		this.reload = this.reload.bind(this);
-		this.getRow = this.getRow.bind(this);
-	}
-	reload() 
-	{
-		this.setState(prev => ({ ...prev, row: null }));
-		if (this.props.model.id)
-			if (this.props.entity.server.get)
-				this.props.entity.server.get(this.props.model.id).then(row =>
-				{
-					this.setState(prev => ({ ...prev, row }), () =>
-					{
-						this.props.onRowLoaded?.(row);
-					});
-				}).catch(() => { });
-	}
-	getRow()
-	{
-		return this.state.row;
-	}
-	override componentDidMount()
-	{
-		if (this.props.model.id)
-			if (!this.props.model.row || this.props.model.row.id !== this.props.model.id)
-				this.reload();
-	}
-	override render()
-	{
-		if (this.props.model.id && this.state.row != null)
-			return (
-				<div
-					id={this.props.id}
-					className={`${this.props.classList?.join(" ") ?? ""}`}
-					style={{ ...this.props.style }}
-				>
-					{this.props.ui?.getChildrenBefore && this.props.ui?.getChildrenBefore(this.props.model.id, this.state.row)}
-					<NSASectionViewTabPage<RowType, RowTypeInput>
-						ref={this.NSASectionViewTabPage_Ref}
-						{...this.props}
-						model={{
-							id: this.props.model.id,
-							row: this.state.row
-						}}
-						ui={this.props.ui?.tab_page_view}
-					/>
-					{this.props.ui?.getChildrenAfter && this.props.ui?.getChildrenAfter(this.props.model.id, this.state.row)}
-					{this.props.children}
-				</div>
-			);
-
-		return <NSLoading></NSLoading>;
-	}
+import { EntityResolveResponseRow } from "namirasoft-field";
+import { IBaseComponentProps, NSLoading } from "namirasoft-site-react";
+import { Component, createRef, ReactNode } from "react";
+import { IEntityInfo } from "../IEntityInfo";
+import { NSARouterMakerResult } from "../NSARouterMakerResult";
+import { NSASectionViewTabPage, NSASectionViewTabPageUIProps } from "./NSASectionViewTabPage";
+
+export interface NSASectionViewCutomProps<RowType> extends IBaseComponentProps
+{
+	ui?: {
+		tab_page_view?: NSASectionViewTabPageUIProps<RowType>;
+		getChildrenBefore?: (id: string, row: RowType) => ReactNode;
+		getChildrenAfter?: (id: string, row: RowType) => ReactNode;
+	};
+	onRowLoaded?: (row: RowType) => void;
+	children?: React.ReactNode;
+}
+
+export interface NSASectionViewProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSARouterMakerResult, NSASectionViewCutomProps<RowType>
+{
+	entity: IEntityInfo<RowType, RowTypeInput>;
+	ctf: {
+		enabled: boolean;
+		rows: EntityResolveResponseRow | null;
+	};
+	model: {
+		id: string | null;
+		row: RowType | null;
+	};
+}
+
+interface NSASectionViewState<RowType>
+{
+	row: RowType | null;
+}
+
+export class NSASectionView<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionViewProps<RowType, RowTypeInput>, NSASectionViewState<RowType>>
+{
+	NSASectionViewTabPage_Ref = createRef<NSASectionViewTabPage<RowType, RowTypeInput>>();
+
+	constructor(props: NSASectionViewProps<RowType, RowTypeInput>)
+	{
+		super(props);
+
+		this.state = { row: this.props.model.row };
+
+		this.reload = this.reload.bind(this);
+		this.getRow = this.getRow.bind(this);
+	}
+	reload() 
+	{
+		this.setState(prev => ({ ...prev, row: null }));
+		if (this.props.model.id)
+			if (this.props.entity.server.get)
+				this.props.entity.server.get(this.props.model.id).then(row =>
+				{
+					this.setState(prev => ({ ...prev, row }), () =>
+					{
+						this.props.onRowLoaded?.(row);
+					});
+				}).catch(() => { });
+	}
+	getRow()
+	{
+		return this.state.row;
+	}
+	override componentDidMount()
+	{
+		if (this.props.model.id)
+			if (!this.props.model.row || this.props.model.row.id !== this.props.model.id)
+				this.reload();
+	}
+	override render()
+	{
+		if (this.props.model.id && this.state.row != null)
+			return (
+				<div
+					id={this.props.id}
+					className={`${this.props.classList?.join(" ") ?? ""}`}
+					style={{ ...this.props.style }}
+				>
+					{this.props.ui?.getChildrenBefore && this.props.ui?.getChildrenBefore(this.props.model.id, this.state.row)}
+					<NSASectionViewTabPage<RowType, RowTypeInput>
+						ref={this.NSASectionViewTabPage_Ref}
+						{...this.props}
+						model={{
+							id: this.props.model.id,
+							row: this.state.row
+						}}
+						ui={this.props.ui?.tab_page_view}
+					/>
+					{this.props.ui?.getChildrenAfter && this.props.ui?.getChildrenAfter(this.props.model.id, this.state.row)}
+					{this.props.children}
+				</div>
+			);
+
+		return <NSLoading></NSLoading>;
+	}
 }