namirasoft-site-react 1.5.10 → 1.5.12

package/src/components/NSLayout.tsx

@@ -3,7 +3,7 @@ import { Fragment, ReactNode } from 'react';
 import { IBackgroundProps } from '../props/IBackgroundProps';
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import { IHeaderRightProps } from '../props/IHeaderRightProps';
-import { NSRouterMakerProps } from '../routing/NSRouterMakerProps';
+import { NSRouterMakerResult } from '../routing/NSRouterMaker';
 import { NSBarAction, NSBarActionProps, isValidAction } from './NSBarAction';
 import { NSBarAlert, NSBarAlertProps } from './NSBarAlert';
 import { NSBarNotification, NSBarNotificationProps } from './NSBarNotification';
@@ -13,7 +13,7 @@ import { NSHeader } from './NSHeader';
 import Styles from './NSLayout.module.css';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 
-export interface NSLayoutProps extends IBaseComponentProps, NSRouterMakerProps
+export interface NSLayoutProps extends IBaseComponentProps, NSRouterMakerResult
 {
     scope: string;
     logo: string;

package/src/components/NSListMenu.tsx

@@ -3,6 +3,7 @@ import { EnvService } from "namirasoft-core";
 import { useEffect, useState } from "react";
 import { NSCard } from "./NSCard";
 import { NSSection } from "./NSSection";
+import { NSTitle } from "./NSTitle";
 
 export interface NSListMenuProps
 {
@@ -10,6 +11,7 @@ export interface NSListMenuProps
     name: string;
     isLoggedIn?: () => boolean;
     onError?: (error: Error | string) => void;
+    filters?: FilterLinkFullRow[];
 }
 
 interface NSListMenuState
@@ -19,10 +21,12 @@ interface NSListMenuState
 
 export function NSListMenu(props: NSListMenuProps)
 {
-    const [state, setState] = useState<NSListMenuState>({ filters: [] });
+    const [state, setState] = useState<NSListMenuState>({ filters: props.filters ?? [] });
 
     useEffect(() =>
     {
+        if (props.filters)
+            return;
         let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK", true).getString();
         let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, props.onError ?? (() => { }));
         server.filter.ListFilterLinks(props.scope, props.name, null, null, null, []).then((filters) =>
@@ -79,8 +83,15 @@ export function NSListMenu(props: NSListMenuProps)
         return chain;
     };
 
-    const titleOf = (f: FilterLinkFullRow): string =>
-        chainOf(displayOf(f)).map(nameOf).join(" / ");
+    const rootOf = (f: FilterLinkFullRow): FilterLinkFullRow =>
+        chainOf(displayOf(f))[0];
+
+    const subtitleOf = (f: FilterLinkFullRow): string =>
+    {
+        let chain = chainOf(displayOf(f));
+        let rest = chain.slice(1);
+        return rest.length > 0 ? rest.map(nameOf).join(" / ") : nameOf(chain[0]);
+    };
 
     const descriptionOf = (f: FilterLinkFullRow): string =>
         f.link?.description ?? "";
@@ -136,19 +147,39 @@ export function NSListMenu(props: NSListMenuProps)
     };
 
     let items = getMenuItems();
+    
+    let groups: { root: FilterLinkFullRow; items: FilterLinkFullRow[] }[] = [];
+    for (let f of items)
+    {
+        let root = rootOf(f);
+        let last = groups[groups.length - 1];
+        if (last && last.root.id === root.id)
+            last.items.push(f);
+        else
+            groups.push({ root, items: [f] });
+    }
 
     return (
-        <NSSection style={{ gap: "16px" }}>
+        <div style={{ display: "flex", flexDirection: "column", width: "100%", gap: "32px" }}>
             {
-                items.map((filter: FilterLinkFullRow) =>
-                    <NSCard
-                        key={filter.id}
-                        link={{ href: filter.link?.url ?? "" }}
-                        title={titleOf(filter)}
-                        description={descriptionOf(filter)}
-                    />
+                groups.map((group) =>
+                    <div key={group.root.id} style={{ width: "100%" }}>
+                        <NSTitle title={nameOf(group.root)} style={{ marginBottom: 16, fontSize: 32 }} />
+                        <NSSection style={{ gap: "16px" }}>
+                            {
+                                group.items.map((filter: FilterLinkFullRow) =>
+                                    <NSCard
+                                        key={filter.id}
+                                        link={{ href: filter.link?.url ?? "" }}
+                                        title={subtitleOf(filter)}
+                                        description={descriptionOf(filter)}
+                                    />
+                                )
+                            }
+                        </NSSection>
+                    </div>
                 )
             }
-        </NSSection>
+        </div>
     );
 }

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 {