namirasoft-account-react 1.4.418 → 1.4.421

package/src/components/NSAQuickFilter/NSAFilterBoxBoolean.tsx

@@ -0,0 +1,55 @@
+import { FilterItemOperator } from "namirasoft-core";
+import { NSBoxBoolean } from "namirasoft-site-react";
+import { createRef } from "react";
+import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
+
+interface NSAFilterBoxBooleanState
+{
+    value: boolean | null;
+}
+
+export class NSAFilterBoxBoolean extends NSAFilterBoxBase<NSAFilterBoxBaseProps, NSAFilterBoxBooleanState>
+{
+    private containerRef = createRef<HTMLDivElement>();
+
+    constructor(props: NSAFilterBoxBaseProps)
+    {
+        super(props);
+        this.state = { value: this.isValueless() ? false : null };
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    private isValueless(): boolean
+    {
+        const name = this.props.config.operatorName;
+        return !!name && FilterItemOperator.getByName(name).count === 0;
+    }
+
+
+    private handleChange(value: boolean | null)
+    {
+        this.setState({ value });
+        if (this.isValueless())
+            this.props.onChanged(value === true ? this.buildFilterItem() : null);
+        else if (value !== null)
+            this.props.onChanged(this.buildFilterItem(String(Number(value))));
+        else
+            this.props.onChanged(null);
+    }
+
+    override render(): JSX.Element
+    {
+        return (
+            <div ref={this.containerRef} style={{ width: "100%" }}>
+                <NSBoxBoolean
+                    title={this.getLabel()}
+                    placeholder={this.getLabel()}
+                    required={false}
+                    hideHeader={true}
+                    triState={!this.isValueless()}
+                    onChanged={e => this.handleChange(e.getValue())}
+                />
+            </div>
+        );
+    }
+}

package/src/components/NSAQuickFilter/NSAFilterBoxDate.tsx

@@ -0,0 +1,105 @@
+import { FilterItem, FilterItemOperator, SortItem, TimeOperation } from "namirasoft-core";
+import { NSBoxDate, NSBoxDateRange, NSBoxEntity } from "namirasoft-site-react";
+import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
+import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
+
+export interface NSAFilterBoxDateProps extends NSAFilterBoxBaseProps
+{
+    getValues: (search: string) => Promise<{ value: string; title: string }[]>;
+}
+
+type ValueItem = { value: string; title: string };
+
+const ENTITY_OPERATORS = ["equals"];
+
+export class NSAFilterBoxDate extends NSAFilterBoxBase<NSAFilterBoxDateProps>
+{
+    private betweenActive = false;
+
+    private list = async (
+        filters: FilterItem[] | null,
+        _page: number | null,
+        _size: number | null,
+        _sorts: SortItem[]
+    ): Promise<{ count: number; rows: ValueItem[] }> =>
+    {
+        const searchFilter = filters?.find(f => f.values.length > 0);
+        const search = searchFilter?.values[0] ?? "";
+        const rows = await this.props.getValues(search);
+        return { count: rows.length, rows };
+    };
+
+    override render(): JSX.Element | null
+    {
+        const { config, onChanged } = this.props;
+        const op = config.operatorName
+            ? FilterItemOperator.getByName(config.operatorName)
+            : null;
+
+        if (op && op.count === 0)
+            return <NSAFilterBoxBoolean config={config} onChanged={onChanged} />;
+
+        if (config.operatorName === "between")
+            return (
+                <NSBoxDateRange
+                    title={this.getLabel()}
+                    placeholder={this.getLabel()}
+                    required={false}
+                    hideHeader={true}
+                    preset={true}
+                    onChanged={e =>
+                    {
+                        const val = e.getValue();
+                        if (val)
+                        {
+                            this.betweenActive = true;
+                            onChanged(this.buildBetweenFilterItems(
+                                TimeOperation.toDBFormat(val.from),
+                                TimeOperation.toDBFormat(val.to)
+                            ));
+                        }
+                        else if (this.betweenActive)
+                        {
+                            this.betweenActive = false;
+                            onChanged(null);
+                        }
+                    }}
+                />
+            );
+
+        if (config.operatorName && ENTITY_OPERATORS.includes(config.operatorName))
+            return (
+                <NSBoxEntity<ValueItem>
+                    title={this.getLabel()}
+                    placeholder={this.getLabel()}
+                    required={false}
+                    hideHeader={true}
+                    multiple={false}
+                    list={this.list}
+                    table_name={config.column.table.name}
+                    getValue={item => item.value}
+                    getTitle={item => item.title}
+                    getSort={() => null}
+                    onChanged={e =>
+                    {
+                        const val = e.getValueOne();
+                        onChanged(val ? this.buildFilterItem(val) : null);
+                    }}
+                />
+            );
+
+        return (
+            <NSBoxDate
+                title={this.getLabel()}
+                placeholder={this.getLabel()}
+                required={false}
+                hideHeader={true}
+                onChanged={e =>
+                {
+                    const val = e.getValue();
+                    onChanged(val ? this.buildFilterItem(TimeOperation.toDBFormat(val)) : null);
+                }}
+            />
+        );
+    }
+}

package/src/components/NSAQuickFilter/NSAFilterBoxDateTime.tsx

@@ -0,0 +1,106 @@
+import { FilterItem, FilterItemOperator, SortItem, TimeOperation } from "namirasoft-core";
+import { NSBoxDateTime, NSBoxDateTimeRange, NSBoxEntity } from "namirasoft-site-react";
+import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
+import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
+
+export interface NSAFilterBoxDateTimeProps extends NSAFilterBoxBaseProps
+{
+    getValues: (search: string) => Promise<{ value: string; title: string }[]>;
+}
+
+type ValueItem = { value: string; title: string };
+
+const ENTITY_OPERATORS = ["equals"];
+
+export class NSAFilterBoxDateTime extends NSAFilterBoxBase<NSAFilterBoxDateTimeProps>
+{
+    private betweenActive = false;
+
+    private list = async (
+        filters: FilterItem[] | null,
+        _page: number | null,
+        _size: number | null,
+        _sorts: SortItem[]
+    ): Promise<{ count: number; rows: ValueItem[] }> =>
+    {
+        const searchFilter = filters?.find(f => f.values.length > 0);
+        const search = searchFilter?.values[0] ?? "";
+        const rows = await this.props.getValues(search);
+        return { count: rows.length, rows };
+    };
+
+    override render(): JSX.Element | null
+    {
+        const { config, onChanged } = this.props;
+        const op = config.operatorName
+            ? FilterItemOperator.getByName(config.operatorName)
+            : null;
+
+        if (op && op.count === 0)
+            return <NSAFilterBoxBoolean config={config} onChanged={onChanged} />;
+
+        if (config.operatorName === "between")
+            return (
+                <NSBoxDateTimeRange
+                    title={this.getLabel()}
+                    placeholder={this.getLabel()}
+                    required={false}
+                    hideHeader={true}
+                    preset={true}
+                    onChanged={e =>
+                    {
+                        const val = e.getValue();
+                        if (val)
+                        {
+                            this.betweenActive = true;
+                            onChanged(this.buildBetweenFilterItems(
+                                TimeOperation.toDBFormat(val.from),
+                                TimeOperation.toDBFormat(val.to)
+                            ));
+                        }
+                        else if (this.betweenActive)
+                        {
+                            this.betweenActive = false;
+                            onChanged(null);
+                        }
+                    }}
+                />
+            );
+
+        if (config.operatorName && ENTITY_OPERATORS.includes(config.operatorName))
+            return (
+                <NSBoxEntity<ValueItem>
+                    title={this.getLabel()}
+                    placeholder={this.getLabel()}
+                    required={false}
+                    hideHeader={true}
+                    multiple={false}
+                    list={this.list}
+                    table_name={config.column.table.name}
+                    getValue={item => item.value}
+                    getTitle={item => item.title}
+                    getSort={() => null}
+                    onChanged={e =>
+                    {
+                        const val = e.getValueOne();
+                        onChanged(val ? this.buildFilterItem(val) : null);
+                    }}
+                />
+            );
+
+        return (
+            <NSBoxDateTime
+                title={this.getLabel()}
+                placeholder={this.getLabel()}
+                required={false}
+                hideHeader={true}
+                defaultValue={undefined}
+                onChanged={e =>
+                {
+                    const val = e.getValue();
+                    onChanged(val ? this.buildFilterItem(TimeOperation.toDBFormat(val)) : null);
+                }}
+            />
+        );
+    }
+}

package/src/components/NSAQuickFilter/NSAFilterBoxEnum.module.css

@@ -0,0 +1,45 @@
+.title {
+    font-size: 13px;
+    font-weight: 400;
+    color: #6b6b6b;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    flex-shrink: 0;
+    margin-right: 2px;
+}
+
+.container {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 6px;
+    height: 48px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    border: 1px solid #a0a0a0;
+    border-radius: 8px;
+    background-color: #fff;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.option {
+    padding: 4px 12px;
+    border-radius: 16px;
+    border: 1px solid #a0a0a0;
+    background-color: #fff;
+    color: #333;
+    cursor: pointer;
+    font-size: 13px;
+    font-family: inherit;
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.option_active {
+    border-color: #1976d2;
+    background-color: #1976d2;
+    color: #fff;
+}

package/src/components/NSAQuickFilter/NSAFilterBoxEnum.tsx

@@ -0,0 +1,80 @@
+import { FilterItemOperator } from "namirasoft-core";
+import { NSLoading } from "namirasoft-site-react";
+import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
+import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
+import Styles from "./NSAFilterBoxEnum.module.css";
+
+export interface NSAFilterBoxEnumProps extends NSAFilterBoxBaseProps
+{
+    getValues: (search: string) => Promise<{ value: string; title: string }[]>;
+}
+
+type ValueItem = { value: string; title: string };
+
+type State = {
+    loading: boolean;
+    values: ValueItem[];
+    selectedValues: string[];
+};
+
+export class NSAFilterBoxEnum extends NSAFilterBoxBase<NSAFilterBoxEnumProps, State>
+{
+    constructor(props: NSAFilterBoxEnumProps)
+    {
+        super(props);
+        this.state = { loading: false, values: [], selectedValues: [] };
+    }
+
+    override async componentDidMount()
+    {
+        this.setState({ loading: true });
+        const values = await this.props.getValues("");
+        this.setState({ loading: false, values });
+    }
+
+    override render(): JSX.Element | null
+    {
+        const { config, onChanged } = this.props;
+        const op = config.operatorName
+            ? FilterItemOperator.getByName(config.operatorName)
+            : null;
+
+        if (op && op.count === 0)
+            return <NSAFilterBoxBoolean config={config} onChanged={onChanged} />;
+
+        if (config.operatorName === "equals")
+        {
+            return (
+                <div className={Styles.container}>
+                    <span className={Styles.title}>{this.getLabel()}</span>
+                    {
+                        this.state.loading
+                            ? <NSLoading classList={["p-2"]} small={true} hideTitle={true} hideDescription={true} />
+                            : this.state.values.map(item =>
+                            {
+                                const isActive = this.state.selectedValues.includes(item.value);
+                                return (
+                                    <button
+                                        key={item.value}
+                                        className={`${Styles.option} ${isActive ? Styles.option_active : ""}`}
+                                        onClick={() =>
+                                        {
+                                            const next = isActive
+                                                ? this.state.selectedValues.filter(v => v !== item.value)
+                                                : [...this.state.selectedValues, item.value];
+                                            this.setState({ selectedValues: next });
+                                            onChanged(next.length > 0 ? next.map(v => this.buildFilterItem(v)) : null);
+                                        }}
+                                    >
+                                        {item.title}
+                                    </button>
+                                );
+                            })
+                    }
+                </div>
+            );
+        }
+
+        return null;
+    }
+}

package/src/components/NSAQuickFilter/NSAFilterBoxNumber.tsx

@@ -0,0 +1,137 @@
+import { FilterItem, FilterItemOperator, SetTimeouService, SortItem } from "namirasoft-core";
+import { NSBoxDouble, NSBoxEntity, NSRow } from "namirasoft-site-react";
+import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
+import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
+
+export interface NSAFilterBoxNumberProps extends NSAFilterBoxBaseProps
+{
+    getValues: (search: string) => Promise<{ value: string; title: string }[]>;
+}
+
+interface NSAFilterBoxNumberState
+{
+    valueFrom: number | null;
+    valueTo: number | null;
+}
+
+type ValueItem = { value: string; title: string };
+
+const ENTITY_OPERATORS = ["equals", "notequals"];
+const DEBOUNCE_MS = 1000;
+
+export class NSAFilterBoxNumber extends NSAFilterBoxBase<NSAFilterBoxNumberProps, NSAFilterBoxNumberState>
+{
+    private debounce = new SetTimeouService();
+    private betweenDebounce = new SetTimeouService();
+    private betweenActive = false;
+
+    constructor(props: NSAFilterBoxNumberProps)
+    {
+        super(props);
+        this.state = { valueFrom: null, valueTo: null };
+    }
+
+    private emitDebounced(value: number | null): void
+    {
+        this.debounce.setTimeoutIfNotCalledAgain(
+            () => this.props.onChanged(value !== null ? this.buildFilterItem(String(value)) : null),
+            DEBOUNCE_MS
+        );
+    }
+
+    private handleBetweenChange(patch: Partial<NSAFilterBoxNumberState>): void
+    {
+        this.setState(patch as NSAFilterBoxNumberState, () =>
+        {
+            const { valueFrom, valueTo } = this.state;
+            this.betweenDebounce.setTimeoutIfNotCalledAgain(() =>
+            {
+                if (valueFrom !== null && valueTo !== null)
+                {
+                    this.betweenActive = true;
+                    this.props.onChanged(this.buildBetweenFilterItems(String(valueFrom), String(valueTo)));
+                }
+                else if (this.betweenActive)
+                {
+                    this.betweenActive = false;
+                    this.props.onChanged(null);
+                }
+            }, DEBOUNCE_MS);
+        });
+    }
+
+    private list = async (
+        filters: FilterItem[] | null,
+        _page: number | null,
+        _size: number | null,
+        _sorts: SortItem[]
+    ): Promise<{ count: number; rows: ValueItem[] }> =>
+    {
+        const searchFilter = filters?.find(f => f.values.length > 0);
+        const search = searchFilter?.values[0] ?? "";
+        const rows = await this.props.getValues(search);
+        return { count: rows.length, rows };
+    };
+
+    override render(): JSX.Element | null
+    {
+        const { config, onChanged } = this.props;
+        const op = config.operatorName
+            ? FilterItemOperator.getByName(config.operatorName)
+            : null;
+
+        if (op && op.count === 0)
+            return <NSAFilterBoxBoolean config={config} onChanged={onChanged} />;
+
+        if (config.operatorName === "between")
+            return (
+                <NSRow>
+                    <NSBoxDouble
+                        title={`${this.getLabel()} From`}
+                        placeholder={`${this.getLabel()} From`}
+                        required={false}
+                        hideHeader={true}
+                        onChanged={e => this.handleBetweenChange({ valueFrom: e.getValue() })}
+                    />
+                    <NSBoxDouble
+                        title={`${this.getLabel()} To`}
+                        placeholder={`${this.getLabel()} To`}
+                        required={false}
+                        hideHeader={true}
+                        onChanged={e => this.handleBetweenChange({ valueTo: e.getValue() })}
+                    />
+                </NSRow>
+            );
+
+        if (config.operatorName && ENTITY_OPERATORS.includes(config.operatorName))
+            return (
+                <NSBoxEntity<ValueItem>
+                    title={this.getLabel()}
+                    placeholder={this.getLabel()}
+                    required={false}
+                    hideHeader={true}
+                    multiple={false}
+                    list={this.list}
+                    table_name={config.column.table.name}
+                    getValue={item => item.value}
+                    getTitle={item => item.title}
+                    getSort={() => null}
+                    onChanged={e =>
+                    {
+                        const val = e.getValueOne();
+                        onChanged(val ? this.buildFilterItem(val) : null);
+                    }}
+                />
+            );
+
+        return (
+            <NSBoxDouble
+                title={this.getLabel()}
+                placeholder={this.getLabel()}
+                required={false}
+                hideHeader={true}
+                onChanged={e => this.emitDebounced(e.getValue())}
+            />
+        );
+    }
+}

package/src/components/NSAQuickFilter/NSAFilterBoxString.tsx

@@ -0,0 +1,82 @@
+import { FilterItem, FilterItemOperator, SetTimeouService, SortItem } from "namirasoft-core";
+import { NSBoxEntity, NSBoxString } from "namirasoft-site-react";
+import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
+import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
+
+export interface NSAFilterBoxStringProps extends NSAFilterBoxBaseProps
+{
+    getValues: (search: string) => Promise<{ value: string; title: string }[]>;
+}
+
+type ValueItem = { value: string; title: string };
+
+const ENTITY_OPERATORS = ["equals", "notequals"];
+const DEBOUNCE_MS = 1000;
+
+export class NSAFilterBoxString extends NSAFilterBoxBase<NSAFilterBoxStringProps>
+{
+    private debounce = new SetTimeouService();
+
+    private list = async (
+        filters: FilterItem[] | null,
+        _page: number | null,
+        _size: number | null,
+        _sorts: SortItem[]
+    ): Promise<{ count: number; rows: ValueItem[] }> =>
+    {
+        const searchFilter = filters?.find(f => f.values.length > 0);
+        const search = searchFilter?.values[0] ?? "";
+        const rows = await this.props.getValues(search);
+        return { count: rows.length, rows };
+    };
+
+    private emitDebounced(value: string | null): void
+    {
+        this.debounce.setTimeoutIfNotCalledAgain(
+            () => this.props.onChanged(value ? this.buildFilterItem(value) : null),
+            DEBOUNCE_MS
+        );
+    }
+
+    override render(): JSX.Element | null
+    {
+        const { config, onChanged } = this.props;
+        const op = config.operatorName
+            ? FilterItemOperator.getByName(config.operatorName)
+            : null;
+
+        if (op && op.count === 0)
+            return <NSAFilterBoxBoolean config={config} onChanged={onChanged} />;
+
+        if (config.operatorName && ENTITY_OPERATORS.includes(config.operatorName))
+            return (
+                <NSBoxEntity<ValueItem>
+                    title={this.getLabel()}
+                    placeholder={this.getLabel()}
+                    required={false}
+                    hideHeader={true}
+                    multiple={false}
+                    list={this.list}
+                    table_name={config.column.table.name}
+                    getValue={item => item.value}
+                    getTitle={item => item.title}
+                    getSort={() => null}
+                    onChanged={e =>
+                    {
+                        const val = e.getValueOne();
+                        onChanged(val ? this.buildFilterItem(val) : null);
+                    }}
+                />
+            );
+
+        return (
+            <NSBoxString
+                title={this.getLabel()}
+                placeholder={this.getLabel()}
+                required={false}
+                hideHeader={true}
+                onChanged={e => this.emitDebounced(e.getValue())}
+            />
+        );
+    }
+}