ezfw-core 1.0.0

package/components/grid/state/EzGridRemote.ts

@@ -0,0 +1,335 @@
+// EzGrid/state/EzGridRemote.ts
+
+import type {
+    EzGridController,
+    SortSnapshot,
+    FilterSnapshot,
+    RowData,
+    RemoteApiConfig,
+    RemoteSourceConfig,
+    RemoteListenTo,
+    RemoteConfigInput,
+    TransportParams,
+    TransportResult,
+    BeforeLoadContext,
+    AfterLoadContext,
+    ErrorContext,
+    FilterMode
+} from '../types.js';
+
+declare const ez: {
+    _api: {
+        request: (url: string, options?: RequestInit) => Promise<unknown>;
+    };
+    getController: (name: string) => unknown;
+};
+
+export interface NormalizedRemoteConfig {
+    api: RemoteApiConfig;
+    source: {
+        dataPath: string;
+        countPath: string;
+    };
+    filter: FilterMode;
+    listenTo: RemoteListenTo;
+}
+
+export interface RemoteParams {
+    page: number;
+    pageSize: number;
+    sort: SortSnapshot | null;
+    filters: FilterSnapshot[] | null;
+}
+
+export interface RemoteResult {
+    data: RowData[];
+    total: number;
+}
+
+export interface EzGridRemoteRef {
+    config?: {
+        controller?: string;
+    };
+    controller?: EzGridController;
+}
+
+// Re-export types for backwards compatibility
+export type {
+    RemoteApiConfig,
+    RemoteSourceConfig,
+    RemoteListenTo,
+    RemoteConfigInput,
+    BeforeLoadContext,
+    AfterLoadContext,
+    ErrorContext
+} from '../types.js';
+
+export class EzGridRemote {
+    grid: EzGridRemoteRef;
+    config: NormalizedRemoteConfig | null;
+    private _isLoading: boolean;
+
+    constructor(grid: EzGridRemoteRef, config: RemoteConfigInput) {
+        this.grid = grid;
+        this.config = this._normalizeConfig(config);
+        this._isLoading = false;
+    }
+
+    // ==========================================================
+    // Callback Resolution
+    // ==========================================================
+
+    private _resolveCallback<T extends (...args: any[]) => any>(
+        callback: T | string | undefined
+    ): T | null {
+        if (typeof callback === 'function') {
+            return callback;
+        }
+
+        if (typeof callback === 'string') {
+            // Format: "ControllerName:functionName"
+            if (callback.includes(':')) {
+                const [controllerName, fnName] = callback.split(':');
+                const controller = ez.getController(controllerName) as Record<string, unknown>;
+
+                if (controller && typeof controller[fnName] === 'function') {
+                    return (controller[fnName] as Function).bind(controller);
+                }
+
+                console.warn(`[EzGridRemote] Could not resolve ${callback}`);
+                return null;
+            }
+
+            // Format: "functionName" - use component's controller from config
+            const controllerName = this.grid?.config?.controller;
+            if (controllerName) {
+                const controller = ez.getController(controllerName) as Record<string, unknown>;
+                if (controller && typeof controller[callback] === 'function') {
+                    return (controller[callback] as Function).bind(controller);
+                }
+            }
+
+            console.warn(`[EzGridRemote] Could not resolve ${callback} in ${controllerName || 'undefined'} controller`);
+            return null;
+        }
+
+        return null;
+    }
+
+    // ==========================================================
+    // Configuration
+    // ==========================================================
+
+    private _normalizeConfig(config: RemoteConfigInput | null | undefined): NormalizedRemoteConfig | null {
+        if (!config) return null;
+
+        const api: RemoteApiConfig = typeof config.api === 'string'
+            ? { read: config.api, create: config.api, update: config.api, delete: config.api }
+            : config.api || {};
+
+        return {
+            api,
+            source: {
+                dataPath: config.source?.dataPath ?? 'data',
+                countPath: config.source?.countPath ?? 'count'
+            },
+            filter: config.filter ?? 'onInput',
+            listenTo: config.listenTo || {}
+        };
+    }
+
+    isEnabled(): boolean {
+        return this.config !== null && !!this.config.api?.read;
+    }
+
+    // ==========================================================
+    // URL Building
+    // ==========================================================
+
+    private _buildReadUrl(params: RemoteParams): string {
+        const { api } = this.config!;
+        let url = api.read || '';
+
+        // Build query params
+        const queryParams = new URLSearchParams();
+
+        if (params.page != null) {
+            queryParams.set('page', String(params.page));
+        }
+
+        if (params.pageSize != null) {
+            queryParams.set('pageSize', String(params.pageSize));
+        }
+
+        // Sort params
+        if (params.sort) {
+            const sorter = Array.isArray(params.sort) ? params.sort[0] : params.sort;
+            if (sorter) {
+                queryParams.set('sortBy', sorter.property);
+                queryParams.set('sortDir', sorter.direction);
+            }
+        }
+
+        // Filter params
+        if (params.filters && params.filters.length > 0) {
+            queryParams.set('filters', JSON.stringify(params.filters));
+        }
+
+        const queryString = queryParams.toString();
+        if (queryString) {
+            url += (url.includes('?') ? '&' : '?') + queryString;
+        }
+
+        return url;
+    }
+
+    // ==========================================================
+    // Response Parsing
+    // ==========================================================
+
+    private _getByPath(obj: any, path: string): any {
+        if (!obj || !path) return obj;
+
+        const parts = path.split('.');
+        let value = obj;
+
+        for (const part of parts) {
+            if (value == null) return undefined;
+            value = value[part];
+        }
+
+        return value;
+    }
+
+    private _parseResponse(response: any): RemoteResult {
+        const { dataPath, countPath } = this.config!.source;
+
+        const data = this._getByPath(response, dataPath);
+        const total = this._getByPath(response, countPath);
+
+        return {
+            data: Array.isArray(data) ? data : [],
+            total: typeof total === 'number' ? total : (Array.isArray(data) ? data.length : 0)
+        };
+    }
+
+    // ==========================================================
+    // Data Loading
+    // ==========================================================
+
+    async load(params: Partial<RemoteParams> = {}): Promise<RemoteResult> {
+        if (!this.isEnabled()) {
+            console.warn('[EzGridRemote] Remote mode not configured');
+            return { data: [], total: 0 };
+        }
+
+        if (this._isLoading) {
+            console.warn('[EzGridRemote] Load already in progress');
+            return { data: [], total: 0 };
+        }
+
+        const controller = this.grid.controller;
+        const state = controller?.state;
+        const { listenTo } = this.config!;
+
+        // Build final params
+        let finalParams: RemoteParams = {
+            page: params.page ?? state?.page ?? 1,
+            pageSize: params.pageSize ?? state?.pageSize ?? 25,
+            sort: params.sort ?? controller?._lastSortSnapshot ?? null,
+            filters: params.filters ?? (controller?._lastFilterSnapshot as any[] | null) ?? null
+        };
+
+        // Hook: beforeLoad - can modify params
+        const beforeLoadFn = this._resolveCallback(listenTo.beforeLoad);
+        if (beforeLoadFn) {
+            const modifiedParams = beforeLoadFn(finalParams as any, { grid: this.grid as any, remote: this as any });
+            if (modifiedParams) {
+                finalParams = modifiedParams as RemoteParams;
+            }
+        }
+
+        this._isLoading = true;
+        controller?.setLoading?.(true);
+
+        try {
+            const url = this._buildReadUrl(finalParams);
+
+            // Use ez._api for the request
+            const response = await ez._api.request(url);
+
+            let result = this._parseResponse(response);
+
+            // Hook: afterLoad - can modify result or just observe
+            const afterLoadFn = this._resolveCallback(listenTo.afterLoad);
+            if (afterLoadFn) {
+                const ctx = {
+                    grid: this.grid as any,
+                    remote: this as any,
+                    params: finalParams as any,
+                    response
+                };
+                const modifiedResult = afterLoadFn(result as any, ctx);
+                if (modifiedResult) {
+                    result = modifiedResult as RemoteResult;
+                }
+            }
+
+            return result;
+
+        } catch (error) {
+            console.error('[EzGridRemote] Load failed:', error);
+
+            // Hook: onError
+            const onErrorFn = this._resolveCallback(listenTo.onError);
+            if (onErrorFn) {
+                onErrorFn(error as Error, { grid: this.grid as any, remote: this as any, params: finalParams as any });
+            }
+
+            controller?.setError?.(error as Error);
+            return { data: [], total: 0 };
+
+        } finally {
+            this._isLoading = false;
+            controller?.setLoading?.(false);
+        }
+    }
+
+    // ==========================================================
+    // CRUD Operations (future)
+    // ==========================================================
+
+    async create(data: any): Promise<any> {
+        if (!this.config?.api?.create) {
+            throw new Error('Create endpoint not configured');
+        }
+
+        return ez._api.request(this.config.api.create, {
+            method: 'POST',
+            body: data
+        });
+    }
+
+    async update(id: string | number, data: any): Promise<any> {
+        if (!this.config?.api?.update) {
+            throw new Error('Update endpoint not configured');
+        }
+
+        const url = `${this.config.api.update}/${id}`;
+        return ez._api.request(url, {
+            method: 'PUT',
+            body: data
+        });
+    }
+
+    async delete(id: string | number): Promise<any> {
+        if (!this.config?.api?.delete) {
+            throw new Error('Delete endpoint not configured');
+        }
+
+        const url = `${this.config.api.delete}/${id}`;
+        return ez._api.request(url, {
+            method: 'DELETE'
+        });
+    }
+}

