namirasoft-site-react 1.2.39 → 1.2.41

package/src/components/NSHeader.tsx

@@ -1,131 +1,135 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Styles from "./NSHeader.module.css";
-
-import NavDropdown from 'react-bootstrap/NavDropdown';
-import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
-
-interface IProps
-{
-    scope: string;
-    name: string;
-    logo: string;
-}
-
-interface IState
-{
-    filters?: FilterLinkRow[];
-    selected?: FilterLinkRow | null;
-    showNavbar?: boolean;
-}
-
-export function NSHeader(props: IProps)
-{
-    let [state, setState] = useState<IState>({
-        filters: [],
-        selected: null,
-        showNavbar: false
-    });
-
-    useEffect(() =>
-    {
-        let server = new NamirasoftAPILinkServer(console.error);
-        server.filter.GetFilters(props.scope, props.name).then(filters =>
-        {
-            setState({ filters });
-        });
-    });
-
-    function onMenuItemToggled(checked: boolean, selected: FilterLinkRow)
-    {
-        if (checked)
-            setState({ selected });
-    }
-    function hasChild(id: number): boolean
-    {
-        if (state.filters)
-            return state.filters.filter(f => f.parent_id === id).length > 0;
-        return false;
-    }
-    function toggleNavbar(): void
-    {
-        setState({ showNavbar: !state.showNavbar });
-    }
-    function render_menu(level: number, parent_id: number | null)
-    {
-        let fs: FilterLinkRow[] | undefined = state.filters?.filter(f => f.parent_id === parent_id);
-        if (fs)
-            return (
-                <div className={`me-auto nav ${Styles.ns_navbar_items_container}`} >
-                    {(fs?.map(f => render_menuItem(level, f)))}
-                </div>
-            );
-        return <></>;
-    }
-    function render_menuItem(level: number, filter: FilterLinkRow)
-    {
-        if (hasChild(filter.id))
-        {
-            let sub_menus = <></>;
-            if (level === 0)
-                if (state.selected)
-                {
-                    sub_menus =
-                        <div
-                            id={`dropdown_items${filter.id}`}>
-                            {
-                                render_menu(1, state.selected.id)
-                            }
-                        </div >
-                }
-            return (<>
-                <NavDropdown
-                    onToggle={(checked) => onMenuItemToggled(checked, filter)}
-                    className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
-                    title={filter.name}
-                    id={`dropdown_parent${filter.id}`}>
-                    {sub_menus}
-                </NavDropdown >
-            </>
-            );
-        }
-        return (
-            <a className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={filter.link?.url}>{filter.name}</a>
-        );
-    }
-
-    return (
-        <nav className={Styles.ns_navbar}>
-            <div className={`${Styles.ns_navbar_parent_content} container`}>
-                <img
-                    src={props.logo}
-                    alt="Logo"
-                    width={48}
-                    height={48}
-                />
-                <div className={`${Styles.ns_navbar_content} `} >
-                    <div className={`${Styles.ns_navbar_elements} ${state.showNavbar && Styles.ns_navbar_active}`}>
-                        {render_menu(0, null)}
-                    </div>
-                    <div className={`${Styles.ns_navbar_login_status}`}>
-                        <span className={`${Styles.ns_navbar_usersname}`}>name</span>
-                        <img src='../assets/images/exit.svg'
-                            alt="Exit"
-                            width={20}
-                            height={20}
-                        />
-                    </div>
-                    <div className={Styles.ns_navbar_menu_icon} onClick={toggleNavbar}>
-                        <img
-                            src='../assets/images/menu.svg'
-                            alt="Menu"
-                            width={19}
-                            height={17}
-                        />
-                    </div>
-                </div>
-            </div>
-        </nav>
-    );
+"use client";
+
+import React from "react";
+import Styles from "./NSHeader.module.css";
+
+import NavDropdown from 'react-bootstrap/NavDropdown';
+import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
+
+interface IProps
+{
+    scope: string;
+    name: string;
+    logo: string;
+}
+
+interface IState
+{
+    filters: FilterLinkRow[];
+    selected: FilterLinkRow | null;
+    showNavbar: boolean;
+}
+
+export class NSHeader extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        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);
+    }
+    override componentDidMount(): void
+    {
+        let server = new NamirasoftAPILinkServer(console.error);
+        server.filter.GetFilters(this.props.scope, this.props.name).then(filters =>
+        {
+            this.setState({ filters });
+        });
+    }
+    private onMenuItemToggled(checked: boolean, selected: FilterLinkRow)
+    {
+        if (checked)
+            this.setState({ selected });
+    }
+    private hasChild(id: number): boolean
+    {
+        return this.state.filters.filter(f => f.parent_id === id).length > 0;
+    }
+    handleShowNavbar(): void
+    {
+        this.setState({ showNavbar: !this.state.showNavbar });
+    }
+    override render()
+    {
+        return (
+            <nav className={Styles.ns_navbar}>
+                <div className={`${Styles.ns_navbar_parent_content} container`}>
+                    <img
+                        src={this.props.logo}
+                        alt="Logo"
+                        width={48}
+                        height={48}
+                    />
+                    <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>
+                        <div className={`${Styles.ns_navbar_login_status}`}>
+                            <span className={`${Styles.ns_navbar_usersname}`}>name</span>
+                            <img src='../assets/images/exit.svg'
+                                alt="Exit"
+                                width={20}
+                                height={20}
+                            />
+                        </div>
+                        <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
+                            <img
+                                src='../assets/images/menu.svg'
+                                alt="Menu"
+                                width={19}
+                                height={17}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        );
+    }
+    private render_menu(level: number, parent_id: number | null)
+    {
+        let fs: FilterLinkRow[] = this.state.filters?.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: FilterLinkRow)
+    {
+        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}
+                    id={`dropdown_parent${filter.id}`}>
+                    {sub_menus}
+                </NavDropdown >
+            </>
+            );
+        } else
+        {
+            return (
+                <a className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={filter.link?.url}>{filter.name}</a>
+            );
+        }
+    }
 }

