namirasoft-account-react 1.5.20 → 1.5.21

package/src/components/NSAMessageListDialog.module.css

@@ -1,100 +1,100 @@
-.nsa_message_icon {
-    cursor: pointer;
-}
-
-.nsa_message_title {
-    color: hsla(212, 100%, 51%, 1)
-}
-
-.nsa_message_item {
-    background-color: hsla(157, 94%, 42%, 0.1);
-    padding: 8px 16px;
-    cursor: pointer !important;
-    margin: 8px 0;
-    border-radius: 8px;
-}
-
-.nsa_message_item_title {
-    color: hsla(234, 64%, 22%, 1);
-    font-size: 16px;
-    font-weight: 600;
-    text-align: left;
-}
-
-.nsa_message_item_content {
-    color: hsla(234, 64%, 22%, 1);
-    margin: 0;
-    text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.nsa_message_item_ul {
-    display: flex;
-    padding-left: 16px !important;
-    margin-bottom: 0px;
-}
-
-.nsa_message_item_ul li::marker {
-    color: hsla(157, 94%, 42%, 1);
-    padding: 20px;
-}
-
-.nsa_message_item_dot_green {
-    width: 8px;
-    height: 8px;
-    background: hsla(157, 94%, 42%, 1);
-    border-radius: 50%;
-}
-
-.nsa_message_item_dot_gray {
-    width: 8px;
-    height: 8px;
-    background: hsla(228, 9%, 66%, 1);
-    border-radius: 50%;
-}
-
-.nsa_body_gray {
-    background-color: #fff;
-    padding: 16px;
-    box-shadow: 0px 2px 5px #e6e6e6;
-    cursor: pointer !important;
-}
-
-.nsa_count {
-    position: absolute;
-    background: rgba(3, 119, 255, 1);
-    right: -5px;
-    top: -5px;
-    color: #fff;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.nsa_parent_count {
-    position: relative;
-    width: max-content;
-}
-
-.nsa_toast_body {
-    padding: 0 !important;
-    height: 100%;
-    max-width: 302px;
-    overflow-y: auto;
-}
-
-.nsa_toast_header {
-    padding: 2px !important;
-    display: flex;
-    justify-content: space-between !important;
-    align-items: center;
-}
-
-.nsa_close_icon {
-    cursor: pointer;
+.nsa_message_icon {
+    cursor: pointer;
+}
+
+.nsa_message_title {
+    color: hsla(212, 100%, 51%, 1)
+}
+
+.nsa_message_item {
+    background-color: hsla(157, 94%, 42%, 0.1);
+    padding: 8px 16px;
+    cursor: pointer !important;
+    margin: 8px 0;
+    border-radius: 8px;
+}
+
+.nsa_message_item_title {
+    color: hsla(234, 64%, 22%, 1);
+    font-size: 16px;
+    font-weight: 600;
+    text-align: left;
+}
+
+.nsa_message_item_content {
+    color: hsla(234, 64%, 22%, 1);
+    margin: 0;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.nsa_message_item_ul {
+    display: flex;
+    padding-left: 16px !important;
+    margin-bottom: 0px;
+}
+
+.nsa_message_item_ul li::marker {
+    color: hsla(157, 94%, 42%, 1);
+    padding: 20px;
+}
+
+.nsa_message_item_dot_green {
+    width: 8px;
+    height: 8px;
+    background: hsla(157, 94%, 42%, 1);
+    border-radius: 50%;
+}
+
+.nsa_message_item_dot_gray {
+    width: 8px;
+    height: 8px;
+    background: hsla(228, 9%, 66%, 1);
+    border-radius: 50%;
+}
+
+.nsa_body_gray {
+    background-color: #fff;
+    padding: 16px;
+    box-shadow: 0px 2px 5px #e6e6e6;
+    cursor: pointer !important;
+}
+
+.nsa_count {
+    position: absolute;
+    background: rgba(3, 119, 255, 1);
+    right: -5px;
+    top: -5px;
+    color: #fff;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.nsa_parent_count {
+    position: relative;
+    width: max-content;
+}
+
+.nsa_toast_body {
+    padding: 0 !important;
+    height: 100%;
+    max-width: 302px;
+    overflow-y: auto;
+}
+
+.nsa_toast_header {
+    padding: 2px !important;
+    display: flex;
+    justify-content: space-between !important;
+    align-items: center;
+}
+
+.nsa_close_icon {
+    cursor: pointer;
 }

package/src/components/NSAMessageListDialog.tsx

@@ -1,143 +1,143 @@
-import { EnvService, FilterItem, FilterItemOperator, SortItem } from 'namirasoft-core';
-import { MessageRow, NamirasoftMessageMetaDatabase, NamirasoftMessageServer } from 'namirasoft-message';
-import { IBaseComponentProps, LinkOperation, NSButtonBlue, NSDialog, NSDialogProps, NSLoading, NSNoData, StringFormatter } from "namirasoft-site-react";
-import { Component } from 'react';
-import { NSARouterMakerResult } from '../NSARouterMakerResult';
-import Styles from './NSAMessageListDialog.module.css';
-
-export interface NSAMessageListDialogProps extends NSARouterMakerResult, NSDialogProps, IBaseComponentProps
-{
-	onClose: () => void;
-	onSeenAll: () => void;
-	onMessageClick: () => void;
-}
-
-export interface NSAMessageListDialogState
-{
-	messages: MessageRow[] | null;
-}
-
-export class NSAMessageListDialog extends Component<NSAMessageListDialogProps, NSAMessageListDialogState>
-{
-	constructor(props: NSAMessageListDialogProps)
-	{
-		super(props);
-		this.state = { messages: null };
-		this.onMarkAll = this.onMarkAll.bind(this);
-	}
-	override componentDidMount(): void
-	{
-		let meta = new NamirasoftMessageMetaDatabase(this.props.account.token_manager, this.props.notifier.onError);
-		let REACT_APP_BASE_URL_MESSAGE = new EnvService("REACT_APP_BASE_URL_MESSAGE", true).getString();
-		let server = new NamirasoftMessageServer(REACT_APP_BASE_URL_MESSAGE, this.props.account.token_manager, this.props.notifier.onError);
-		let filters = [new FilterItem(meta.tables.message, meta.tables.message.columns.seen_at, false, FilterItemOperator.all.empty)];
-		let sorts = [new SortItem(meta.tables.message, meta.tables.message.columns.created_at, false)];
-		server.message.List(filters, 1, 4, sorts, null).then(res =>
-		{
-			this.setState({ messages: res.rows });
-		}).catch(() => { });
-	}
-	onMarkAll(): void
-	{
-		let REACT_APP_BASE_URL_MESSAGE = new EnvService("REACT_APP_BASE_URL_MESSAGE", true).getString();
-		let server = new NamirasoftMessageServer(REACT_APP_BASE_URL_MESSAGE, this.props.account.token_manager, this.props.notifier.onError);
-		server.message.SeenAll().then(() =>
-		{
-			this.props.onSeenAll();
-			this.props.onClose();
-		}).catch(() => { });
-	}
-	override render()
-	{
-		let REACT_APP_BASE_URL_MESSAGE_CONSOLE = new EnvService("REACT_APP_BASE_URL_MESSAGE_CONSOLE").getString();
-		let content = null;
-		let view_all = (
-			<div className='pt-3 mx-0 d-flex justify-content-center'>
-				<NSButtonBlue
-					onClick={{
-						action: () =>
-						{
-							LinkOperation.open(REACT_APP_BASE_URL_MESSAGE_CONSOLE + "/message/list");
-						},
-						showLoading: false
-					}}
-					title='View All'
-				/>
-			</div>);
-		if (this.state.messages === null)
-		{
-			content = <NSLoading />;
-		}
-		else if (this.state.messages.length === 0)
-		{
-			content = (
-				<>
-					<NSNoData lable='No new message' />
-					{view_all}
-				</>
-			);
-		}
-		else
-		{
-			let content_messages = this.state.messages.map(message =>
-				<div
-					key={message.id}
-					className={Styles.nsa_message_item}
-					onClick={() =>
-					{
-						this.props.onMessageClick();
-						let link = REACT_APP_BASE_URL_MESSAGE_CONSOLE + "/message/" + message.id + "/view";
-						LinkOperation.open(link);
-						this.props.onClose();
-					}}
-				>
-					<ul className={Styles.nsa_message_item_ul}>
-						<li className={`${Styles.nsa_message_item_title}`}>{message.title}</li>
-					</ul>
-					<p className={`${Styles.nsa_message_item_content} nsa_font_13_normal`}>{
-						StringFormatter.toHTML(message.body)
-					}</p>
-					<span style={{ fontSize: "10px" }}>{new Date(message.created_at).toLocaleString()}</span>
-				</div>
-			);
-			content = (
-				<>
-					<div className={Styles.nsa_toast}>
-						<div className={Styles.nsa_toast_header}>
-							<figure className='d-flex flex-row justify-content-center align-item-center mb-0'
-								style={{ cursor: "pointer" }}>
-								<img
-									src="https://static.namirasoft.com/image/concept/mark-all/blue.svg"
-									alt="Message Header"
-									width={22}
-									onClick={this.onMarkAll}
-								/>
-								<figcaption
-									className={`${Styles.nsa_message_title} ms-2`}
-									onClick={this.onMarkAll}
-								>
-									Mark All As Seen
-								</figcaption>
-							</figure>
-						</div>
-						<div className={Styles.nsa_toast_body}>
-							{content_messages}
-						</div>
-						{view_all}
-					</div>
-					<div className={Styles.nsa_toast_background}>
-					</div>
-				</>
-			);
-		}
-		return (
-			<NSDialog {...this.props}
-				id={this.props.id}
-				classList={this.props.classList}
-				style={this.props.style}
-			>
-				{content}
-			</NSDialog>
-		);
-	}
+import { EnvService, FilterItem, FilterItemOperator, SortItem } from 'namirasoft-core';
+import { MessageRow, NamirasoftMessageMetaDatabase, NamirasoftMessageServer } from 'namirasoft-message';
+import { IBaseComponentProps, LinkOperation, NSButtonBlue, NSDialog, NSDialogProps, NSLoading, NSNoData, StringFormatter } from "namirasoft-site-react";
+import { Component } from 'react';
+import { NSARouterMakerResult } from '../NSARouterMakerResult';
+import Styles from './NSAMessageListDialog.module.css';
+
+export interface NSAMessageListDialogProps extends NSARouterMakerResult, NSDialogProps, IBaseComponentProps
+{
+	onClose: () => void;
+	onSeenAll: () => void;
+	onMessageClick: () => void;
+}
+
+export interface NSAMessageListDialogState
+{
+	messages: MessageRow[] | null;
+}
+
+export class NSAMessageListDialog extends Component<NSAMessageListDialogProps, NSAMessageListDialogState>
+{
+	constructor(props: NSAMessageListDialogProps)
+	{
+		super(props);
+		this.state = { messages: null };
+		this.onMarkAll = this.onMarkAll.bind(this);
+	}
+	override componentDidMount(): void
+	{
+		let meta = new NamirasoftMessageMetaDatabase(this.props.account.token_manager, this.props.notifier.onError);
+		let REACT_APP_BASE_URL_MESSAGE = new EnvService("REACT_APP_BASE_URL_MESSAGE", true).getString();
+		let server = new NamirasoftMessageServer(REACT_APP_BASE_URL_MESSAGE, this.props.account.token_manager, this.props.notifier.onError);
+		let filters = [new FilterItem(meta.tables.message, meta.tables.message.columns.seen_at, false, FilterItemOperator.all.empty)];
+		let sorts = [new SortItem(meta.tables.message, meta.tables.message.columns.created_at, false)];
+		server.message.List(filters, 1, 4, sorts, null).then(res =>
+		{
+			this.setState({ messages: res.rows });
+		}).catch(() => { });
+	}
+	onMarkAll(): void
+	{
+		let REACT_APP_BASE_URL_MESSAGE = new EnvService("REACT_APP_BASE_URL_MESSAGE", true).getString();
+		let server = new NamirasoftMessageServer(REACT_APP_BASE_URL_MESSAGE, this.props.account.token_manager, this.props.notifier.onError);
+		server.message.SeenAll().then(() =>
+		{
+			this.props.onSeenAll();
+			this.props.onClose();
+		}).catch(() => { });
+	}
+	override render()
+	{
+		let REACT_APP_BASE_URL_MESSAGE_CONSOLE = new EnvService("REACT_APP_BASE_URL_MESSAGE_CONSOLE").getString();
+		let content = null;
+		let view_all = (
+			<div className='pt-3 mx-0 d-flex justify-content-center'>
+				<NSButtonBlue
+					onClick={{
+						action: () =>
+						{
+							LinkOperation.open(REACT_APP_BASE_URL_MESSAGE_CONSOLE + "/message/list");
+						},
+						showLoading: false
+					}}
+					title='View All'
+				/>
+			</div>);
+		if (this.state.messages === null)
+		{
+			content = <NSLoading />;
+		}
+		else if (this.state.messages.length === 0)
+		{
+			content = (
+				<>
+					<NSNoData lable='No new message' />
+					{view_all}
+				</>
+			);
+		}
+		else
+		{
+			let content_messages = this.state.messages.map(message =>
+				<div
+					key={message.id}
+					className={Styles.nsa_message_item}
+					onClick={() =>
+					{
+						this.props.onMessageClick();
+						let link = REACT_APP_BASE_URL_MESSAGE_CONSOLE + "/message/" + message.id + "/view";
+						LinkOperation.open(link);
+						this.props.onClose();
+					}}
+				>
+					<ul className={Styles.nsa_message_item_ul}>
+						<li className={`${Styles.nsa_message_item_title}`}>{message.title}</li>
+					</ul>
+					<p className={`${Styles.nsa_message_item_content} nsa_font_13_normal`}>{
+						StringFormatter.toHTML(message.body)
+					}</p>
+					<span style={{ fontSize: "10px" }}>{new Date(message.created_at).toLocaleString()}</span>
+				</div>
+			);
+			content = (
+				<>
+					<div className={Styles.nsa_toast}>
+						<div className={Styles.nsa_toast_header}>
+							<figure className='d-flex flex-row justify-content-center align-item-center mb-0'
+								style={{ cursor: "pointer" }}>
+								<img
+									src="https://static.namirasoft.com/image/concept/mark-all/blue.svg"
+									alt="Message Header"
+									width={22}
+									onClick={this.onMarkAll}
+								/>
+								<figcaption
+									className={`${Styles.nsa_message_title} ms-2`}
+									onClick={this.onMarkAll}
+								>
+									Mark All As Seen
+								</figcaption>
+							</figure>
+						</div>
+						<div className={Styles.nsa_toast_body}>
+							{content_messages}
+						</div>
+						{view_all}
+					</div>
+					<div className={Styles.nsa_toast_background}>
+					</div>
+				</>
+			);
+		}
+		return (
+			<NSDialog {...this.props}
+				id={this.props.id}
+				classList={this.props.classList}
+				style={this.props.style}
+			>
+				{content}
+			</NSDialog>
+		);
+	}
 }

package/src/components/NSANavigationGuard.tsx

@@ -1,80 +1,80 @@
-import { NSDialogDelete } from "namirasoft-site-react";
-import { useContext, useEffect } from "react";
-import { UNSAFE_DataRouterContext, useBlocker } from "react-router-dom";
-
-export interface NSANavigationGuardProps
-{
-    /** While true, navigating away (in-app or browser) asks the user to confirm. */
-    when: boolean;
-    title?: string;
-    message?: string;
-}
-
-export function NSANavigationGuard(props: NSANavigationGuardProps)
-{
-    const when = props.when;
-
-    // Native tab close / refresh protection works under any router type.
-    useEffect(() =>
-    {
-        if (!when)
-            return;
-
-        const handler = (event: BeforeUnloadEvent) =>
-        {
-            event.preventDefault();
-            event.returnValue = "";
-        };
-
-        window.addEventListener("beforeunload", handler);
-        return () => window.removeEventListener("beforeunload", handler);
-    }, [when]);
-
-    // useBlocker only works inside a data router (createBrowserRouter /
-    // RouterProvider). Under a plain <BrowserRouter> the context is absent, so
-    // calling it would throw — fall back to beforeunload-only in that case.
-    const hasDataRouter = useContext(UNSAFE_DataRouterContext) != null;
-    if (!hasDataRouter)
-        return null;
-
-    return <NSANavigationBlocker {...props} />;
-}
-
-function NSANavigationBlocker(props: NSANavigationGuardProps)
-{
-    const when = props.when;
-
-    const blocker = useBlocker(({ currentLocation, nextLocation }) =>
-        when && currentLocation.pathname !== nextLocation.pathname
-    );
-
-    if (blocker.state !== "blocked")
-        return null;
-
-    return (
-        <NSDialogDelete
-            title={props.title ?? "Unsaved Changes"}
-            description={props.message ?? "You have unsaved changes. Are you sure you want to leave without saving?"}
-            show_as_code={false}
-            onClose={() => blocker.reset?.()}
-            onNo={{
-                showLoading: false,
-                action: (onFinished) =>
-                {
-                    blocker.reset?.();
-                    onFinished();
-                }
-            }}
-            onYes={{
-                showLoading: false,
-                action: (onFinished) =>
-                {
-                    blocker.proceed?.();
-                    onFinished();
-                }
-            }}
-        >
-            <></>
-        </NSDialogDelete>
-    );
+import { NSDialogDelete } from "namirasoft-site-react";
+import { useContext, useEffect } from "react";
+import { UNSAFE_DataRouterContext, useBlocker } from "react-router-dom";
+
+export interface NSANavigationGuardProps
+{
+    /** While true, navigating away (in-app or browser) asks the user to confirm. */
+    when: boolean;
+    title?: string;
+    message?: string;
+}
+
+export function NSANavigationGuard(props: NSANavigationGuardProps)
+{
+    const when = props.when;
+
+    // Native tab close / refresh protection works under any router type.
+    useEffect(() =>
+    {
+        if (!when)
+            return;
+
+        const handler = (event: BeforeUnloadEvent) =>
+        {
+            event.preventDefault();
+            event.returnValue = "";
+        };
+
+        window.addEventListener("beforeunload", handler);
+        return () => window.removeEventListener("beforeunload", handler);
+    }, [when]);
+
+    // useBlocker only works inside a data router (createBrowserRouter /
+    // RouterProvider). Under a plain <BrowserRouter> the context is absent, so
+    // calling it would throw — fall back to beforeunload-only in that case.
+    const hasDataRouter = useContext(UNSAFE_DataRouterContext) != null;
+    if (!hasDataRouter)
+        return null;
+
+    return <NSANavigationBlocker {...props} />;
+}
+
+function NSANavigationBlocker(props: NSANavigationGuardProps)
+{
+    const when = props.when;
+
+    const blocker = useBlocker(({ currentLocation, nextLocation }) =>
+        when && currentLocation.pathname !== nextLocation.pathname
+    );
+
+    if (blocker.state !== "blocked")
+        return null;
+
+    return (
+        <NSDialogDelete
+            title={props.title ?? "Unsaved Changes"}
+            description={props.message ?? "You have unsaved changes. Are you sure you want to leave without saving?"}
+            show_as_code={false}
+            onClose={() => blocker.reset?.()}
+            onNo={{
+                showLoading: false,
+                action: (onFinished) =>
+                {
+                    blocker.reset?.();
+                    onFinished();
+                }
+            }}
+            onYes={{
+                showLoading: false,
+                action: (onFinished) =>
+                {
+                    blocker.proceed?.();
+                    onFinished();
+                }
+            }}
+        >
+            <></>
+        </NSDialogDelete>
+    );
 }