namirasoft-account-react 1.4.430 → 1.4.431

package/src/components/NSAProductListDialog.tsx

@@ -1,89 +1,89 @@
-import { ProductFullRow } from 'namirasoft-api-product';
-import { CacheService, SearchOperation } from 'namirasoft-core';
-import { NSBoxSearch, NSDialog, NSDialogProps, NSLoading } from 'namirasoft-site-react';
-import { Component } from 'react';
-import { NSACacheService } from '../NSACacheService';
-import { NSARouterMakerProps } from '../NSARouterMakerProps';
-import Styles from './NSAProductListDialog.module.css';
-
-export interface NSAProductListDialogProps extends NSARouterMakerProps, NSDialogProps { }
-
-interface NSAProductListState
-{
-    products: ProductFullRow[] | null;
-    search: string;
-}
-
-export class NSAProductListDialog extends Component<NSAProductListDialogProps, NSAProductListState>
-{
-    private cache: CacheService<{
-        rows: ProductFullRow[];
-        count: number;
-    }>;
-
-    constructor(props: NSAProductListDialogProps)
-    {
-        super(props);
-        this.state = { products: null, search: "" };
-        this.cache = NSACacheService.getProducts(this.props.notifier);
-    }
-
-    override componentDidMount(): void
-    {
-        this.cache.get().then((res) =>
-        {
-            this.setState({ products: res.rows });
-        }).catch(() => { });
-    }
-
-    override render()
-    {
-        let content = null;
-        if (this.state.products == null)
-            content = <NSLoading />;
-        else
-        {
-            let products = SearchOperation.filter(this.state.products, p => p.name, this.state.search);
-            let getName = (name: string) =>
-            {
-                return name.replace("Namirasoft ", "").trim();
-            };
-            let content_products = (
-                <div className={Styles.nsa_product_list_container}>
-                    {
-                        products.map((product) => (
-                            <div key={product.id} className={Styles.nsa_product_list}>
-                                <a href={product.link_console || ""} target='_blank' rel="noreferrer" >
-                                    <figure className={Styles.nsa_product_logo} key={product.id}>
-                                        <img src={`${product.logo}`} alt={product.name} width={64} height={64} />
-                                        <figcaption>{`${getName(product.name)}`}</figcaption>
-                                    </figure>
-                                </a>
-                            </div>
-                        ))
-                    }
-                </div>
-            );
-            content = (
-                <>
-                    <NSBoxSearch
-                        title=""
-                        required={false}
-                        style={{ width: "302px" }}
-                        placeholder='Search your Product'
-                        onChanged={(e) =>
-                        {
-                            this.setState({ search: e.getValue() ?? "" });
-                        }}
-                    />
-                    {content_products}
-                </>
-            );
-        }
-        return (
-            <NSDialog {...this.props}>
-                {content}
-            </NSDialog>
-        );
-    }
+import { ProductFullRow } from 'namirasoft-api-product';
+import { CacheService, SearchOperation } from 'namirasoft-core';
+import { NSBoxSearch, NSDialog, NSDialogProps, NSLoading } from 'namirasoft-site-react';
+import { Component } from 'react';
+import { NSACacheService } from '../NSACacheService';
+import { NSARouterMakerProps } from '../NSARouterMakerProps';
+import Styles from './NSAProductListDialog.module.css';
+
+export interface NSAProductListDialogProps extends NSARouterMakerProps, NSDialogProps { }
+
+interface NSAProductListState
+{
+    products: ProductFullRow[] | null;
+    search: string;
+}
+
+export class NSAProductListDialog extends Component<NSAProductListDialogProps, NSAProductListState>
+{
+    private cache: CacheService<{
+        rows: ProductFullRow[];
+        count: number;
+    }>;
+
+    constructor(props: NSAProductListDialogProps)
+    {
+        super(props);
+        this.state = { products: null, search: "" };
+        this.cache = NSACacheService.getProducts(this.props.notifier);
+    }
+
+    override componentDidMount(): void
+    {
+        this.cache.get().then((res) =>
+        {
+            this.setState({ products: res.rows });
+        }).catch(() => { });
+    }
+
+    override render()
+    {
+        let content = null;
+        if (this.state.products == null)
+            content = <NSLoading />;
+        else
+        {
+            let products = SearchOperation.filter(this.state.products, p => p.name, this.state.search);
+            let getName = (name: string) =>
+            {
+                return name.replace("Namirasoft ", "").trim();
+            };
+            let content_products = (
+                <div className={Styles.nsa_product_list_container}>
+                    {
+                        products.map((product) => (
+                            <div key={product.id} className={Styles.nsa_product_list}>
+                                <a href={product.link_console || ""} target='_blank' rel="noreferrer" >
+                                    <figure className={Styles.nsa_product_logo} key={product.id}>
+                                        <img src={`${product.logo}`} alt={product.name} width={64} height={64} />
+                                        <figcaption>{`${getName(product.name)}`}</figcaption>
+                                    </figure>
+                                </a>
+                            </div>
+                        ))
+                    }
+                </div>
+            );
+            content = (
+                <>
+                    <NSBoxSearch
+                        title=""
+                        required={false}
+                        style={{ width: "302px" }}
+                        placeholder='Search your Product'
+                        onChanged={(e) =>
+                        {
+                            this.setState({ search: e.getValue() ?? "" });
+                        }}
+                    />
+                    {content_products}
+                </>
+            );
+        }
+        return (
+            <NSDialog {...this.props}>
+                {content}
+            </NSDialog>
+        );
+    }
 }

package/src/components/NSAReorderDialog.module.css

@@ -1,50 +1,50 @@
-.column_item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 12px;
-    border-radius: 6px;
-    border: 2px solid transparent;
-    background-color: rgba(20, 27, 92, 0.04);
-    cursor: grab;
-    user-select: none;
-    box-sizing: border-box;
-    transition: background-color 0.1s, border-color 0.1s;
-}
-
-.column_item:hover {
-    background-color: rgba(20, 27, 92, 0.08);
-}
-
-.column_item_dragging {
-    opacity: 0.35;
-}
-
-.column_item_drag_over {
-    border-color: rgba(20, 27, 92, 0.45);
-    border-style: dashed;
-    background-color: rgba(20, 27, 92, 0.1);
-}
-
-.drag_handle {
-    color: #bbb;
-    font-size: 20px;
-    line-height: 1;
-    cursor: grab;
-    flex-shrink: 0;
-}
-
-.checkbox {
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    margin: 0;
-    flex-shrink: 0;
-    accent-color: rgba(20, 27, 92, 1);
-}
-
-.column_label {
-    font-size: 14px;
-    flex: 1;
+.column_item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    border: 2px solid transparent;
+    background-color: rgba(20, 27, 92, 0.04);
+    cursor: grab;
+    user-select: none;
+    box-sizing: border-box;
+    transition: background-color 0.1s, border-color 0.1s;
+}
+
+.column_item:hover {
+    background-color: rgba(20, 27, 92, 0.08);
+}
+
+.column_item_dragging {
+    opacity: 0.35;
+}
+
+.column_item_drag_over {
+    border-color: rgba(20, 27, 92, 0.45);
+    border-style: dashed;
+    background-color: rgba(20, 27, 92, 0.1);
+}
+
+.drag_handle {
+    color: #bbb;
+    font-size: 20px;
+    line-height: 1;
+    cursor: grab;
+    flex-shrink: 0;
+}
+
+.checkbox {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+    accent-color: rgba(20, 27, 92, 1);
+}
+
+.column_label {
+    font-size: 14px;
+    flex: 1;
 }

