namirasoft-site-react 1.3.372 → 1.3.375

package/src/components/NSPanel.module.css

@@ -1,47 +1,47 @@
-.ns_panel_grid {
-    background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    border-radius: 16px;
-    margin: 0 auto;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-    justify-content: center;
-}
-
-.ns_panel_column {
-    background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-radius: 8px;
-    margin: 0 auto;
-    width: 100%;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_panel_column {
-        max-width: 700px;
-        min-width: 270px;
-    }
-
-    .ns_panel_grid {
-        flex-direction: row;
-        max-width: 700px;
-        flex-wrap: wrap;
-        min-width: 270px;
-        max-width: 670px;
-    }
-}
-
-@media only screen and (min-width: 380px) {
-    .ns_panel_column {
-        width: max-content;
-    }
+.ns_panel_grid {
+    background-color: #fff;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    border-radius: 16px;
+    margin: 0 auto;
+    border: 1px solid rgba(161, 164, 176, 1);
+    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+    justify-content: center;
+}
+
+.ns_panel_column {
+    background-color: #fff;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    margin: 0 auto;
+    width: 100%;
+    border: 1px solid rgba(161, 164, 176, 1);
+    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_panel_column {
+        max-width: 700px;
+        min-width: 270px;
+    }
+
+    .ns_panel_grid {
+        flex-direction: row;
+        max-width: 700px;
+        flex-wrap: wrap;
+        min-width: 270px;
+        max-width: 670px;
+    }
+}
+
+@media only screen and (min-width: 380px) {
+    .ns_panel_column {
+        width: max-content;
+    }
 }

package/src/components/NSPanel.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from "react";
-import Styles from './NSPanel.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSPanelProps extends IBaseComponentProps
-{
-    children: ReactNode;
-    grid: boolean;
-}
-export function NSPanel(props: NSPanelProps)
-{
-    return (
-        <section id={props.id}
-            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
-            style={props.style}
-        >
-            {props.children}
-        </section>
-    );
+import { ReactNode } from "react";
+import Styles from './NSPanel.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSPanelProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    grid: boolean;
+}
+export function NSPanel(props: NSPanelProps)
+{
+    return (
+        <section id={props.id}
+            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </section>
+    );
 }

package/src/components/NSProductList.tsx

@@ -1,37 +1,78 @@
-import { NSCard } from "../main";
-import { useState, useEffect } from "react";
-import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
-
-
-interface NSProductListState
-{
-    products: ProductFullRow[];
-}
-export function NSProductList() 
-{
-    const [state, setState] = useState<NSProductListState>({ products: [] });
-
-    useEffect(() =>
-    {
-        let server = new NamirasoftAPIProductServer(console.error);
-        server.filter.ListProducts("Namirasoft Account", "Home", null, null, null).then((products) =>
-        {
-            setState({ products: products.rows });
-        }).catch(() => { });
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps 
-    }, []);
-
-    return (
-        <>
-            <div className="d-flex gap-3 flex-wrap justify-content-between container">
-                {state.products.map((product: ProductFullRow) =>
-                {
-                    return (
-                        <NSCard key={product.id} link={{ href: product.link ?? "" }} title={product.name} image={{ src: product.logo ?? '', alt: product.name }} />
-                    );
-                })}
-            </div>
-        </>
-    );
+import { NSCard } from "../main";
+import { useState, useEffect } from "react";
+import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
+import { INSBarActionProps, INSBarHeroBannerProps, INSBarTitleProps } from "namirasoft-site-react";
+import { INSARouterProps, NSALayout, NSASectionEditProps, NSASectionListProps, NSASectionViewProps, IEntityInfo } from "namirasoft-account-react";
+
+export interface NSProductListProps<EntityType extends { id: string }, EntityTypeInput = EntityType> extends INSARouterProps
+{
+    action?: INSBarActionProps;
+    banner?: INSBarHeroBannerProps;
+    title?: INSBarTitleProps;
+    pages?: {
+        entity: IEntityInfo<EntityType, EntityTypeInput>;
+        ui?: {
+            action?: {
+                menus: {
+                    view?: boolean;
+                    viewHistory?: boolean;
+                    copy?: boolean;
+                    edit?: boolean;
+                    delete?: boolean;
+                    apply?: boolean;
+                };
+            };
+        };
+        list?: NSASectionListProps<EntityType>;
+        edit?: NSASectionEditProps<EntityType, EntityTypeInput>;
+        view?: NSASectionViewProps<EntityType>;
+    }
+    edit?: () => void;
+    delete?: () => void;
+    redirectToView?: () => void;
+    scope:string;
+    logo:string;
+}
+
+interface NSProductListState
+{
+    products: ProductFullRow[];
+}
+export function NSProductList<EntityType extends { id: string } = any, EntityTypeInput = EntityType>(props: NSProductListProps<EntityType, EntityTypeInput>)
+{
+    const [state, setState] = useState<NSProductListState>({ products: [] });
+
+    useEffect(() =>
+    {
+        let server = new NamirasoftAPIProductServer(console.error);
+        server.filter.ListProducts("Namirasoft Account", "Home", null, null, null).then((products) =>
+        {
+            setState({ products: products.rows });
+        }).catch(() => { });
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps 
+    }, []);
+
+    return (
+        <>
+            <NSALayout
+                scope={props.scope}
+                logo={props.logo}
+                background="url('https://static.namirasoft.com/image/namirasoft/account/background/base.svg')"
+                notifications={props.notifier.getNotifications()}
+                account={props.account}
+                url={props.url}
+                notifier={props.notifier}
+            >
+                <div className="d-flex gap-3 flex-wrap justify-content-between container">
+                    {state.products.map((product: ProductFullRow) =>
+                    {
+                        return (
+                            <NSCard key={product.id} link={{ href: product.link ?? "" }} title={product.name} image={{ src: product.logo ?? '', alt: product.name }} />
+                        );
+                    })}
+                </div>
+            </NSALayout>
+        </>
+    );
 }

package/src/components/NSRadioButton.module.css

@@ -1,62 +1,65 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: fit-content;
-    color: #141B5C;
-    position: relative;
-    justify-content: center;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_checkbox_parent {
-    border-radius: 8px;
-    padding: 10px 12px 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-    border: 1px solid rgba(0, 0, 0, 1) !important;
-    background-color: #fff;
-    position: relative;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    height: 48px;
-    gap: 8px;
-}
-
-.ns_input {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-}
-
-.ns_input:checked {
-    accent-color: #141B5C;
-}
-
-.ns_checkbox_parent label {
-    cursor: pointer;
-    color: #141B5C;
-    font-size: 16px;
-    font-weight: 300;
-    font-family: inherit;
-}
-
-@media only screen and (min-width: 380px) {
-    .ns_checkbox_parent {
-        width: 272px;
-    }
-}
-
-.ns_input_transparent {
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background: transparent;
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    color: #141B5C;
+    position: relative;
+    justify-content: center;
+    max-width: 272px;
+    width: 100%;
+    border: 1px solid rgba(0, 0, 0, 1) !important;
+    background-color: #fff;
+    border-radius: 8px;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom: 2px;
+}
+
+.ns_checkbox_parent {
+    padding: 10px 12px 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    height: 48px;
+    gap: 5px;
+}
+
+.ns_input {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+.ns_input:checked {
+    accent-color: #141B5C;
+}
+
+.ns_checkbox_parent label {
+    cursor: pointer;
+    color: #141B5C;
+    font-size: 16px;
+    font-weight: 300;
+    font-family: inherit;
+}
+
+@media only screen and (min-width: 380px) {
+    .ns_checkbox_parent {
+        width: 100%;
+    }
+}
+
+.ns_input_transparent {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: transparent;
 }

package/src/components/NSRadioButton.tsx

@@ -1,102 +1,102 @@
-import React from "react";
-import Styles from "./NSRadioButton.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
-
-export interface INSRadioButtonProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
-{
-    title: string;
-    placeholder?: string;
-    defaultValue?: boolean;
-    isSelected?: boolean;
-    onChanged?: (e: NSRadioButton) => void;
-    onClick?: () => void;
-}
-
-export interface INSBoxBooleanState
-{
-    value: boolean;
-    error?: string;
-}
-
-export class NSRadioButton extends React.Component<INSRadioButtonProps, INSBoxBooleanState>
-{
-    constructor(props: INSRadioButtonProps)
-    {
-        super(props);
-        this.state = { value: props.defaultValue ?? false };
-        this.getValue = this.getValue.bind(this);
-        this.setValue = this.setValue.bind(this);
-        this.onClicked = this.onClicked.bind(this);
-    }
-
-    getError(): string | null
-    {
-        return null;
-    }
-
-    getValue(): boolean
-    {
-        let error = this.getError();
-        if (error)
-        {
-            this.setState({ error });
-            throw new Error(error);
-        }
-        return this.state.value;
-    }
-
-    setValue(value: boolean): void
-    {
-        this.setState({ value }, () =>
-        {
-            if (this.props.onChanged)
-                this.props.onChanged(this);
-        });
-    }
-
-    private onClicked(): void
-    {
-        this.setValue(true);
-        if (this.props.onClick)
-            this.props.onClick();
-    }
-
-    override componentDidUpdate(prevProps: INSRadioButtonProps)
-    {
-        if (prevProps.isSelected !== this.props.isSelected)
-        {
-            this.setValue(this.props.isSelected ?? false);
-        }
-    }
-
-    override render()
-    {
-        return (
-            <>
-                <div
-                    id={this.props.id}
-                    className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`}
-                    style={this.props.style}
-                >
-                    <div className={Styles.ns_input_transparent} onClick={this.onClicked}></div>
-                    <div className={Styles.ns_checkbox_parent} >
-                        <input
-                            type="radio"
-                            name={this.props.name}
-                            className={Styles.ns_input}
-                            checked={this.state.value}
-                            onChange={() => { }}
-                        />
-                        <span className={Styles.ns_input_title}>
-                            {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title}
-                        </span>
-                    </div>
-                </div>
-                <NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
-            </>
-        );
-    }
+import React from "react";
+import Styles from "./NSRadioButton.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+
+export interface INSRadioButtonProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+    title: string;
+    placeholder?: string;
+    defaultValue?: boolean;
+    isSelected?: boolean;
+    onChanged?: (e: NSRadioButton) => void;
+    onClick?: () => void;
+}
+
+export interface INSBoxBooleanState
+{
+    value: boolean;
+    error?: string;
+}
+
+export class NSRadioButton extends React.Component<INSRadioButtonProps, INSBoxBooleanState>
+{
+    constructor(props: INSRadioButtonProps)
+    {
+        super(props);
+        this.state = { value: props.defaultValue ?? false };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onClicked = this.onClicked.bind(this);
+    }
+
+    getError(): string | null
+    {
+        return null;
+    }
+
+    getValue(): boolean
+    {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
+        return this.state.value;
+    }
+
+    setValue(value: boolean): void
+    {
+        this.setState({ value }, () =>
+        {
+            if (this.props.onChanged)
+                this.props.onChanged(this);
+        });
+    }
+
+    private onClicked(): void
+    {
+        this.setValue(true);
+        if (this.props.onClick)
+            this.props.onClick();
+    }
+
+    override componentDidUpdate(prevProps: INSRadioButtonProps)
+    {
+        if (prevProps.isSelected !== this.props.isSelected)
+        {
+            this.setValue(this.props.isSelected ?? false);
+        }
+    }
+
+    override render()
+    {
+        return (
+            <>
+                <div
+                    id={this.props.id}
+                    className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`}
+                    style={this.props.style}
+                >
+                    <div className={Styles.ns_input_transparent} onClick={this.onClicked}></div>
+                    <div className={Styles.ns_checkbox_parent} >
+                        <input
+                            type="radio"
+                            name={this.props.name}
+                            className={Styles.ns_input}
+                            checked={this.state.value}
+                            onChange={() => { }}
+                        />
+                        <span className={Styles.ns_input_title}>
+                            {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title}
+                        </span>
+                    </div>
+                </div>
+                <NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
+            </>
+        );
+    }
 }

package/src/components/NSSection.module.css

@@ -1,11 +1,11 @@
-.ns_section {
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center;
-}
-
-.ns_section_center {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+.ns_section {
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+}
+
+.ns_section_center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

package/src/components/NSSection.tsx

@@ -1,24 +1,24 @@
-import { ReactNode } from "react";
-import Styles from './NSSection.module.css'
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSSectionProps extends IBaseComponentProps
-{
-	children: ReactNode;
-	center_items?: boolean;
-}
-
-export function NSSection(props: INSSectionProps)
-{
-	let styles = [Styles.ns_section];
-	if (props.center_items)
-		styles.push(Styles.ns_section_center);
-	return (
-		<section id={props.id}
-			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			{props.children}
-		</section>
-	);
+import { ReactNode } from "react";
+import Styles from './NSSection.module.css'
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSSectionProps extends IBaseComponentProps
+{
+	children: ReactNode;
+	center_items?: boolean;
+}
+
+export function NSSection(props: INSSectionProps)
+{
+	let styles = [Styles.ns_section];
+	if (props.center_items)
+		styles.push(Styles.ns_section_center);
+	return (
+		<section id={props.id}
+			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.children}
+		</section>
+	);
 }

package/src/components/NSSectionBars.module.css

@@ -1,11 +1,11 @@
-.ns_entity_bar_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	gap: 24px;
+.ns_entity_bar_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	gap: 24px;
 }