ezfw-core 1.0.0

package/components/grid/filter/EzGridFilters.ts

@@ -0,0 +1,285 @@
+// EzGrid/filter/EzGridFilters.ts
+
+import './EzGridFilters.scss';
+import { EzGridContainer, EzGridContainerConfig } from '../EzGridContainer.js';
+import type { NormalizedColumn, FilterSnapshot } from '../types.js';
+
+declare const ez: {
+    _createElement(config: any): Promise<HTMLElement | null>;
+};
+
+export interface FilterContext {
+    grid: EzGridFiltersRef | undefined;
+    column: NormalizedColumn;
+    value: any;
+    setValue: (value: any) => void;
+    field: string;
+    operator: string;
+}
+
+export interface ResolvedFilter {
+    enabled: boolean;
+    field?: string;
+    operator?: string;
+    itemRender?: any;
+}
+
+export interface EzGridFiltersRef {
+    _onFiltersChanged?: (snapshot: FilterSnapshot[] | null) => void;
+}
+
+export interface EzGridFiltersConfig extends EzGridContainerConfig {
+    grid?: EzGridFiltersRef;
+    columns?: (() => NormalizedColumn[]) | NormalizedColumn[];
+    filterMode?: 'onInput' | 'onEnter';
+    debounce?: number;
+}
+
+export class EzGridFilters extends EzGridContainer {
+    declare config: EzGridFiltersConfig;
+    declare el: HTMLElement | null;
+
+    grid: EzGridFiltersRef | undefined;
+    columns: () => NormalizedColumn[];
+    private _values: Record<string, any>;
+    private _filterMode: 'onInput' | 'onEnter';
+    private _debounceMs: number;
+    private _debounceTimer: ReturnType<typeof setTimeout> | null;
+
+    constructor(config: EzGridFiltersConfig = {}) {
+        super(config);
+
+        this.grid = config.grid;
+        const cols = config.columns;
+        this.columns = typeof cols === 'function'
+            ? cols
+            : () => (cols || []);
+
+        // Local, ephemeral filter values (not persisted)
+        this._values = {};
+
+        // Filter mode: 'onInput' (default) or 'onEnter'
+        // In remote mode, this is controlled by remote.filter config
+        this._filterMode = config.filterMode ?? 'onInput';
+
+        // Debounce config (default 300ms) - only used in onInput mode
+        this._debounceMs = config.debounce ?? 300;
+        this._debounceTimer = null;
+
+        this.config.cls = (this.config.cls || '') + ' ez-grid-filters';
+        this.config.layout = 'hbox';
+
+        this._buildFilters();
+    }
+
+    private _buildFilters(): void {
+        const columns = this.columns();
+
+        this.config.items = columns.map(col => {
+            const resolved = this._resolveFilter(col);
+
+            // Always occupy column space to keep alignment
+            // width / flex - same logic as EzGridCell
+            const baseCell: any = {
+                eztype: 'EzComponent',
+                cls: 'ez-grid-filter-cell',
+                flex: col.width != null ? undefined : (col.flex ?? 1),
+                style: col.width != null ? { width: `${col.width}px` } : undefined,
+                items: []
+            };
+
+            // No filter → empty placeholder
+            if (!resolved.enabled) {
+                return baseCell;
+            }
+
+            const field = resolved.field!;
+            const operator = resolved.operator!;
+
+            // NOTE: Initialize proper default value based on operator
+            const defaultValue = this._getDefaultValue(operator);
+
+            // NOTE: Ensure _values[field] exists with correct type
+            if (this._values[field] === undefined) {
+                this._values[field] = defaultValue;
+            }
+
+            const value = this._values[field];
+
+            // NOTE: setValue callback for custom itemRender
+            const setValue = (newValue: any) => {
+                this._values[field] = newValue;
+                this._emitSnapshot();
+            };
+
+            const ctx: FilterContext = {
+                grid: this.grid,
+                column: col,
+                value,
+                setValue,
+                field,
+                operator
+            };
+
+            const isCustomRender = typeof resolved.itemRender === 'function';
+
+            let itemCfg = isCustomRender
+                ? resolved.itemRender(ctx)
+                : { ...resolved.itemRender };
+
+            // WARNING:
+            // For custom itemRender, do NOT override attrs or handlers.
+            // Custom renders have full control via setValue callback.
+            if (!isCustomRender) {
+                itemCfg.attrs = {
+                    ...(itemCfg.attrs || {}),
+                    placeholder: col.text ?? '',
+                    value
+                };
+
+                // Handler to update local value
+                const updateValue = (e: Event) => {
+                    const newValue = (e?.target as HTMLInputElement)?.value ?? '';
+
+                    if (newValue === '' || newValue == null) {
+                        delete this._values[field];
+                    } else {
+                        this._values[field] = newValue;
+                    }
+                };
+
+                if (this._filterMode === 'onEnter') {
+                    // onEnter mode: only emit on Enter key
+                    itemCfg.onInput = updateValue;
+                    itemCfg.onChange = updateValue;
+
+                    // Use _ezAfterRender to bind keydown since native inputs don't auto-bind onKeyDown
+                    itemCfg._ezAfterRender = (el: HTMLInputElement) => {
+                        el.addEventListener('keydown', (e: KeyboardEvent) => {
+                            if (e.key === 'Enter') {
+                                updateValue(e);
+                                this._doEmitSnapshot(); // Direct emit, no debounce
+                            }
+                        });
+                    };
+                } else {
+                    // onInput mode: emit on every change (with debounce)
+                    const handler = (e: Event) => {
+                        updateValue(e);
+                        this._emitSnapshot();
+                    };
+                    itemCfg.onInput = handler;
+                    itemCfg.onChange = handler;
+                }
+            }
+
+            baseCell.items.push(itemCfg);
+
+            return baseCell;
+        });
+    }
+
+    private _getDefaultValue(operator: string): any {
+        // NOTE: 'between' operator expects array of two values
+        if (operator === 'between') {
+            return [null, null];
+        }
+        return '';
+    }
+
+    private _resolveFilter(col: NormalizedColumn): ResolvedFilter {
+        const raw = col.filter;
+
+        // No filter defined
+        if (raw == null) {
+            return { enabled: false };
+        }
+
+        // Empty object (from filter: true) → default '='
+        if (!raw.operator && !raw.itemRender) {
+            return {
+                enabled: true,
+                field: col.index,
+                operator: '=',
+                itemRender: {
+                    eztype: 'input'
+                }
+            };
+        }
+
+        // filter: { operator, itemRender } - already normalized from EzGridNormalizers
+        return {
+            enabled: true,
+            field: col.index,
+            operator: raw.operator ?? '=',
+            itemRender: raw.itemRender ?? {
+                eztype: 'input'
+            }
+        };
+    }
+
+    private _emitSnapshot(): void {
+        // Clear existing debounce timer
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer);
+        }
+
+        // Debounce the actual emit
+        this._debounceTimer = setTimeout(() => {
+            this._doEmitSnapshot();
+        }, this._debounceMs);
+    }
+
+    private _doEmitSnapshot(): void {
+        const snapshot: FilterSnapshot[] = Object.keys(this._values).map(field => {
+            const value = this._values[field];
+
+            // Skip empty values
+            if (value === '' || value == null) return null;
+
+            // Skip empty arrays (for 'between' operator)
+            if (Array.isArray(value) && value.every(v => v == null || v === '')) return null;
+
+            const col = this.columns().find(c => c.index === field);
+            if (!col) return null;
+
+            const resolved = this._resolveFilter(col);
+            if (!resolved.enabled) return null;
+
+            return {
+                field,
+                operator: resolved.operator!,
+                value
+            };
+        }).filter((item): item is FilterSnapshot => item !== null);
+
+        this.grid?._onFiltersChanged?.(
+            snapshot.length ? snapshot : null
+        );
+    }
+
+    clear(): void {
+        this._values = {};
+        this._rebuildUI();
+    }
+
+    refresh(): void {
+        this._rebuildUI();
+    }
+
+    private async _rebuildUI(): Promise<void> {
+        this._buildFilters();
+
+        if (this.el) {
+            this.el.innerHTML = '';
+
+            const children = await Promise.all(
+                (this.config.items || []).map(item => ez._createElement(item))
+            );
+
+            for (const child of children) {
+                if (child) this.el.appendChild(child);
+            }
+        }
+    }
+}