package/components/grid/state/EzGridSelection.ts

@@ -0,0 +1,231 @@
+// EzGrid/state/EzGridSelection.ts
+
+import type {
+    SelectionMode,
+    SelectionConfig,
+    SelectionSnapshot,
+    RowData,
+    RowKeyFn,
+    RowCallback
+} from '../types.js';
+
+export interface EzGridSelectionRef {
+    config: {
+        onRowClick?: RowCallback | string;
+        onRowDoubleClick?: RowCallback | string;
+        rowKey?: string | RowKeyFn;
+    };
+    controller?: {
+        state?: {
+            data: RowData[];
+        };
+    };
+    _onSelectionChanged: () => void;
+}
+
+// Re-export types for backwards compatibility
+export type { SelectionMode, SelectionConfig, SelectionSnapshot } from '../types.js';
+
+export class EzGridSelection {
+    grid: EzGridSelectionRef;
+    enabled: boolean;
+    mode: SelectionMode;
+    toggle: boolean;
+    selected: Set<string>;
+    lastIndex: number | null;
+
+    constructor(grid: EzGridSelectionRef, config: boolean | SelectionConfig | null | undefined) {
+        this.grid = grid;
+        this.mode = 'single';
+        this.toggle = false;
+        this.selected = new Set();
+        this.lastIndex = null;
+
+        if (config === false) {
+            this.enabled = false;
+            return;
+        }
+
+        this.enabled = true;
+
+        const hasRowActions =
+            typeof grid.config.onRowClick === 'function' ||
+            typeof grid.config.onRowDoubleClick === 'function';
+
+        let mode: SelectionMode = 'single';
+        let toggle = false;
+        let selected = new Set<string>();
+
+        if (config === true || config == null) {
+            // defaults
+        } else if (typeof config === 'object') {
+            mode = config.mode === 'multi' ? 'multi' : 'single';
+            toggle = !!config.toggle;
+
+            if (Array.isArray(config.selected)) {
+                selected = new Set(config.selected.map(String));
+            }
+        }
+
+        if (mode === 'single' && toggle && hasRowActions) {
+            if (import.meta.env.DEV) {
+                console.warn(
+                    '[EzGrid] selection.toggle=true was ignore due ' +
+                    'onRowClick/onRowDoubleClick. in single mode, the selection ' +
+                    'represent active context and cant be empty.'
+                );
+            }
+            toggle = false;
+        }
+
+        this.mode = mode;
+        this.toggle = toggle;
+        this.selected = selected;
+        this.lastIndex = null;
+    }
+
+    isEnabled(): boolean {
+        return this.enabled === true;
+    }
+
+    isSelected(row: any): boolean {
+        if (!this.enabled) return false;
+
+        const key = this._getRowKeyString(row);
+        if (key == null) return false;
+
+        return this.selected.has(key);
+    }
+
+    getSelection(): string[] {
+        if (!this.enabled) return [];
+        return Array.from(this.selected);
+    }
+
+    clear(): void {
+        if (!this.enabled) return;
+
+        this.selected.clear();
+        this.lastIndex = null;
+        this._changed();
+    }
+
+    toggleRow(row: any, index: number): void {
+        if (!this.enabled) return;
+
+        const key = this._getRowKeyString(row);
+        if (key == null) return;
+
+        // Single mode: always select, toggle only if enabled
+        if (this.mode !== 'multi') {
+            if (this.selected.has(key) && this.toggle) {
+                this.selected.delete(key);
+            } else {
+                this.selected.clear();
+                this.selected.add(key);
+            }
+            this.lastIndex = index;
+            this._changed();
+            return;
+        }
+
+        // Multi mode: always allow toggle (deselect on re-click)
+        if (this.selected.has(key)) {
+            this.selected.delete(key);
+        } else {
+            this.selected.add(key);
+        }
+
+        this.lastIndex = index;
+        this._changed();
+    }
+
+    selectRange(toIndex: number): void {
+        if (!this.enabled) return;
+        if (this.mode !== 'multi') return;
+        if (this.lastIndex == null) return;
+
+        const data = this.grid.controller?.state?.data || [];
+        const from = Math.min(this.lastIndex, toIndex);
+        const to = Math.max(this.lastIndex, toIndex);
+
+        for (let i = from; i <= to; i++) {
+            const row = data[i];
+            const key = this._getRowKeyString(row);
+            if (key != null) this.selected.add(key);
+        }
+
+        this._changed();
+    }
+
+    selectAll(): void {
+        if (!this.enabled) return;
+
+        const data = this.grid.controller?.state?.data || [];
+        this.selected.clear();
+
+        for (const row of data) {
+            const key = this._getRowKeyString(row);
+            if (key != null) this.selected.add(key);
+        }
+
+        this.lastIndex = null;
+        this._changed();
+    }
+
+    isAllSelected(): boolean {
+        const data = this.grid.controller?.state?.data || [];
+        if (!data.length) return false;
+
+        let count = 0;
+        for (const row of data) {
+            const key = this._getRowKey(row);
+            if (key != null) count++;
+        }
+
+        return this.selected.size === count;
+    }
+
+    snapshot(): SelectionSnapshot | null {
+        if (!this.enabled) return null;
+
+        return {
+            mode: this.mode,
+            selected: Array.from(this.selected),
+            lastIndex: this.lastIndex
+        };
+    }
+
+    restore(snapshot: SelectionSnapshot | null): void {
+        if (!this.enabled || !snapshot) return;
+
+        // WARNING: Selection mode MUST come from grid config, not from persistence.
+        // Restoring `mode` from snapshot can silently downgrade multi-selection
+        // into single-selection when statefulPersist is enabled.
+        // Only derived state is allowed to be restored here.
+        this.selected = new Set(
+            Array.isArray(snapshot.selected)
+                ? snapshot.selected.map(String)
+                : []
+        );
+
+        this.lastIndex =
+            typeof snapshot.lastIndex === 'number'
+                ? snapshot.lastIndex
+                : null;
+    }
+
+    private _changed(): void {
+        this.grid._onSelectionChanged();
+    }
+
+    private _getRowKey(row: any): string | number | null {
+        const key = this.grid.config.rowKey;
+        return typeof key === 'function' ? key(row) : row?.[key as string];
+    }
+
+    private _getRowKeyString(row: any): string | null {
+        const key = this._getRowKey(row);
+        return key == null ? null : String(key);
+    }
+}