namirasoft-account-react 1.4.19 → 1.4.21

package/src/layouts/NSASectionTabs.tsx

@@ -1,157 +1,153 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { EnvService, FilterItem, FilterItemOperator } from "namirasoft-core";
-import { BaseColumnFormatter, DateTimeFormatter, ForeignIDFormatter, IDFormatter, NSBoxLabel, NSLoading, NSRepeater, NSTable, NSTabPage, StringFormatter, NSTagValue, NSTag } from "namirasoft-site-react";
-import { HistoryRow, MetaDatabase, NamirasoftHistoryServer } from "namirasoft-history";
-import { IEntityInfo } from "../IEntityInfo";
-import { INSARouterProps } from "../INSARouterProps";
-
-export interface NSASectionTabsProps
-{
-	id: string;
-}
-
-interface NSASectionTabsState
-{
-	row: any | null;
-}
-
-export interface NSASectionTabsRef
-{
-	NSTabPage: NSTabPage | null;
-}
-
-export const NSASectionTabs = forwardRef<any, any>(<EntityType extends { id: string }, EntityTypeInput = EntityType>(
-	_props: Omit<NSASectionTabsProps & { entity: IEntityInfo<EntityType, EntityTypeInput>; } & INSARouterProps, "ref">,
-	ref: React.Ref<NSASectionTabsRef>
-) =>
-{
-	let props: NSASectionTabsProps & { entity: IEntityInfo<EntityType, EntityTypeInput>; } & INSARouterProps = _props as any;
-	const NSTabPage_Ref = useRef<NSTabPage>(null);
-
-	let [state, setState] = useState<NSASectionTabsState>({ row: null });
-
-	useEffect(() =>
-	{
-		setState(prevState => ({ ...prevState, row: null }));
-		if (props.id)
-		{
-			debugger;
-			props.entity.server.get(props.id).then(row =>
-			{
-				debugger;
-				setState(prevState => ({ ...prevState, row }));
-			}).catch(() =>
-			{
-				debugger;
-			});
-		}
-	}, [props.id]);		// eslint-disable-line react-hooks/exhaustive-deps
-	// tabs
-	//todo
-	// let todo = () => <p>This is not impolemented yet.</p>;
-	const tabs = [];
-	if (props.id)
-	{
-		tabs.push({
-			title: 'Information', getContent: () =>
-			{
-				if (state.row == null)
-					return <NSLoading></NSLoading>;
-				return <>
-					{
-						props.entity.client.getColumns().map(column =>
-						{
-							let value = state.row[column.name];
-							let formatted = column.formatter.format(value, column, { index: 0, value: state.row });
-							return <NSBoxLabel title={column.text + ":"}><p style={{ color: "#000" }}>{formatted}</p></NSBoxLabel>
-						})
-					}
-				</>;
-			}
-		});
-		//todo
-		// tabs.push({ title: 'Price History', getContent: todo });
-		// tabs.push({ title: 'Price Estimator', getContent: todo });
-		// tabs.push({ title: 'Log', getContent: todo });
-		// tabs.push({ title: 'Monitor', getContent: todo });
-		tabs.push({
-			title: 'History', getContent: () =>
-			{
-				return <NSTable<HistoryRow>
-					checkbox={false}
-					columns={[
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.id, new IDFormatter()),
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.user_id, new ForeignIDFormatter()),
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.device_id, new ForeignIDFormatter()),
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.session_id, new ForeignIDFormatter()),
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.product_id, new ForeignIDFormatter()),
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.entity_name, new StringFormatter()),
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.entity_id, new ForeignIDFormatter()),
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.action, new StringFormatter()),
-						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.created_at, new DateTimeFormatter()),
-					]}
-					getRows={async () =>
-					{
-						if (props.id)
-						{
-							let REACT_APP_BASE_URL_HISTORY = new EnvService("REACT_APP_BASE_URL_HISTORY", true).getString();
-							let server = new NamirasoftHistoryServer(REACT_APP_BASE_URL_HISTORY, props.account.token_manager, props.notifier.onError);
-							let filters = [new FilterItem(MetaDatabase.main.history, MetaDatabase.main.history.columns.id, false, FilterItemOperator.all.equals, props.id)]
-							return await server.history.List(filters, null, null);
-						}
-						return { rows: [], count: 0 };
-					}}
-					getRowKey={row => row.value.id}
-				></NSTable>;
-			}
-		});
-	}
-	//todo
-	// tabs.push({ title: 'How It Works', getContent: todo });
-	// tabs.push({ title: 'API', getContent: todo });
-	// tabs.push({ title: 'Sample Code', getContent: todo });
-	tabs.push({
-		title: 'Tag', getContent: () =>
-		{
-			return <NSRepeater<NSTag, NSTagValue>
-				createItem={(index, ref, onChange, onDelete) =>
-				{
-					return <NSTag
-						ref={ref}
-						onChanged={() =>
-						{
-							onChange(index);
-						}}
-						onDeleted={() =>
-						{
-							onDelete(index);
-						}}
-					/>;
-				}}
-				getValue={(item, checkError) => item.getValue(checkError)}
-				isEmpty={value => NSTag.isEmpty(value)}
-				updateItem={(item, index, value) =>
-				{
-					if (index > 0)
-						if (value)
-							item.setValue(value);
-				}}
-				onValuesChanged={values =>
-				{
-					console.log(values)
-				}}
-			/>;
-		}
-	});
-	//todo
-	// tabs.push({ title: 'Category', getContent: todo });
-	// tabs.push({ title: 'Field', getContent: todo });
-
-	useImperativeHandle(ref, () => ({
-		NSTabPage: NSTabPage_Ref.current
-	}));
-
-	return (
-		<NSTabPage ref={NSTabPage_Ref} tabs={tabs} />
-	);
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { EnvService, FilterItem, FilterItemOperator } from "namirasoft-core";
+import { BaseColumnFormatter, DateTimeFormatter, ForeignIDFormatter, IDFormatter, NSBoxLabel, NSLoading, NSRepeater, NSTable, NSTabPage, StringFormatter, NSTagValue, NSTag } from "namirasoft-site-react";
+import { HistoryRow, MetaDatabase, NamirasoftHistoryServer } from "namirasoft-history";
+import { IEntityInfo } from "../IEntityInfo";
+import { INSARouterProps } from "../INSARouterProps";
+
+export interface NSASectionTabsProps
+{
+	id: string;
+}
+
+interface NSASectionTabsState
+{
+	row: any | null;
+}
+
+export interface NSASectionTabsRef
+{
+	NSTabPage: NSTabPage | null;
+}
+
+export const NSASectionTabs = forwardRef<any, any>(<EntityType extends { id: string }, EntityTypeInput = EntityType>(
+	_props: Omit<NSASectionTabsProps & { entity: IEntityInfo<EntityType, EntityTypeInput>; } & INSARouterProps, "ref">,
+	ref: React.Ref<NSASectionTabsRef>
+) =>
+{
+	let props: NSASectionTabsProps & { entity: IEntityInfo<EntityType, EntityTypeInput>; } & INSARouterProps = _props as any;
+	const NSTabPage_Ref = useRef<NSTabPage>(null);
+
+	let [state, setState] = useState<NSASectionTabsState>({ row: null });
+
+	useEffect(() =>
+	{
+		setState(prevState => ({ ...prevState, row: null }));
+		if (props.id)
+		{
+			if (props.entity.server.get)
+				props.entity.server.get(props.id).then(row =>
+				{
+					setState(prevState => ({ ...prevState, row }));
+				}).catch(() => { });
+		}
+	}, [props.id]);		// eslint-disable-line react-hooks/exhaustive-deps
+	// tabs
+	//todo
+	// let todo = () => <p>This is not impolemented yet.</p>;
+	const tabs = [];
+	if (props.id)
+	{
+		tabs.push({
+			title: 'Information', getContent: () =>
+			{
+				if (state.row == null)
+					return <NSLoading></NSLoading>;
+				return <>
+					{
+						props.entity.client.getColumns().map(column =>
+						{
+							let value = state.row[column.name];
+							let formatted = column.formatter.format(value, column, { index: 0, value: state.row });
+							return <NSBoxLabel title={column.text + ":"}><p style={{ color: "#000" }}>{formatted}</p></NSBoxLabel>
+						})
+					}
+				</>;
+			}
+		});
+		//todo
+		// tabs.push({ title: 'Price History', getContent: todo });
+		// tabs.push({ title: 'Price Estimator', getContent: todo });
+		// tabs.push({ title: 'Log', getContent: todo });
+		// tabs.push({ title: 'Monitor', getContent: todo });
+		tabs.push({
+			title: 'History', getContent: () =>
+			{
+				return <NSTable<HistoryRow>
+					checkbox={false}
+					columns={[
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.id, new IDFormatter()),
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.user_id, new ForeignIDFormatter()),
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.device_id, new ForeignIDFormatter()),
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.session_id, new ForeignIDFormatter()),
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.product_id, new ForeignIDFormatter()),
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.entity_name, new StringFormatter()),
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.entity_id, new ForeignIDFormatter()),
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.action, new StringFormatter()),
+						BaseColumnFormatter.getColumn(MetaDatabase.main.history.columns.created_at, new DateTimeFormatter()),
+					]}
+					getRows={async () =>
+					{
+						if (props.id)
+						{
+							let REACT_APP_BASE_URL_HISTORY = new EnvService("REACT_APP_BASE_URL_HISTORY", true).getString();
+							let server = new NamirasoftHistoryServer(REACT_APP_BASE_URL_HISTORY, props.account.token_manager, props.notifier.onError);
+							let filters = [new FilterItem(MetaDatabase.main.history, MetaDatabase.main.history.columns.id, false, FilterItemOperator.all.equals, props.id)]
+							return await server.history.List(filters, null, null);
+						}
+						return { rows: [], count: 0 };
+					}}
+					getRowKey={row => row.value.id}
+				></NSTable>;
+			}
+		});
+	}
+	//todo
+	// tabs.push({ title: 'How It Works', getContent: todo });
+	// tabs.push({ title: 'API', getContent: todo });
+	// tabs.push({ title: 'Sample Code', getContent: todo });
+	tabs.push({
+		title: 'Tag', getContent: () =>
+		{
+			return <NSRepeater<NSTag, NSTagValue>
+				createItem={(index, ref, onChange, onDelete) =>
+				{
+					return <NSTag
+						ref={ref}
+						onChanged={() =>
+						{
+							onChange(index);
+						}}
+						onDeleted={() =>
+						{
+							onDelete(index);
+						}}
+					/>;
+				}}
+				getValue={(item, checkError) => item.getValue(checkError)}
+				isEmpty={value => NSTag.isEmpty(value)}
+				updateItem={(item, index, value) =>
+				{
+					if (index > 0)
+						if (value)
+							item.setValue(value);
+				}}
+				onValuesChanged={values =>
+				{
+					console.log(values)
+				}}
+			/>;
+		}
+	});
+	//todo
+	// tabs.push({ title: 'Category', getContent: todo });
+	// tabs.push({ title: 'Field', getContent: todo });
+
+	useImperativeHandle(ref, () => ({
+		NSTabPage: NSTabPage_Ref.current
+	}));
+
+	return (
+		<NSTabPage ref={NSTabPage_Ref} tabs={tabs} />
+	);
 });

