namirasoft-account-react 1.5.38 → 1.5.39

package/src/components/quickfilter/NSAQuickFilterDialog.tsx

@@ -1,298 +1,298 @@
-import { FilterItemOperator } from "namirasoft-core";
-import { VariableType } from "namirasoft-schema";
-import { NSBoxBaseCombo, NSBoxCombo, NSBoxString, NSButton, NSButtonBlue, NSColumn, NSDialog, NSNoData, NSTitle, TableColumnInfo } from "namirasoft-site-react";
-import { Component, Fragment } from "react";
-import { NSAFilterOperators } from "../../NSAFilterOperators";
-import Styles from "./NSAQuickFilterDialog.module.css";
-
-export interface QuickFilterConfig
-{
-    id: string;
-    title?: string;
-    column: {
-        table: { name: string; text: string };
-        name: string;
-        text: string;
-        type: string;
-        columnType: VariableType;
-    };
-    operatorName?: string;
-}
-
-interface NSAQuickFilterDialogProps
-{
-    configs: QuickFilterConfig[];
-    defaults?: QuickFilterConfig[];
-    getColumns: () => TableColumnInfo[];
-    typeConverter: (type: string) => VariableType;
-    onSave: (configs: QuickFilterConfig[]) => void;
-    onConfirm: (configs: QuickFilterConfig[]) => void;
-    onClose: () => void;
-}
-
-interface NSAQuickFilterDialogState
-{
-    configs: QuickFilterConfig[];
-    formMode: "add" | "edit" | null;
-    editingId: string | null;
-    formColumn: TableColumnInfo | null;
-    formOperatorName: string | null;
-    formTitle: string | null;
-    formKey: number;
-}
-
-export class NSAQuickFilterDialog extends Component<NSAQuickFilterDialogProps, NSAQuickFilterDialogState>
-{
-    constructor(props: NSAQuickFilterDialogProps)
-    {
-        super(props);
-        this.state = {
-            configs: [...props.configs],
-            formMode: null,
-            editingId: null,
-            formColumn: null,
-            formOperatorName: null,
-            formTitle: null,
-            formKey: 0,
-        };
-    }
-
-    private openAdd = () =>
-    {
-        this.setState(prev => ({
-            formMode: "add",
-            editingId: null,
-            formColumn: null,
-            formOperatorName: null,
-            formTitle: null,
-            formKey: prev.formKey + 1,
-        }));
-    };
-
-    private openEdit = (config: QuickFilterConfig) =>
-    {
-        const col = this.props.getColumns().find(
-            c => c.table.name === config.column.table.name && c.name === config.column.name
-        ) ?? null;
-        this.setState(prev => ({
-            formMode: "edit",
-            editingId: config.id,
-            formColumn: col,
-            formOperatorName: config.operatorName ?? null,
-            formTitle: config.title ?? null,
-            formKey: prev.formKey + 1,
-        }));
-    };
-
-    private deleteConfig = (id: string) =>
-    {
-        this.setState(prev => ({ configs: prev.configs.filter(c => c.id !== id) }));
-    };
-
-    private hasChanges(): boolean
-    {
-        return JSON.stringify(this.state.configs) !== JSON.stringify(this.props.configs);
-    }
-
-    // compares on column/operator (not id) so a manually re-added default still counts
-    private isAtDefaults(): boolean
-    {
-        const key = (c: QuickFilterConfig) => `${c.column.table.name}|${c.column.name}|${c.operatorName ?? ""}|${c.title ?? ""}`;
-        const defaults = this.props.defaults ?? [];
-        return this.state.configs.length === defaults.length
-            && this.state.configs.every((c, i) => key(c) === key(defaults[i]));
-    }
-
-    private resetToDefaults = () =>
-    {
-        this.setState({ configs: [...(this.props.defaults ?? [])] });
-    };
-
-    private saveForm = () =>
-    {
-        const { formColumn, formOperatorName, formTitle, formMode, editingId, configs } = this.state;
-        if (!formColumn) return;
-
-        const columnType = this.props.typeConverter(formColumn.type);
-        const isBoolean = columnType === VariableType.Boolean;
-
-        const newConfig: QuickFilterConfig = {
-            id: formMode === "edit" && editingId ? editingId : crypto.randomUUID(),
-            title: formTitle?.trim() || undefined,
-            column: {
-                table: { name: formColumn.table.name, text: formColumn.table.text },
-                name: formColumn.name,
-                text: formColumn.text,
-                type: formColumn.type,
-                columnType,
-            },
-            operatorName: isBoolean ? undefined : (formOperatorName ?? undefined),
-        };
-
-        const updatedConfigs = formMode === "edit" && editingId
-            ? configs.map(c => c.id === editingId ? newConfig : c)
-            : [...configs, newConfig];
-
-        this.setState({ configs: updatedConfigs, formMode: null }, () =>
-        {
-            this.props.onSave(updatedConfigs);
-        });
-    };
-
-    override render()
-    {
-        const { onClose, onConfirm, getColumns, typeConverter } = this.props;
-        const { configs, formMode, formColumn, formOperatorName, formKey } = this.state;
-
-        const columns = getColumns();
-        const columnType = formColumn ? typeConverter(formColumn.type) : null;
-        const isBoolean = columnType === VariableType.Boolean;
-        const operators = columnType && !isBoolean ? NSAFilterOperators.getQuickFilterOperators(columnType) : [];
-
-        return (
-            <NSDialog
-                center_dialog
-                closeButton={{ show: true }}
-                onClose={onClose}
-            >
-                <NSColumn classList={["align-items-center"]}>
-                    <NSTitle
-                        title="Quick Filters"
-                        style={{ marginBottom: 0, fontSize: 24 }}
-                    />
-
-                    {
-                        configs.length === 0 && !formMode &&
-                        <NSNoData lable="No quick filters defined" style={{ marginBottom: 16, fontSize: 20 }} />
-                    }
-
-                    {
-                        configs.length > 0 && !formMode && (
-                            <NSColumn classList={["gap-2"]}>
-                                {
-                                    configs.map(cfg =>
-                                    {
-                                        const opLabel = cfg.operatorName
-                                            ? FilterItemOperator.getByName(cfg.operatorName).name
-                                            : "—";
-                                        return (
-                                            <div key={cfg.id} className={Styles.qf_item}>
-                                                <div className={Styles.qf_item_info}>
-                                                    <span className={Styles.qf_item_label}>{cfg.title ?? cfg.column.text}</span>
-                                                    <span className={Styles.qf_item_op}>{opLabel}</span>
-                                                </div>
-                                                <div className={Styles.qf_item_actions}>
-                                                    <NSButton
-                                                        title=""
-                                                        icon={{ src: "https://static.namirasoft.com/image/concept/edit/blue.svg", alt: "edit" }}
-                                                        classList={[Styles.qf_item_btn]}
-                                                        onClick={{ action: () => this.openEdit(cfg), showLoading: false }}
-                                                    />
-                                                    <NSButton
-                                                        title=""
-                                                        icon={{ src: "https://static.namirasoft.com/image/concept/delete/blue.svg", alt: "delete" }}
-                                                        classList={[Styles.qf_item_btn]}
-                                                        onClick={{ action: () => this.deleteConfig(cfg.id), showLoading: false }}
-                                                    />
-                                                </div>
-                                            </div>
-                                        );
-                                    })
-                                }
-                            </NSColumn>
-                        )
-                    }
-
-                    {
-                        formMode &&
-                        <Fragment key={formKey}>
-                            <NSBoxString
-                                title="Title"
-                                required={false}
-                                defaultValue={this.state.formTitle ?? undefined}
-                                onChanged={e => this.setState({ formTitle: e.getValue() || null })}
-                            />
-                            <NSBoxBaseCombo<TableColumnInfo>
-                                title="Column"
-                                required
-                                defaultValue={formColumn?.name}
-                                getItems={async () => ({ count: columns.length, rows: columns })}
-                                getTitle={c => c.text}
-                                getValue={c => c.name}
-                                getSort={() => null}
-                                multiple={false}
-                                onChanged={e =>
-                                {
-                                    const col = e.getDataOne();
-                                    this.setState({ formColumn: col ?? null, formOperatorName: null });
-                                }}
-                                menu={{
-                                    builtin: {
-                                        copy: { enabled: false, getValue: () => "" }
-                                    },
-                                    items: []
-                                }}
-                            />
-                            <NSBoxCombo
-                                key={formColumn?.name}
-                                title="Operator"
-                                required
-                                disabled={!formColumn || isBoolean}
-                                defaultValue={formOperatorName ?? undefined}
-                                getOptions={() => operators.map(op => ({ value: NSAFilterOperators.getOperatorKey(op), title: `${op.sign} (${op.name})` }))}
-                                multiple={false}
-                                searchable={false}
-                                onChanged={e => this.setState({ formOperatorName: e.getValueOne(false) ?? null })}
-                                menu={{
-                                    builtin: {
-                                        copy: { enabled: false, getValue: () => "" }
-                                    },
-                                    items: []
-                                }}
-                            />
-                            <NSButtonBlue
-                                title="Save"
-                                onClick={{ action: this.saveForm, showLoading: false }}
-                            />
-                            <NSButton
-                                title=""
-                                icon={{ src: "https://static.namirasoft.com/image/concept/arrow/left/blue.svg", alt: "back" }}
-                                classList={[Styles.qf_back_btn]}
-                                onClick={{ action: () => this.setState({ formMode: null }), showLoading: false }}
-                                style={{ width: 40, height: 40 }}
-                            />
-                        </Fragment>
-                    }
-
-                    {
-                        !formMode &&
-                        <>
-                            {
-                                (this.props.defaults?.length ?? 0) > 0 && !this.isAtDefaults() &&
-                                <NSButton
-                                    title=""
-                                    icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg", alt: "reset" }}
-                                    classList={[Styles.qf_back_btn]}
-                                    onClick={{ action: this.resetToDefaults, showLoading: false }}
-                                    style={{ width: 40, height: 40 }}
-                                />
-                            }
-                            <NSButton
-                                title="+ Add Filter"
-                                onClick={{ action: this.openAdd, showLoading: false }}
-                                style={{ border: "1px solid #000" }}
-                            />
-                            {
-                                this.hasChanges() &&
-                                <NSButtonBlue
-                                    title="Save Changes"
-                                    onClick={{ action: () => onConfirm(this.state.configs), showLoading: false }}
-                                />
-                            }
-                        </>
-                    }
-                </NSColumn>
-            </NSDialog>
-        );
-    }
+import { FilterItemOperator } from "namirasoft-core";
+import { VariableType } from "namirasoft-schema";
+import { NSBoxBaseCombo, NSBoxCombo, NSBoxString, NSButton, NSButtonBlue, NSColumn, NSDialog, NSNoData, NSTitle, TableColumnInfo } from "namirasoft-site-react";
+import { Component, Fragment } from "react";
+import { NSAFilterOperators } from "../../NSAFilterOperators";
+import Styles from "./NSAQuickFilterDialog.module.css";
+
+export interface QuickFilterConfig
+{
+    id: string;
+    title?: string;
+    column: {
+        table: { name: string; text: string };
+        name: string;
+        text: string;
+        type: string;
+        columnType: VariableType;
+    };
+    operatorName?: string;
+}
+
+interface NSAQuickFilterDialogProps
+{
+    configs: QuickFilterConfig[];
+    defaults?: QuickFilterConfig[];
+    getColumns: () => TableColumnInfo[];
+    typeConverter: (type: string) => VariableType;
+    onSave: (configs: QuickFilterConfig[]) => void;
+    onConfirm: (configs: QuickFilterConfig[]) => void;
+    onClose: () => void;
+}
+
+interface NSAQuickFilterDialogState
+{
+    configs: QuickFilterConfig[];
+    formMode: "add" | "edit" | null;
+    editingId: string | null;
+    formColumn: TableColumnInfo | null;
+    formOperatorName: string | null;
+    formTitle: string | null;
+    formKey: number;
+}
+
+export class NSAQuickFilterDialog extends Component<NSAQuickFilterDialogProps, NSAQuickFilterDialogState>
+{
+    constructor(props: NSAQuickFilterDialogProps)
+    {
+        super(props);
+        this.state = {
+            configs: [...props.configs],
+            formMode: null,
+            editingId: null,
+            formColumn: null,
+            formOperatorName: null,
+            formTitle: null,
+            formKey: 0,
+        };
+    }
+
+    private openAdd = () =>
+    {
+        this.setState(prev => ({
+            formMode: "add",
+            editingId: null,
+            formColumn: null,
+            formOperatorName: null,
+            formTitle: null,
+            formKey: prev.formKey + 1,
+        }));
+    };
+
+    private openEdit = (config: QuickFilterConfig) =>
+    {
+        const col = this.props.getColumns().find(
+            c => c.table.name === config.column.table.name && c.name === config.column.name
+        ) ?? null;
+        this.setState(prev => ({
+            formMode: "edit",
+            editingId: config.id,
+            formColumn: col,
+            formOperatorName: config.operatorName ?? null,
+            formTitle: config.title ?? null,
+            formKey: prev.formKey + 1,
+        }));
+    };
+
+    private deleteConfig = (id: string) =>
+    {
+        this.setState(prev => ({ configs: prev.configs.filter(c => c.id !== id) }));
+    };
+
+    private hasChanges(): boolean
+    {
+        return JSON.stringify(this.state.configs) !== JSON.stringify(this.props.configs);
+    }
+
+    // compares on column/operator (not id) so a manually re-added default still counts
+    private isAtDefaults(): boolean
+    {
+        const key = (c: QuickFilterConfig) => `${c.column.table.name}|${c.column.name}|${c.operatorName ?? ""}|${c.title ?? ""}`;
+        const defaults = this.props.defaults ?? [];
+        return this.state.configs.length === defaults.length
+            && this.state.configs.every((c, i) => key(c) === key(defaults[i]));
+    }
+
+    private resetToDefaults = () =>
+    {
+        this.setState({ configs: [...(this.props.defaults ?? [])] });
+    };
+
+    private saveForm = () =>
+    {
+        const { formColumn, formOperatorName, formTitle, formMode, editingId, configs } = this.state;
+        if (!formColumn) return;
+
+        const columnType = this.props.typeConverter(formColumn.type);
+        const isBoolean = columnType === VariableType.Boolean;
+
+        const newConfig: QuickFilterConfig = {
+            id: formMode === "edit" && editingId ? editingId : crypto.randomUUID(),
+            title: formTitle?.trim() || undefined,
+            column: {
+                table: { name: formColumn.table.name, text: formColumn.table.text },
+                name: formColumn.name,
+                text: formColumn.text,
+                type: formColumn.type,
+                columnType,
+            },
+            operatorName: isBoolean ? undefined : (formOperatorName ?? undefined),
+        };
+
+        const updatedConfigs = formMode === "edit" && editingId
+            ? configs.map(c => c.id === editingId ? newConfig : c)
+            : [...configs, newConfig];
+
+        this.setState({ configs: updatedConfigs, formMode: null }, () =>
+        {
+            this.props.onSave(updatedConfigs);
+        });
+    };
+
+    override render()
+    {
+        const { onClose, onConfirm, getColumns, typeConverter } = this.props;
+        const { configs, formMode, formColumn, formOperatorName, formKey } = this.state;
+
+        const columns = getColumns();
+        const columnType = formColumn ? typeConverter(formColumn.type) : null;
+        const isBoolean = columnType === VariableType.Boolean;
+        const operators = columnType && !isBoolean ? NSAFilterOperators.getQuickFilterOperators(columnType) : [];
+
+        return (
+            <NSDialog
+                center_dialog
+                closeButton={{ show: true }}
+                onClose={onClose}
+            >
+                <NSColumn classList={["align-items-center"]}>
+                    <NSTitle
+                        title="Quick Filters"
+                        style={{ marginBottom: 0, fontSize: 24 }}
+                    />
+
+                    {
+                        configs.length === 0 && !formMode &&
+                        <NSNoData lable="No quick filters defined" style={{ marginBottom: 16, fontSize: 20 }} />
+                    }
+
+                    {
+                        configs.length > 0 && !formMode && (
+                            <NSColumn classList={["gap-2"]}>
+                                {
+                                    configs.map(cfg =>
+                                    {
+                                        const opLabel = cfg.operatorName
+                                            ? FilterItemOperator.getByName(cfg.operatorName).name
+                                            : "—";
+                                        return (
+                                            <div key={cfg.id} className={Styles.qf_item}>
+                                                <div className={Styles.qf_item_info}>
+                                                    <span className={Styles.qf_item_label}>{cfg.title ?? cfg.column.text}</span>
+                                                    <span className={Styles.qf_item_op}>{opLabel}</span>
+                                                </div>
+                                                <div className={Styles.qf_item_actions}>
+                                                    <NSButton
+                                                        title=""
+                                                        icon={{ src: "https://static.namirasoft.com/image/concept/edit/blue.svg", alt: "edit" }}
+                                                        classList={[Styles.qf_item_btn]}
+                                                        onClick={{ action: () => this.openEdit(cfg), showLoading: false }}
+                                                    />
+                                                    <NSButton
+                                                        title=""
+                                                        icon={{ src: "https://static.namirasoft.com/image/concept/delete/blue.svg", alt: "delete" }}
+                                                        classList={[Styles.qf_item_btn]}
+                                                        onClick={{ action: () => this.deleteConfig(cfg.id), showLoading: false }}
+                                                    />
+                                                </div>
+                                            </div>
+                                        );
+                                    })
+                                }
+                            </NSColumn>
+                        )
+                    }
+
+                    {
+                        formMode &&
+                        <Fragment key={formKey}>
+                            <NSBoxString
+                                title="Title"
+                                required={false}
+                                defaultValue={this.state.formTitle ?? undefined}
+                                onChanged={e => this.setState({ formTitle: e.getValue() || null })}
+                            />
+                            <NSBoxBaseCombo<TableColumnInfo>
+                                title="Column"
+                                required
+                                defaultValue={formColumn?.name}
+                                getItems={async () => ({ count: columns.length, rows: columns })}
+                                getTitle={c => c.text}
+                                getValue={c => c.name}
+                                getSort={() => null}
+                                multiple={false}
+                                onChanged={e =>
+                                {
+                                    const col = e.getDataOne();
+                                    this.setState({ formColumn: col ?? null, formOperatorName: null });
+                                }}
+                                menu={{
+                                    builtin: {
+                                        copy: { enabled: false, getValue: () => "" }
+                                    },
+                                    items: []
+                                }}
+                            />
+                            <NSBoxCombo
+                                key={formColumn?.name}
+                                title="Operator"
+                                required
+                                disabled={!formColumn || isBoolean}
+                                defaultValue={formOperatorName ?? undefined}
+                                getOptions={() => operators.map(op => ({ value: NSAFilterOperators.getOperatorKey(op), title: `${op.sign} (${op.name})` }))}
+                                multiple={false}
+                                searchable={false}
+                                onChanged={e => this.setState({ formOperatorName: e.getValueOne(false) ?? null })}
+                                menu={{
+                                    builtin: {
+                                        copy: { enabled: false, getValue: () => "" }
+                                    },
+                                    items: []
+                                }}
+                            />
+                            <NSButtonBlue
+                                title="Save"
+                                onClick={{ action: this.saveForm, showLoading: false }}
+                            />
+                            <NSButton
+                                title=""
+                                icon={{ src: "https://static.namirasoft.com/image/concept/arrow/left/blue.svg", alt: "back" }}
+                                classList={[Styles.qf_back_btn]}
+                                onClick={{ action: () => this.setState({ formMode: null }), showLoading: false }}
+                                style={{ width: 40, height: 40 }}
+                            />
+                        </Fragment>
+                    }
+
+                    {
+                        !formMode &&
+                        <>
+                            {
+                                (this.props.defaults?.length ?? 0) > 0 && !this.isAtDefaults() &&
+                                <NSButton
+                                    title=""
+                                    icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg", alt: "reset" }}
+                                    classList={[Styles.qf_back_btn]}
+                                    onClick={{ action: this.resetToDefaults, showLoading: false }}
+                                    style={{ width: 40, height: 40 }}
+                                />
+                            }
+                            <NSButton
+                                title="+ Add Filter"
+                                onClick={{ action: this.openAdd, showLoading: false }}
+                                style={{ border: "1px solid #000" }}
+                            />
+                            {
+                                this.hasChanges() &&
+                                <NSButtonBlue
+                                    title="Save Changes"
+                                    onClick={{ action: () => onConfirm(this.state.configs), showLoading: false }}
+                                />
+                            }
+                        </>
+                    }
+                </NSColumn>
+            </NSDialog>
+        );
+    }
 }

package/src/css.d.ts

@@ -1,14 +1,14 @@
-let css_d = "";
-
-declare module "*.module.css" {
-    const classes: { readonly [key: string]: string };
-    export default classes;
-}
-
-declare module "*.module.scss" {
-    const classes: { readonly [key: string]: string };
-    export default classes;
-}
-
-declare module "*.css";
+let css_d = "";
+
+declare module "*.module.css" {
+    const classes: { readonly [key: string]: string };
+    export default classes;
+}
+
+declare module "*.module.scss" {
+    const classes: { readonly [key: string]: string };
+    export default classes;
+}
+
+declare module "*.css";
 declare module "*.scss";