namirasoft-site-react 1.4.402 → 1.4.403

package/src/components/NSHeader.tsx

@@ -1,261 +1,310 @@
-"use client";
-
-import React, { ReactNode } from "react";
-import Styles from "./NSHeader.module.css";
-import NavDropdown from 'react-bootstrap/NavDropdown';
-import { NamirasoftAPILinkServer, FilterLinkFullRow } from 'namirasoft-api-link';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IHeaderRightProps } from "../props/IHeaderRightProps";
-import { IHeaderLeftProps } from "../props/IHeaderLeftProps";
-import { IStorageLocal, CacheService } from "namirasoft-core";
-import { EnvService } from 'namirasoft-core'
-import { NSRouterMakerProps } from "../routing/NSRouterMakerProps";
-export interface NSHeaderProps extends IBaseComponentProps, NSRouterMakerProps
-{
-	nav?: IBaseComponentProps;
-	right: IHeaderRightProps;
-	left: IHeaderLeftProps;
-	isLoggedIn: () => boolean;
-	children?: ReactNode;
-}
-
-export interface NSHeaderState
-{
-	filters: FilterLinkFullRow[];
-	selected: FilterLinkFullRow | null;
-	showNavbar: boolean;
-}
-
-export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState>
-{
-	private cache: CacheService<{
-		rows: FilterLinkFullRow[];
-		count: number;
-	}>;
-
-	constructor(props: NSHeaderProps)
-	{
-		super(props);
-		this.state = {
-			filters: [],
-			selected: null,
-			showNavbar: false
-		};
-		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, []);
-		});
-	}
-	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 ans = this.state.filters?.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;
-		}
-
-		return ans;
-	}
-	private hasChild(id: number): boolean
-	{
-		return this.getFilters().filter(f => f.parent_id === id).length > 0;
-	}
-	handleShowNavbar(): void
-	{
-		this.setState({ showNavbar: !this.state.showNavbar });
-	}
-	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`}>
-						<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.showNavbar && Styles.ns_navbar_active}`}>
-								{this.render_menu(0, null)}
-							</div>
-							{
-								this.props.right &&
-								<div className="d-flex gap-3 align-items-center">
-									<span className={Styles.ns_navbar_title}>{this.props.right?.title}</span>
-									{
-										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>
-										)
-									}
-								</div>
-							}
-							{
-								this.getFilters().length > 0 ?
-									<div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
-										<img
-											src=
-											{
-												this.state.showNavbar ?
-													"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>
-				</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.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 React, { createRef, ReactNode } from "react";
+import Styles from "./NSHeader.module.css";
+import NavDropdown from 'react-bootstrap/NavDropdown';
+import { NamirasoftAPILinkServer, FilterLinkFullRow } from 'namirasoft-api-link';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IHeaderRightProps } from "../props/IHeaderRightProps";
+import { IHeaderLeftProps } from "../props/IHeaderLeftProps";
+import { IStorageLocal, CacheService, SetTimeouService } from "namirasoft-core";
+import { EnvService } from 'namirasoft-core'
+import { NSRouterMakerProps } from "../routing/NSRouterMakerProps";
+import { NSBoxSearch } from "./NSBoxSearch";
+import { NSDialog } from "./NSDialog";
+import { NSProductSearch } from "./NSProductSearch";
+
+export interface NSHeaderProps extends IBaseComponentProps, NSRouterMakerProps
+{
+	nav?: IBaseComponentProps;
+	right: IHeaderRightProps;
+	left: IHeaderLeftProps;
+	isLoggedIn: () => boolean;
+	children?: ReactNode;
+}
+
+export interface NSHeaderState
+{
+	filters: FilterLinkFullRow[];
+	selected: FilterLinkFullRow | null;
+	show_navbar: boolean;
+	search: string;
+}
+
+export class NSHeader extends React.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 ans = this.state.filters?.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;
+		}
+
+		return ans;
+	}
+	private hasChild(id: number): boolean
+	{
+		return this.getFilters().filter(f => f.parent_id === id).length > 0;
+	}
+	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`}>
+						<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"
+								style={{
+									flex: 0.8
+								}}
+								input={{
+									style: { zIndex: 1000 }
+								}}
+								onChanged={(e) =>
+								{
+									this.service.setTimeoutIfNotCalledAgain(() =>
+									{
+										let search = e.getValue(false) ?? "";
+										this.setState({ search });
+										this.NSProductSearch_Ref.current?.reload(search);
+									}, 700);
+								}}
+							></NSBoxSearch>
+
+							{
+								this.state.search.length >= 3 &&
+								<NSDialog
+									onClose={() =>
+									{
+										this.NSBoxSearch_Ref.current?.setValue("");
+									}}
+									center_dialog={true}
+								>
+									<NSProductSearch
+										ref={this.NSProductSearch_Ref}
+										search={this.state.search}
+									/>
+								</NSDialog>
+							}
+							{
+								this.props.right &&
+								<div className="d-flex gap-3 align-items-center">
+									<span className={Styles.ns_navbar_title}>{this.props.right?.title}</span>
+									{
+										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>
+										)
+									}
+								</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>
+				</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.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>
+			);
+		}
+	}
 }

package/src/components/NSHeaderScreenshot.module.css

@@ -1,36 +1,36 @@
-.ns_header_screenshot {
-    background-color: hsla(91, 100%, 31%, 1);
-    width: 100%;
-    min-height: 48px;
-    border-radius: 8px;
-    padding: 14px 16px;
-    color: #fff;
-    font-size: 16px;
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-}
-
-.ns_header_screenshot_left {
-    display: flex;
-    gap: 32px;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.ns_header_screenshot_item {
-    gap: 4px;
-    display: flex;
-    align-items: center;
-}
-
-@media only screen and (min-width: 580px) {
-    .ns_header_screenshot {
-        justify-content: space-between;
-    }
-
-    .ns_header_screenshot_left {
-        justify-content: left
-    }
+.ns_header_screenshot {
+    background-color: hsla(91, 100%, 31%, 1);
+    width: 100%;
+    min-height: 48px;
+    border-radius: 8px;
+    padding: 14px 16px;
+    color: #fff;
+    font-size: 16px;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+.ns_header_screenshot_left {
+    display: flex;
+    gap: 32px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.ns_header_screenshot_item {
+    gap: 4px;
+    display: flex;
+    align-items: center;
+}
+
+@media only screen and (min-width: 580px) {
+    .ns_header_screenshot {
+        justify-content: space-between;
+    }
+
+    .ns_header_screenshot_left {
+        justify-content: left
+    }
 }