package/src/layouts/NSASectionView.tsx

@@ -1,61 +1,62 @@
-import { NSASectionTabs, NSASectionTabsRef } from "./NSASectionTabs";
-import { IEntityInfo } from "../IEntityInfo";
-import { useParams } from "react-router-dom";
-import { forwardRef, ReactNode, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { NSLoading } from "namirasoft-site-react";
-import { INSARouterProps } from "../INSARouterProps";
-
-export interface NSASectionViewProps<EntityType>
-{
-	getChildren?: (id: string, entity: EntityType) => ReactNode;
-}
-
-interface NSASectionViewState<EntityType>
-{
-	entity: EntityType | null;
-}
-
-export interface NSASectionViewRef
-{
-	NSASectionTabs: NSASectionTabsRef | null
-}
-
-export const NSASectionView = forwardRef<any, any>(<EntityType extends { id: string }, EntityTypeInput = EntityType>(
-	props: Omit<NSASectionViewProps<EntityType> & { entity: IEntityInfo<EntityType, EntityTypeInput>; } & INSARouterProps, "ref">,
-	ref: React.Ref<NSASectionViewRef>
-) =>
-{
-	let NSASectionTabs_Ref = useRef<NSASectionTabsRef>(null);
-
-	let { id } = useParams();
-
-	let [state, setState] = useState<NSASectionViewState<EntityType>>({ entity: null });
-
-	useEffect(() =>
-	{
-		if (id)
-			props.entity.server.get(id).then((entity) =>
-			{
-				setState({ entity });
-			}).catch(() => { });
-	}, [id]);		// eslint-disable-line react-hooks/exhaustive-deps
-
-
-	useImperativeHandle(ref, () => ({
-		NSASectionTabs: NSASectionTabs_Ref.current
-	}));
-
-	if (id && state.entity != null)
-		return (
-			<>
-				<NSASectionTabs
-					ref={NSASectionTabs_Ref}
-					id={id ?? ""}
-					{...props}
-				/>
-				{props.getChildren && props.getChildren(id, state.entity)}
-			</>
-		);
-
-	return <NSLoading></NSLoading>;
+import { NSASectionTabs, NSASectionTabsRef } from "./NSASectionTabs";
+import { IEntityInfo } from "../IEntityInfo";
+import { useParams } from "react-router-dom";
+import { forwardRef, ReactNode, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { NSLoading } from "namirasoft-site-react";
+import { INSARouterProps } from "../INSARouterProps";
+
+export interface NSASectionViewProps<EntityType>
+{
+	getChildren?: (id: string, entity: EntityType) => ReactNode;
+}
+
+interface NSASectionViewState<EntityType>
+{
+	entity: EntityType | null;
+}
+
+export interface NSASectionViewRef
+{
+	NSASectionTabs: NSASectionTabsRef | null
+}
+
+export const NSASectionView = forwardRef<any, any>(<EntityType extends { id: string }, EntityTypeInput = EntityType>(
+	props: Omit<NSASectionViewProps<EntityType> & { entity: IEntityInfo<EntityType, EntityTypeInput>; } & INSARouterProps, "ref">,
+	ref: React.Ref<NSASectionViewRef>
+) =>
+{
+	let NSASectionTabs_Ref = useRef<NSASectionTabsRef>(null);
+
+	let { id } = useParams();
+
+	let [state, setState] = useState<NSASectionViewState<EntityType>>({ entity: null });
+
+	useEffect(() =>
+	{
+		if (id)
+			if (props.entity.server.get)
+				props.entity.server.get(id).then((entity) =>
+				{
+					setState({ entity });
+				}).catch(() => { });
+	}, [id]);		// eslint-disable-line react-hooks/exhaustive-deps
+
+
+	useImperativeHandle(ref, () => ({
+		NSASectionTabs: NSASectionTabs_Ref.current
+	}));
+
+	if (id && state.entity != null)
+		return (
+			<>
+				<NSASectionTabs
+					ref={NSASectionTabs_Ref}
+					id={id ?? ""}
+					{...props}
+				/>
+				{props.getChildren && props.getChildren(id, state.entity)}
+			</>
+		);
+
+	return <NSLoading></NSLoading>;
 });

package/src/main.ts

@@ -1,20 +1,20 @@
-export * from "./components/NSAAccessListDialog";
-export * from "./components/NSAMessageListDialog";
-export * from "./layouts/Actions";
-export * from "./layouts/Menus";
-export * from "./layouts/NSALayout";
-export * from "./layouts/NSASectionEdit";
-export * from "./layouts/NSASectionList";
-export * from "./layouts/NSASectionTabs";
-export * from "./layouts/NSASectionView";
-export * from "./pages/NSAHomePage";
-export * from "./pages/NSALoginPage";
-export * from "./pages/NSAVerificationPage";
-export * from "./IEntityInfo";
-export * from "./Info";
-export * from "./INSARouterMaker";
-export * from "./INSARouterProps";
-export * from "./INSARouterState";
-export * from "./Message";
-export * from "./Messages";
+export * from "./components/NSAAccessListDialog";
+export * from "./components/NSAMessageListDialog";
+export * from "./layouts/Actions";
+export * from "./layouts/Menus";
+export * from "./layouts/NSALayout";
+export * from "./layouts/NSASectionEdit";
+export * from "./layouts/NSASectionList";
+export * from "./layouts/NSASectionTabs";
+export * from "./layouts/NSASectionView";
+export * from "./pages/NSAHomePage";
+export * from "./pages/NSALoginPage";
+export * from "./pages/NSAVerificationPage";
+export * from "./IEntityInfo";
+export * from "./Info";
+export * from "./INSARouterMaker";
+export * from "./INSARouterProps";
+export * from "./INSARouterState";
+export * from "./Message";
+export * from "./Messages";
 export * from "./NSARouterMaker";

package/src/pages/NSAHomePage.module.css

@@ -1,23 +1,23 @@
-.nsa_home_container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    color: #141B5C;
-}
-
-.nsa_home_container h2 {
-    color: #141B5C;
-    font-size: 48px;
-    font-weight: 600;
-    text-align: center;
-}
-
-.nsa_home_container p {
-    color: #141B5C;
-    font-size: 16px;
-    max-width: 960px;
-    text-align: center;
+.nsa_home_container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: #141B5C;
+}
+
+.nsa_home_container h2 {
+    color: #141B5C;
+    font-size: 48px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.nsa_home_container p {
+    color: #141B5C;
+    font-size: 16px;
+    max-width: 960px;
+    text-align: center;
 }

package/src/pages/NSAHomePage.tsx

@@ -1,28 +1,28 @@
-import { IBaseComponentProps, INSBarTitleProps, INSRouterProps, NSProductList, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
-import Styles from './NSAHomePage.module.css';
-
-export interface NSAHomePageProps extends IBaseComponentProps, INSBarTitleProps, INSRouterProps
-{
-    title: string;
-    icon: string;
-    description: string
-}
-
-export function NSAHomePage(props: NSAHomePageProps)
-{
-    return (
-        <div className={Styles.nsa_home_container}>
-            <img
-                src={props.icon}
-                alt={props.name}
-                width={256}
-                height={256}
-            />
-            <NSSpace size={NSSpaceSizeType.MICRO} />
-            <h2>{props.title}</h2>
-            <NSSpace size={NSSpaceSizeType.MICRO} />
-            <p>{props.description}</p>
-            <NSProductList notifier={props.notifier} scope={props.title} name="Home" />
-        </div>
-    );
+import { IBaseComponentProps, INSBarTitleProps, INSRouterProps, NSProductList, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
+import Styles from './NSAHomePage.module.css';
+
+export interface NSAHomePageProps extends IBaseComponentProps, INSBarTitleProps, INSRouterProps
+{
+    title: string;
+    icon: string;
+    description: string
+}
+
+export function NSAHomePage(props: NSAHomePageProps)
+{
+    return (
+        <div className={Styles.nsa_home_container}>
+            <img
+                src={props.icon}
+                alt={props.name}
+                width={256}
+                height={256}
+            />
+            <NSSpace size={NSSpaceSizeType.MICRO} />
+            <h2>{props.title}</h2>
+            <NSSpace size={NSSpaceSizeType.MICRO} />
+            <p>{props.description}</p>
+            <NSProductList notifier={props.notifier} scope={props.title} name="Home" />
+        </div>
+    );
 }

package/src/pages/NSALoginPage.module.css

@@ -1,20 +1,20 @@
-.ns_login_container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}
-
-.ns_logo {
-	text-align: center;
-}
-
-.ns_title {
-	font-size: 32px;
-	font-weight: 700;
-	text-align: center;
-}
-
-.ns_button {
-	text-align: center;
+.ns_login_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.ns_logo {
+	text-align: center;
+}
+
+.ns_title {
+	font-size: 32px;
+	font-weight: 700;
+	text-align: center;
+}
+
+.ns_button {
+	text-align: center;
 }