namirasoft-site-react 1.5.13 → 1.5.15

package/src/components/NSHeader.tsx

@@ -1,338 +1,338 @@
-"use client";
-
-import { FilterLinkFullRow, NamirasoftAPILinkServer } from 'namirasoft-api-link';
-import { CacheService, EnvService, IStorageLocal, SetTimeouService } from "namirasoft-core";
-import { Component, createRef, ReactNode } from "react";
-import NavDropdown from 'react-bootstrap/NavDropdown';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IHeaderLeftProps } from "../props/IHeaderLeftProps";
-import { IHeaderRightProps } from "../props/IHeaderRightProps";
-import { NSRouterMakerResult } from "../routing/NSRouterMaker";
-import { NSBoxSearch } from "./NSBoxSearch";
-import { NSDialog } from "./NSDialog";
-import Styles from "./NSHeader.module.css";
-import NSMegaMenu from "./NSMegaMenu";
-import { NSProductSearch } from "./NSProductSearch";
-
-export interface NSHeaderProps extends IBaseComponentProps, NSRouterMakerResult
-{
-    nav?: IBaseComponentProps;
-    right: IHeaderRightProps;
-    left: IHeaderLeftProps;
-    mega_menu?: boolean;
-    children?: ReactNode;
-    onCollapse?: () => void;
-    isLoggedIn: () => boolean;
-    filters_postprocessor?: (filters: FilterLinkFullRow[]) => FilterLinkFullRow[];
-}
-
-export interface NSHeaderState
-{
-    filters: FilterLinkFullRow[];
-    selected: FilterLinkFullRow | null;
-    show_navbar: boolean;
-    search: string;
-}
-
-export class NSHeader extends Component<NSHeaderProps, NSHeaderState>
-{
-    private cache: CacheService<{
-        rows: FilterLinkFullRow[];
-        count: number;
-    }>;
-    private service = new SetTimeouService();
-
-    NSBoxSearch_Ref = createRef<NSBoxSearch>();
-    NSProductSearch_Ref = createRef<NSProductSearch>();
-
-    constructor(props: NSHeaderProps)
-    {
-        super(props);
-        this.state = {
-            filters: [],
-            selected: null,
-            show_navbar: false,
-            search: ""
-        };
-        this.hasChild = this.hasChild.bind(this);
-        this.onMenuItemToggled = this.onMenuItemToggled.bind(this);
-        this.render_menu = this.render_menu.bind(this);
-        this.render_menuItem = this.render_menuItem.bind(this);
-        this.handleShowNavbar = this.handleShowNavbar.bind(this);
-        this.cache = new CacheService<{
-            rows: FilterLinkFullRow[];
-            count: number;
-        }>("ns-header", new IStorageLocal(), 720, async () => "1.0.0", async () =>
-        {
-            let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK", true).getString();
-            let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, props.notifier.onError);
-            return server.filter.ListFilterLinks(this.props.left.scope, this.props.left.name, null, null, null, []);
-        });
-        this.service = new SetTimeouService();
-    }
-    override componentDidMount(): void
-    {
-        this.cache.get().then(filters =>
-        {
-            this.setState({ filters: filters.rows });
-        }).catch(() => { });
-    }
-    private onMenuItemToggled(checked: boolean, selected: FilterLinkFullRow)
-    {
-        if (checked)
-            this.setState({ selected });
-    }
-    private getFilters(): FilterLinkFullRow[]
-    {
-        let loggedin = this.props.isLoggedIn();
-        let raw = this.state.filters ?? [];
-        if (this.props.filters_postprocessor)
-            raw = this.props.filters_postprocessor(raw);
-        let ans = raw.filter(f =>
-        {
-            if (f.link)
-            {
-                if (loggedin)
-                    return f.link.private;
-                return f.link.public;
-            }
-            return true;
-        }) ?? [];
-
-        while (true)
-        {
-            let old_length = ans.length;
-            let old = ans;
-            ans = ans.filter(f =>
-            {
-                if (f.link?.url)
-                    return true;
-                return old.filter(x => x.parent_id === f.id).length > 0;
-            });
-            let new_length = ans.length;
-            if (old_length === new_length)
-                break;
-        }
-        ans.sort((a, b) => a.order - b.order);
-        return ans;
-    }
-    private hasChild(id: number): boolean
-    {
-        return this.getFilters().some(f => f.parent_id === id);
-    }
-    handleShowNavbar(): void
-    {
-        this.setState({ show_navbar: !this.state.show_navbar });
-    }
-    override render()
-    {
-        let nav: IBaseComponentProps | undefined = this.props.nav;
-        if (!nav)
-            nav = { style: {} };
-        if (!nav.style)
-            nav.style = {};
-        if (!nav.style?.backgroundColor)
-            nav.style.backgroundColor = "rgba(20, 27, 92, 1)";
-        return (
-            <header id={this.props.id}
-                className={`${Styles.ns_header} ${this.props.classList?.join(" ") ?? ""}`}
-                style={this.props.style}
-            >
-                <nav
-                    id={this.props.nav?.id}
-                    className={`${Styles.ns_navbar} ${this.props.nav?.classList?.join(" ") ?? ""}`}
-                    style={nav?.style}
-                >
-                    <div className={`${Styles.ns_navbar_parent_content} container`}>
-                        {
-                            this.props.onCollapse &&
-                            <button className={Styles.ns_collapse_btn} onClick={() => this.props.onCollapse?.()}>
-                                <img src="https://static.namirasoft.com/image/concept/sidebar/white.svg" alt={"collapse"} width={20} height={20} />
-                            </button>
-                        }
-                        <a className="me-2" href="/">
-                            <img
-                                src={this.props.left.logo}
-                                alt="Logo"
-                                width={48}
-                                height={48}
-                            />
-                        </a>
-                        {
-                            this.props.left.title &&
-                            <h2 className={`${Styles.ns_navbar_title} mb-0 flex-shrink-0`}>
-                                {this.props.left.title}
-                            </h2>
-                        }
-                        <div className={`${Styles.ns_navbar_content} `} >
-                            <div className={`${Styles.ns_navbar_elements} ${this.state.show_navbar && Styles.ns_navbar_active}`}>
-                                {this.render_menu(0, null)}
-                            </div>
-                            <NSBoxSearch
-                                ref={this.NSBoxSearch_Ref}
-                                required={false}
-                                title=""
-                                hideHeader
-                                placeholder="Search"
-                                autoComplete="one-time-code"
-                                style={{ flex: 0.8, minWidth: "15rem" }}
-                                input={{
-                                    style: { zIndex: 800 },
-                                    name: "search",
-                                }}
-                                onChanged={(e) =>
-                                {
-                                    let search = e.getValue(false) ?? "";
-                                    if (search.length === 0)
-                                        this.setState({ search });
-                                    else
-                                        this.service.setTimeoutIfNotCalledAgain(() =>
-                                        {
-                                            let search = e.getValue(false) ?? "";
-                                            this.setState({ search });
-                                            this.NSProductSearch_Ref.current?.reload(search);
-                                        }, 700);
-                                }}
-                            />
-                            {
-                                this.state.search.length >= 3 &&
-                                <NSDialog
-                                    onClose={() =>
-                                    {
-                                        this.NSBoxSearch_Ref.current?.setValue("");
-                                    }}
-                                    center_dialog={true}
-                                    zIndex={799}
-                                >
-                                    <NSProductSearch
-                                        ref={this.NSProductSearch_Ref}
-                                        search={this.state.search}
-                                    />
-                                </NSDialog>
-                            }
-                            {
-                                this.props.right &&
-                                <div className="d-flex gap-3 align-items-center">
-                                    {
-                                        this.props.right?.title &&
-                                        <span className={Styles.ns_navbar_title}>{this.props.right?.title}</span>
-                                    }
-                                    {
-                                        this.props.right?.link &&
-                                        <a href={this.props.right?.link?.href} target={this.props.right?.link?.target} className={Styles.ns_navbar_title}>{this.props.right?.link?.children}</a>
-                                    }
-                                    {
-                                        this.props.right.icons.map((icon, index) =>
-                                            <div
-                                                key={`NSHeader_div_icon_key${index}`}
-                                                title={icon.tooltip}
-                                                className={Styles.ns_header_icon}
-                                            >
-                                                <img
-                                                    src={icon.src}
-                                                    alt={icon.alt}
-                                                    width={20}
-                                                    height={20}
-                                                    onClick={() => icon.onClicked(icon)}
-                                                />
-                                                {
-                                                    icon.count !== 0 && icon.count &&
-                                                    <div
-                                                        className={Styles.ns_navbar_notification_count}
-                                                        onClick={() => icon.onClicked(icon)}
-                                                    >
-                                                        {
-                                                            icon.count < 100 ? icon.count : "+99"
-                                                        }
-                                                    </div>
-                                                }
-                                                {
-                                                    icon.children
-                                                }
-                                            </div>
-                                        )
-                                    }
-                                    {
-                                        this.getFilters().length > 0 &&
-                                        <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
-                                            <img
-                                                src=
-                                                {
-                                                    this.state.show_navbar ?
-                                                        "https://static.namirasoft.com/image/concept/close/white.svg"
-                                                        : "https://static.namirasoft.com/image/concept/menu/burger-white.svg"
-                                                }
-                                                alt="Menu Icon"
-                                                width={24}
-                                                height={24}
-                                            />
-                                        </div>
-                                    }
-                                </div>
-                            }
-                        </div>
-                    </div>
-                </nav>
-                {
-                    this.props.children
-                }
-            </header>
-        );
-    }
-    private render_menu(level: number, parent_id: number | null)
-    {
-        let fs: FilterLinkFullRow[] = this.getFilters().filter(f => f.parent_id === parent_id);
-        return (
-            <div className={`me-auto nav ${Styles.ns_navbar_items_container}`}>
-                {fs?.map(f => this.render_menuItem(level, f))}
-            </div>
-        );
-    }
-    private render_menuItem(level: number, filter: FilterLinkFullRow)
-    {
-        if (this.hasChild(filter.id))
-        {
-            let sub_menus = <></>;
-            if (level === 0)
-                if (this.state.selected)
-                    sub_menus = (
-                        <div id={`dropdown_items${filter.id}`}>
-                            {
-                                this.props.mega_menu &&
-                                <NSMegaMenu items={this.getFilters()} selected={this.state.selected} />
-                            }
-                            {
-                                this.render_menu(1, this.state.selected.id)
-                            }
-                        </div>
-                    );
-
-            return (
-                <NavDropdown
-                    id={`dropdown_parent${filter.id}`}
-                    key={filter.id}
-                    title={filter.name}
-                    className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
-                    onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
-                >
-                    {sub_menus}
-                </NavDropdown>
-            );
-        }
-        else
-        {
-            let href = filter.link?.url;
-            if (process.env.REACT_APP_STANDALONE)
-                if (href)
-                {
-                    let url = new URL(href);
-                    url.host = window.location.host;
-                    url.protocol = window.location.protocol;
-                    href = url.toString();
-                }
-            return (
-                <a key={filter.id} className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={href}>{filter.name}</a>
-            );
-        }
-    }
+"use client";
+
+import { FilterLinkFullRow, NamirasoftAPILinkServer } from 'namirasoft-api-link';
+import { CacheService, EnvService, IStorageLocal, SetTimeouService } from "namirasoft-core";
+import { Component, createRef, ReactNode } from "react";
+import NavDropdown from 'react-bootstrap/NavDropdown';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IHeaderLeftProps } from "../props/IHeaderLeftProps";
+import { IHeaderRightProps } from "../props/IHeaderRightProps";
+import { NSRouterMakerResult } from "../routing/NSRouterMaker";
+import { NSBoxSearch } from "./NSBoxSearch";
+import { NSDialog } from "./NSDialog";
+import Styles from "./NSHeader.module.css";
+import NSMegaMenu from "./NSMegaMenu";
+import { NSProductSearch } from "./NSProductSearch";
+
+export interface NSHeaderProps extends IBaseComponentProps, NSRouterMakerResult
+{
+    nav?: IBaseComponentProps;
+    right: IHeaderRightProps;
+    left: IHeaderLeftProps;
+    mega_menu?: boolean;
+    children?: ReactNode;
+    onCollapse?: () => void;
+    isLoggedIn: () => boolean;
+    filters_postprocessor?: (filters: FilterLinkFullRow[]) => FilterLinkFullRow[];
+}
+
+export interface NSHeaderState
+{
+    filters: FilterLinkFullRow[];
+    selected: FilterLinkFullRow | null;
+    show_navbar: boolean;
+    search: string;
+}
+
+export class NSHeader extends Component<NSHeaderProps, NSHeaderState>
+{
+    private cache: CacheService<{
+        rows: FilterLinkFullRow[];
+        count: number;
+    }>;
+    private service = new SetTimeouService();
+
+    NSBoxSearch_Ref = createRef<NSBoxSearch>();
+    NSProductSearch_Ref = createRef<NSProductSearch>();
+
+    constructor(props: NSHeaderProps)
+    {
+        super(props);
+        this.state = {
+            filters: [],
+            selected: null,
+            show_navbar: false,
+            search: ""
+        };
+        this.hasChild = this.hasChild.bind(this);
+        this.onMenuItemToggled = this.onMenuItemToggled.bind(this);
+        this.render_menu = this.render_menu.bind(this);
+        this.render_menuItem = this.render_menuItem.bind(this);
+        this.handleShowNavbar = this.handleShowNavbar.bind(this);
+        this.cache = new CacheService<{
+            rows: FilterLinkFullRow[];
+            count: number;
+        }>("ns-header", new IStorageLocal(), 720, async () => "1.0.0", async () =>
+        {
+            let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK", true).getString();
+            let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, props.notifier.onError);
+            return server.filter.ListFilterLinks(this.props.left.scope, this.props.left.name, null, null, null, []);
+        });
+        this.service = new SetTimeouService();
+    }
+    override componentDidMount(): void
+    {
+        this.cache.get().then(filters =>
+        {
+            this.setState({ filters: filters.rows });
+        }).catch(() => { });
+    }
+    private onMenuItemToggled(checked: boolean, selected: FilterLinkFullRow)
+    {
+        if (checked)
+            this.setState({ selected });
+    }
+    private getFilters(): FilterLinkFullRow[]
+    {
+        let loggedin = this.props.isLoggedIn();
+        let raw = this.state.filters ?? [];
+        if (this.props.filters_postprocessor)
+            raw = this.props.filters_postprocessor(raw);
+        let ans = raw.filter(f =>
+        {
+            if (f.link)
+            {
+                if (loggedin)
+                    return f.link.private;
+                return f.link.public;
+            }
+            return true;
+        }) ?? [];
+
+        while (true)
+        {
+            let old_length = ans.length;
+            let old = ans;
+            ans = ans.filter(f =>
+            {
+                if (f.link?.url)
+                    return true;
+                return old.filter(x => x.parent_id === f.id).length > 0;
+            });
+            let new_length = ans.length;
+            if (old_length === new_length)
+                break;
+        }
+        ans.sort((a, b) => a.order - b.order);
+        return ans;
+    }
+    private hasChild(id: number): boolean
+    {
+        return this.getFilters().some(f => f.parent_id === id);
+    }
+    handleShowNavbar(): void
+    {
+        this.setState({ show_navbar: !this.state.show_navbar });
+    }
+    override render()
+    {
+        let nav: IBaseComponentProps | undefined = this.props.nav;
+        if (!nav)
+            nav = { style: {} };
+        if (!nav.style)
+            nav.style = {};
+        if (!nav.style?.backgroundColor)
+            nav.style.backgroundColor = "rgba(20, 27, 92, 1)";
+        return (
+            <header id={this.props.id}
+                className={`${Styles.ns_header} ${this.props.classList?.join(" ") ?? ""}`}
+                style={this.props.style}
+            >
+                <nav
+                    id={this.props.nav?.id}
+                    className={`${Styles.ns_navbar} ${this.props.nav?.classList?.join(" ") ?? ""}`}
+                    style={nav?.style}
+                >
+                    <div className={`${Styles.ns_navbar_parent_content} container`}>
+                        {
+                            this.props.onCollapse &&
+                            <button className={Styles.ns_collapse_btn} onClick={() => this.props.onCollapse?.()}>
+                                <img src="https://static.namirasoft.com/image/concept/sidebar/white.svg" alt={"collapse"} width={20} height={20} />
+                            </button>
+                        }
+                        <a className="me-2" href="/">
+                            <img
+                                src={this.props.left.logo}
+                                alt="Logo"
+                                width={48}
+                                height={48}
+                            />
+                        </a>
+                        {
+                            this.props.left.title &&
+                            <h2 className={`${Styles.ns_navbar_title} mb-0 flex-shrink-0`}>
+                                {this.props.left.title}
+                            </h2>
+                        }
+                        <div className={`${Styles.ns_navbar_content} `} >
+                            <div className={`${Styles.ns_navbar_elements} ${this.state.show_navbar && Styles.ns_navbar_active}`}>
+                                {this.render_menu(0, null)}
+                            </div>
+                            <NSBoxSearch
+                                ref={this.NSBoxSearch_Ref}
+                                required={false}
+                                title=""
+                                hideHeader
+                                placeholder="Search"
+                                autoComplete="one-time-code"
+                                style={{ flex: 0.8, minWidth: "15rem" }}
+                                input={{
+                                    style: { zIndex: 800 },
+                                    name: "search",
+                                }}
+                                onChanged={(e) =>
+                                {
+                                    let search = e.getValue(false) ?? "";
+                                    if (search.length === 0)
+                                        this.setState({ search });
+                                    else
+                                        this.service.setTimeoutIfNotCalledAgain(() =>
+                                        {
+                                            let search = e.getValue(false) ?? "";
+                                            this.setState({ search });
+                                            this.NSProductSearch_Ref.current?.reload(search);
+                                        }, 700);
+                                }}
+                            />
+                            {
+                                this.state.search.length >= 3 &&
+                                <NSDialog
+                                    onClose={() =>
+                                    {
+                                        this.NSBoxSearch_Ref.current?.setValue("");
+                                    }}
+                                    center_dialog={true}
+                                    zIndex={799}
+                                >
+                                    <NSProductSearch
+                                        ref={this.NSProductSearch_Ref}
+                                        search={this.state.search}
+                                    />
+                                </NSDialog>
+                            }
+                            {
+                                this.props.right &&
+                                <div className="d-flex gap-3 align-items-center">
+                                    {
+                                        this.props.right?.title &&
+                                        <span className={Styles.ns_navbar_title}>{this.props.right?.title}</span>
+                                    }
+                                    {
+                                        this.props.right?.link &&
+                                        <a href={this.props.right?.link?.href} target={this.props.right?.link?.target} className={Styles.ns_navbar_title}>{this.props.right?.link?.children}</a>
+                                    }
+                                    {
+                                        this.props.right.icons.map((icon, index) =>
+                                            <div
+                                                key={`NSHeader_div_icon_key${index}`}
+                                                title={icon.tooltip}
+                                                className={Styles.ns_header_icon}
+                                            >
+                                                <img
+                                                    src={icon.src}
+                                                    alt={icon.alt}
+                                                    width={20}
+                                                    height={20}
+                                                    onClick={() => icon.onClicked(icon)}
+                                                />
+                                                {
+                                                    icon.count !== 0 && icon.count &&
+                                                    <div
+                                                        className={Styles.ns_navbar_notification_count}
+                                                        onClick={() => icon.onClicked(icon)}
+                                                    >
+                                                        {
+                                                            icon.count < 100 ? icon.count : "+99"
+                                                        }
+                                                    </div>
+                                                }
+                                                {
+                                                    icon.children
+                                                }
+                                            </div>
+                                        )
+                                    }
+                                    {
+                                        this.getFilters().length > 0 &&
+                                        <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
+                                            <img
+                                                src=
+                                                {
+                                                    this.state.show_navbar ?
+                                                        "https://static.namirasoft.com/image/concept/close/white.svg"
+                                                        : "https://static.namirasoft.com/image/concept/menu/burger-white.svg"
+                                                }
+                                                alt="Menu Icon"
+                                                width={24}
+                                                height={24}
+                                            />
+                                        </div>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </nav>
+                {
+                    this.props.children
+                }
+            </header>
+        );
+    }
+    private render_menu(level: number, parent_id: number | null)
+    {
+        let fs: FilterLinkFullRow[] = this.getFilters().filter(f => f.parent_id === parent_id);
+        return (
+            <div className={`me-auto nav ${Styles.ns_navbar_items_container}`}>
+                {fs?.map(f => this.render_menuItem(level, f))}
+            </div>
+        );
+    }
+    private render_menuItem(level: number, filter: FilterLinkFullRow)
+    {
+        if (this.hasChild(filter.id))
+        {
+            let sub_menus = <></>;
+            if (level === 0)
+                if (this.state.selected)
+                    sub_menus = (
+                        <div id={`dropdown_items${filter.id}`}>
+                            {
+                                this.props.mega_menu &&
+                                <NSMegaMenu items={this.getFilters()} selected={this.state.selected} />
+                            }
+                            {
+                                this.render_menu(1, this.state.selected.id)
+                            }
+                        </div>
+                    );
+
+            return (
+                <NavDropdown
+                    id={`dropdown_parent${filter.id}`}
+                    key={filter.id}
+                    title={filter.name}
+                    className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
+                    onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
+                >
+                    {sub_menus}
+                </NavDropdown>
+            );
+        }
+        else
+        {
+            let href = filter.link?.url;
+            if (process.env.REACT_APP_STANDALONE)
+                if (href)
+                {
+                    let url = new URL(href);
+                    url.host = window.location.host;
+                    url.protocol = window.location.protocol;
+                    href = url.toString();
+                }
+            return (
+                <a key={filter.id} className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={href}>{filter.name}</a>
+            );
+        }
+    }
 }