namirasoft-account-react 1.4.19 → 1.4.21

package/src/layouts/NSALayout.tsx

@@ -1,388 +1,418 @@
-import { forwardRef, ReactNode, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { EnvService, CacheService, IStorageLocal, NamingConvention } from 'namirasoft-core';
-import { NSLayout, IHeaderProps, IBaseComponentProps, IHeaderIconProps, INSBarActionProps, INSBarHeroBannerProps, INSBarNotificationProps, INSBarTitleProps, NSDeleteDialog } from 'namirasoft-site-react';
-import { NamirasoftMessageServer } from 'namirasoft-message';
-import { NSASectionEdit, NSASectionEditProps, NSASectionEditRef, onApply as NSASectionEdit_onApply } from './NSASectionEdit';
-import { NSASectionView, NSASectionViewProps, NSASectionViewRef } from './NSASectionView';
-import { NSASectionList, NSASectionListProps } from './NSASectionList';
-import { Actions } from './Actions';
-import { INSARouterProps } from '../INSARouterProps';
-import { IEntityInfo } from '../IEntityInfo';
-import { NSAProductListDialog } from '../components/NSAProductListDialog';
-import { NSAWorkspaceListDialog } from '../components/NSAWorkspaceListDialog';
-import { NSAAccessListDialog } from '../components/NSAAccessListDialog';
-import { NSAMessageListDialog } from '../components/NSAMessageListDialog';
-
-export interface NSALayoutProps<EntityType extends { id: string }, EntityTypeInput = EntityType> extends IBaseComponentProps, INSARouterProps
-{
-	scope: string;
-	logo: string;
-	background?: string;
-	header?: IHeaderProps;
-	notifications: INSBarNotificationProps[];
-	action?: INSBarActionProps;
-	banner?: INSBarHeroBannerProps;
-	title?: INSBarTitleProps;
-	pages?: {
-		entity: IEntityInfo<EntityType, EntityTypeInput>;
-		ui?: {
-			action?: {
-				menus: {
-					new?: boolean,
-					view?: boolean,
-					viewHistory?: boolean,
-					copy?: boolean,
-					edit?: boolean,
-					delete?: boolean,
-					apply?: boolean,
-				}
-			}
-		}
-		list?: NSASectionListProps<EntityType>;
-		edit?: NSASectionEditProps<EntityType, EntityTypeInput>;
-		view?: NSASectionViewProps<EntityType>;
-	}
-	children: ReactNode;
-}
-
-interface NSALayoutState
-{
-	refresher: number;
-	message_count: number;
-	showDeleteDialog: boolean;
-	showMessageListDialog: boolean;
-	showAccessListDialog: boolean;
-	showProductListDialog: boolean;
-	showWorkspaceListDialog: boolean;
-}
-
-export interface NSALayoutRef<EntityType extends { id: string }, EntityTypeInput = EntityType>
-{
-	list: NSASectionList<EntityType, EntityTypeInput> | null;
-	edit: NSASectionEditRef | null;
-	view: NSASectionViewRef | null;
-}
-
-export const NSALayout = forwardRef<any, any>(<EntityType extends { id: string }, EntityTypeInput = EntityType>(
-	props: Omit<NSALayoutProps<EntityType, EntityTypeInput>, "ref">,
-	ref: React.Ref<NSALayoutRef<EntityType, EntityTypeInput>>
-) =>
-{
-	const NSASectionList_Ref = useRef<NSASectionList<EntityType, EntityTypeInput>>(null);
-	const NSASectionEdit_Ref = useRef<NSASectionEditRef>(null);
-	const NSASectionView_Ref = useRef<NSASectionViewRef>(null);
-
-	const [state, setState] = useState<NSALayoutState>({
-		refresher: 0,
-		message_count: 0,
-		showDeleteDialog: false,
-		showMessageListDialog: false,
-		showAccessListDialog: false,
-		showProductListDialog: false,
-		showWorkspaceListDialog: false
-	});
-
-	const hideDeleteDialog = () => { setState(prevState => ({ ...prevState, showDeleteDialog: false })); };
-	const showDeleteDialog = () => { setState(prevState => ({ ...prevState, showDeleteDialog: true })); };
-
-	let icons: IHeaderIconProps[] = [];
-	let isLoggedIn = props.account.token_manager.exists();
-	let REACT_APP_BASE_URL_ACCOUNT_CONSOLE = new EnvService("REACT_APP_BASE_URL_ACCOUNT_CONSOLE").getString();
-
-	if (isLoggedIn)
-		icons.push({
-			src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "Logout", onClicked: () =>
-			{
-				window.location.href = REACT_APP_BASE_URL_ACCOUNT_CONSOLE + "/logout";
-			},
-			tooltip: "Logout"
-		});
-
-	// message
-	let STORAGE_KEY = "ns-messsage-count";
-	let storage = new IStorageLocal();
-	let reloadMessageCount: (force: boolean) => void;
-	let cache_message: CacheService<number> = new CacheService<number>(STORAGE_KEY, 15, storage, async () =>
-	{
-		let REACT_APP_BASE_URL_MESSAGE = new EnvService("REACT_APP_BASE_URL_MESSAGE", true).getString();
-		let server = new NamirasoftMessageServer(REACT_APP_BASE_URL_MESSAGE, props.account.token_manager, console.error);
-		let res = await server.message.GetNewCount();
-		return res.count;
-	}, () => { reloadMessageCount(false); });
-	reloadMessageCount = (force: boolean) =>
-	{
-		if (force)
-			cache_message.del();
-		cache_message.get().then(count =>
-		{
-			setState(prevState => ({ ...prevState, message_count: count }));
-		});
-	}
-	useEffect(() =>
-	{
-		if (isLoggedIn)
-			reloadMessageCount(false);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-	if (isLoggedIn)
-	{
-		icons.push({
-			src: "https://static.namirasoft.com/image/namirasoft/message/logo/base.png", alt: "Message", onClicked: () =>
-			{
-				setState(prevState => ({ ...prevState, showMessageListDialog: true }));
-			},
-			children: <>
-				{
-					(
-						state.showMessageListDialog &&
-						<NSAMessageListDialog {...props}
-							onClose={() => { setState(prevState => ({ ...prevState, showMessageListDialog: false })); }}
-							onSeenAll={() =>
-							{
-								if (reloadMessageCount)
-									reloadMessageCount(true);
-							}}
-							onCountReceived={count =>
-							{
-								cache_message.set(count);
-								setState(prevState => ({ ...prevState, message_count: count }));
-							}}
-						/>
-					)
-				}
-			</>,
-			count: state.message_count,
-			tooltip: "Message"
-		});
-	}
-	if (isLoggedIn)
-		icons.push({
-			src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png", alt: "Access", onClicked: () =>
-			{
-				setState(prevState => ({ ...prevState, showAccessListDialog: true }));
-			},
-			children: <>
-				{
-					(state.showAccessListDialog) && <NSAAccessListDialog {...props} onClose={() =>
-					{
-						setState(prevState => ({ ...prevState, showAccessListDialog: false }));
-					}} />
-				}
-
-			</>,
-			tooltip: "Accsess"
-		});
-	if (isLoggedIn)
-		icons.push({
-			src: "https://static.namirasoft.com/image/namirasoft/workspace/logo/base.png", alt: "Workspace", onClicked: () =>
-			{
-				setState(prevState => ({ ...prevState, showWorkspaceListDialog: true }));
-			},
-			children: <>
-				{
-					(state.showWorkspaceListDialog) && <NSAWorkspaceListDialog {...props} onClose={() =>
-					{
-						debugger
-						setState(prevState => ({ ...prevState, showWorkspaceListDialog: false }));
-					}} />
-				}
-			</>,
-			tooltip: "Workspace List"
-		});
-	icons.push({
-		src: "https://static.namirasoft.com/image/concept/product-list/white.svg", alt: "Product", onClicked: () =>
-		{
-			setState(prevState => ({ ...prevState, showProductListDialog: true }));
-		},
-		children: <>
-			{
-				(state.showProductListDialog) && <NSAProductListDialog {...props} onClose={() =>
-				{
-					setState(prevState => ({ ...prevState, showProductListDialog: false }));
-				}} >
-					<></>
-				</NSAProductListDialog>
-			}
-		</>,
-		tooltip: "Product List"
-	});
-
-	let name = "";
-	if (props.pages)
-		name = NamingConvention.lower_case_underscore.convert(props.pages.entity.name, NamingConvention.Pascal_Case_Space);
-
-	let user_name = props.account.token_manager.getUserData(user => [user.first_name, user.last_name].filter(n => n).join(" "), "");
-
-	let { id } = useParams();
-
-	let getIDs: (() => string[]) | null = null;
-	if (props.pages?.list)
-		getIDs = () => { return NSASectionList_Ref.current?.getSelectedIDs() ?? []; };
-	if (props.pages?.edit)
-		getIDs = () => [id].filter(id => id) as string[];
-	if (props.pages?.view)
-		getIDs = () => [id].filter(id => id) as string[];
-
-	let action: INSBarActionProps | undefined = props.action;
-	if (!action)
-		action = { title: "", description: "", menus: {} };
-
-	if (getIDs)
-		if (props.pages?.entity.client.getMenus)
-		{
-			let menus = props.pages?.entity.client.getMenus(getIDs);
-			for (let key of Object.keys(menus))
-			{
-				if (!action.menus[key])
-					action.menus[key] = [];
-				action.menus[key].push(...menus[key]);
-			}
-		}
-
-	let name_apply = "Apply";
-	let name_actions = "Actions";
-	action.menus[name_apply] = [];
-	action.menus[name_actions] = [];
-
-	if (props.pages?.edit)
-	{
-		if (!action.title)
-			action.title = (props.pages.edit.isEdit ? "Edit" : "New") + " " + name;
-
-		// Menu
-		if (props.pages.edit.ui.action?.menus.apply ?? true)
-			action.menus[name_apply].push(Actions.apply(() =>
-			{
-				if (props.pages?.edit)
-					NSASectionEdit_onApply(props.pages?.edit, props.pages.entity, id);
-			}));
-	}
-	else if (props.pages)
-		if (props.pages.ui?.action?.menus.new ?? true)
-			action.menus[name_apply].push(Actions.new(props, props.pages.entity));
-
-	if (getIDs)
-		if (props.pages)
-		{
-			if (props.pages.ui?.action?.menus.view ?? true)
-				action.menus[name_actions].push(Actions.view(props, props.pages.entity, getIDs));
-			if (props.pages.ui?.action?.menus.viewHistory ?? true)
-				action.menus[name_actions].push(Actions.viewHistory(getIDs));
-			if (props.pages.ui?.action?.menus.copy ?? true)
-				action.menus[name_actions].push(Actions.copy(props, props.pages.entity, getIDs));
-			if (props.pages.ui?.action?.menus.edit ?? true)
-				action.menus[name_actions].push(Actions.edit(props, props.pages.entity, getIDs));
-			if (props.pages.ui?.action?.menus.delete ?? true)
-				action.menus[name_actions].push(Actions.delete(getIDs, showDeleteDialog));
-		}
-
-	let action_name = "";
-	let content;
-	if (props.pages?.list)
-	{
-		action_name = "List";
-		content = <NSASectionList<EntityType, EntityTypeInput> ref={NSASectionList_Ref} {...props} {...props.pages.list} entity={props.pages.entity} />
-	}
-	else if (props.pages?.edit)
-	{
-		if (props.pages.edit.isEdit)
-			action_name = "Edit";
-		else
-			action_name = "New";
-		content = <NSASectionEdit ref={NSASectionEdit_Ref} {...props} {...props.pages.edit} entity={props.pages.entity} >{props.children}</NSASectionEdit>;
-	}
-	else if (props.pages?.view)
-	{
-		action_name = "View";
-		content = <NSASectionView ref={NSASectionView_Ref}
-			{...props}
-			{...props.pages.view}
-			entity={props.pages.entity}
-		/>;
-	}
-	else
-		content = props.children;
-
-	let fullname = "";
-	if (props.pages?.entity.name)
-	{
-		let Name_Pascal_Space = NamingConvention.lower_case_underscore.convert(props.pages.entity.name, NamingConvention.Pascal_Case_Space);
-		fullname = action_name + " " + Name_Pascal_Space;
-	}
-	let action_title = action?.title ?? "";
-	if (!action_title)
-		action_title = fullname;
-
-	useImperativeHandle(ref, () => ({
-		list: NSASectionList_Ref.current,
-		edit: NSASectionEdit_Ref.current,
-		view: NSASectionView_Ref.current,
-	}));
-	return (
-		<NSLayout
-			{...props}
-			header={{
-				title: (user_name + " " + (props.header?.title ?? "")).trim(),
-				icons: [...icons, ...(props.header?.icons ?? [])],
-				logo_title: props.header?.logo_title
-			}}
-			action={{
-				title: action_title,
-				description: action?.description,
-				menus: action.menus
-			}}
-			isLoggedIn={props.account.token_manager.exists}
-		>
-			<div className="container-fluid">
-				{
-					state.showDeleteDialog &&
-					<NSDeleteDialog
-						title={"Delete Confirmation"}
-						description={`Are you sure you want to delete ${name}?`}
-						onClose={hideDeleteDialog}
-						onNo={hideDeleteDialog}
-						onYes={async () =>
-						{
-							try
-							{
-								if (props.pages)
-									if (getIDs)
-									{
-										let ids = getIDs();
-										if (ids.length === 0)
-											throw new Error("Nothing was found to delete.");
-										if (ids.length === 1)
-										{
-											await props.pages.entity.server.delete(ids[0]);
-											props.notifier.onSuccess(`${name} was deleted successfully.`);
-											hideDeleteDialog();
-
-											if (props.pages?.list)
-											{
-												let table = NSASectionList_Ref.current?.NSTable_Main.current;
-												if (table)
-													table.reload(null, null);
-											}
-											else if (props.pages?.edit)
-												props.url.redirect(props.pages.entity.client.getListURL(), {});
-											else if (props.pages?.view)
-												props.url.redirect(props.pages.entity.client.getListURL(), {});
-										}
-										else
-											// todo support multiple ids deletion
-											throw new Error("Multiple deletion is not supported yet.");
-									}
-							} catch (error: any)
-							{
-								props.notifier.onError(error);
-							}
-						}}
-					>
-						<></>
-					</NSDeleteDialog>}
-				{content}
-			</div>
-		</NSLayout>
-	);
+import { forwardRef, ReactNode, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { EnvService, CacheService, IStorageLocal, NamingConvention } from 'namirasoft-core';
+import { NSLayout, IHeaderProps, IBaseComponentProps, IHeaderIconProps, INSBarActionProps, INSBarHeroBannerProps, INSBarNotificationProps, INSBarTitleProps, NSDeleteDialog } from 'namirasoft-site-react';
+import { NamirasoftMessageServer } from 'namirasoft-message';
+import { NSASectionEdit, NSASectionEditProps, NSASectionEditRef, onApply as NSASectionEdit_onApply } from './NSASectionEdit';
+import { NSASectionView, NSASectionViewProps, NSASectionViewRef } from './NSASectionView';
+import { NSASectionList, NSASectionListProps } from './NSASectionList';
+import { Actions } from './Actions';
+import { INSARouterProps } from '../INSARouterProps';
+import { IEntityInfo } from '../IEntityInfo';
+import { NSAProductListDialog } from '../components/NSAProductListDialog';
+import { NSAWorkspaceListDialog } from '../components/NSAWorkspaceListDialog';
+import { NSAAccessListDialog } from '../components/NSAAccessListDialog';
+import { NSAMessageListDialog } from '../components/NSAMessageListDialog';
+
+export interface NSALayoutProps<EntityType extends { id: string }, EntityTypeInput = EntityType> extends IBaseComponentProps, INSARouterProps
+{
+	scope: string;
+	logo: string;
+	background?: string;
+	header?: IHeaderProps;
+	notifications: INSBarNotificationProps[];
+	action?: INSBarActionProps;
+	banner?: INSBarHeroBannerProps;
+	title?: INSBarTitleProps;
+	pages?: {
+		entity: IEntityInfo<EntityType, EntityTypeInput>;
+		ui?: {
+			action?: {
+				menus: {
+					_new?: boolean,
+					list?: boolean,
+					view?: boolean,
+					viewHistory?: boolean,
+					copy?: boolean,
+					edit?: boolean,
+					delete?: boolean,
+					apply?: boolean,
+				}
+			}
+		}
+		list?: NSASectionListProps<EntityType>;
+		edit?: NSASectionEditProps<EntityType, EntityTypeInput>;
+		view?: NSASectionViewProps<EntityType>;
+	}
+	children: ReactNode;
+}
+
+interface NSALayoutState
+{
+	refresher: number;
+	message_count: number;
+	showDeleteDialog: boolean;
+	showMessageListDialog: boolean;
+	showAccessListDialog: boolean;
+	showProductListDialog: boolean;
+	showWorkspaceListDialog: boolean;
+}
+
+export interface NSALayoutRef<EntityType extends { id: string }, EntityTypeInput = EntityType>
+{
+	list: NSASectionList<EntityType, EntityTypeInput> | null;
+	edit: NSASectionEditRef | null;
+	view: NSASectionViewRef | null;
+}
+
+export const NSALayout = forwardRef<any, any>(<EntityType extends { id: string }, EntityTypeInput = EntityType>(
+	props: Omit<NSALayoutProps<EntityType, EntityTypeInput>, "ref">,
+	ref: React.Ref<NSALayoutRef<EntityType, EntityTypeInput>>
+) =>
+{
+	const NSASectionList_Ref = useRef<NSASectionList<EntityType, EntityTypeInput>>(null);
+	const NSASectionEdit_Ref = useRef<NSASectionEditRef>(null);
+	const NSASectionView_Ref = useRef<NSASectionViewRef>(null);
+
+	const [state, setState] = useState<NSALayoutState>({
+		refresher: 0,
+		message_count: 0,
+		showDeleteDialog: false,
+		showMessageListDialog: false,
+		showAccessListDialog: false,
+		showProductListDialog: false,
+		showWorkspaceListDialog: false
+	});
+
+	const hideDeleteDialog = () => { setState(prevState => ({ ...prevState, showDeleteDialog: false })); };
+	const showDeleteDialog = () => { setState(prevState => ({ ...prevState, showDeleteDialog: true })); };
+
+	let icons: IHeaderIconProps[] = [];
+	let isLoggedIn = props.account.token_manager.exists();
+	let REACT_APP_BASE_URL_ACCOUNT_CONSOLE = new EnvService("REACT_APP_BASE_URL_ACCOUNT_CONSOLE").getString();
+
+	if (isLoggedIn)
+		icons.push({
+			src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "Logout", onClicked: () =>
+			{
+				window.location.href = REACT_APP_BASE_URL_ACCOUNT_CONSOLE + "/logout";
+			},
+			tooltip: "Logout"
+		});
+
+	// message
+	let STORAGE_KEY = "ns-messsage-count";
+	let storage = new IStorageLocal();
+	let reloadMessageCount: (force: boolean) => void;
+	let cache_message: CacheService<number> = new CacheService<number>(STORAGE_KEY, 15, storage, async () =>
+	{
+		let REACT_APP_BASE_URL_MESSAGE = new EnvService("REACT_APP_BASE_URL_MESSAGE", true).getString();
+		let server = new NamirasoftMessageServer(REACT_APP_BASE_URL_MESSAGE, props.account.token_manager, console.error);
+		let res = await server.message.GetNewCount();
+		return res.count;
+	}, () => { reloadMessageCount(false); });
+	reloadMessageCount = (force: boolean) =>
+	{
+		if (force)
+			cache_message.del();
+		cache_message.get().then(count =>
+		{
+			setState(prevState => ({ ...prevState, message_count: count }));
+		});
+	}
+	useEffect(() =>
+	{
+		if (isLoggedIn)
+			reloadMessageCount(false);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+	if (isLoggedIn)
+	{
+		icons.push({
+			src: "https://static.namirasoft.com/image/namirasoft/message/logo/base.png", alt: "Message", onClicked: () =>
+			{
+				setState(prevState => ({ ...prevState, showMessageListDialog: true }));
+			},
+			children: <>
+				{
+					(
+						state.showMessageListDialog &&
+						<NSAMessageListDialog {...props}
+							onClose={() => { setState(prevState => ({ ...prevState, showMessageListDialog: false })); }}
+							onSeenAll={() =>
+							{
+								if (reloadMessageCount)
+									reloadMessageCount(true);
+							}}
+							onCountReceived={count =>
+							{
+								cache_message.set(count);
+								setState(prevState => ({ ...prevState, message_count: count }));
+							}}
+						/>
+					)
+				}
+			</>,
+			count: state.message_count,
+			tooltip: "Message"
+		});
+	}
+	if (isLoggedIn)
+		icons.push({
+			src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png", alt: "Access", onClicked: () =>
+			{
+				setState(prevState => ({ ...prevState, showAccessListDialog: true }));
+			},
+			children: <>
+				{
+					(state.showAccessListDialog) && <NSAAccessListDialog {...props} onClose={() =>
+					{
+						setState(prevState => ({ ...prevState, showAccessListDialog: false }));
+					}} />
+				}
+
+			</>,
+			tooltip: "Accsess"
+		});
+	if (isLoggedIn)
+		icons.push({
+			src: "https://static.namirasoft.com/image/namirasoft/workspace/logo/base.png", alt: "Workspace", onClicked: () =>
+			{
+				setState(prevState => ({ ...prevState, showWorkspaceListDialog: true }));
+			},
+			children: <>
+				{
+					(state.showWorkspaceListDialog) && <NSAWorkspaceListDialog {...props} onClose={() =>
+					{
+						debugger
+						setState(prevState => ({ ...prevState, showWorkspaceListDialog: false }));
+					}} />
+				}
+			</>,
+			tooltip: "Workspace List"
+		});
+	icons.push({
+		src: "https://static.namirasoft.com/image/concept/product-list/white.svg", alt: "Product", onClicked: () =>
+		{
+			setState(prevState => ({ ...prevState, showProductListDialog: true }));
+		},
+		children: <>
+			{
+				(state.showProductListDialog) && <NSAProductListDialog {...props} onClose={() =>
+				{
+					setState(prevState => ({ ...prevState, showProductListDialog: false }));
+				}} >
+					<></>
+				</NSAProductListDialog>
+			}
+		</>,
+		tooltip: "Product List"
+	});
+
+	let name = "";
+	if (props.pages)
+		name = NamingConvention.lower_case_underscore.convert(props.pages.entity.name, NamingConvention.Pascal_Case_Space);
+
+	let user_name = props.account.token_manager.getUserData(user => [user.first_name, user.last_name].filter(n => n).join(" "), "");
+
+	let { id } = useParams();
+
+	let getIDs: (() => string[]) | null = null;
+	if (props.pages?.list)
+		getIDs = () => { return NSASectionList_Ref.current?.getSelectedIDs() ?? []; };
+	if (props.pages?.edit)
+		getIDs = () => [id].filter(id => id) as string[];
+	if (props.pages?.view)
+		getIDs = () => [id].filter(id => id) as string[];
+
+	let action: INSBarActionProps | undefined = props.action;
+	if (!action)
+		action = { title: "", description: "", menus: {} };
+
+	if (getIDs)
+		if (props.pages?.entity.client.getMenus)
+		{
+			let menus = props.pages?.entity.client.getMenus(getIDs);
+			for (let key of Object.keys(menus))
+			{
+				if (!action.menus[key])
+					action.menus[key] = [];
+				action.menus[key].push(...menus[key]);
+			}
+		}
+
+	let name_apply = "Apply";
+	let name_actions = "Actions";
+	action.menus[name_apply] = [];
+	action.menus[name_actions] = [];
+
+	if (props.pages?.edit)
+	{
+		if (!action.title)
+			action.title = (props.pages.edit.isEdit ? "Edit" : "New") + " " + name;
+
+		// Menu
+		if (props.pages.edit.ui.action?.menus.apply ?? true)
+			action.menus[name_apply].push(Actions.apply(() =>
+			{
+				if (props.pages?.edit)
+					NSASectionEdit_onApply(props.pages?.edit, props.pages.entity, id);
+			}));
+	}
+	else if (props.pages)
+	{
+		if (props.pages.entity.client.getNewURL)
+			if (props.pages.entity.server.create)
+				if (props.pages.ui?.action?.menus._new ?? true)
+					action.menus[name_apply].push(Actions._new(props, props.pages.entity));
+	}
+
+	if (getIDs)
+		if (props.pages)
+		{
+			if (props.pages.entity.client.getListURL)
+				if (props.pages.entity.server.list)
+					if (props.pages.ui?.action?.menus.list ?? true)
+						action.menus[name_actions].push(Actions.list(props, props.pages.entity));
+
+			if (props.pages.entity.client.getViewURL)
+				if (props.pages.entity.server.get)
+					if (props.pages.ui?.action?.menus.view ?? true)
+						action.menus[name_actions].push(Actions.view(props, props.pages.entity, getIDs));
+
+			if (props.pages.ui?.action?.menus.viewHistory ?? true)
+				action.menus[name_actions].push(Actions.viewHistory(getIDs));
+
+			if (props.pages.entity.client.getCopyURL)
+				if (props.pages.entity.server.create)
+					if (props.pages.ui?.action?.menus.copy ?? true)
+						action.menus[name_actions].push(Actions.copy(props, props.pages.entity, getIDs));
+
+			if (props.pages.entity.client.getEditURL)
+				if (props.pages.entity.server.update)
+					if (props.pages.ui?.action?.menus.edit ?? true)
+						action.menus[name_actions].push(Actions.edit(props, props.pages.entity, getIDs));
+
+			if (props.pages.entity.server.delete)
+				if (props.pages.ui?.action?.menus.delete ?? true)
+					action.menus[name_actions].push(Actions.delete(getIDs, showDeleteDialog));
+		}
+
+	let action_name = "";
+	let content;
+	if (props.pages?.list)
+	{
+		action_name = "List";
+		content = <NSASectionList<EntityType, EntityTypeInput> ref={NSASectionList_Ref} {...props} {...props.pages.list} entity={props.pages.entity} />
+	}
+	else if (props.pages?.edit)
+	{
+		if (props.pages.edit.isEdit)
+			action_name = "Edit";
+		else
+			action_name = "New";
+		content = <NSASectionEdit ref={NSASectionEdit_Ref} {...props} {...props.pages.edit} entity={props.pages.entity} >{props.children}</NSASectionEdit>;
+	}
+	else if (props.pages?.view)
+	{
+		action_name = "View";
+		content = <NSASectionView ref={NSASectionView_Ref}
+			{...props}
+			{...props.pages.view}
+			entity={props.pages.entity}
+		/>;
+	}
+	else
+		content = props.children;
+
+	let fullname = "";
+	if (props.pages?.entity.name)
+	{
+		let Name_Pascal_Space = NamingConvention.lower_case_underscore.convert(props.pages.entity.name, NamingConvention.Pascal_Case_Space);
+		fullname = action_name + " " + Name_Pascal_Space;
+	}
+	let action_title = action?.title ?? "";
+	if (!action_title)
+		action_title = fullname;
+
+	useImperativeHandle(ref, () => ({
+		list: NSASectionList_Ref.current,
+		edit: NSASectionEdit_Ref.current,
+		view: NSASectionView_Ref.current,
+	}));
+	return (
+		<NSLayout
+			{...props}
+			header={{
+				title: (user_name + " " + (props.header?.title ?? "")).trim(),
+				icons: [...icons, ...(props.header?.icons ?? [])],
+				logo_title: props.header?.logo_title
+			}}
+			action={{
+				title: action_title,
+				description: action?.description,
+				menus: action.menus
+			}}
+			isLoggedIn={props.account.token_manager.exists}
+		>
+			<div className="container-fluid">
+				{
+					state.showDeleteDialog &&
+					<NSDeleteDialog
+						title={"Delete Confirmation"}
+						description={`Are you sure you want to delete ${name}?`}
+						onClose={hideDeleteDialog}
+						onNo={hideDeleteDialog}
+						onYes={async () =>
+						{
+							try
+							{
+								if (props.pages)
+									if (getIDs)
+									{
+										let ids = getIDs();
+										if (ids.length === 0)
+											throw new Error("Nothing was found to delete.");
+										if (props.pages.entity.server.delete)
+											if (ids.length === 1)
+											{
+												await props.pages.entity.server.delete(ids[0]);
+												props.notifier.onSuccess(`${name} was deleted successfully.`);
+												hideDeleteDialog();
+
+												if (props.pages?.list)
+												{
+													let table = NSASectionList_Ref.current?.NSTable_Main.current;
+													if (table)
+														table.reload(null, null);
+												}
+												else if (props.pages?.edit)
+												{
+													if (props.pages.entity.client.getListURL)
+														props.url.redirect(props.pages.entity.client.getListURL(), {});
+													else if (props.pages.entity.client.getViewURL)
+														props.url.redirect(props.pages.entity.client.getViewURL(ids[0]), {});
+												}
+												else if (props.pages?.view)
+												{
+													if (props.pages.entity.client.getListURL)
+														props.url.redirect(props.pages.entity.client.getListURL(), {});
+												}
+											}
+											else
+												// todo support multiple ids deletion
+												throw new Error("Multiple deletion is not supported yet.");
+									}
+							} catch (error: any)
+							{
+								props.notifier.onError(error);
+							}
+						}}
+					>
+						<></>
+					</NSDeleteDialog>}
+				{content}
+			</div>
+		</NSLayout>
+	);
 });