package/src/components/NSInputDate.tsx

@@ -1,57 +1,57 @@
-"use client";
-
-import React from "react";
-import Styles from "./NSInputDate.module.css";
-
-interface IProps
-{
-    title: string;
-}
-
-interface IState
-{
-    value: string;
-}
-
-export class NSInputDate extends React.Component<IProps, IState> {
-    constructor(props: IProps)
-    {
-        super(props);
-        this.state = {
-            value: "",
-        };
-        this.setValue = this.setValue.bind(this);
-        this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
-    }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
-    {
-        this.setState({ value: e.target.value });
-    }
-    setDefaultValue(value: string): void
-    {
-        this.setState({ value });
-    }
-    getValue(): string
-    {
-        return this.state.value;
-    }
-    override render()
-    {
-        return (
-            <div className={`${Styles.ns_parent_input} p-2`}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <input
-                    value={this.state.value}
-                    onChange={this.setValue}
-                    type="date"
-                    className={Styles.ns_input}
-					placeholder="YYYY/MM/DD"
-					id="ns-input-date"
-                />
-            </div>
-        );
-    }
-}
-
-
+"use client";
+
+import React from "react";
+import Styles from "./NSInputDate.module.css";
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export class NSInputDate extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_parent_input} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="date"
+                    className={Styles.ns_input}
+					placeholder="YYYY/MM/DD"
+					id="ns-input-date"
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputDuration.tsx

@@ -1,65 +1,65 @@
-"use client";
-
-import React from "react";
-import Styles from "./NSInputDuration.module.css";
-import IconInputDuration from '../assets/images/icon-input-duration.svg';
-
-interface IProps
-{
-    title: string;
-}
-
-interface IState
-{
-    value: string;
-}
-
-export class NSInputDuration extends React.Component<IProps, IState> {
-    constructor(props: IProps)
-    {
-        super(props);
-        this.state = {
-            value: "",
-        };
-        this.setValue = this.setValue.bind(this);
-        this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
-    }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
-    {
-        this.setState({ value: e.target.value });
-    }
-    setDefaultValue(value: string): void
-    {
-        this.setState({ value });
-    }
-    getValue(): string
-    {
-        return this.state.value;
-    }
-    override render()
-    {
-        return (
-            <div className={`${Styles.ns_input_parent} p-2`}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputDuration}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.setValue}
-                    type="time"
-                    className={Styles.ns_input}
-                    placeholder="21:44:06"
-                    step="2"
-                />
-            </div>
-        );
-    }
-}
-
-
+"use client";
+
+import React from "react";
+import Styles from "./NSInputDuration.module.css";
+import IconInputDuration from '../assets/images/icon-input-duration.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export class NSInputDuration extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputDuration}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="time"
+                    className={Styles.ns_input}
+                    placeholder="21:44:06"
+                    step="2"
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputEmail.module.css

@@ -1,38 +1,38 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_error {
-    color: #FF3F3F !important;
-}
-
-.ns_input_error:focus {
-    color: #FF3F3F !important;
-}
-
-.ns_input_red {
-    border: 2px solid #FF3F3F;
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_error {
+    color: #FF3F3F !important;
+}
+
+.ns_input_error:focus {
+    color: #FF3F3F !important;
+}
+
+.ns_input_red {
+    border: 2px solid #FF3F3F;
 }