ezfw-core 1.0.0

package/components/grid/body/EzGridBody.ts

@@ -0,0 +1,549 @@
+// EzGrid/body/EzGridBody.ts
+
+import './EzGridBody.scss';
+import { EzGridContainer, EzGridContainerConfig } from '../EzGridContainer.js';
+import type {
+    NormalizedColumn,
+    EzGridController,
+    RowData,
+    RowKeyFn,
+    RowCallback,
+    RowContextMenuCallback,
+    RowClickContext
+} from '../types.js';
+import type { EzGridSelection } from '../state/EzGridSelection.js';
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement | null>;
+};
+
+export interface EzGridBodyRef {
+    selectAll?: () => void;
+    clearSelection?: () => void;
+    selectRange?: (toIndex: number) => void;
+    toggleRow?: (row: RowData, index: number) => void;
+    isSelected?: (row: RowData) => boolean;
+    selection?: EzGridSelection;
+    controller?: EzGridController;
+}
+
+export interface EzGridBodyConfig extends Omit<EzGridContainerConfig, 'controller'> {
+    grid?: EzGridBodyRef;
+    controller?: EzGridController;
+    columns?: (() => NormalizedColumn[]) | NormalizedColumn[];
+    rowKey?: RowKeyFn;
+    selection?: EzGridSelection;
+    rowHeight?: number;
+    virtual?: boolean;
+    bufferRows?: number;
+    keyboard?: boolean;
+    emptyText?: string;
+    onRowClick?: RowCallback;
+    onRowDoubleClick?: RowCallback;
+    onRowContextMenu?: RowContextMenuCallback;
+}
+
+export class EzGridBody extends EzGridContainer {
+    declare config: EzGridBodyConfig;
+    declare el: HTMLElement | null;
+
+    data: RowData[];
+    private _isLoading: boolean;
+    private _error: Error | string | null;
+    private _focusedIndex: number;
+    private _keyboardEnabled: boolean;
+    private _virtual: boolean;
+    private _rowHeight: number;
+    private _bufferRows: number;
+    private _visibleStart: number;
+    private _visibleEnd: number;
+    private _scrollRAF: number | null;
+    private _loadingEl: HTMLElement | null;
+    private _errorEl: HTMLElement | null;
+    private _emptyEl: HTMLElement | null;
+    private _virtualContainer: HTMLElement | null;
+
+    constructor(config: EzGridBodyConfig = {}) {
+        super(config as EzGridContainerConfig);
+
+        this.config.cls = (this.config.cls || '') + ' ez-grid-body';
+
+        this.data = [];
+
+        // State tracking for loading/error UI
+        this._isLoading = false;
+        this._error = null;
+
+        // Keyboard navigation state
+        this._focusedIndex = -1;
+        this._keyboardEnabled = this.config.keyboard !== false;
+
+        // Virtual scrolling config
+        this._virtual = this.config.virtual === true;
+        this._rowHeight = this.config.rowHeight ?? 40;
+        this._bufferRows = this.config.bufferRows ?? 5;
+        this._visibleStart = 0;
+        this._visibleEnd = 0;
+        this._scrollRAF = null;
+
+        // UI element refs
+        this._loadingEl = null;
+        this._errorEl = null;
+        this._emptyEl = null;
+        this._virtualContainer = null;
+    }
+
+    async render(): Promise<HTMLDivElement> {
+        const el = document.createElement('div');
+
+        // layout
+        el.style.display = 'flex';
+        el.style.flexDirection = 'column';
+        el.style.flex = String(this.config.flex ?? '1');
+        el.style.minHeight = '0';
+        el.style.overflowY = 'auto';
+
+        if (this.config.cls) {
+            el.className = Array.isArray(this.config.cls)
+                ? this.config.cls.join(' ')
+                : String(this.config.cls);
+        }
+
+        // Make focusable for keyboard navigation
+        if (this._keyboardEnabled) {
+            el.setAttribute('tabindex', '0');
+            el.setAttribute('role', 'grid');
+            this._bindKeyboardEvents(el);
+        }
+
+        // Virtual scrolling setup
+        if (this._virtual) {
+            el.classList.add('ez-grid-body--virtual');
+            this._bindScrollEvents(el);
+        }
+
+        this.el = el;
+
+        return el;
+    }
+
+    private _bindScrollEvents(el: HTMLElement): void {
+        el.addEventListener('scroll', () => {
+            if (this._scrollRAF) return;
+
+            this._scrollRAF = requestAnimationFrame(() => {
+                this._scrollRAF = null;
+                this._onVirtualScroll();
+            });
+        }, { passive: true });
+    }
+
+    private _onVirtualScroll(): void {
+        if (!this._virtual || !this.data?.length) return;
+
+        const scrollTop = this.el!.scrollTop;
+        const viewportHeight = this.el!.clientHeight;
+
+        const startIndex = Math.floor(scrollTop / this._rowHeight);
+        const visibleCount = Math.ceil(viewportHeight / this._rowHeight);
+
+        const newStart = Math.max(0, startIndex - this._bufferRows);
+        const newEnd = Math.min(
+            this.data.length,
+            startIndex + visibleCount + this._bufferRows
+        );
+
+        // Only re-render if visible range changed
+        if (newStart !== this._visibleStart || newEnd !== this._visibleEnd) {
+            this._visibleStart = newStart;
+            this._visibleEnd = newEnd;
+            this._renderVirtualRows();
+        }
+    }
+
+    private async _renderVirtualRows(): Promise<void> {
+        if (!this._virtualContainer) return;
+
+        // Clear current rows
+        this._virtualContainer.innerHTML = '';
+
+        // Render visible rows
+        for (let i = this._visibleStart; i < this._visibleEnd; i++) {
+            const row = this.data[i];
+            if (!row) continue;
+
+            const rowCfg = this._createRowConfig(row, i);
+            const rowEl = await ez._createElement(rowCfg);
+
+            if (rowEl) {
+                // Position row absolutely
+                rowEl.style.position = 'absolute';
+                rowEl.style.top = `${i * this._rowHeight}px`;
+                rowEl.style.left = '0';
+                rowEl.style.right = '0';
+                rowEl.style.height = `${this._rowHeight}px`;
+
+                this._virtualContainer.appendChild(rowEl);
+            }
+        }
+    }
+
+    private _bindKeyboardEvents(el: HTMLElement): void {
+        el.addEventListener('keydown', (e: KeyboardEvent) => {
+            this._handleKeyDown(e);
+        });
+    }
+
+    private _handleKeyDown(e: KeyboardEvent): void {
+        if (!this.data?.length) return;
+
+        const maxIndex = this.data.length - 1;
+
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this._moveFocus(1);
+                break;
+
+            case 'ArrowUp':
+                e.preventDefault();
+                this._moveFocus(-1);
+                break;
+
+            case 'Home':
+                e.preventDefault();
+                this._setFocusedIndex(0);
+                break;
+
+            case 'End':
+                e.preventDefault();
+                this._setFocusedIndex(maxIndex);
+                break;
+
+            case 'PageDown':
+                e.preventDefault();
+                this._moveFocus(10);
+                break;
+
+            case 'PageUp':
+                e.preventDefault();
+                this._moveFocus(-10);
+                break;
+
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this._selectFocusedRow(e);
+                break;
+
+            case 'a':
+            case 'A':
+                if (e.ctrlKey || e.metaKey) {
+                    e.preventDefault();
+                    this.config.grid?.selectAll?.();
+                }
+                break;
+
+            case 'Escape':
+                e.preventDefault();
+                this.config.grid?.clearSelection?.();
+                this._setFocusedIndex(-1);
+                break;
+        }
+    }
+
+    private _moveFocus(delta: number): void {
+        const maxIndex = this.data.length - 1;
+        let newIndex = this._focusedIndex + delta;
+
+        // Clamp to valid range
+        newIndex = Math.max(0, Math.min(newIndex, maxIndex));
+
+        this._setFocusedIndex(newIndex);
+    }
+
+    private _setFocusedIndex(index: number): void {
+        const prevIndex = this._focusedIndex;
+        this._focusedIndex = index;
+
+        // Update visual focus
+        if (prevIndex >= 0) {
+            const prevRow = this._getRowElement(prevIndex);
+            prevRow?.classList.remove('is-focused');
+        }
+
+        if (index >= 0) {
+            const row = this._getRowElement(index);
+            if (row) {
+                row.classList.add('is-focused');
+                this._scrollRowIntoView(row);
+            }
+        }
+    }
+
+    private _getRowElement(index: number): HTMLElement | null {
+        if (!this.el) return null;
+        return this.el.querySelector(`.ez-grid-row:nth-child(${index + 1})`);
+    }
+
+    private _scrollRowIntoView(row: HTMLElement): void {
+        if (!row || !this.el) return;
+
+        const bodyRect = this.el.getBoundingClientRect();
+        const rowRect = row.getBoundingClientRect();
+
+        if (rowRect.top < bodyRect.top) {
+            row.scrollIntoView({ block: 'start', behavior: 'smooth' });
+        } else if (rowRect.bottom > bodyRect.bottom) {
+            row.scrollIntoView({ block: 'end', behavior: 'smooth' });
+        }
+    }
+
+    private _selectFocusedRow(e: KeyboardEvent): void {
+        if (this._focusedIndex < 0 || !this.data) return;
+
+        const row = this.data[this._focusedIndex];
+        const grid = this.config.grid;
+
+        if (!grid || !row) return;
+
+        if (e.shiftKey) {
+            grid.selectRange?.(this._focusedIndex);
+        } else if (e.ctrlKey || e.metaKey) {
+            // Toggle selection without clearing others
+            grid.toggleRow?.(row, this._focusedIndex);
+        } else {
+            grid.toggleRow?.(row, this._focusedIndex);
+        }
+    }
+
+    setLoading(loading: boolean): void {
+        this._isLoading = !!loading;
+
+        if (!this.el) return;
+
+        if (this._isLoading) {
+            this._showLoadingOverlay();
+        } else {
+            this._hideLoadingOverlay();
+        }
+    }
+
+    setError(error: Error | string | null): void {
+        this._error = error;
+
+        if (!this.el) return;
+
+        if (this._error) {
+            this._showErrorState();
+        } else {
+            this._hideErrorState();
+        }
+    }
+
+    private _showLoadingOverlay(): void {
+        if (this._loadingEl) return;
+
+        this._loadingEl = document.createElement('div');
+        this._loadingEl.className = 'ez-grid-loading';
+        this._loadingEl.innerHTML = `
+            <div class="ez-grid-loading-spinner"></div>
+            <span class="ez-grid-loading-text">Loading...</span>
+        `;
+
+        this.el!.appendChild(this._loadingEl);
+    }
+
+    private _hideLoadingOverlay(): void {
+        if (this._loadingEl) {
+            this._loadingEl.remove();
+            this._loadingEl = null;
+        }
+    }
+
+    private _showErrorState(): void {
+        // Remove existing error if any
+        this._hideErrorState();
+
+        const message = this._error instanceof Error
+            ? this._error.message
+            : String(this._error);
+
+        this._errorEl = document.createElement('div');
+        this._errorEl.className = 'ez-grid-error';
+        this._errorEl.innerHTML = `
+            <div class="ez-grid-error-icon">⚠</div>
+            <div class="ez-grid-error-message">${this._escapeHtml(message)}</div>
+            <button class="ez-grid-error-retry">Retry</button>
+        `;
+
+        // Retry button handler
+        const retryBtn = this._errorEl.querySelector('.ez-grid-error-retry');
+        retryBtn?.addEventListener('click', () => {
+            (this.config.grid as any)?.controller?.reload?.();
+        });
+
+        this.el!.innerHTML = '';
+        this.el!.appendChild(this._errorEl);
+    }
+
+    private _hideErrorState(): void {
+        if (this._errorEl) {
+            this._errorEl.remove();
+            this._errorEl = null;
+        }
+    }
+
+    private _showEmptyState(): void {
+        const emptyText = this.config.emptyText ?? 'No data available';
+
+        this._emptyEl = document.createElement('div');
+        this._emptyEl.className = 'ez-grid-empty';
+        this._emptyEl.textContent = emptyText;
+
+        this.el!.appendChild(this._emptyEl);
+    }
+
+    private _escapeHtml(str: string): string {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+
+    updateSelectionVisuals(): void {
+        if (!this.el) return;
+
+        const grid = this.config.grid;
+        if (!grid) return;
+
+        const rows = this.el.querySelectorAll('.ez-grid-row[data-ez-row-id]');
+
+        rows.forEach(rowEl => {
+            const rowId = rowEl.getAttribute('data-ez-row-id');
+            const isSelected = grid.selection?.selected?.has?.(String(rowId));
+
+            if (isSelected) {
+                rowEl.classList.add('is-selected');
+            } else {
+                rowEl.classList.remove('is-selected');
+            }
+
+            // Also update checkbox if exists
+            const checkbox = rowEl.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
+            if (checkbox) {
+                checkbox.checked = !!isSelected;
+            }
+        });
+    }
+
+    async refreshData(data: any[]): Promise<void> {
+        this.data = Array.isArray(data) ? data : [];
+
+        // Reset focus when data changes
+        this._focusedIndex = -1;
+
+        // Clear current content
+        if (this.el) {
+            this.el.innerHTML = '';
+            this._loadingEl = null;
+            this._errorEl = null;
+            this._emptyEl = null;
+            this._virtualContainer = null;
+        }
+
+        // Show loading if active
+        if (this._isLoading) {
+            this._showLoadingOverlay();
+            return;
+        }
+
+        // Show error if present
+        if (this._error) {
+            this._showErrorState();
+            return;
+        }
+
+        // Show empty state if no data
+        if (this.data.length === 0) {
+            this._showEmptyState();
+            return;
+        }
+
+        // Virtual scrolling mode
+        if (this._virtual) {
+            await this._renderVirtual();
+            return;
+        }
+
+        // Standard rendering - all rows
+        for (let i = 0; i < this.data.length; i++) {
+            const row = this.data[i];
+
+            const rowCfg = this._createRowConfig(row, i);
+            const rowEl = await ez._createElement(rowCfg);
+
+            if (rowEl) {
+                this.el!.appendChild(rowEl);
+            }
+        }
+    }
+
+    private async _renderVirtual(): Promise<void> {
+        // Create spacer for total height
+        const totalHeight = this.data.length * this._rowHeight;
+
+        // Virtual container with absolute positioning
+        this._virtualContainer = document.createElement('div');
+        this._virtualContainer.className = 'ez-grid-virtual-container';
+        this._virtualContainer.style.position = 'relative';
+        this._virtualContainer.style.height = `${totalHeight}px`;
+        this._virtualContainer.style.width = '100%';
+
+        this.el!.appendChild(this._virtualContainer);
+
+        // Calculate initial visible range
+        const viewportHeight = this.el!.clientHeight || 400;
+        const visibleCount = Math.ceil(viewportHeight / this._rowHeight);
+
+        this._visibleStart = 0;
+        this._visibleEnd = Math.min(this.data.length, visibleCount + this._bufferRows);
+
+        // Render initial rows
+        await this._renderVirtualRows();
+    }
+
+    private _createRowConfig(row: any, index: number): any {
+
+        return {
+            eztype: 'EzGridRow',
+            row,
+            index,
+            rowCount: this.data.length,
+            columns: typeof this.config.columns === 'function'
+                ? this.config.columns()
+                : this.config.columns,
+            rowKey: this.config.rowKey,
+            selection: this.config.selection,
+            rowHeight: this.config.rowHeight,
+            onRowClick: this.config.onRowClick,
+            onRowDoubleClick: this.config.onRowDoubleClick,
+            onRowContextMenu: this.config.onRowContextMenu,
+
+            onClick: (e: MouseEvent) => {
+                const grid = this.config.grid;
+
+                if (!grid) return;
+
+                if (e.shiftKey) {
+                    grid.selectRange?.(index);
+                } else {
+                    grid.toggleRow?.(row, index);
+                }
+            },
+
+            controller: this.config.controller,
+            grid: this.config.grid
+        };
+
+    }
+}