namirasoft-account-react 1.4.431 → 1.4.433

package/src/layouts/NSASectionEdit.tsx

@@ -1,261 +1,280 @@
-import { IBaseComponentProps, NSID, NSLoading } from "namirasoft-site-react";
-import { NSSection, NSPanel, NSButtonBlue, NSLine, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
-import { NSARouterMakerProps } from "../NSARouterMakerProps";
-import { Component, createRef, ReactNode } from "react";
-import { IEntityInfo } from "../IEntityInfo";
-import { IStorageLocal, NamingConvention } from "namirasoft-core";
-import { NSASectionViewTabPage, NSASectionViewTabPageUIProps } from "./NSASectionViewTabPage";
-import { NSASectionEditTabPage, NSASectionEditTabPageEditorProps, NSASectionEditTabPageUIProps } from "./NSASectionEditTabPage";
-import { CategoryRow, FieldRow } from "namirasoft-field";
-
-export interface NSASectionEditCustomProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSARouterMakerProps, IBaseComponentProps
-{
-    isEdit: boolean;
-    ui: {
-        panel?: IBaseComponentProps;
-        tab_page_edit: {
-            ui?: NSASectionEditTabPageUIProps;
-            editor: NSASectionEditTabPageEditorProps<RowType, RowTypeInput>;
-        };
-        tab_page_view?: NSASectionViewTabPageUIProps<RowType>;
-        getChildrenBefore?: (id: string, row: RowType | null) => ReactNode;
-        getChildrenAfter?: (id: string, row: RowType | null) => ReactNode;
-    }
-    onLoaded?: () => void;
-    onRowLoaded?: (item: RowType) => void;
-    children?: React.ReactNode;
-}
-
-export interface NSASectionEditProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSASectionEditCustomProps<RowType, RowTypeInput>, NSARouterMakerProps
-{
-    model: {
-        id: string | null;
-        row: RowType | null;
-    };
-    entity: IEntityInfo<RowType, RowTypeInput>,
-    ctf: {
-        enabled: boolean;
-        fields: FieldRow[] | null;
-        categories: CategoryRow[] | null;
-    };
-    deleteFieldCache: () => void;
-    children: ReactNode;
-}
-
-interface NSASectionEditState<RowType>
-{
-    row: RowType | null;
-    loading: boolean;
-}
-
-export class NSASectionEdit<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionEditProps<RowType, RowTypeInput>, NSASectionEditState<RowType>>
-{
-    NSASectionViewTabPage_Ref = createRef<NSASectionViewTabPage<RowType, RowTypeInput>>();
-    NSASectionEditTabPage_Ref = createRef<NSASectionEditTabPage<RowType, RowTypeInput>>();
-
-    constructor(props: NSASectionEditProps<RowType, RowTypeInput>)
-    {
-        super(props);
-
-        this.state = {
-            row: this.props.model.row,
-            loading: !this.props.model.row,
-        };
-
-        this.reload = this.reload.bind(this);
-        this.getRow = this.getRow.bind(this);
-        this.onApply = this.onApply.bind(this);
-    }
-    reload() 
-    {
-        this.setState(() => ({ row: null, loading: true }));
-        if (this.props.model.id)
-            this.props.entity.server.get?.(this.props.model.id).then(row =>
-            {
-                this.setState(
-                    () => ({ row, loading: false }),
-                    () =>
-                    {
-                        this.props.onLoaded?.();
-                        this.props.onRowLoaded?.(row);
-                    }
-                );
-            }).catch(() => { });
-    }
-    getRow()
-    {
-        return this.state.row;
-    }
-    async onApply(onFinshied: () => void): Promise<void>
-    {
-        try
-        {
-            let Name_Pascal_Space = NamingConvention.lower_case_underscore.convert(this.props.entity.name, NamingConvention.Pascal_Case_Space);
-
-            let onSuccess = (new_row: RowType, message: string) =>
-            {
-                this.props.notifier.onSuccess(message);
-                let handled = false;
-                if (this.props.entity.client.onSuccess)
-                    handled = this.props.entity.client.onSuccess(new_row);
-                if (!handled)
-                {
-                    let url = null;
-                    if (this.props.entity.client.getViewURL)
-                        url = this.props.entity.client.getViewURL(new_row.id);
-                    else if (this.props.entity.client.getListURL)
-                        url = this.props.entity.client.getListURL();
-                    if (url)
-                        this.props.url.redirect(url, {});
-                }
-            };
-            let cur_row: RowTypeInput | null = null;
-            if (this.NSASectionEditTabPage_Ref.current)
-                cur_row = await this.NSASectionEditTabPage_Ref.current.getInputRow();
-            if (cur_row)
-                if (this.props.isEdit)
-                {
-                    if (this.props.model.id)
-                    {
-                        if (this.props.entity.client.onUpdate)
-                        {
-                            this.props.entity.client.onUpdate(this.props.model.id, cur_row).then(new_entity =>
-                            {
-                                if (new_entity)
-                                    onSuccess(new_entity, Name_Pascal_Space + " has been updated successfully");
-                                if (this.props.model.id)
-                                    NSID.clearID(new IStorageLocal(), this.props.model.id);
-                                onFinshied();
-                            }).catch(onFinshied);
-                        }
-                        else if (this.props.entity.server.update)
-                        {
-                            this.props.entity.server.update(this.props.model.id, cur_row).then(new_entity =>
-                            {
-                                onSuccess(new_entity, Name_Pascal_Space + " has been updated successfully");
-                                if (this.props.model.id)
-                                    NSID.clearID(new IStorageLocal(), this.props.model.id);
-                                onFinshied();
-                            }).catch(onFinshied);
-                        }
-                        else
-                            onFinshied();
-                    }
-                    else
-                        throw new Error("ID was not provided.");
-                }
-                else
-                {
-                    if (this.props.entity.client.onCreate)
-                    {
-                        this.props.entity.client.onCreate(cur_row).then(new_entity =>
-                        {
-                            if (new_entity)
-                                onSuccess(new_entity, Name_Pascal_Space + " has been created successfully");
-                            onFinshied();
-                        }).catch(onFinshied);
-                    }
-                    else if (this.props.entity.server.create)
-                    {
-                        this.props.entity.server.create(cur_row).then(new_entity =>
-                        {
-                            onSuccess(new_entity, Name_Pascal_Space + " has been created successfully");;
-                            onFinshied();
-                        }).catch(onFinshied);
-                    }
-                    else
-                        onFinshied();
-                }
-            else
-                onFinshied();
-        } catch (error: any)
-        {
-            this.props.notifier.onError(error);
-            onFinshied();
-        }
-    }
-    override componentDidMount()
-    {
-        let { id, row } = this.props.model;
-
-        if ((id && !row) || (id && id !== row?.id))
-            this.reload();
-        else
-            this.setState(
-                () => ({ loading: false }),
-                () => this.props.onLoaded?.()
-            );
-    }
-    override render()
-    {
-        return (
-            <>
-                <NSSection
-                    id={this.props.id}
-                    classList={[`${this.props.classList?.join(" ") ?? ""}`]}
-                    style={{ ...this.props.style }}
-                >
-                    {
-                        !this.state.loading
-                            ?
-                            <NSPanel
-                                id={this.props.ui.panel?.id}
-                                classList={[`${this.props.ui.panel?.classList?.join(" ") ?? ""}`]}
-                                style={{ ...this.props.ui.panel?.style }}
-                            >
-                                <NSASectionEditTabPage<RowType, RowTypeInput>
-                                    ref={this.NSASectionEditTabPage_Ref}
-                                    {...this.props}
-                                    model={{
-                                        id: this.props.model.id,
-                                        row: this.state.row
-                                    }}
-                                    editor={this.props.ui.tab_page_edit.editor}
-                                    ui={this.props.ui.tab_page_edit.ui}
-                                >
-                                    {this.props.children}
-                                </NSASectionEditTabPage>
-                            </NSPanel>
-                            :
-                            <NSLoading />
-                    }
-                    <NSSpace size={NSSpaceSizeType.SMALL}></NSSpace>
-                    <NSButtonBlue
-                        title="Apply"
-                        onClick={{
-                            action: (onFinished) =>
-                            {
-                                this.onApply(onFinished);
-                            }
-                        }}
-                    />
-                </NSSection>
-                {
-                    this.props.isEdit && (this.props.ui.tab_page_view?.enabled ?? true) && !this.state.loading &&
-                    <>
-                        <NSSpace size={NSSpaceSizeType.SMALL} />
-                        <NSLine />
-                        <NSSpace size={NSSpaceSizeType.SMALL} />
-                        {
-                            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)
-                        }
-                    </>
-                }
-            </>
-        );
-    }
+import { IBaseComponentProps, NSID, NSLoading } from "namirasoft-site-react";
+import { NSSection, NSPanel, NSButtonBlue, NSLine, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
+import { NSARouterMakerProps } from "../NSARouterMakerProps";
+import { Component, createRef, ReactNode } from "react";
+import { IEntityInfo } from "../IEntityInfo";
+import { IStorageLocal, NamingConvention } from "namirasoft-core";
+import { NSASectionViewTabPage, NSASectionViewTabPageUIProps } from "./NSASectionViewTabPage";
+import { NSASectionEditTabPage, NSASectionEditTabPageEditorProps, NSASectionEditTabPageUIProps } from "./NSASectionEditTabPage";
+import { CategoryRow, FieldRow } from "namirasoft-field";
+import { NSANavigationGuard } from "../components/NSANavigationGuard";
+
+export interface NSASectionEditCustomProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSARouterMakerProps, IBaseComponentProps
+{
+    isEdit: boolean;
+    ui: {
+        panel?: IBaseComponentProps;
+        tab_page_edit: {
+            ui?: NSASectionEditTabPageUIProps;
+            editor: NSASectionEditTabPageEditorProps<RowType, RowTypeInput>;
+        };
+        tab_page_view?: NSASectionViewTabPageUIProps<RowType>;
+        getChildrenBefore?: (id: string, row: RowType | null) => ReactNode;
+        getChildrenAfter?: (id: string, row: RowType | null) => ReactNode;
+    }
+    onLoaded?: () => void;
+    onRowLoaded?: (item: RowType) => void;
+    children?: React.ReactNode;
+}
+
+export interface NSASectionEditProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSASectionEditCustomProps<RowType, RowTypeInput>, NSARouterMakerProps
+{
+    model: {
+        id: string | null;
+        row: RowType | null;
+    };
+    entity: IEntityInfo<RowType, RowTypeInput>,
+    ctf: {
+        enabled: boolean;
+        fields: FieldRow[] | null;
+        categories: CategoryRow[] | null;
+    };
+    deleteFieldCache: () => void;
+    children: ReactNode;
+}
+
+interface NSASectionEditState<RowType>
+{
+    row: RowType | null;
+    loading: boolean;
+    isDirty: boolean;
+}
+
+export class NSASectionEdit<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionEditProps<RowType, RowTypeInput>, NSASectionEditState<RowType>>
+{
+    NSASectionViewTabPage_Ref = createRef<NSASectionViewTabPage<RowType, RowTypeInput>>();
+    NSASectionEditTabPage_Ref = createRef<NSASectionEditTabPage<RowType, RowTypeInput>>();
+
+    constructor(props: NSASectionEditProps<RowType, RowTypeInput>)
+    {
+        super(props);
+
+        this.state = {
+            row: this.props.model.row,
+            loading: !this.props.model.row,
+            isDirty: false,
+        };
+
+        this.reload = this.reload.bind(this);
+        this.getRow = this.getRow.bind(this);
+        this.onApply = this.onApply.bind(this);
+        this.markDirty = this.markDirty.bind(this);
+    }
+    private markDirty()
+    {
+        if (!this.state.isDirty)
+            this.setState(prev => ({ ...prev, isDirty: true }));
+    }
+    reload() 
+    {
+        this.setState(() => ({ row: null, loading: true }));
+        if (this.props.model.id)
+            this.props.entity.server.get?.(this.props.model.id).then(row =>
+            {
+                this.setState(
+                    () => ({ row, loading: false, isDirty: false }),
+                    () =>
+                    {
+                        this.props.onLoaded?.();
+                        this.props.onRowLoaded?.(row);
+                    }
+                );
+            }).catch(() => { });
+    }
+    getRow()
+    {
+        return this.state.row;
+    }
+    async onApply(onFinshied: () => void): Promise<void>
+    {
+        try
+        {
+            let Name_Pascal_Space = NamingConvention.lower_case_underscore.convert(this.props.entity.name, NamingConvention.Pascal_Case_Space);
+
+            let onSuccess = (new_row: RowType, message: string) =>
+            {
+                this.props.notifier.onSuccess(message);
+                // Clear the dirty flag BEFORE redirecting so the navigation guard does not
+                // block this intentional, post-save redirect. The redirect runs in the
+                // setState callback, after the guard has re-rendered with when=false.
+                this.setState(prev => ({ ...prev, isDirty: false }), () =>
+                {
+                    let handled = false;
+                    if (this.props.entity.client.onSuccess)
+                        handled = this.props.entity.client.onSuccess(new_row);
+                    if (!handled)
+                    {
+                        let url = null;
+                        if (this.props.entity.client.getViewURL)
+                            url = this.props.entity.client.getViewURL(new_row.id);
+                        else if (this.props.entity.client.getListURL)
+                            url = this.props.entity.client.getListURL();
+                        if (url)
+                            this.props.url.redirect(url, {});
+                    }
+                });
+            };
+            let cur_row: RowTypeInput | null = null;
+            if (this.NSASectionEditTabPage_Ref.current)
+                cur_row = await this.NSASectionEditTabPage_Ref.current.getInputRow();
+            if (cur_row)
+                if (this.props.isEdit)
+                {
+                    if (this.props.model.id)
+                    {
+                        if (this.props.entity.client.onUpdate)
+                        {
+                            this.props.entity.client.onUpdate(this.props.model.id, cur_row).then(new_entity =>
+                            {
+                                if (new_entity)
+                                    onSuccess(new_entity, Name_Pascal_Space + " has been updated successfully");
+                                if (this.props.model.id)
+                                    NSID.clearID(new IStorageLocal(), this.props.model.id);
+                                onFinshied();
+                            }).catch(onFinshied);
+                        }
+                        else if (this.props.entity.server.update)
+                        {
+                            this.props.entity.server.update(this.props.model.id, cur_row).then(new_entity =>
+                            {
+                                onSuccess(new_entity, Name_Pascal_Space + " has been updated successfully");
+                                if (this.props.model.id)
+                                    NSID.clearID(new IStorageLocal(), this.props.model.id);
+                                onFinshied();
+                            }).catch(onFinshied);
+                        }
+                        else
+                            onFinshied();
+                    }
+                    else
+                        throw new Error("ID was not provided.");
+                }
+                else
+                {
+                    if (this.props.entity.client.onCreate)
+                    {
+                        this.props.entity.client.onCreate(cur_row).then(new_entity =>
+                        {
+                            if (new_entity)
+                                onSuccess(new_entity, Name_Pascal_Space + " has been created successfully");
+                            onFinshied();
+                        }).catch(onFinshied);
+                    }
+                    else if (this.props.entity.server.create)
+                    {
+                        this.props.entity.server.create(cur_row).then(new_entity =>
+                        {
+                            onSuccess(new_entity, Name_Pascal_Space + " has been created successfully");;
+                            onFinshied();
+                        }).catch(onFinshied);
+                    }
+                    else
+                        onFinshied();
+                }
+            else
+                onFinshied();
+        } catch (error: any)
+        {
+            this.props.notifier.onError(error);
+            onFinshied();
+        }
+    }
+    override componentDidMount()
+    {
+        let { id, row } = this.props.model;
+
+        if ((id && !row) || (id && id !== row?.id))
+            this.reload();
+        else
+            this.setState(
+                () => ({ loading: false, isDirty: false }),
+                () => this.props.onLoaded?.()
+            );
+    }
+    override render()
+    {
+        return (
+            <>
+                <NSANavigationGuard when={this.state.isDirty} />
+                <NSSection
+                    id={this.props.id}
+                    classList={[`${this.props.classList?.join(" ") ?? ""}`]}
+                    style={{ ...this.props.style }}
+                >
+                    {
+                        !this.state.loading
+                            ?
+                            <NSPanel
+                                id={this.props.ui.panel?.id}
+                                classList={[`${this.props.ui.panel?.classList?.join(" ") ?? ""}`]}
+                                style={{ ...this.props.ui.panel?.style }}
+                            >
+                                {/* Any user edit inside the form (input/change bubbling) marks the page dirty. */}
+                                <div onInput={this.markDirty} onChange={this.markDirty}>
+                                    <NSASectionEditTabPage<RowType, RowTypeInput>
+                                        ref={this.NSASectionEditTabPage_Ref}
+                                        {...this.props}
+                                        model={{
+                                            id: this.props.model.id,
+                                            row: this.state.row
+                                        }}
+                                        editor={this.props.ui.tab_page_edit.editor}
+                                        ui={this.props.ui.tab_page_edit.ui}
+                                    >
+                                        {this.props.children}
+                                    </NSASectionEditTabPage>
+                                </div>
+                            </NSPanel>
+                            :
+                            <NSLoading />
+                    }
+                    <NSSpace size={NSSpaceSizeType.SMALL}></NSSpace>
+                    <NSButtonBlue
+                        title="Apply"
+                        onClick={{
+                            action: (onFinished) =>
+                            {
+                                this.onApply(onFinished);
+                            }
+                        }}
+                    />
+                </NSSection>
+                {
+                    this.props.isEdit && (this.props.ui.tab_page_view?.enabled ?? true) && !this.state.loading &&
+                    <>
+                        <NSSpace size={NSSpaceSizeType.SMALL} />
+                        <NSLine />
+                        <NSSpace size={NSSpaceSizeType.SMALL} />
+                        {
+                            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)
+                        }
+                    </>
+                }
+            </>
+        );
+    }
 }

package/src/layouts/NSASectionEditTabPage.module.css

@@ -1,5 +1,5 @@
-@media screen and (min-width: 768px) {
-	.nsa_section_edit_tab_page {
-		min-width: 560px;
-	}
+@media screen and (min-width: 768px) {
+	.nsa_section_edit_tab_page {
+		min-width: 560px;
+	}
 }