namirasoft-account-react 1.4.418 → 1.4.421

package/src/components/NSAReorderDialog.tsx

@@ -0,0 +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>
+        );
+    }
+}

package/src/components/NSASortDialog.tsx

@@ -0,0 +1,118 @@
+import { BaseMetaColumn, BaseMetaTable, SortItem } from "namirasoft-core";
+import { NSBoxBaseCombo, NSBoxBoolean, NSBoxCombo, NSButtonBlue, NSColumn, NSDialog, NSTitle, TableColumnInfo } from "namirasoft-site-react";
+import { Component, createRef } from "react";
+
+interface NSASortDialogProps
+{
+    sorts: SortItem[];
+    getColumns: () => TableColumnInfo[];
+    onCancel: () => void;
+    onApply: (sorts: SortItem[] | null) => void;
+}
+
+interface NSASortDialogState
+{
+    sortEnabled: boolean;
+}
+
+export class NSASortDialog extends Component<NSASortDialogProps, NSASortDialogState>
+{
+    private sortBoolRef = createRef<NSBoxBoolean>();
+    private sortColumnRef = createRef<NSBoxBaseCombo<TableColumnInfo>>();
+    private sortDirectionRef = createRef<NSBoxCombo>();
+
+    constructor(props: NSASortDialogProps)
+    {
+        super(props);
+        this.state = { sortEnabled: props.sorts.length > 0 };
+    }
+
+    private handleApply = () =>
+    {
+        if (!this.sortBoolRef.current?.getValueBool())
+        {
+            this.props.onApply(null);
+            return;
+        }
+        const column = this.sortColumnRef.current?.getDataOne();
+        const direction = this.sortDirectionRef.current?.getValueOne();
+        if (column)
+        {
+            const t = new BaseMetaTable(null, column.table.name, column.table.text);
+            const c = new BaseMetaColumn(t, column.name, column.text, "", true);
+            const sort = new SortItem(t, c, direction === "true");
+            this.props.onApply([sort]);
+        }
+        else
+            this.props.onApply(null);
+    };
+
+    override render()
+    {
+        const { sorts, getColumns, onCancel } = this.props;
+
+        return (
+            <NSDialog
+                center_dialog
+                closeButton={{ show: true }}
+                onClose={onCancel}
+            >
+                <NSTitle title="Sort" style={{ marginBottom: 0, fontSize: 24 }} />
+                <NSColumn classList={["align-items-center mt-3"]}>
+                    <NSBoxBoolean
+                        ref={this.sortBoolRef}
+                        required
+                        title="Sort"
+                        hideHeader={true}
+                        checked={sorts.length > 0}
+                        onChanged={() => this.setState(prev => ({ sortEnabled: !prev.sortEnabled }))}
+                    />
+                    <NSBoxBaseCombo<TableColumnInfo>
+                        ref={this.sortColumnRef}
+                        title="Column"
+                        required
+                        defaultValue={sorts[0]?.column.name}
+                        getItems={async () =>
+                        {
+                            const cs = getColumns();
+                            return { count: cs.length, rows: cs }
+                        }}
+                        getTitle={c => c.text}
+                        getValue={c => c.name}
+                        getSort={() => null}
+                        multiple={false}
+                        disabled={this.state.sortEnabled}
+                        menu={{
+                            builtin: {
+                                copy: { enabled: false, getValue: () => "" }
+                            },
+                            items: []
+                        }}
+                    />
+                    <NSBoxCombo
+                        ref={this.sortDirectionRef}
+                        title="Direction"
+                        required
+                        defaultValue={sorts[0]?.ascending + ""}
+                        getOptions={() => [
+                            { value: "true", title: "Ascending" },
+                            { value: "false", title: "Descending" }
+                        ]}
+                        multiple={false}
+                        disabled={this.state.sortEnabled}
+                        menu={{
+                            builtin: {
+                                copy: { enabled: false, getValue: () => "" }
+                            },
+                            items: []
+                        }}
+                    />
+                    <NSButtonBlue
+                        title="Apply"
+                        onClick={{ action: this.handleApply, showLoading: false }}
+                    />
+                </NSColumn>
+            </NSDialog>
+        );
+    }
+}