namirasoft-site-react 1.5.46 → 1.5.48

package/src/components/NSListGrouped.tsx

@@ -1,107 +1,107 @@
-"use client"
-import { Component, createRef } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSListGrouped.module.css";
-import { NSLoading } from './NSLoading';
-
-export interface NSListGroupedProps<Data> extends IBaseComponentProps
-{
-	groups: NSListGroupedProps_Group<Data>[];
-	onClick: (group: NSListGroupedProps_Group<Data>, item: NSListGroupedProps_Item<Data>) => void;
-	onClose: () => void;
-}
-
-export interface NSListGroupedProps_Group<Data>
-{
-	value: string;
-	text: string;
-	items: NSListGroupedProps_Item<Data>[] | null;
-}
-
-export interface NSListGroupedProps_Item<Data>
-{
-	value: Data
-	text: string;
-	text_bold?: string;
-	description?: string;
-}
-
-interface NSListGroupedState
-{
-}
-
-export class NSListGrouped<Data> extends Component<NSListGroupedProps<Data>, NSListGroupedState>
-{
-	private groupListRef = createRef<HTMLDivElement>();
-
-	constructor(props: NSListGroupedProps<Data>) 
-	{
-		super(props);
-		this.state = {};
-		this.handleClickOutside = this.handleClickOutside.bind(this);
-	}
-
-	override componentDidMount() 
-	{
-		document.addEventListener('mousedown', this.handleClickOutside);
-	}
-
-	override componentWillUnmount()
-	{
-		document.removeEventListener('mousedown', this.handleClickOutside);
-	}
-
-	handleClickOutside(event: MouseEvent)
-	{
-		if (this.groupListRef.current && !this.groupListRef.current.contains(event.target as Node))
-			this.props.onClose();
-	}
-	override render()
-	{
-		return (
-			<div
-				ref={this.groupListRef}
-				id={this.props.id}
-				className={`${Styles.ns_list_grouped_parent} ${this.props.classList?.join(" ") ?? ""}`}
-				style={this.props.style}
-			>
-				{
-					this.props.groups.map((group, index) => (
-						(group.items == null || group.items.length > 0) &&
-						<ul key={`NSListGrouped_ul_key_${index}`} className={Styles.ns_list_grouped}>
-							<div className='d-flex w-100 justify-content-between align-items-center'>
-								<span className={Styles.ns_group_category}>{group.text}
-									<img
-										onClick={this.props.onClose}
-										src="https://static.namirasoft.com/image/concept/close/blue.svg"
-										alt="input-icon"
-										width={24}
-										height={24}
-										style={{ cursor: "pointer" }}
-									/>
-								</span>
-							</div>
-							{
-								group.items == null &&
-								<NSLoading title='Loading group items ...' />
-							}
-							{
-								group.items?.map((item) => (
-									<li key={`NSListGrouped_li_key_${index}`} onClick={() => this.props.onClick(group, item)}>
-										<div className={Styles.ns_group_item}>
-											<span>{item.text && <span>{item.text}</span>}</span>
-											<span style={item.text_bold ? { fontWeight: 'bold' } : {}}>
-												<b> {item.text_bold}</b>
-											</span>
-											{item.description && <span className={Styles.ns_block}>{item.description}</span>}
-										</div>
-									</li>
-								))
-							}
-						</ul>
-					))
-				}
-			</div>
-		);
-	}
+"use client"
+import { Component, createRef } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSListGrouped.module.css";
+import { NSLoading } from './NSLoading';
+
+export interface NSListGroupedProps<Data> extends IBaseComponentProps
+{
+	groups: NSListGroupedProps_Group<Data>[];
+	onClick: (group: NSListGroupedProps_Group<Data>, item: NSListGroupedProps_Item<Data>) => void;
+	onClose: () => void;
+}
+
+export interface NSListGroupedProps_Group<Data>
+{
+	value: string;
+	text: string;
+	items: NSListGroupedProps_Item<Data>[] | null;
+}
+
+export interface NSListGroupedProps_Item<Data>
+{
+	value: Data
+	text: string;
+	text_bold?: string;
+	description?: string;
+}
+
+interface NSListGroupedState
+{
+}
+
+export class NSListGrouped<Data> extends Component<NSListGroupedProps<Data>, NSListGroupedState>
+{
+	private groupListRef = createRef<HTMLDivElement>();
+
+	constructor(props: NSListGroupedProps<Data>) 
+	{
+		super(props);
+		this.state = {};
+		this.handleClickOutside = this.handleClickOutside.bind(this);
+	}
+
+	override componentDidMount() 
+	{
+		document.addEventListener('mousedown', this.handleClickOutside);
+	}
+
+	override componentWillUnmount()
+	{
+		document.removeEventListener('mousedown', this.handleClickOutside);
+	}
+
+	handleClickOutside(event: MouseEvent)
+	{
+		if (this.groupListRef.current && !this.groupListRef.current.contains(event.target as Node))
+			this.props.onClose();
+	}
+	override render()
+	{
+		return (
+			<div
+				ref={this.groupListRef}
+				id={this.props.id}
+				className={`${Styles.ns_list_grouped_parent} ${this.props.classList?.join(" ") ?? ""}`}
+				style={this.props.style}
+			>
+				{
+					this.props.groups.map((group, index) => (
+						(group.items == null || group.items.length > 0) &&
+						<ul key={`NSListGrouped_ul_key_${index}`} className={Styles.ns_list_grouped}>
+							<div className='d-flex w-100 justify-content-between align-items-center'>
+								<span className={Styles.ns_group_category}>{group.text}
+									<img
+										onClick={this.props.onClose}
+										src="https://static.namirasoft.com/image/concept/close/blue.svg"
+										alt="input-icon"
+										width={24}
+										height={24}
+										style={{ cursor: "pointer" }}
+									/>
+								</span>
+							</div>
+							{
+								group.items == null &&
+								<NSLoading title='Loading group items ...' />
+							}
+							{
+								group.items?.map((item) => (
+									<li key={`NSListGrouped_li_key_${index}`} onClick={() => this.props.onClick(group, item)}>
+										<div className={Styles.ns_group_item}>
+											<span>{item.text && <span>{item.text}</span>}</span>
+											<span style={item.text_bold ? { fontWeight: 'bold' } : {}}>
+												<b> {item.text_bold}</b>
+											</span>
+											{item.description && <span className={Styles.ns_block}>{item.description}</span>}
+										</div>
+									</li>
+								))
+							}
+						</ul>
+					))
+				}
+			</div>
+		);
+	}
 }

package/src/components/NSListProduct.tsx

@@ -1,80 +1,80 @@
-import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
-import { EnvService, SearchOperation } from 'namirasoft-core';
-import { useEffect, useState } from "react";
-import { IImageProps } from "../props/IImageProps";
-import { ILinkProps } from "../props/ILinkProps";
-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 } from "../props/IImageProps";
+import { ILinkProps } from "../props/ILinkProps";
+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>
+	);
 }