package/components/grid/footer/EzGridFooter.scss

@@ -0,0 +1,136 @@
+// ==========================================================
+// EzGridFooter
+// ==========================================================
+
+.ez-grid {
+  .ez-grid-footer {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid var(--ez-grid-border);
+    background-color: var(--ez-grid-surface);
+
+    font-size: var(--ez-grid-font-size);
+    font-weight: var(--ez-grid-font-weight-medium);
+    color: var(--ez-grid-text-secondary);
+  }
+
+  // ----------------------------------------------------------
+  // Stats row: column summaries
+  // ----------------------------------------------------------
+  .ez-grid-footer-stats {
+    display: flex;
+    border-bottom: 1px solid var(--ez-grid-border-light);
+    background-color: var(--ez-grid-surface-hover);
+  }
+
+  .ez-grid-footer-stat-cell {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    min-height: 32px;
+    box-sizing: border-box;
+
+    font-size: calc(var(--ez-grid-font-size) - 1px);
+    font-weight: var(--ez-grid-font-weight-semibold);
+    color: var(--ez-grid-text);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // ----------------------------------------------------------
+  // Pagination row
+  // ----------------------------------------------------------
+  .ez-grid-footer-pagination {
+    display: flex;
+    min-height: var(--ez-grid-header-height);
+    align-items: center;
+    padding: 0 12px;
+    gap: 16px;
+  }
+
+  // ----------------------------------------------------------
+  // Page info: "1 - 25 of 100"
+  // ----------------------------------------------------------
+  .ez-grid-footer-info {
+    white-space: nowrap;
+    color: var(--ez-grid-text);
+  }
+
+  // ----------------------------------------------------------
+  // Page size selector
+  // ----------------------------------------------------------
+  .ez-grid-footer-pagesize {
+    align-items: center;
+    gap: 8px;
+  }
+
+  .ez-grid-footer-pagesize-label {
+    color: var(--ez-grid-text-muted);
+    white-space: nowrap;
+  }
+
+  // ----------------------------------------------------------
+  // Navigation buttons
+  // ----------------------------------------------------------
+  .ez-grid-footer-nav {
+    align-items: center;
+    gap: 4px;
+  }
+
+  .ez-grid-footer-nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 8px;
+
+    font-size: 1rem;
+    font-weight: var(--ez-grid-font-weight-medium);
+    color: var(--ez-grid-text-secondary);
+
+    background: var(--ez-grid-bg);
+    border: 1px solid var(--ez-grid-border);
+    border-radius: var(--ez-grid-radius-sm);
+
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background: var(--ez-grid-surface-hover);
+      border-color: var(--ez-grid-text-muted);
+      color: var(--ez-grid-text);
+    }
+
+    &:active:not(:disabled) {
+      background: var(--ez-grid-surface-active);
+    }
+
+    &:disabled {
+      color: var(--ez-grid-border);
+      cursor: not-allowed;
+      background: var(--ez-grid-surface);
+      border-color: var(--ez-grid-border-light);
+    }
+  }
+
+  // ----------------------------------------------------------
+  // Page indicator: "1 / 5"
+  // ----------------------------------------------------------
+  .ez-grid-footer-page-indicator {
+    padding: 0 8px;
+    white-space: nowrap;
+    min-width: 48px;
+    text-align: center;
+    color: var(--ez-grid-text);
+  }
+
+  // ----------------------------------------------------------
+  // Reload button (separated from pagination)
+  // ----------------------------------------------------------
+  .ez-grid-footer-reload-btn {
+    margin-left: 8px;
+  }
+}