namirasoft-account-react 1.5.37 → 1.5.39

package/src/components/NSAMasterMenu.tsx

@@ -1,170 +1,175 @@
-import { FilterLinkFullRow } from "namirasoft-api-link";
-import { ProductFullRow } from "namirasoft-api-product";
-import { SetTimeouService } from "namirasoft-core";
-import { NSBoxSearch, NSLoading } from "namirasoft-site-react";
-import { Component, createRef } from "react";
-import { NSACacheService } from "../NSACacheService";
-import { NSARouterMakerResult } from "../NSARouterMakerResult";
-import Styles from "./NSAMasterMenu.module.css";
-import NSAMasterMenuItem from "./NSAMasterMenuItem";
-
-export interface NSAMasterMenuProps extends NSARouterMakerResult
-{
-    open: boolean;
-    setOpen: (open: boolean) => void;
-}
-
-export interface NSAMasterMenuState
-{
-    loading: boolean;
-    products?: ProductFullRow[];
-    filter_links?: { [scope: string]: FilterLinkFullRow[] };
-    show_footer: boolean;
-    search?: string;
-}
-
-class NSAMasterMenu extends Component<NSAMasterMenuProps, NSAMasterMenuState>
-{
-    private TimeoutSearch: SetTimeouService;
-
-    private MasterMenuAsideEl_Ref = createRef<HTMLElement>();
-    private MasterMenuEl_Ref = createRef<HTMLDivElement>();
-
-    constructor(props: NSAMasterMenuProps)
-    {
-        super(props);
-
-        this.TimeoutSearch = new SetTimeouService();
-
-        this.state = {
-            loading: true,
-            show_footer: false,
-        };
-
-        this.load = this.load.bind(this);
-    }
-
-    override componentDidMount(): void
-    {
-        this.load();
-    }
-
-    override componentDidUpdate(_: Readonly<NSAMasterMenuProps>, prev_state: Readonly<NSAMasterMenuState>): void
-    {
-        if (this.state.search !== prev_state.search)
-            this.setState(() => ({ show_footer: false }));
-    }
-
-    async load()
-    {
-        try
-        {
-            let product_list = await NSACacheService.getProducts(this.props.notifier).get();
-            let scopes = product_list.rows.map((product) => `${product.name} Console`);
-            let filter_links = await NSACacheService.getFilterLinks(scopes).get();
-
-            this.setState(() => ({
-                products: product_list.rows,
-                filter_links,
-                loading: false,
-            }));
-        }
-        catch
-        {
-            this.setState(() => ({ loading: false }));
-        }
-    }
-
-    setSearch(search: string)
-    {
-        this.TimeoutSearch.setTimeoutIfNotCalledAgain(
-            () => this.setState(() => ({ search: search.length >= 3 ? search : undefined })),
-            1000
-        );
-    }
-
-    override render()
-    {
-        return (
-            <aside
-                ref={this.MasterMenuAsideEl_Ref}
-                className={`${Styles.nsa_master_menu_aside} ${this.props.open ? Styles.open : ""}`}
-                onClick={(event) =>
-                {
-                    if (event.target === this.MasterMenuAsideEl_Ref.current)
-                        this.props.setOpen(false);
-                }}
-            >
-                <div className={Styles.nsa_master_menu_wrapper}>
-                    <div className={Styles.nsa_master_menu_header}>
-                        <NSBoxSearch
-                            title="Search Product"
-                            required={false}
-                            hideHeader={true}
-                            placeholder="Search"
-                            onChanged={(box) => this.setSearch(box.getValue() ?? "")}
-                            input={{ classList: [Styles.nsa_master_menu_search_box] }}
-                            classList={[Styles.nsa_master_menu_search_wrapper]}
-                        />
-                        <button className={Styles.nsa_master_menu_header_btn} onClick={() => this.props.setOpen(!this.props.open)}>
-                            <img src="https://static.namirasoft.com/image/concept/sidebar/blue.svg" alt={"collapse"} width={20} height={20} />
-                        </button>
-                    </div>
-                    <div
-                        ref={this.MasterMenuEl_Ref}
-                        className={Styles.nsa_master_menu}
-                        onScroll={(event) =>
-                        {
-                            const element = event.target as HTMLDivElement;
-                            if (element.scrollTop && !this.state.show_footer)
-                                this.setState(() => ({ show_footer: true }));
-                        }}
-                    >
-                        {
-                            !this.state.loading
-                                ?
-                                <ul className={Styles.nsa_master_menu_list}>
-                                    {
-                                        this.state.products?.map(product => (
-                                            <NSAMasterMenuItem
-                                                key={product.id}
-                                                {...this.props}
-                                                product={product}
-                                                fls={this.state.filter_links?.[`${product.name} Console`] ?? []}
-                                                search={this.state.search}
-                                                onClick={() =>
-                                                {
-                                                    if (!this.props.open)
-                                                        this.props.setOpen(true);
-                                                }}
-                                            />
-                                        ))
-                                    }
-                                </ul>
-                                :
-                                <NSLoading small={true} classList={[Styles.nsa_master_menu_loading]} />
-                        }
-
-                        {
-                            this.state.show_footer &&
-                            <div className={Styles.nsa_master_menu_footer}>
-                                <button
-                                    className={Styles.nsa_master_menu_footer_btn}
-                                    title={"Go Top"}
-                                    onClick={() =>
-                                    {
-                                        this.MasterMenuEl_Ref.current?.scroll({ top: 0 });
-                                    }}
-                                >
-                                    <img src={`https://static.namirasoft.com/image/concept/arrow/up/blue.svg`} alt={"angle"} width={12} height={16} />
-                                </button>
-                            </div>
-                        }
-                    </div>
-                </div>
-            </aside>
-        )
-    }
-}
-
+import { FilterLinkFullRow } from "namirasoft-api-link";
+import { ProductFullRow } from "namirasoft-api-product";
+import { SetTimeouService } from "namirasoft-core";
+import { NSBoxSearch, NSLoading } from "namirasoft-site-react";
+import { Component, createRef } from "react";
+import { NSACacheService } from "../NSACacheService";
+import { NSARouterMakerResult } from "../NSARouterMakerResult";
+import Styles from "./NSAMasterMenu.module.css";
+import NSAMasterMenuItem from "./NSAMasterMenuItem";
+
+export interface NSAMasterMenuProps extends NSARouterMakerResult
+{
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+
+export interface NSAMasterMenuState
+{
+    loading: boolean;
+    products?: ProductFullRow[];
+    filter_links?: { [scope: string]: FilterLinkFullRow[] };
+    show_footer: boolean;
+    search?: string;
+}
+
+class NSAMasterMenu extends Component<NSAMasterMenuProps, NSAMasterMenuState>
+{
+    private TimeoutSearch: SetTimeouService;
+
+    private MasterMenuAsideEl_Ref = createRef<HTMLElement>();
+    private MasterMenuEl_Ref = createRef<HTMLDivElement>();
+
+    constructor(props: NSAMasterMenuProps)
+    {
+        super(props);
+
+        this.TimeoutSearch = new SetTimeouService();
+
+        this.state = {
+            loading: true,
+            show_footer: false,
+        };
+
+        this.load = this.load.bind(this);
+    }
+
+    override componentDidMount(): void
+    {
+        this.load();
+    }
+
+    override componentDidUpdate(_: Readonly<NSAMasterMenuProps>, prev_state: Readonly<NSAMasterMenuState>): void
+    {
+        if (this.state.search !== prev_state.search)
+            this.setState(() => ({ show_footer: false }));
+    }
+
+    async load()
+    {
+        if (!this.props.account.token_manager.exists())
+        {
+            this.setState(() => ({ products: [], filter_links: {}, loading: false }));
+            return;
+        }
+        try
+        {
+            let product_list = await NSACacheService.getProducts(this.props.notifier).get();
+            let scopes = product_list.rows.map((product) => `${product.name} Console`);
+            let filter_links = await NSACacheService.getFilterLinks(scopes).get();
+
+            this.setState(() => ({
+                products: product_list.rows,
+                filter_links,
+                loading: false,
+            }));
+        }
+        catch
+        {
+            this.setState(() => ({ loading: false }));
+        }
+    }
+
+    setSearch(search: string)
+    {
+        this.TimeoutSearch.setTimeoutIfNotCalledAgain(
+            () => this.setState(() => ({ search: search.length >= 3 ? search : undefined })),
+            1000
+        );
+    }
+
+    override render()
+    {
+        return (
+            <aside
+                ref={this.MasterMenuAsideEl_Ref}
+                className={`${Styles.nsa_master_menu_aside} ${this.props.open ? Styles.open : ""}`}
+                onClick={(event) =>
+                {
+                    if (event.target === this.MasterMenuAsideEl_Ref.current)
+                        this.props.setOpen(false);
+                }}
+            >
+                <div className={Styles.nsa_master_menu_wrapper}>
+                    <div className={Styles.nsa_master_menu_header}>
+                        <NSBoxSearch
+                            title="Search Product"
+                            required={false}
+                            hideHeader={true}
+                            placeholder="Search"
+                            onChanged={(box) => this.setSearch(box.getValue() ?? "")}
+                            input={{ classList: [Styles.nsa_master_menu_search_box] }}
+                            classList={[Styles.nsa_master_menu_search_wrapper]}
+                        />
+                        <button className={Styles.nsa_master_menu_header_btn} onClick={() => this.props.setOpen(!this.props.open)}>
+                            <img src="https://static.namirasoft.com/image/concept/sidebar/blue.svg" alt={"collapse"} width={20} height={20} />
+                        </button>
+                    </div>
+                    <div
+                        ref={this.MasterMenuEl_Ref}
+                        className={Styles.nsa_master_menu}
+                        onScroll={(event) =>
+                        {
+                            const element = event.target as HTMLDivElement;
+                            if (element.scrollTop && !this.state.show_footer)
+                                this.setState(() => ({ show_footer: true }));
+                        }}
+                    >
+                        {
+                            !this.state.loading
+                                ?
+                                <ul className={Styles.nsa_master_menu_list}>
+                                    {
+                                        this.state.products?.map(product => (
+                                            <NSAMasterMenuItem
+                                                key={product.id}
+                                                {...this.props}
+                                                product={product}
+                                                fls={this.state.filter_links?.[`${product.name} Console`] ?? []}
+                                                search={this.state.search}
+                                                onClick={() =>
+                                                {
+                                                    if (!this.props.open)
+                                                        this.props.setOpen(true);
+                                                }}
+                                            />
+                                        ))
+                                    }
+                                </ul>
+                                :
+                                <NSLoading small={true} classList={[Styles.nsa_master_menu_loading]} />
+                        }
+
+                        {
+                            this.state.show_footer &&
+                            <div className={Styles.nsa_master_menu_footer}>
+                                <button
+                                    className={Styles.nsa_master_menu_footer_btn}
+                                    title={"Go Top"}
+                                    onClick={() =>
+                                    {
+                                        this.MasterMenuEl_Ref.current?.scroll({ top: 0 });
+                                    }}
+                                >
+                                    <img src={`https://static.namirasoft.com/image/concept/arrow/up/blue.svg`} alt={"angle"} width={12} height={16} />
+                                </button>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </aside>
+        )
+    }
+}
+
 export default NSAMasterMenu;