namirasoft-site-react 1.3.355 → 1.3.356

package/src/components/NSHeader.tsx

@@ -1,235 +1,235 @@
-"use client";
-
-import React 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 { IHeaderProps } from "../props/IHeaderProps";
-import { IStorageLocal, CacheService } from "namirasoft-core";
-
-export interface INSHeaderProps extends IBaseComponentProps
-{
-    scope: string;
-    name: string;
-    logo: string;
-    nav?: IBaseComponentProps;
-    header: IHeaderProps;
-    isLoggedIn: () => boolean;
-}
-
-export interface NSHeaderState
-{
-    filters: FilterLinkFullRow[];
-    selected: FilterLinkFullRow | null;
-    showNavbar: boolean;
-}
-
-export class NSHeader extends React.Component<INSHeaderProps, NSHeaderState>
-{
-    private cache: CacheService<{
-        rows: FilterLinkFullRow[];
-        count: number;
-    }>;
-
-    constructor(props: INSHeaderProps)
-    {
-        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", 720, new IStorageLocal(), async () =>
-        {
-            let server = new NamirasoftAPILinkServer(console.error);
-            return server.filter.ListFilterLinks(this.props.scope, this.props.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;
-            ans = ans.filter(f =>
-            {
-                if (f.link?.url)
-                    return true;
-                return ans.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 href="/">
-                            <img
-                                src={this.props.logo}
-                                alt="Logo"
-                                width={48}
-                                height={48}
-                            />
-                        </a>
-                        <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.header &&
-                                <div className="d-flex gap-3 align-items-center">
-                                    <span className={Styles.ns_navbar_title}>{this.props.header?.title}</span>
-                                    {
-                                        this.props.header.icons.map((icon) =>
-                                            <button title={icon.tooltip} className={Styles.ns_header_icon} onClick={() => icon.onClicked(icon)}>
-												<img
-                                                    src={icon.src}
-                                                    alt={icon.alt}
-                                                    width={20}
-                                                    height={20}
-                                                />
-                                                {
-                                                    icon.count &&
-                                                    <span className={Styles.ns_navbar_notification_count}>
-                                                        {
-                                                            icon.count < 100 ? icon.count : "+99"
-                                                        }
-                                                    </span>
-                                                }
-                                                {
-                                                    icon.children
-                                                }
-                                            </button>
-                                        )
-                                    }
-                                </div>
-                            }
-                            <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>
-            </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
-					onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
-					className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
-					title={filter.name}
-					key={filter.id}
-					id={`dropdown_parent${filter.id}`}>
-					{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 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 { IHeaderProps } from "../props/IHeaderProps";
+import { IStorageLocal, CacheService } from "namirasoft-core";
+
+export interface INSHeaderProps extends IBaseComponentProps
+{
+    scope: string;
+    name: string;
+    logo: string;
+    nav?: IBaseComponentProps;
+    header: IHeaderProps;
+    isLoggedIn: () => boolean;
+}
+
+export interface NSHeaderState
+{
+    filters: FilterLinkFullRow[];
+    selected: FilterLinkFullRow | null;
+    showNavbar: boolean;
+}
+
+export class NSHeader extends React.Component<INSHeaderProps, NSHeaderState>
+{
+    private cache: CacheService<{
+        rows: FilterLinkFullRow[];
+        count: number;
+    }>;
+
+    constructor(props: INSHeaderProps)
+    {
+        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", 720, new IStorageLocal(), async () =>
+        {
+            let server = new NamirasoftAPILinkServer(console.error);
+            return server.filter.ListFilterLinks(this.props.scope, this.props.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;
+            ans = ans.filter(f =>
+            {
+                if (f.link?.url)
+                    return true;
+                return ans.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 href="/">
+                            <img
+                                src={this.props.logo}
+                                alt="Logo"
+                                width={48}
+                                height={48}
+                            />
+                        </a>
+                        <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.header &&
+                                <div className="d-flex gap-3 align-items-center">
+                                    <span className={Styles.ns_navbar_title}>{this.props.header?.title}</span>
+                                    {
+                                        this.props.header.icons.map((icon) =>
+                                            <button title={icon.tooltip} className={Styles.ns_header_icon} onClick={() => icon.onClicked(icon)}>
+												<img
+                                                    src={icon.src}
+                                                    alt={icon.alt}
+                                                    width={20}
+                                                    height={20}
+                                                />
+                                                {
+                                                    icon.count &&
+                                                    <span className={Styles.ns_navbar_notification_count}>
+                                                        {
+                                                            icon.count < 100 ? icon.count : "+99"
+                                                        }
+                                                    </span>
+                                                }
+                                                {
+                                                    icon.children
+                                                }
+                                            </button>
+                                        )
+                                    }
+                                </div>
+                            }
+                            <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>
+            </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
+					onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
+					className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
+					title={filter.name}
+					key={filter.id}
+					id={`dropdown_parent${filter.id}`}>
+					{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/NSLayout.module.css

@@ -1,14 +1,14 @@
-.ns_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.ns_layout_main {
-	display: flex;
-	flex-direction: column;
-	color: #fff;
-	background-attachment: fixed;
-	background-repeat: no-repeat;
-	background-size: cover;
+.ns_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.ns_layout_main {
+	display: flex;
+	flex-direction: column;
+	color: #fff;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
 }

package/src/components/NSLayout.tsx

@@ -1,83 +1,83 @@
-import Styles from './NSLayout.module.css';
-import { ReactNode } from 'react';
-import { NSHeader } from './NSHeader';
-import { NSFooter } from './NSFooter';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { NSBarNotification, INSBarNotificationProps } from './NSBarNotification';
-import { IHeaderProps } from '../props/IHeaderProps';
-import { INSBarActionProps, NSBarAction } from './NSBarAction';
-import { INSBarHeroBannerProps, NSBarHeroBanner } from './NSBarHeroBanner';
-import { INSBarTitleProps, NSBarTitle } from './NSBarTitle';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-
-export interface INSLayoutProps extends IBaseComponentProps
-{
-	scope: string;
-	logo: string;
-	background?: string;
-	header: IHeaderProps;
-	notifications: INSBarNotificationProps[];
-	action?: INSBarActionProps;
-	banner?: INSBarHeroBannerProps;
-	title?: INSBarTitleProps;
-	children: ReactNode;
-	isLoggedIn: () => boolean;
-}
-
-export interface NSLayoutState
-{
-	action_show: boolean
-}
-
-export function NSLayout(props: INSLayoutProps)
-{
-	function isValidAction(action?: INSBarActionProps): action is INSBarActionProps
-	{
-		if (action)
-			if (action.title || action.description || Object.keys(action.menus).length > 0)
-				return true;
-		return false;
-	}
-	return (
-		<div id={props.id}
-			className={`${Styles.ns_container} ${props.classList?.join(" ")}`}
-			style={{
-				minHeight: "100vh",
-				width: "100%",
-				display: "flex",
-				flexDirection: "column",
-				justifyContent: "center",
-				background: props.background,
-				backgroundSize: "cover",
-				backgroundAttachment: "fixed"
-			}}>
-			<NSHeader
-				scope={props.scope}
-				name="Header"
-				logo={props.logo}
-				header={props.header}
-				isLoggedIn={props.isLoggedIn}
-			/>
-			{props.notifications.map(props => <NSBarNotification {...props}></NSBarNotification>)}
-			{isValidAction(props.action) && <NSBarAction {...props.action} ></NSBarAction >}
-			{props.banner && <NSBarHeroBanner {...props.banner} ></NSBarHeroBanner >}
-			<NSSpace size={NSSpaceSizeType.SMALL} />
-			{props.title &&
-				<>
-					<NSBarTitle {...props.title} ></NSBarTitle >
-					<NSSpace size={NSSpaceSizeType.MEDUIM} />
-				</>
-			}
-			<main className={`d-flex flex-column text-white ${Styles.ns_layout_main}`}>
-				{props.children}
-			</main>
-			<NSSpace size={NSSpaceSizeType.MEDUIM} />
-			<NSFooter
-				scope={props.scope}
-				name="Footer"
-				logo={props.logo}
-				isLoggedIn={props.isLoggedIn}
-			/>
-		</div >
-	);
+import Styles from './NSLayout.module.css';
+import { ReactNode } from 'react';
+import { NSHeader } from './NSHeader';
+import { NSFooter } from './NSFooter';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { NSBarNotification, INSBarNotificationProps } from './NSBarNotification';
+import { IHeaderProps } from '../props/IHeaderProps';
+import { INSBarActionProps, NSBarAction } from './NSBarAction';
+import { INSBarHeroBannerProps, NSBarHeroBanner } from './NSBarHeroBanner';
+import { INSBarTitleProps, NSBarTitle } from './NSBarTitle';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+
+export interface INSLayoutProps extends IBaseComponentProps
+{
+	scope: string;
+	logo: string;
+	background?: string;
+	header: IHeaderProps;
+	notifications: INSBarNotificationProps[];
+	action?: INSBarActionProps;
+	banner?: INSBarHeroBannerProps;
+	title?: INSBarTitleProps;
+	children: ReactNode;
+	isLoggedIn: () => boolean;
+}
+
+export interface NSLayoutState
+{
+	action_show: boolean
+}
+
+export function NSLayout(props: INSLayoutProps)
+{
+	function isValidAction(action?: INSBarActionProps): action is INSBarActionProps
+	{
+		if (action)
+			if (action.title || action.description || Object.keys(action.menus).length > 0)
+				return true;
+		return false;
+	}
+	return (
+		<div id={props.id}
+			className={`${Styles.ns_container} ${props.classList?.join(" ")}`}
+			style={{
+				minHeight: "100vh",
+				width: "100%",
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "center",
+				background: props.background,
+				backgroundSize: "cover",
+				backgroundAttachment: "fixed"
+			}}>
+			<NSHeader
+				scope={props.scope}
+				name="Header"
+				logo={props.logo}
+				header={props.header}
+				isLoggedIn={props.isLoggedIn}
+			/>
+			{props.notifications.map(props => <NSBarNotification {...props}></NSBarNotification>)}
+			{isValidAction(props.action) && <NSBarAction {...props.action} ></NSBarAction >}
+			{props.banner && <NSBarHeroBanner {...props.banner} ></NSBarHeroBanner >}
+			<NSSpace size={NSSpaceSizeType.SMALL} />
+			{props.title &&
+				<>
+					<NSBarTitle {...props.title} ></NSBarTitle >
+					<NSSpace size={NSSpaceSizeType.MEDUIM} />
+				</>
+			}
+			<main className={`d-flex flex-column text-white ${Styles.ns_layout_main}`}>
+				{props.children}
+			</main>
+			<NSSpace size={NSSpaceSizeType.MEDUIM} />
+			<NSFooter
+				scope={props.scope}
+				name="Footer"
+				logo={props.logo}
+				isLoggedIn={props.isLoggedIn}
+			/>
+		</div >
+	);
 }