namirasoft-site-react 1.3.326 → 1.3.327

package/src/components/NSPageSelectionModal.module.css

@@ -1,102 +1,102 @@
-.ns_print_container {
-    z-index: 1;
-    top: 0%;
-    transform: translate(50%, 50%);
-    background-color: rgba(255, 255, 255, 1);
-    border-radius: 16px;
-    border: 0.2px solid rgb(210, 210, 210);
-    padding: 16px;
-    max-width: 380px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.ns_header_print {
-    position: relative;
-}
-
-.ns_close_icon {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    cursor: pointer;
-}
-
-.ns_print_title {
-    display: flex;
-    gap: 8px;
-    color: #141B5C;
-    justify-content: center;
-    margin: 0;
-    align-items: center;
-}
-
-.ns_print_description {
-    color: #141B5C;
-    margin: 0;
-}
-
-.ns_parent_checkboxs {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 8px;
-}
-
-.ns_w_box_boolean div {
-    width: 100% !important;
-}
-
-.ns_w_box_boolean {
-    width: 100% !important;
-}
-
-.ns_w_box_string {
-    width: 100% !important;
-}
-
-.ns_w_box_string input {
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_print_container {
-        max-width: 590px;
-    }
-
-    .ns_w_box_boolean div {
-        width: 272px !important;
-    }
-
-    .ns_w_box_boolean {
-        width: 272px !important;
-    }
-
-    .ns_w_box_string {
-        width: 272px !important;
-    }
-
-    .ns_w_box_string input {
-        width: 272px !important;
-    }
-}
-
-.ns_toast_background {
-    width: 100vw;
-    height: 100vh;
-    background-color: #00000059;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: default;
-}
-
-.ns_parent_modal {
-    /* position: relative; */
+.ns_print_container {
+    z-index: 1;
+    top: 0%;
+    transform: translate(50%, 50%);
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 16px;
+    border: 0.2px solid rgb(210, 210, 210);
+    padding: 16px;
+    max-width: 380px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.ns_header_print {
+    position: relative;
+}
+
+.ns_close_icon {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    cursor: pointer;
+}
+
+.ns_print_title {
+    display: flex;
+    gap: 8px;
+    color: #141B5C;
+    justify-content: center;
+    margin: 0;
+    align-items: center;
+}
+
+.ns_print_description {
+    color: #141B5C;
+    margin: 0;
+}
+
+.ns_parent_checkboxs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.ns_w_box_boolean div {
+    width: 100% !important;
+}
+
+.ns_w_box_boolean {
+    width: 100% !important;
+}
+
+.ns_w_box_string {
+    width: 100% !important;
+}
+
+.ns_w_box_string input {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_print_container {
+        max-width: 590px;
+    }
+
+    .ns_w_box_boolean div {
+        width: 272px !important;
+    }
+
+    .ns_w_box_boolean {
+        width: 272px !important;
+    }
+
+    .ns_w_box_string {
+        width: 272px !important;
+    }
+
+    .ns_w_box_string input {
+        width: 272px !important;
+    }
+}
+
+.ns_toast_background {
+    width: 100vw;
+    height: 100vh;
+    background-color: #00000059;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: default;
+}
+
+.ns_parent_modal {
+    /* position: relative; */
 }

package/src/components/NSPageSelectionModal.tsx

@@ -1,164 +1,191 @@
-import React, { Component, createRef } from 'react';
-import Styles from './NSPageSelectionModal.module.css';
-import { NSButtonBlue } from './NSButtonBlue';
-import { NSBoxString } from './NSBoxString';
-import { NSBoxBoolean } from './NSBoxBoolean';
-import { NSSpace } from './NSSpace';
-import { NSSpaceSizeType } from '../main';
-
-export interface NSPageSelectionModalProps<RowType>
-{
-    current_page: number;
-    max_page: number;
-    onClose: () => void;
-    getItems: (page: number, selected: boolean) => Promise<RowType[]>;
-    onFinish: (items: RowType[]) => void;
-}
-
-interface NSPageSelectionModalState
-{
-}
-
-export class NSPageSelectionModal<RowType> extends Component<NSPageSelectionModalProps<RowType>, NSPageSelectionModalState>
-{
-    private toastRef: React.RefObject<HTMLDivElement> = createRef();
-    private NSBoxBoolean_CurrentPage: React.RefObject<NSBoxBoolean> = createRef();
-    private NSBoxBoolean_SelectedItems: React.RefObject<NSBoxBoolean> = createRef();
-    private NSBoxBoolean_CustomPage: React.RefObject<NSBoxBoolean> = createRef();
-    private NSBoxBoolean_AllPage: React.RefObject<NSBoxBoolean> = createRef();
-    private NSBoxString_Pages: React.RefObject<NSBoxString> = createRef();
-
-    constructor(props: NSPageSelectionModalProps<RowType>)
-    {
-        super(props);
-        this.state = {};
-        this.onClickOutside = this.onClickOutside.bind(this);
-    }
-
-    override componentDidMount(): void
-    {
-        document.addEventListener('mousedown', this.onClickOutside);
-    }
-
-    override componentWillUnmount(): void
-    {
-        document.removeEventListener('mousedown', this.onClickOutside);
-    }
-
-    private onClickOutside(event: MouseEvent)
-    {
-        if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
-        {
-            this.props.onClose();
-        }
-    }
-    override render()
-    {
-        return (
-            <>
-                {
-                    <>
-                        <div className={Styles.ns_print_container} ref={this.toastRef}>
-                            <div className={Styles.ns_header_print}>
-                                <img
-                                    src="https://static.namirasoft.com/image/concept/close/blue.svg"
-                                    alt="Close"
-                                    width={24}
-                                    height={24}
-                                    onClick={(e) =>
-                                    {
-                                        e.stopPropagation();
-                                        this.props.onClose();
-                                    }}
-                                    className={Styles.ns_close_icon}
-                                />
-                                <div className={Styles.ns_print_title}>
-                                    <img
-                                        src="https://static.namirasoft.com/image/concept/print/blue.svg"
-                                        alt="Print"
-                                        width={24}
-                                        height={24}
-                                    />
-                                    <h2 className='m-0'>Page Selection</h2>
-                                </div>
-                                <NSSpace size={NSSpaceSizeType.SMALL} />
-                                <p className={Styles.ns_print_description}>Please select which pages you want to continue with</p>
-                                <NSSpace size={NSSpaceSizeType.SMALL} />
-                                <div className={Styles.ns_parent_checkboxs}>
-                                    <NSBoxBoolean ref={this.NSBoxBoolean_CurrentPage} classList={[Styles.ns_w_box_boolean]} title="Current page" required={false} />
-                                    <NSBoxBoolean ref={this.NSBoxBoolean_SelectedItems} classList={[Styles.ns_w_box_boolean]} title="Only Selected Items" required={false} />
-                                    <NSBoxBoolean ref={this.NSBoxBoolean_CustomPage} classList={[Styles.ns_w_box_boolean]} title="Custom Pages" required={false} />
-                                    <NSBoxBoolean ref={this.NSBoxBoolean_AllPage} classList={[Styles.ns_w_box_boolean]} title="All Pages" required={false} />
-                                </div>
-                                <NSSpace size={NSSpaceSizeType.MICRO} />
-                                <NSBoxString ref={this.NSBoxString_Pages} classList={[Styles.ns_w_box_string]} required={false} title="Custom Pages" />
-                                <NSSpace size={NSSpaceSizeType.SMALL} />
-                                <NSButtonBlue style={{ width: "100%" }} title='Apply' onClick={async () =>
-                                {
-                                    let items: RowType[] = [];
-                                    if (this.NSBoxBoolean_CurrentPage.current?.getValue())
-                                    {
-                                        let is = await this.props.getItems(this.props.current_page, false);
-                                        items.push(...is);
-                                    }
-                                    else if (this.NSBoxBoolean_SelectedItems.current?.getValue())
-                                    {
-                                        let is = await this.props.getItems(this.props.current_page, true);
-                                        items.push(...is);
-                                    }
-                                    else if (this.NSBoxBoolean_CustomPage.current?.getValue())
-                                    {
-                                        let pages_value = this.NSBoxString_Pages.current?.getValue() ?? "";
-                                        let pages = pages_value.split(',').map(p => p.trim()).filter(p => p);
-                                        for (let i = 0; i < pages.length; i++)
-                                        {
-                                            const element = pages[i];
-                                            if (element.includes("-"))
-                                            {
-                                                let ps = element.split('-').map(p => p.trim());
-                                                if (ps.length == 2)
-                                                {
-                                                    let from = parseInt(ps[0]);
-                                                    let to = parseInt(ps[1]);
-                                                    for (let p = from; p <= to; p++)
-                                                    {
-                                                        let is = await this.props.getItems(p, false);
-                                                        items.push(...is);
-                                                    }
-                                                }
-                                                else
-                                                {
-                                                    // error
-                                                }
-                                            }
-                                            else
-                                            {
-                                                let p = parseInt(element);
-                                                let is = await this.props.getItems(p, false);
-                                                items.push(...is);
-                                            }
-                                        }
-                                    }
-                                    else if (this.NSBoxBoolean_AllPage.current?.getValue())
-                                    {
-                                        for (let p = 1; p <= this.props.max_page; p++)
-                                        {
-                                            let is = await this.props.getItems(p, false);
-                                            items.push(...is);
-                                        }
-                                    }
-                                    else
-                                    { }
-                                    this.props.onFinish(items);
-                                }} />
-                            </div>
-                        </div>
-                        <div className={Styles.ns_toast_background}></div>
-                    </>
-                }
-            </>
-        );
-    }
-}
-
+import React, { Component, createRef } from 'react';
+import Styles from './NSPageSelectionModal.module.css';
+import { NSButtonBlue } from './NSButtonBlue';
+import { NSBoxString } from './NSBoxString';
+import { NSBoxBoolean } from './NSBoxBoolean';
+import { NSSpace } from './NSSpace';
+import { NSSpaceSizeType } from '../main';
+
+export interface NSPageSelectionModalProps<RowType>
+{
+    current_page: number;
+    max_page: number;
+    onClose: () => void;
+    getItems: (page: number, selected: boolean) => Promise<RowType[]>;
+    onFinish: (items: RowType[]) => void;
+}
+
+interface NSPageSelectionModalState
+{
+}
+
+export class NSPageSelectionModal<RowType> extends Component<NSPageSelectionModalProps<RowType>, NSPageSelectionModalState>
+{
+    private toastRef: React.RefObject<HTMLDivElement> = createRef();
+    private NSBoxBoolean_CurrentPage: React.RefObject<NSBoxBoolean> = createRef();
+    private NSBoxBoolean_SelectedItems: React.RefObject<NSBoxBoolean> = createRef();
+    private NSBoxBoolean_CustomPage: React.RefObject<NSBoxBoolean> = createRef();
+    private NSBoxBoolean_AllPage: React.RefObject<NSBoxBoolean> = createRef();
+    private NSBoxString_Pages: React.RefObject<NSBoxString> = createRef();
+
+    constructor(props: NSPageSelectionModalProps<RowType>)
+    {
+        super(props);
+        this.state = {};
+        this.onClickOutside = this.onClickOutside.bind(this);
+    }
+    override componentDidMount(): void
+    {
+        document.addEventListener('mousedown', this.onClickOutside);
+    }
+    override componentWillUnmount(): void
+    {
+        document.removeEventListener('mousedown', this.onClickOutside);
+    }
+    parseCustomPage(pages_value: string): number[]
+    {
+        let ans: number[] = [];
+        let pages = pages_value.split(',').map(p => p.trim()).filter(p => p);
+        for (let i = 0; i < pages.length; i++)
+        {
+            const element = pages[i];
+            if (element.includes("-"))
+            {
+                let ps = element.split('-').map(p => p.trim());
+                if (ps.length == 2)
+                {
+                    let from = parseInt(ps[0]);
+                    let to = parseInt(ps[1]);
+                    for (let p = from; p <= to; p++)
+                        ans.push(p);
+                }
+                else
+                    throw new Error("Parse Error for : " + element);
+            }
+            else
+            {
+                let p = parseInt(element);
+                ans.push(p);
+            }
+        }
+        ans.forEach(p =>
+        {
+            if (p < 1)
+                throw new Error("Page number must be more than equal to 1");
+            if (p > this.props.max_page)
+                throw new Error("Page number must be less than equal to " + this.props.max_page);
+        })
+        return ans;
+    }
+    private onClickOutside(event: MouseEvent)
+    {
+        if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
+        {
+            this.props.onClose();
+        }
+    }
+    override render()
+    {
+        return (
+            <>
+                {
+                    <>
+                        <div className={Styles.ns_print_container} ref={this.toastRef}>
+                            <div className={Styles.ns_header_print}>
+                                <img
+                                    src="https://static.namirasoft.com/image/concept/close/blue.svg"
+                                    alt="Close"
+                                    width={24}
+                                    height={24}
+                                    onClick={(e) =>
+                                    {
+                                        e.stopPropagation();
+                                        this.props.onClose();
+                                    }}
+                                    className={Styles.ns_close_icon}
+                                />
+                                <div className={Styles.ns_print_title}>
+                                    <img
+                                        src="https://static.namirasoft.com/image/concept/print/blue.svg"
+                                        alt="Print"
+                                        width={24}
+                                        height={24}
+                                    />
+                                    <h2 className='m-0'>Page Selection</h2>
+                                </div>
+                                <NSSpace size={NSSpaceSizeType.SMALL} />
+                                <p className={Styles.ns_print_description}>Please select which pages you want to continue with</p>
+                                <NSSpace size={NSSpaceSizeType.SMALL} />
+                                <div className={Styles.ns_parent_checkboxs}>
+                                    <NSBoxBoolean ref={this.NSBoxBoolean_CurrentPage} classList={[Styles.ns_w_box_boolean]} title="Current page" required={false} />
+                                    <NSBoxBoolean ref={this.NSBoxBoolean_SelectedItems} classList={[Styles.ns_w_box_boolean]} title="Only Selected Items" required={false} />
+                                    <NSBoxBoolean ref={this.NSBoxBoolean_CustomPage} classList={[Styles.ns_w_box_boolean]} title="Custom Pages" required={false} />
+                                    <NSBoxBoolean ref={this.NSBoxBoolean_AllPage} classList={[Styles.ns_w_box_boolean]} title="All Pages" required={false} />
+                                </div>
+                                <NSSpace size={NSSpaceSizeType.MICRO} />
+                                <NSBoxString ref={this.NSBoxString_Pages} classList={[Styles.ns_w_box_string]} required={false} title="Custom Pages"
+                                    getError={value =>
+                                    {
+                                        try
+                                        {
+                                            this.parseCustomPage(value);
+                                            return null;
+                                        } catch (error: any)
+                                        {
+                                            return error.message;
+                                        }
+                                    }} />
+                                <NSSpace size={NSSpaceSizeType.SMALL} />
+                                <NSButtonBlue style={{ width: "100%" }} title='Apply' onClick={async () =>
+                                {
+                                    try
+                                    {
+                                        let items: RowType[] = [];
+                                        if (this.NSBoxBoolean_CurrentPage.current?.getValue())
+                                        {
+                                            let is = await this.props.getItems(this.props.current_page, false);
+                                            items.push(...is);
+                                        }
+                                        else if (this.NSBoxBoolean_SelectedItems.current?.getValue())
+                                        {
+                                            let is = await this.props.getItems(this.props.current_page, true);
+                                            items.push(...is);
+                                        }
+                                        else if (this.NSBoxBoolean_CustomPage.current?.getValue())
+                                        {
+                                            let pages_value = this.NSBoxString_Pages.current?.getValue() ?? "";
+                                            let pages = this.parseCustomPage(pages_value);
+
+                                            for (let p = 0; p < pages.length; p++)
+                                            {
+                                                let is = await this.props.getItems(pages[p], false);
+                                                items.push(...is);
+                                            }
+                                        }
+                                        else if (this.NSBoxBoolean_AllPage.current?.getValue())
+                                        {
+                                            for (let p = 1; p <= this.props.max_page; p++)
+                                            {
+                                                let is = await this.props.getItems(p, false);
+                                                items.push(...is);
+                                            }
+                                        }
+                                        else
+                                        { }
+                                        this.props.onFinish(items);
+                                    } catch (error)
+                                    {
+                                        // todo
+                                    }
+                                }} />
+                            </div>
+                        </div>
+                        <div className={Styles.ns_toast_background}></div>
+                    </>
+                }
+            </>
+        );
+    }
+}
+
 export default NSPageSelectionModal;