namirasoft-site-react 1.5.13 → 1.5.15

package/src/components/NSListMenu.tsx

@@ -1,185 +1,185 @@
-import { NamirasoftAPILinkServer, FilterLinkFullRow } from "namirasoft-api-link";
-import { EnvService } from "namirasoft-core";
-import { useEffect, useState } from "react";
-import { NSCard } from "./NSCard";
-import { NSSection } from "./NSSection";
-import { NSTitle } from "./NSTitle";
-
-export interface NSListMenuProps
-{
-    scope: string;
-    name: string;
-    isLoggedIn?: () => boolean;
-    onError?: (error: Error | string) => void;
-    filters?: FilterLinkFullRow[];
-}
-
-interface NSListMenuState
-{
-    filters: FilterLinkFullRow[];
-}
-
-export function NSListMenu(props: NSListMenuProps)
-{
-    const [state, setState] = useState<NSListMenuState>({ filters: props.filters ?? [] });
-
-    useEffect(() =>
-    {
-        if (props.filters)
-            return;
-        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.onError ?? (() => { }));
-        server.filter.ListFilterLinks(props.scope, props.name, null, null, null, []).then((filters) =>
-        {
-            setState({ filters: filters.rows });
-        }).catch(() => { });
-        // eslint-disable-next-line
-    }, []);
-
-    const byId = new Map<number, FilterLinkFullRow>((state.filters ?? []).map(f => [f.id, f]));
-
-    const pathOf = (url: string | null | undefined): string =>
-    {
-        if (!url)
-            return "";
-        try
-        {
-            return new URL(url).pathname.replace(/\/+$/, "").toLowerCase();
-        }
-        catch
-        {
-            return url.replace(/[?#].*$/, "").replace(/\/+$/, "").toLowerCase();
-        }
-    };
-
-    const baseOf = (path: string): string => path.replace(/\/[^/]*$/, "");
-
-    const parentOf = (f: FilterLinkFullRow): FilterLinkFullRow | undefined =>
-        f.parent_id != null ? byId.get(f.parent_id) : undefined;
-
-    const nameOf = (f: FilterLinkFullRow): string => f.name ?? f.link?.name ?? "";
-
-    const isListChild = (f: FilterLinkFullRow): boolean =>
-        f.name === "List" && pathOf(f.link?.url).endsWith("/list") && parentOf(f) != null;
-
-    const isSupport = (f: FilterLinkFullRow): boolean =>
-    {
-        let text = [f.name, f.link?.name, parentOf(f)?.name].filter(Boolean).join(" ").toLowerCase();
-        return text.includes("support") || pathOf(f.link?.url).includes("support");
-    };
-
-    const displayOf = (f: FilterLinkFullRow): FilterLinkFullRow =>
-        isListChild(f) ? parentOf(f)! : f;
-
-    const chainOf = (f: FilterLinkFullRow): FilterLinkFullRow[] =>
-    {
-        let chain: FilterLinkFullRow[] = [];
-        let current: FilterLinkFullRow | undefined = f;
-        while (current != null && chain.length < 100)
-        {
-            chain.unshift(current);
-            current = parentOf(current);
-        }
-        return chain;
-    };
-
-    const rootOf = (f: FilterLinkFullRow): FilterLinkFullRow =>
-        chainOf(displayOf(f))[0];
-
-    const subtitleOf = (f: FilterLinkFullRow): string =>
-    {
-        let chain = chainOf(displayOf(f));
-        let rest = chain.slice(1);
-        return rest.length > 0 ? rest.map(nameOf).join(" / ") : nameOf(chain[0]);
-    };
-
-    const descriptionOf = (f: FilterLinkFullRow): string =>
-        f.link?.description ?? "";
-
-    const orderPathOf = (f: FilterLinkFullRow): number[] =>
-        chainOf(displayOf(f)).map(n => n.order);
-
-    const compareOrderPath = (a: FilterLinkFullRow, b: FilterLinkFullRow): number =>
-    {
-        let pa = orderPathOf(a);
-        let pb = orderPathOf(b);
-        let len = Math.min(pa.length, pb.length);
-        for (let i = 0; i < len; i++)
-            if (pa[i] !== pb[i])
-                return pa[i] - pb[i];
-        return pa.length - pb.length;
-    };
-
-    const getMenuItems = (): FilterLinkFullRow[] =>
-    {
-        let loggedin = props.isLoggedIn?.() ?? false;
-        let ans = state.filters?.filter(f =>
-        {
-            if (f.link)
-            {
-                if (loggedin)
-                    return f.link.private;
-                return f.link.public;
-            }
-            return true;
-        }) ?? [];
-
-        ans = ans.filter(f => f.link?.url);
-        ans = ans.filter(f => !isSupport(f));
-
-        let listedBases = new Set<string>();
-        for (let f of ans)
-        {
-            let path = pathOf(f.link?.url);
-            if (path.endsWith("/list"))
-                listedBases.add(baseOf(path));
-        }
-
-        ans = ans.filter(f =>
-        {
-            let path = pathOf(f.link?.url);
-            if (path.endsWith("/new") && listedBases.has(baseOf(path)))
-                return false;
-            return true;
-        });
-        ans.sort(compareOrderPath);
-        return ans;
-    };
-
-    let items = getMenuItems();
-    
-    let groups: { root: FilterLinkFullRow; items: FilterLinkFullRow[] }[] = [];
-    for (let f of items)
-    {
-        let root = rootOf(f);
-        let last = groups[groups.length - 1];
-        if (last && last.root.id === root.id)
-            last.items.push(f);
-        else
-            groups.push({ root, items: [f] });
-    }
-
-    return (
-        <div style={{ display: "flex", flexDirection: "column", width: "100%", gap: "32px" }}>
-            {
-                groups.map((group) =>
-                    <div key={group.root.id} style={{ width: "100%" }}>
-                        <NSTitle title={nameOf(group.root)} style={{ marginBottom: 16, fontSize: 32 }} />
-                        <NSSection style={{ gap: "16px" }}>
-                            {
-                                group.items.map((filter: FilterLinkFullRow) =>
-                                    <NSCard
-                                        key={filter.id}
-                                        link={{ href: filter.link?.url ?? "" }}
-                                        title={subtitleOf(filter)}
-                                        description={descriptionOf(filter)}
-                                    />
-                                )
-                            }
-                        </NSSection>
-                    </div>
-                )
-            }
-        </div>
-    );
+import { NamirasoftAPILinkServer, FilterLinkFullRow } from "namirasoft-api-link";
+import { EnvService } from "namirasoft-core";
+import { useEffect, useState } from "react";
+import { NSCard } from "./NSCard";
+import { NSSection } from "./NSSection";
+import { NSTitle } from "./NSTitle";
+
+export interface NSListMenuProps
+{
+    scope: string;
+    name: string;
+    isLoggedIn?: () => boolean;
+    onError?: (error: Error | string) => void;
+    filters?: FilterLinkFullRow[];
+}
+
+interface NSListMenuState
+{
+    filters: FilterLinkFullRow[];
+}
+
+export function NSListMenu(props: NSListMenuProps)
+{
+    const [state, setState] = useState<NSListMenuState>({ filters: props.filters ?? [] });
+
+    useEffect(() =>
+    {
+        if (props.filters)
+            return;
+        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.onError ?? (() => { }));
+        server.filter.ListFilterLinks(props.scope, props.name, null, null, null, []).then((filters) =>
+        {
+            setState({ filters: filters.rows });
+        }).catch(() => { });
+        // eslint-disable-next-line
+    }, []);
+
+    const byId = new Map<number, FilterLinkFullRow>((state.filters ?? []).map(f => [f.id, f]));
+
+    const pathOf = (url: string | null | undefined): string =>
+    {
+        if (!url)
+            return "";
+        try
+        {
+            return new URL(url).pathname.replace(/\/+$/, "").toLowerCase();
+        }
+        catch
+        {
+            return url.replace(/[?#].*$/, "").replace(/\/+$/, "").toLowerCase();
+        }
+    };
+
+    const baseOf = (path: string): string => path.replace(/\/[^/]*$/, "");
+
+    const parentOf = (f: FilterLinkFullRow): FilterLinkFullRow | undefined =>
+        f.parent_id != null ? byId.get(f.parent_id) : undefined;
+
+    const nameOf = (f: FilterLinkFullRow): string => f.name ?? f.link?.name ?? "";
+
+    const isListChild = (f: FilterLinkFullRow): boolean =>
+        f.name === "List" && pathOf(f.link?.url).endsWith("/list") && parentOf(f) != null;
+
+    const isSupport = (f: FilterLinkFullRow): boolean =>
+    {
+        let text = [f.name, f.link?.name, parentOf(f)?.name].filter(Boolean).join(" ").toLowerCase();
+        return text.includes("support") || pathOf(f.link?.url).includes("support");
+    };
+
+    const displayOf = (f: FilterLinkFullRow): FilterLinkFullRow =>
+        isListChild(f) ? parentOf(f)! : f;
+
+    const chainOf = (f: FilterLinkFullRow): FilterLinkFullRow[] =>
+    {
+        let chain: FilterLinkFullRow[] = [];
+        let current: FilterLinkFullRow | undefined = f;
+        while (current != null && chain.length < 100)
+        {
+            chain.unshift(current);
+            current = parentOf(current);
+        }
+        return chain;
+    };
+
+    const rootOf = (f: FilterLinkFullRow): FilterLinkFullRow =>
+        chainOf(displayOf(f))[0];
+
+    const subtitleOf = (f: FilterLinkFullRow): string =>
+    {
+        let chain = chainOf(displayOf(f));
+        let rest = chain.slice(1);
+        return rest.length > 0 ? rest.map(nameOf).join(" / ") : nameOf(chain[0]);
+    };
+
+    const descriptionOf = (f: FilterLinkFullRow): string =>
+        f.link?.description ?? "";
+
+    const orderPathOf = (f: FilterLinkFullRow): number[] =>
+        chainOf(displayOf(f)).map(n => n.order);
+
+    const compareOrderPath = (a: FilterLinkFullRow, b: FilterLinkFullRow): number =>
+    {
+        let pa = orderPathOf(a);
+        let pb = orderPathOf(b);
+        let len = Math.min(pa.length, pb.length);
+        for (let i = 0; i < len; i++)
+            if (pa[i] !== pb[i])
+                return pa[i] - pb[i];
+        return pa.length - pb.length;
+    };
+
+    const getMenuItems = (): FilterLinkFullRow[] =>
+    {
+        let loggedin = props.isLoggedIn?.() ?? false;
+        let ans = state.filters?.filter(f =>
+        {
+            if (f.link)
+            {
+                if (loggedin)
+                    return f.link.private;
+                return f.link.public;
+            }
+            return true;
+        }) ?? [];
+
+        ans = ans.filter(f => f.link?.url);
+        ans = ans.filter(f => !isSupport(f));
+
+        let listedBases = new Set<string>();
+        for (let f of ans)
+        {
+            let path = pathOf(f.link?.url);
+            if (path.endsWith("/list"))
+                listedBases.add(baseOf(path));
+        }
+
+        ans = ans.filter(f =>
+        {
+            let path = pathOf(f.link?.url);
+            if (path.endsWith("/new") && listedBases.has(baseOf(path)))
+                return false;
+            return true;
+        });
+        ans.sort(compareOrderPath);
+        return ans;
+    };
+
+    let items = getMenuItems();
+    
+    let groups: { root: FilterLinkFullRow; items: FilterLinkFullRow[] }[] = [];
+    for (let f of items)
+    {
+        let root = rootOf(f);
+        let last = groups[groups.length - 1];
+        if (last && last.root.id === root.id)
+            last.items.push(f);
+        else
+            groups.push({ root, items: [f] });
+    }
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", width: "100%", gap: "32px" }}>
+            {
+                groups.map((group) =>
+                    <div key={group.root.id} style={{ width: "100%" }}>
+                        <NSTitle title={nameOf(group.root)} style={{ marginBottom: 16, fontSize: 32 }} />
+                        <NSSection style={{ gap: "16px" }}>
+                            {
+                                group.items.map((filter: FilterLinkFullRow) =>
+                                    <NSCard
+                                        key={filter.id}
+                                        link={{ href: filter.link?.url ?? "" }}
+                                        title={subtitleOf(filter)}
+                                        description={descriptionOf(filter)}
+                                    />
+                                )
+                            }
+                        </NSSection>
+                    </div>
+                )
+            }
+        </div>
+    );
 }

package/src/components/NSListProduct.tsx

@@ -1,79 +1,79 @@
-import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
-import { EnvService, SearchOperation } from 'namirasoft-core';
-import { useEffect, useState } from "react";
-import { IImageProps, ILinkProps } from "../main";
-import { NSCard } from "./NSCard";
-import { NSSection } from "./NSSection";
-
-export interface NSListProductCardProps 
-{
-    title: string;
-    description?: string;
-    link: ILinkProps;
-    image?: IImageProps;
-}
-export interface NSListProductProps 
-{
-    scope: string;
-    name: string;
-    getChildrenBefore?: () => NSListProductCardProps[];
-    getChildrenAfter?: () => NSListProductCardProps[];
-    search?: string;
-}
-
-interface NSListProductState
-{
-    products: ProductFullRow[];
-}
-
-export function NSListProduct(props: NSListProductProps)
-{
-    const [state, setState] = useState<NSListProductState>({ products: [] });
-
-    useEffect(() =>
-    {
-        let REACT_APP_BASE_URL_API_PRODUCT = new EnvService("REACT_APP_BASE_URL_API_PRODUCT", true).getString();
-        let server = new NamirasoftAPIProductServer(REACT_APP_BASE_URL_API_PRODUCT, () => { });
-        server.filter.ListProducts(props.scope, props.name, null, null, null, []).then((products) =>
-        {
-            setState({ products: products.rows });
-        }).catch(() => { });
-        // eslint-disable-next-line
-    }, []);
-    let items_before: NSListProductCardProps[] = props.getChildrenBefore?.() ?? [];
-    let items_after: NSListProductCardProps[] = props.getChildrenAfter?.() ?? [];
-
-    return (
-        <NSSection style={{ gap: "16px" }}>
-            {
-                SearchOperation.filter(items_before, item => item.title + " " + (item.description ?? ""), props.search ?? "")
-                    .map((item, index) => <NSCard
-                        key={"nslistproduct_nscard_before_" + index}
-                        {...item}
-                    />)
-            }
-            {
-                SearchOperation.filter(state.products, item => item.name + " " + (item.description ?? ""), props.search ?? "")
-                    .map((product: ProductFullRow) =>
-                    {
-                        return (
-                            <NSCard
-                                key={product.id}
-                                link={{ href: product.link_console ?? "" }}
-                                title={product.name}
-                                description={product.description ?? ""}
-                                image={{ src: product.logo ?? '', alt: product.name }}
-                            />
-                        );
-                    })
-            }
-            {
-                SearchOperation.filter(items_after, item => item.title + " " + (item.description ?? ""), props.search ?? "")
-                    .map((item, index) => <NSCard
-                        key={"nslistproduct_nscard_after_" + index}
-                        {...item}
-                    />)
-            }
-        </NSSection >
-    );
+import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
+import { EnvService, SearchOperation } from 'namirasoft-core';
+import { useEffect, useState } from "react";
+import { IImageProps, ILinkProps } from "../main";
+import { NSCard } from "./NSCard";
+import { NSSection } from "./NSSection";
+
+export interface NSListProductCardProps 
+{
+    title: string;
+    description?: string;
+    link: ILinkProps;
+    image?: IImageProps;
+}
+export interface NSListProductProps 
+{
+    scope: string;
+    name: string;
+    getChildrenBefore?: () => NSListProductCardProps[];
+    getChildrenAfter?: () => NSListProductCardProps[];
+    search?: string;
+}
+
+interface NSListProductState
+{
+    products: ProductFullRow[];
+}
+
+export function NSListProduct(props: NSListProductProps)
+{
+    const [state, setState] = useState<NSListProductState>({ products: [] });
+
+    useEffect(() =>
+    {
+        let REACT_APP_BASE_URL_API_PRODUCT = new EnvService("REACT_APP_BASE_URL_API_PRODUCT", true).getString();
+        let server = new NamirasoftAPIProductServer(REACT_APP_BASE_URL_API_PRODUCT, () => { });
+        server.filter.ListProducts(props.scope, props.name, null, null, null, []).then((products) =>
+        {
+            setState({ products: products.rows });
+        }).catch(() => { });
+        // eslint-disable-next-line
+    }, []);
+    let items_before: NSListProductCardProps[] = props.getChildrenBefore?.() ?? [];
+    let items_after: NSListProductCardProps[] = props.getChildrenAfter?.() ?? [];
+
+    return (
+        <NSSection style={{ gap: "16px" }}>
+            {
+                SearchOperation.filter(items_before, item => item.title + " " + (item.description ?? ""), props.search ?? "")
+                    .map((item, index) => <NSCard
+                        key={"nslistproduct_nscard_before_" + index}
+                        {...item}
+                    />)
+            }
+            {
+                SearchOperation.filter(state.products, item => item.name + " " + (item.description ?? ""), props.search ?? "")
+                    .map((product: ProductFullRow) =>
+                    {
+                        return (
+                            <NSCard
+                                key={product.id}
+                                link={{ href: product.link_console ?? "" }}
+                                title={product.name}
+                                description={product.description ?? ""}
+                                image={{ src: product.logo ?? '', alt: product.name }}
+                            />
+                        );
+                    })
+            }
+            {
+                SearchOperation.filter(items_after, item => item.title + " " + (item.description ?? ""), props.search ?? "")
+                    .map((item, index) => <NSCard
+                        key={"nslistproduct_nscard_after_" + index}
+                        {...item}
+                    />)
+            }
+        </NSSection >
+    );
 }

package/src/components/NSLoading.module.css

@@ -1,11 +1,11 @@
-.ns_loading_parent {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin: 0 auto;
-	padding: 48px 0;
-	color: rgba(20, 27, 92, 1);
-	gap: 16px;
+.ns_loading_parent {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+	padding: 48px 0;
+	color: rgba(20, 27, 92, 1);
+	gap: 16px;
 }

package/src/components/NSLoading.tsx

@@ -1,44 +1,44 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from './NSLoading.module.css';
-
-export interface NSLoadingProps extends IBaseComponentProps
-{
-	title?: string;
-	description?: string;
-	small?: boolean;
-	hideContainer?: boolean;
-	hideTitle?: boolean;
-	hideDescription?: boolean;
-}
-
-export function NSLoading(props: NSLoadingProps)
-{
-	let size = props.small ? 32 : 96;
-	let content = <>
-		{
-			!(props.hideTitle ?? false) &&
-			<h5>{props.title ?? "Loading"}</h5>
-		}
-		<video
-			style={{ backgroundColor: "transparent", pointerEvents: "none" }} width={size} height={size}
-			loop muted playsInline autoPlay
-		>
-			<source src="https://static.namirasoft.com/image/concept/loading/96.webm" type="video/webm" />
-		</video>
-		{
-			!(props.hideDescription ?? false) &&
-			<p>{props.description ?? "Please wait ..."}</p>
-		}
-	</>;
-	if (props.hideContainer)
-		return content;
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_loading_parent} ${props.classList?.join(" ") ?? ""} `}
-			style={props.style}
-		>
-			{content}
-		</div>
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from './NSLoading.module.css';
+
+export interface NSLoadingProps extends IBaseComponentProps
+{
+	title?: string;
+	description?: string;
+	small?: boolean;
+	hideContainer?: boolean;
+	hideTitle?: boolean;
+	hideDescription?: boolean;
+}
+
+export function NSLoading(props: NSLoadingProps)
+{
+	let size = props.small ? 32 : 96;
+	let content = <>
+		{
+			!(props.hideTitle ?? false) &&
+			<h5>{props.title ?? "Loading"}</h5>
+		}
+		<video
+			style={{ backgroundColor: "transparent", pointerEvents: "none" }} width={size} height={size}
+			loop muted playsInline autoPlay
+		>
+			<source src="https://static.namirasoft.com/image/concept/loading/96.webm" type="video/webm" />
+		</video>
+		{
+			!(props.hideDescription ?? false) &&
+			<p>{props.description ?? "Please wait ..."}</p>
+		}
+	</>;
+	if (props.hideContainer)
+		return content;
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_loading_parent} ${props.classList?.join(" ") ?? ""} `}
+			style={props.style}
+		>
+			{content}
+		</div>
+	);
 }