namirasoft-site-react 1.5.10 → 1.5.11

package/src/components/NSReorderDialog.module.css

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

package/src/components/NSReorderDialog.tsx

@@ -0,0 +1,155 @@
+import { Component, DragEvent } from "react";
+import { NSBox } from "./NSBox";
+import { NSButtonBlue } from "./NSButtonBlue";
+import { NSColumn } from "./NSColumn";
+import { NSDialog } from "./NSDialog";
+import { NSTitle } from "./NSTitle";
+import { TableColumnInfo } from "./NSTable";
+import Styles from "./NSReorderDialog.module.css";
+
+interface ColumnItem
+{
+    key: string;
+    text: string;
+    checked: boolean;
+}
+
+interface NSReorderDialogProps
+{
+    visibleColumnKeys: string[];
+    getColumns: () => TableColumnInfo[];
+    onCancel: () => void;
+    onApply: (orderedKeys: string[]) => void;
+}
+
+interface NSReorderDialogState
+{
+    columns: ColumnItem[];
+    dragFromIndex: number | null;
+    dragOverIndex: number | null;
+}
+
+export class NSReorderDialog extends Component<NSReorderDialogProps, NSReorderDialogState>
+{
+    constructor(props: NSReorderDialogProps)
+    {
+        super(props);
+        this.state = {
+            columns: this.buildColumnItems(props),
+            dragFromIndex: null,
+            dragOverIndex: null
+        };
+    }
+
+    private buildColumnItems(props: NSReorderDialogProps): 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/NSSortDialog.tsx

@@ -0,0 +1,125 @@
+import { BaseMetaColumn, BaseMetaTable, SortItem } from "namirasoft-core";
+import { Component, createRef } from "react";
+import { NSBoxBaseCombo } from "./NSBoxBaseCombo";
+import { NSBoxBoolean } from "./NSBoxBoolean";
+import { NSBoxCombo } from "./NSBoxCombo";
+import { NSButtonBlue } from "./NSButtonBlue";
+import { NSColumn } from "./NSColumn";
+import { NSDialog } from "./NSDialog";
+import { NSTitle } from "./NSTitle";
+import { TableColumnInfo } from "./NSTable";
+
+interface NSSortDialogProps
+{
+    sorts: SortItem[];
+    getColumns: () => TableColumnInfo[];
+    onCancel: () => void;
+    onApply: (sorts: SortItem[] | null) => void;
+}
+
+interface NSSortDialogState
+{
+    sortEnabled: boolean;
+}
+
+export class NSSortDialog extends Component<NSSortDialogProps, NSSortDialogState>
+{
+    private sortBoolRef = createRef<NSBoxBoolean>();
+    private sortColumnRef = createRef<NSBoxBaseCombo<TableColumnInfo>>();
+    private sortDirectionRef = createRef<NSBoxCombo>();
+
+    constructor(props: NSSortDialogProps)
+    {
+        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={box => this.setState({ sortEnabled: box.getValueBool(false) })}
+                    />
+                    <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] ? String(sorts[0].ascending) : "true"}
+                        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>
+        );
+    }
+}

package/src/components/NSTable.module.css

@@ -142,6 +142,7 @@
     align-items: center;
     width: 100%;
     gap: 16px;
+    margin-left: auto;
 }
 
 .ns_table_button {