namirasoft-site-react 1.4.535 → 1.4.537

package/src/components/NSBoxDateTimeRange.tsx

@@ -15,50 +15,46 @@ export class NSBoxDateTimeRange extends NSBoxDateRangeBase<NSBoxDateTimeRangePro
 
     getError(): string | null
     {
-        const fmt = this.getFormat();
-        const { title, required } = this.props;
+        const { title, required, minDate, maxDate } = this.props;
         const { value } = this.state;
         if (required && (!value || !value.from || !value.to))
             return `${title} is required.`;
-        const minDate = this.props.minDate ? TimeOperation.format(this.props.minDate, fmt) : undefined;
-        const maxDate = this.props.maxDate ? TimeOperation.format(this.props.maxDate, fmt) : undefined;
         if (minDate && value?.from && value.from < minDate)
-            return `${title} (from) must not be before ${minDate}.`;
+            return `${title} (from) must not be before ${TimeOperation.format(minDate, this.getFormat())}.`;
         if (maxDate && value?.to && value.to > maxDate)
-            return `${title} (to) must not be after ${maxDate}.`;
+            return `${title} (to) must not be after ${TimeOperation.format(maxDate, this.getFormat())}.`;
         return null;
     }
 
     protected getBuiltinPresets()
     {
-        const fmt = this.getFormat();
         const now = new Date();
         now.setSeconds(0, 0);
-        const to = TimeOperation.format(now, fmt);
         return [
-            { label: '1H', title: 'Last 1 Hour', from: TimeOperation.format(TimeOperation.hoursAgo(1, now), fmt), to },
-            { label: '6H', title: 'Last 6 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(6, now), fmt), to },
-            { label: '12H', title: 'Last 12 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(12, now), fmt), to },
-            { label: '1D', title: 'Last 1 Day', from: TimeOperation.format(TimeOperation.daysAgo(1, now), fmt), to },
-            { label: '1W', title: 'Last 1 Week', from: TimeOperation.format(TimeOperation.weeksAgo(1, now), fmt), to },
+            { label: '1H', title: 'Last 1 Hour', from: TimeOperation.hoursAgo(1, now), to: now },
+            { label: '6H', title: 'Last 6 Hours', from: TimeOperation.hoursAgo(6, now), to: now },
+            { label: '12H', title: 'Last 12 Hours', from: TimeOperation.hoursAgo(12, now), to: now },
+            { label: '1D', title: 'Last 1 Day', from: TimeOperation.daysAgo(1, now), to: now },
+            { label: '1W', title: 'Last 1 Week', from: TimeOperation.weeksAgo(1, now), to: now },
         ];
     }
 
     protected renderPicker()
     {
+        const fmt = this.getFormat();
         return (
             <DatePicker.RangePicker
                 className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
                 variant="borderless"
                 showTime
                 value={this.toDayjsValue()}
-                format={this.getFormat()}
+                format={fmt}
                 minDate={this.props.minDate ? dayjs(this.props.minDate) : undefined}
                 maxDate={this.props.maxDate ? dayjs(this.props.maxDate) : undefined}
                 onChange={(_, dateStrings) =>
                 {
                     if (dateStrings?.[0] && dateStrings?.[1])
-                        this.setValue({ from: dateStrings[0], to: dateStrings[1] });
+                        this.setValue({ from: dayjs(dateStrings[0], fmt).toDate(), to: dayjs(dateStrings[1], fmt).toDate() });
                     else
                         this.setValue(null);
                 }}

package/src/components/NSBoxTimeRange.tsx

@@ -4,21 +4,53 @@ import { TimePicker } from 'antd';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { TimeOperation } from 'namirasoft-core';
+import { Component, createRef } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { IValidationProps } from '../props/IValidationProps';
 import { Validator } from '../Validator';
+import { INSBox } from './INSBox';
 import StylesNSBox from './NSBox.module.css';
-import { NSBoxDateRangeBase, NSBoxDateRangeBaseProps } from './NSBoxDateRangeBase';
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
 import Styles from './NSBoxDateRangeBase.module.css';
+import { NSBoxDateRangePreset } from './NSBoxDateRangeBase';
+import { safeMenuMenuItem } from './NSMenuButton';
 
-export interface NSBoxTimeRangeProps extends NSBoxDateRangeBaseProps<NSBoxTimeRange>
+export interface NSBoxTimeRangeValue
 {
+    from: string;
+    to: string;
+}
+
+export interface NSBoxTimeRangeProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<NSBoxTimeRange, NSBoxTimeRangeValue>
+{
+    preset?: boolean;
+    presets?: NSBoxDateRangePreset[];
     maxRangeSeconds?: number;
 }
 
-export class NSBoxTimeRange extends NSBoxDateRangeBase<NSBoxTimeRangeProps>
+export interface NSBoxTimeRangeState
 {
-    protected getFormat()
+    value: NSBoxTimeRangeValue | null;
+}
+
+export class NSBoxTimeRange extends Component<NSBoxTimeRangeProps, NSBoxTimeRangeState> implements INSBox
+{
+    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+    private static readonly FORMAT = 'HH:mm:ss';
+
+    constructor(props: NSBoxTimeRangeProps)
+    {
+        super(props);
+        this.state = { value: props.defaultValue ?? null };
+        this.isEmpty = this.isEmpty.bind(this);
+        this.getError = this.getError.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+    }
+
+    isEmpty(value: NSBoxTimeRangeValue): boolean
     {
-        return 'HH:mm:ss';
+        return !value || !value.from || !value.to;
     }
 
     getError(): string | null
@@ -29,12 +61,10 @@ export class NSBoxTimeRange extends NSBoxDateRangeBase<NSBoxTimeRangeProps>
             return `${title} is required.`;
 
         const fromErr = Validator.getErrorTime(title, value?.from, false);
-        if (fromErr)
-            return fromErr;
+        if (fromErr) return fromErr;
 
         const toErr = Validator.getErrorTime(title, value?.to, false);
-        if (toErr)
-            return toErr;
+        if (toErr) return toErr;
 
         if (maxRangeSeconds && value?.from && value?.to)
         {
@@ -50,9 +80,40 @@ export class NSBoxTimeRange extends NSBoxDateRangeBase<NSBoxTimeRangeProps>
         return null;
     }
 
-    protected getBuiltinPresets()
+    getValue(checkError: boolean = true): NSBoxTimeRangeValue | null
+    {
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayout_Main.current?.isNull())
+                return null;
+        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
+    }
+
+    setValue(value: NSBoxTimeRangeValue | null, callback?: () => void): void
+    {
+        if (this.props.nullable)
+            this.NSBoxBaseLayout_Main.current?.setNull(value == null);
+        this.setState({ value }, () =>
+        {
+            this.props.onChanged?.(this);
+            callback?.();
+        });
+    }
+
+    setDisabled(disabled: boolean): void
+    {
+        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
+    }
+
+    private toDayjsValue(): [Dayjs, Dayjs] | null
     {
-        const fmt = this.getFormat();
+        const { value } = this.state;
+        if (!value?.from || !value?.to) return null;
+        return [dayjs(value.from, NSBoxTimeRange.FORMAT), dayjs(value.to, NSBoxTimeRange.FORMAT)];
+    }
+
+    private getBuiltinPresets(): { label: string; title: string; from: string; to: string }[]
+    {
+        const fmt = NSBoxTimeRange.FORMAT;
         const now = new Date();
         now.setSeconds(0, 0);
         const to = TimeOperation.format(now, fmt);
@@ -65,30 +126,94 @@ export class NSBoxTimeRange extends NSBoxDateRangeBase<NSBoxTimeRangeProps>
         ];
     }
 
-    protected override  toDayjsValue(): [Dayjs, Dayjs] | null
+    private renderPresets(): React.ReactNode
     {
-        const { value } = this.state;
-        if (!value?.from || !value?.to)
-            return null;
-        return [dayjs(value.from, 'HH:mm:ss'), dayjs(value.to, 'HH:mm:ss')];
+        const { preset, presets: customPresets } = this.props;
+        const fmt = NSBoxTimeRange.FORMAT;
+
+        const builtinPresets = preset ? this.getBuiltinPresets() : [];
+
+        const resolvedCustom = (customPresets ?? []).map(p => ({
+            shortName: p.shortName,
+            title: p.title,
+            from: TimeOperation.format(p.getFrom(), fmt),
+            to: TimeOperation.format(p.getTo(), fmt),
+        }));
+
+        const showDivider = builtinPresets.length > 0 && resolvedCustom.length > 0;
+
+        return (
+            <div className={Styles.ns_preset_container}>
+                {builtinPresets.map(p =>
+                {
+                    const isActive = this.state.value?.from === p.from && this.state.value?.to === p.to;
+                    return (
+                        <button
+                            key={p.label}
+                            type="button"
+                            title={p.title}
+                            className={`${Styles.ns_preset_btn} ${isActive ? Styles.ns_preset_btn_active : ''}`}
+                            onClick={() => this.setValue({ from: p.from, to: p.to })}
+                        >
+                            {p.label}
+                        </button>
+                    );
+                })}
+                {showDivider && <div className={Styles.ns_preset_divider} />}
+                {resolvedCustom.map(p =>
+                {
+                    const isActive = this.state.value?.from === p.from && this.state.value?.to === p.to;
+                    return (
+                        <button
+                            key={p.shortName}
+                            type="button"
+                            title={p.title}
+                            className={`${Styles.ns_preset_btn} ${isActive ? Styles.ns_preset_btn_active : ''}`}
+                            onClick={() => this.setValue({ from: p.from, to: p.to })}
+                        >
+                            {p.shortName}
+                        </button>
+                    );
+                })}
+            </div>
+        );
     }
 
-    protected renderPicker()
+    override render()
     {
+        let menu = safeMenuMenuItem(this.props, () => { });
+        if (!menu.builtin.copy)
+            menu.builtin.copy = {
+                enabled: true,
+                getValue: () => this.state.value ? `${this.state.value.from} to ${this.state.value.to}` : '',
+            };
+
+        const showPresets = this.props.preset || (this.props.presets && this.props.presets.length > 0);
+
         return (
-            <TimePicker.RangePicker
-                className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
-                variant="borderless"
-                value={this.toDayjsValue()}
-                format={this.getFormat()}
-                onChange={(_, timeStrings) =>
-                {
-                    if (timeStrings?.[0] && timeStrings?.[1])
-                        this.setValue({ from: timeStrings[0], to: timeStrings[1] });
-                    else
-                        this.setValue(null);
-                }}
-            />
+            <NSBoxBaseLayout
+                ref={this.NSBoxBaseLayout_Main}
+                {...this.props}
+                menu={menu}
+                getValue={() => this.state.value ? `${this.state.value.from} - ${this.state.value.to}` : null}
+            >
+                <div className={Styles.ns_wrapper}>
+                    <TimePicker.RangePicker
+                        className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
+                        variant="borderless"
+                        value={this.toDayjsValue()}
+                        format={NSBoxTimeRange.FORMAT}
+                        onChange={(_, timeStrings) =>
+                        {
+                            if (timeStrings?.[0] && timeStrings?.[1])
+                                this.setValue({ from: timeStrings[0], to: timeStrings[1] });
+                            else
+                                this.setValue(null);
+                        }}
+                    />
+                </div>
+                {showPresets && this.renderPresets()}
+            </NSBoxBaseLayout>
         );
     }
 }

package/src/components/NSTable.tsx

@@ -219,6 +219,17 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 	{
 		let columns: TableColumnInfo[] = [];
 		this.foreachColumn(visible, c => columns.push(c));
+		if (visible === true)
+		{
+			let vs = this.getVisibleColumns();
+			if (vs.length > 0)
+				columns.sort((a, b) =>
+				{
+					let ai = vs.findIndex(v => v.table === a.table.name && v.column === a.name);
+					let bi = vs.findIndex(v => v.table === b.table.name && v.column === b.name);
+					return ai - bi;
+				});
+		}
 		return columns;
 	}
 	private showModal(description: string, title?: string)