namirasoft-site-react 1.3.394 → 1.3.396

package/src/components/NSTag.module.css

@@ -1,45 +1,45 @@
-.ns_tag_container {
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    width: fit-content;
-    border-radius: 8px;
-    padding: 16px;
-    margin: 48px;
-}
-
-.ns_tag_title {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: left;
-}
-
-.ns_tag_title h2 {
-    color: #141B5C;
-    font-weight: 600;
-    font-size: 24px;
-    margin: 0;
-}
-
-.ns_tag_title h6 {
-    color: rgb(68, 182, 243);
-    font-weight: 600;
-    font-size: 16px;
-    margin: 0;
-}
-
-.ns_tag_input_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: left;
-    align-items: flex-start;
-    gap: 16px;
-}
-
-.ns_tag_input_group {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-
+.ns_tag_container {
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    width: fit-content;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 48px;
+}
+
+.ns_tag_title {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: left;
+}
+
+.ns_tag_title h2 {
+    color: #141B5C;
+    font-weight: 600;
+    font-size: 24px;
+    margin: 0;
+}
+
+.ns_tag_title h6 {
+    color: rgb(68, 182, 243);
+    font-weight: 600;
+    font-size: 16px;
+    margin: 0;
+}
+
+.ns_tag_input_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+.ns_tag_input_group {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+
 }

package/src/components/NSTag.tsx

@@ -1,50 +1,75 @@
-import { NSBoxString } from './NSBoxString';
-import NSButton from './NSButton';
-import Styles from './NSTag.module.css';
-
-function NSTag()
-{
-    return (
-        <section className={Styles.ns_tag_input_container}>
-            <div className={Styles.ns_tag_input_group}>
-                <NSBoxString title='Key' required />
-                <NSBoxString title='Value' required />
-                <NSBoxString title='Option' required />
-                <NSButton
-                    title='Remove'
-                    onClick={() => { }}
-                    style={{
-                        backgroundColor: "transparent",
-                        border: "1px solid rgba(3, 119, 255, 1)",
-                        width: "145px",
-                        marginTop: "28px"
-                    }}
-                />
-            </div>
-        </section>
-    )
-}
-// function NSTag()
-// {
-//     return (
-//         <div className={Styles.ns_tag_container}>
-//             <div className={Styles.ns_tag_title}>
-//                 <InputGroup />
-//                 <InputGroup />
-//                 <InputGroup />
-//                 <InputGroup />
-//                 <NSButton
-//                     title='Add new tag'
-//                     onClick={() => { }}
-//                     style={{
-//                         backgroundColor: "transparent",
-//                         border: "1px solid rgba(3, 119, 255, 1)",
-//                         width: "145px",
-//                         marginTop: "24px"
-//                     }} />
-//             </div>
-//         </div>
-//     );
-// }
-
+import { Component, createRef } from 'react';
+import { NSBoxString } from './NSBoxString';
+import NSButton from './NSButton';
+import Styles from './NSTag.module.css';
+
+export interface NSTagProps
+{
+    onChanged?: () => void;
+    onDeleted?: () => void;
+}
+export interface NSTagValue
+{
+    name: string;
+    value: string;
+    description?: string;
+}
+
+class NSTag extends Component<NSTagProps>
+{
+    static isEmpty(value: NSTagValue)
+    {
+        if (value.name || value.value || value.description)
+            return false
+        return true;
+    }
+
+    private NSBoxString_Key = createRef<NSBoxString>();
+    private NSBoxString_Value = createRef<NSBoxString>();
+    private NSBoxString_Description = createRef<NSBoxString>();
+
+    getValue(checkError: boolean = true): NSTagValue
+    {
+        let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
+        let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
+        let description = this.NSBoxString_Description.current?.getValue(checkError) ?? "";
+        return {
+            name,
+            value,
+            description
+        };
+    }
+    setValue(value: NSTagValue)
+    {
+        this.NSBoxString_Key.current?.setValue(value.name);
+        this.NSBoxString_Value.current?.setValue(value.value);
+        this.NSBoxString_Description.current?.setValue(value.description ?? "");
+    }
+    override render()
+    {
+        return (
+            <section className={Styles.ns_tag_input_container} >
+                <div className={Styles.ns_tag_input_group}>
+                    <NSBoxString ref={this.NSBoxString_Key} title='Name' required onChanged={this.props.onChanged} />
+                    <NSBoxString ref={this.NSBoxString_Value} title='Value' required onChanged={this.props.onChanged} />
+                    <NSBoxString ref={this.NSBoxString_Description} title='Description' required={false} onChanged={this.props.onChanged} />
+                    <NSButton
+                        title='Remove'
+                        onClick={() =>
+                        {
+                            if (this.props.onDeleted)
+                                this.props.onDeleted();
+                        }}
+                        style={{
+                            backgroundColor: "transparent",
+                            border: "1px solid rgba(3, 119, 255, 1)",
+                            width: "145px",
+                            marginTop: "28px"
+                        }}
+                    />
+                </div>
+            </section>
+        );
+    }
+}
 export default NSTag;

package/src/components/NSTitle.module.css

@@ -1,16 +1,16 @@
-.ns_title {
-	font-size: 24px;
-	font-weight: 700;
-	line-height: normal;
-	color: inherit;
-	margin-bottom: 16px;
-	width: 100%;
-	text-align: center;
-	font-family: inherit;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_title {
-		font-size: 32px;
-	}
+.ns_title {
+	font-size: 24px;
+	font-weight: 700;
+	line-height: normal;
+	color: inherit;
+	margin-bottom: 16px;
+	width: 100%;
+	text-align: center;
+	font-family: inherit;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_title {
+		font-size: 32px;
+	}
 }

package/src/components/NSTitle.tsx

@@ -1,20 +1,20 @@
-import Styles from './NSTitle.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSTitleProps extends IBaseComponentProps
-{
-	title: string;
-}
-
-export function NSTitle(props: INSTitleProps)
-{
-	return (
-		<h2
-			id={props.id}
-			className={`${Styles.ns_title} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			{props.title}
-		</h2>
-	);
+import Styles from './NSTitle.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSTitleProps extends IBaseComponentProps
+{
+	title: string;
+}
+
+export function NSTitle(props: INSTitleProps)
+{
+	return (
+		<h2
+			id={props.id}
+			className={`${Styles.ns_title} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.title}
+		</h2>
+	);
 }

package/src/components/NSVerification.module.css

@@ -1,23 +1,23 @@
-.ns_verification_container {
-    background-color: #FFF;
-    border: 1px solid #A1A4B0;
-    backdrop-filter: blur(5px);
-    border-radius: 8px;
-    width: 100%;
-    max-width: 594px;
-    padding: 16px;
-    color: #141B5C !important;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    align-items: center;
-}
-
-.ns_verification_container p{
-    text-align: center;
-}
-
-.ns_verification_vector{
-    width: 224px;
-    height: 224px;
+.ns_verification_container {
+    background-color: #FFF;
+    border: 1px solid #A1A4B0;
+    backdrop-filter: blur(5px);
+    border-radius: 8px;
+    width: 100%;
+    max-width: 594px;
+    padding: 16px;
+    color: #141B5C !important;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+}
+
+.ns_verification_container p{
+    text-align: center;
+}
+
+.ns_verification_vector{
+    width: 224px;
+    height: 224px;
 }

package/src/components/NSVerification.tsx

@@ -1,42 +1,42 @@
-import React, { useState } from "react";
-import vector from '../assets/images/verify.png'
-import { IBaseComponentProps, IImageProps } from '../main';
-import NSBoxOTP from './NSBoxOTP';
-import Styles from './NSVerification.module.css'
-
-interface INSVerificationProps extends IBaseComponentProps {
-    verificationType : string;
-    onChanged ?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    image ?: IImageProps;
-}
-
-
-
-function NSVerification(props:INSVerificationProps) {
-    const [values, setValue] = useState<string>('')
-
-    function onChanged(event: React.ChangeEvent<HTMLInputElement>): string | undefined
-	{
-		setValue(prevValues => [...prevValues , event.target.value].join(''));
-		if (props.onChanged)
-			props.onChanged(event);
-        console.log(values);
-        return (values);
-	}
-    return (
-        <div 
-            className={`${Styles.ns_verification_container} ${props.classList?.join(" ")}`}
-	    	style={props.style}
-            >
-            <img 
-            src={props.image?.src ?? vector} 
-            alt={props.image?.alt ?? 'verification vector'} 
-            className={Styles.ns_verification_vector}
-            />
-            <p>Please enter code sent to {props.verificationType}</p>
-            <NSBoxOTP onChanged={onChanged}/>
-        </div>
-    );
-}
-
+import React, { useState } from "react";
+import vector from '../assets/images/verify.png'
+import { IBaseComponentProps, IImageProps } from '../main';
+import NSBoxOTP from './NSBoxOTP';
+import Styles from './NSVerification.module.css'
+
+interface INSVerificationProps extends IBaseComponentProps {
+    verificationType : string;
+    onChanged ?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    image ?: IImageProps;
+}
+
+
+
+function NSVerification(props:INSVerificationProps) {
+    const [values, setValue] = useState<string>('')
+
+    function onChanged(event: React.ChangeEvent<HTMLInputElement>): string | undefined
+	{
+		setValue(prevValues => [...prevValues , event.target.value].join(''));
+		if (props.onChanged)
+			props.onChanged(event);
+        console.log(values);
+        return (values);
+	}
+    return (
+        <div 
+            className={`${Styles.ns_verification_container} ${props.classList?.join(" ")}`}
+	    	style={props.style}
+            >
+            <img 
+            src={props.image?.src ?? vector} 
+            alt={props.image?.alt ?? 'verification vector'} 
+            className={Styles.ns_verification_vector}
+            />
+            <p>Please enter code sent to {props.verificationType}</p>
+            <NSBoxOTP onChanged={onChanged}/>
+        </div>
+    );
+}
+
 export default NSVerification;

package/src/formatter/BackColorFormatter.tsx

@@ -1,21 +1,21 @@
-import { TableColumnInfo, TableRowInfo } from "../main";
-import { BaseColumnFormatter } from "./BaseColumnFormatter";
-
-export class BackColorFormatter extends BaseColumnFormatter
-{
-    private formatter: BaseColumnFormatter;
-    private colors: { [value: string]: string }
-    constructor(formatter: BaseColumnFormatter, colors: { [value: string]: string })
-    {
-        super();
-        this.formatter = formatter;
-        this.colors = colors;
-    }
-    override format(value: any, column: TableColumnInfo, row: TableRowInfo<any>): any
-    {
-        let formatted = this.formatter.format(value, column, row);
-        if (this.colors[value])
-            return <span style={{ color: this.colors[value], fontWeight: "bold" }}> {formatted} </span>;
-        return formatted;
-    }
+import { TableColumnInfo, TableRowInfo } from "../main";
+import { BaseColumnFormatter } from "./BaseColumnFormatter";
+
+export class BackColorFormatter extends BaseColumnFormatter
+{
+    private formatter: BaseColumnFormatter;
+    private colors: { [value: string]: string }
+    constructor(formatter: BaseColumnFormatter, colors: { [value: string]: string })
+    {
+        super();
+        this.formatter = formatter;
+        this.colors = colors;
+    }
+    override format(value: any, column: TableColumnInfo, row: TableRowInfo<any>): any
+    {
+        let formatted = this.formatter.format(value, column, row);
+        if (this.colors[value])
+            return <span style={{ color: this.colors[value], fontWeight: "bold" }}> {formatted} </span>;
+        return formatted;
+    }
 }

package/src/formatter/BaseColumnFormatter.ts

@@ -1,15 +1,15 @@
-import { BaseMetaColumn } from "namirasoft-core";
-import { TableColumnInfo, TableRowInfo } from "../main";
-
-export abstract class BaseColumnFormatter
-{
-    abstract format(value: any, column: TableColumnInfo, row: TableRowInfo<any>): any;
-    static getColumn(column: BaseMetaColumn, formatter: BaseColumnFormatter): TableColumnInfo
-    {
-        return {
-            index: 0,
-            ...column,
-            formatter
-        };
-    }
+import { BaseMetaColumn } from "namirasoft-core";
+import { TableColumnInfo, TableRowInfo } from "../main";
+
+export abstract class BaseColumnFormatter
+{
+    abstract format(value: any, column: TableColumnInfo, row: TableRowInfo<any>): any;
+    static getColumn(column: BaseMetaColumn, formatter: BaseColumnFormatter): TableColumnInfo
+    {
+        return {
+            index: 0,
+            ...column,
+            formatter
+        };
+    }
 }

package/src/formatter/BooleanFormatter.ts

@@ -1,21 +1,21 @@
-import { BaseColumnFormatter } from "./BaseColumnFormatter";
-
-export class BooleanFormatter extends BaseColumnFormatter
-{
-    private true_value: string;
-    private false_value: string;
-    constructor(true_value: string, false_value: string)
-    {
-        super();
-        this.true_value = true_value;
-        this.false_value = false_value;
-    }
-    override format(value: any): any
-    {
-        if (value === true)
-            return this.true_value;
-        if (value === false)
-            return this.false_value;
-        return value;
-    }
+import { BaseColumnFormatter } from "./BaseColumnFormatter";
+
+export class BooleanFormatter extends BaseColumnFormatter
+{
+    private true_value: string;
+    private false_value: string;
+    constructor(true_value: string, false_value: string)
+    {
+        super();
+        this.true_value = true_value;
+        this.false_value = false_value;
+    }
+    override format(value: any): any
+    {
+        if (value === true)
+            return this.true_value;
+        if (value === false)
+            return this.false_value;
+        return value;
+    }
 }

package/src/formatter/DateFormatter.ts

@@ -1,17 +1,17 @@
-import { BaseColumnFormatter } from "./BaseColumnFormatter";
-
-export class DateFormatter extends BaseColumnFormatter
-{
-    override format(value: any): any
-    {
-        try
-        {
-            let date = new Date(value);
-            return date.toString(); // to do
-        } catch (e)
-        {
-
-        }
-        return value;
-    }
+import { BaseColumnFormatter } from "./BaseColumnFormatter";
+
+export class DateFormatter extends BaseColumnFormatter
+{
+    override format(value: any): any
+    {
+        try
+        {
+            let date = new Date(value);
+            return date.toString(); // to do
+        } catch (e)
+        {
+
+        }
+        return value;
+    }
 }

package/src/formatter/DateTimeFormatter.ts

@@ -1,21 +1,21 @@
-import { BaseColumnFormatter } from "./BaseColumnFormatter";
-import { DateFormatter } from "./DateFormatter";
-import { TimeFormatter } from "./TimeFormatter";
-
-export class DateTimeFormatter extends BaseColumnFormatter
-{
-    private date: DateFormatter;
-    private time: TimeFormatter;
-    constructor()
-    {
-        super();
-        this.date = new DateFormatter();
-        this.time = new TimeFormatter();
-    }
-    override format(value: any): any
-    {
-        let d = this.date.format(value);
-        let t = this.time.format(value);
-        return d + " " + t;
-    }
+import { BaseColumnFormatter } from "./BaseColumnFormatter";
+import { DateFormatter } from "./DateFormatter";
+import { TimeFormatter } from "./TimeFormatter";
+
+export class DateTimeFormatter extends BaseColumnFormatter
+{
+    private date: DateFormatter;
+    private time: TimeFormatter;
+    constructor()
+    {
+        super();
+        this.date = new DateFormatter();
+        this.time = new TimeFormatter();
+    }
+    override format(value: any): any
+    {
+        let d = this.date.format(value);
+        let t = this.time.format(value);
+        return d + " " + t;
+    }
 }

package/src/formatter/DurationFormatter.ts

@@ -1,9 +1,9 @@
-import { BaseColumnFormatter } from "./BaseColumnFormatter";
-
-export class DurationFormatter extends BaseColumnFormatter
-{
-    override format(value: any): any
-    {
-        return value;
-    }
+import { BaseColumnFormatter } from "./BaseColumnFormatter";
+
+export class DurationFormatter extends BaseColumnFormatter
+{
+    override format(value: any): any
+    {
+        return value;
+    }
 }

package/src/formatter/EmailFormatter.ts

@@ -1,9 +1,9 @@
-import { BaseColumnFormatter } from "./BaseColumnFormatter";
-
-export class EmailFormatter extends BaseColumnFormatter
-{
-    override format(value: any): any
-    {
-        return value;
-    }
+import { BaseColumnFormatter } from "./BaseColumnFormatter";
+
+export class EmailFormatter extends BaseColumnFormatter
+{
+    override format(value: any): any
+    {
+        return value;
+    }
 }

package/src/formatter/EnumFormatter.ts

@@ -1,9 +1,9 @@
-import { BaseColumnFormatter } from "./BaseColumnFormatter";
-
-export class EnumFormatter extends BaseColumnFormatter
-{
-    override format(value: any): any
-    {
-        return value;
-    }
+import { BaseColumnFormatter } from "./BaseColumnFormatter";
+
+export class EnumFormatter extends BaseColumnFormatter
+{
+    override format(value: any): any
+    {
+        return value;
+    }
 }