package/src/components/NSAReorderDialog.tsx

@@ -1,150 +1,150 @@
-import { NSBox, NSButtonBlue, NSColumn, NSDialog, NSTitle, TableColumnInfo } from "namirasoft-site-react";
-import { Component, DragEvent } from "react";
-import Styles from "./NSAReorderDialog.module.css";
-
-interface ColumnItem
-{
-    key: string;
-    text: string;
-    checked: boolean;
-}
-
-interface NSAReorderDialogProps
-{
-    visibleColumnKeys: string[];
-    getColumns: () => TableColumnInfo[];
-    onCancel: () => void;
-    onApply: (orderedKeys: string[]) => void;
-}
-
-interface NSAReorderDialogState
-{
-    columns: ColumnItem[];
-    dragFromIndex: number | null;
-    dragOverIndex: number | null;
-}
-
-export class NSAReorderDialog extends Component<NSAReorderDialogProps, NSAReorderDialogState>
-{
-    constructor(props: NSAReorderDialogProps)
-    {
-        super(props);
-        this.state = {
-            columns: this.buildColumnItems(props),
-            dragFromIndex: null,
-            dragOverIndex: null
-        };
-    }
-
-    private buildColumnItems(props: NSAReorderDialogProps): ColumnItem[]
-    {
-        const allColumns = props.getColumns();
-        const visibleKeys = props.visibleColumnKeys;
-
-        if (visibleKeys.length === 0)
-            return allColumns.map(c => ({ key: c.table.name + "." + c.name, text: c.text, checked: true }));
-
-        const visibleItems: ColumnItem[] = visibleKeys
-            .map(k => allColumns.find(c => c.table.name + "." + c.name === k))
-            .filter(Boolean)
-            .map(c => ({ key: c!.table.name + "." + c!.name, text: c!.text, checked: true }));
-
-        const hiddenItems: ColumnItem[] = allColumns
-            .filter(c => !visibleKeys.includes(c.table.name + "." + c.name))
-            .map(c => ({ key: c.table.name + "." + c.name, text: c.text, checked: false }));
-
-        return [...visibleItems, ...hiddenItems];
-    }
-
-    private onDragStart = (index: number) => this.setState({ dragFromIndex: index });
-
-    private onDragOver = (e: DragEvent, index: number) =>
-    {
-        e.preventDefault();
-        if (this.state.dragOverIndex !== index)
-            this.setState({ dragOverIndex: index });
-    };
-
-    private onDrop = (e: DragEvent, dropIndex: number) =>
-    {
-        e.preventDefault();
-        const { dragFromIndex, columns } = this.state;
-        if (dragFromIndex === null || dragFromIndex === dropIndex)
-        {
-            this.setState({ dragFromIndex: null, dragOverIndex: null });
-            return;
-        }
-        const next = [...columns];
-        const [moved] = next.splice(dragFromIndex, 1);
-        next.splice(dropIndex, 0, moved);
-        this.setState({ columns: next, dragFromIndex: null, dragOverIndex: null });
-    };
-
-    private onDragEnd = () => this.setState({ dragFromIndex: null, dragOverIndex: null });
-
-    private toggleChecked = (key: string) =>
-        this.setState(prev => ({
-            columns: prev.columns.map(c => c.key === key ? { ...c, checked: !c.checked } : c)
-        }));
-
-    private handleApply = () =>
-    {
-        const orderedKeys = this.state.columns.filter(c => c.checked).map(c => c.key);
-        this.props.onApply(orderedKeys);
-    };
-
-    override render()
-    {
-        const { onCancel } = this.props;
-        const { columns, dragFromIndex, dragOverIndex } = this.state;
-
-        return (
-            <NSDialog
-                center_dialog
-                closeButton={{ show: true }}
-                onClose={onCancel}
-                style={{ minWidth: NSBox.width.double }}
-            >
-                <NSColumn classList={["align-items-center"]}>
-                    <NSTitle title="Columns" style={{ marginBottom: 0, fontSize: 24 }} />
-                    <NSColumn classList={["gap-1"]}>
-                        {
-                            columns.map((col, index) =>
-                            {
-                                const isDragging = dragFromIndex === index;
-                                const isDragOver = dragOverIndex === index && !isDragging;
-                                let cls = Styles.column_item;
-                                if (isDragging) cls += " " + Styles.column_item_dragging;
-                                if (isDragOver) cls += " " + Styles.column_item_drag_over;
-                                return (
-                                    <div
-                                        key={col.key}
-                                        draggable
-                                        onDragStart={() => this.onDragStart(index)}
-                                        onDragOver={e => this.onDragOver(e, index)}
-                                        onDrop={e => this.onDrop(e, index)}
-                                        onDragEnd={this.onDragEnd}
-                                        className={cls}
-                                    >
-                                        <span className={Styles.drag_handle}>⠿</span>
-                                        <input
-                                            type="checkbox"
-                                            checked={col.checked}
-                                            onChange={() => this.toggleChecked(col.key)}
-                                            className={Styles.checkbox}
-                                        />
-                                        <span className={Styles.column_label}>{col.text}</span>
-                                    </div>
-                                );
-                            })
-                        }
-                    </NSColumn>
-                    <NSButtonBlue
-                        title="Apply"
-                        onClick={{ action: this.handleApply, showLoading: false }}
-                    />
-                </NSColumn>
-            </NSDialog>
-        );
-    }
+import { NSBox, NSButtonBlue, NSColumn, NSDialog, NSTitle, TableColumnInfo } from "namirasoft-site-react";
+import { Component, DragEvent } from "react";
+import Styles from "./NSAReorderDialog.module.css";
+
+interface ColumnItem
+{
+    key: string;
+    text: string;
+    checked: boolean;
+}
+
+interface NSAReorderDialogProps
+{
+    visibleColumnKeys: string[];
+    getColumns: () => TableColumnInfo[];
+    onCancel: () => void;
+    onApply: (orderedKeys: string[]) => void;
+}
+
+interface NSAReorderDialogState
+{
+    columns: ColumnItem[];
+    dragFromIndex: number | null;
+    dragOverIndex: number | null;
+}
+
+export class NSAReorderDialog extends Component<NSAReorderDialogProps, NSAReorderDialogState>
+{
+    constructor(props: NSAReorderDialogProps)
+    {
+        super(props);
+        this.state = {
+            columns: this.buildColumnItems(props),
+            dragFromIndex: null,
+            dragOverIndex: null
+        };
+    }
+
+    private buildColumnItems(props: NSAReorderDialogProps): ColumnItem[]
+    {
+        const allColumns = props.getColumns();
+        const visibleKeys = props.visibleColumnKeys;
+
+        if (visibleKeys.length === 0)
+            return allColumns.map(c => ({ key: c.table.name + "." + c.name, text: c.text, checked: true }));
+
+        const visibleItems: ColumnItem[] = visibleKeys
+            .map(k => allColumns.find(c => c.table.name + "." + c.name === k))
+            .filter(Boolean)
+            .map(c => ({ key: c!.table.name + "." + c!.name, text: c!.text, checked: true }));
+
+        const hiddenItems: ColumnItem[] = allColumns
+            .filter(c => !visibleKeys.includes(c.table.name + "." + c.name))
+            .map(c => ({ key: c.table.name + "." + c.name, text: c.text, checked: false }));
+
+        return [...visibleItems, ...hiddenItems];
+    }
+
+    private onDragStart = (index: number) => this.setState({ dragFromIndex: index });
+
+    private onDragOver = (e: DragEvent, index: number) =>
+    {
+        e.preventDefault();
+        if (this.state.dragOverIndex !== index)
+            this.setState({ dragOverIndex: index });
+    };
+
+    private onDrop = (e: DragEvent, dropIndex: number) =>
+    {
+        e.preventDefault();
+        const { dragFromIndex, columns } = this.state;
+        if (dragFromIndex === null || dragFromIndex === dropIndex)
+        {
+            this.setState({ dragFromIndex: null, dragOverIndex: null });
+            return;
+        }
+        const next = [...columns];
+        const [moved] = next.splice(dragFromIndex, 1);
+        next.splice(dropIndex, 0, moved);
+        this.setState({ columns: next, dragFromIndex: null, dragOverIndex: null });
+    };
+
+    private onDragEnd = () => this.setState({ dragFromIndex: null, dragOverIndex: null });
+
+    private toggleChecked = (key: string) =>
+        this.setState(prev => ({
+            columns: prev.columns.map(c => c.key === key ? { ...c, checked: !c.checked } : c)
+        }));
+
+    private handleApply = () =>
+    {
+        const orderedKeys = this.state.columns.filter(c => c.checked).map(c => c.key);
+        this.props.onApply(orderedKeys);
+    };
+
+    override render()
+    {
+        const { onCancel } = this.props;
+        const { columns, dragFromIndex, dragOverIndex } = this.state;
+
+        return (
+            <NSDialog
+                center_dialog
+                closeButton={{ show: true }}
+                onClose={onCancel}
+                style={{ minWidth: NSBox.width.double }}
+            >
+                <NSColumn classList={["align-items-center"]}>
+                    <NSTitle title="Columns" style={{ marginBottom: 0, fontSize: 24 }} />
+                    <NSColumn classList={["gap-1"]}>
+                        {
+                            columns.map((col, index) =>
+                            {
+                                const isDragging = dragFromIndex === index;
+                                const isDragOver = dragOverIndex === index && !isDragging;
+                                let cls = Styles.column_item;
+                                if (isDragging) cls += " " + Styles.column_item_dragging;
+                                if (isDragOver) cls += " " + Styles.column_item_drag_over;
+                                return (
+                                    <div
+                                        key={col.key}
+                                        draggable
+                                        onDragStart={() => this.onDragStart(index)}
+                                        onDragOver={e => this.onDragOver(e, index)}
+                                        onDrop={e => this.onDrop(e, index)}
+                                        onDragEnd={this.onDragEnd}
+                                        className={cls}
+                                    >
+                                        <span className={Styles.drag_handle}>⠿</span>
+                                        <input
+                                            type="checkbox"
+                                            checked={col.checked}
+                                            onChange={() => this.toggleChecked(col.key)}
+                                            className={Styles.checkbox}
+                                        />
+                                        <span className={Styles.column_label}>{col.text}</span>
+                                    </div>
+                                );
+                            })
+                        }
+                    </NSColumn>
+                    <NSButtonBlue
+                        title="Apply"
+                        onClick={{ action: this.handleApply, showLoading: false }}
+                    />
+                </NSColumn>
+            </NSDialog>
+        );
+    }
 }