ezfw-core 1.0.0

package/components/grid/footer/EzGridFooter.ts

@@ -0,0 +1,448 @@
+// EzGrid/footer/EzGridFooter.ts
+
+import './EzGridFooter.scss';
+import { EzGridContainer, EzGridContainerConfig } from '../EzGridContainer.js';
+import type { NormalizedColumn, EzGridController } from '../types.js';
+
+declare const ez: {
+    _createElement(config: any): Promise<HTMLElement | null>;
+};
+
+export interface EzGridFooterRef {
+    controller?: EzGridController;
+    getVisibleColumns?: () => NormalizedColumn[];
+    columns?: NormalizedColumn[];
+    refreshBody?: () => Promise<void>;
+}
+
+export interface EzGridFooterConfig extends EzGridContainerConfig {
+    grid?: EzGridFooterRef;
+}
+
+export class EzGridFooter extends EzGridContainer {
+    declare config: EzGridFooterConfig;
+
+    grid: EzGridFooterRef | undefined;
+    private _pageSizeOptions: number[];
+    private _infoEl: HTMLElement | null;
+    private _pageIndicatorEl: HTMLElement | null;
+    private _btnFirst: HTMLButtonElement | null;
+    private _btnPrev: HTMLButtonElement | null;
+    private _btnNext: HTMLButtonElement | null;
+    private _btnLast: HTMLButtonElement | null;
+    private _btnReload: HTMLButtonElement | null;
+    private _pageSizeInstance: any;
+    private _statsEl: HTMLElement | null;
+
+    constructor(config: EzGridFooterConfig = {}) {
+        super(config);
+
+        this.grid = config.grid;
+
+        this.config.cls = (this.config.cls || '') + ' ez-grid-footer';
+        this.config.layout = 'hbox';
+
+        this._pageSizeOptions = [10, 25, 50, 100];
+        this._infoEl = null;
+        this._pageIndicatorEl = null;
+        this._btnFirst = null;
+        this._btnPrev = null;
+        this._btnNext = null;
+        this._btnLast = null;
+        this._btnReload = null;
+        this._pageSizeInstance = null;
+        this._statsEl = null;
+
+        this._buildItems();
+    }
+
+    private _buildItems(): void {
+        const items: any[] = [];
+
+        // Stats row (if any column has summary)
+        const statsRow = this._buildStatsRow();
+        if (statsRow) {
+            items.push(statsRow);
+        }
+
+        // Pagination row
+        items.push({
+            eztype: 'EzComponent',
+            cls: 'ez-grid-footer-pagination',
+            layout: 'hbox',
+            flex: 1,
+            items: [
+                // Navigation buttons (left)
+                this._buildNavigationButtons(),
+
+                // Spacer
+                { eztype: 'EzComponent', flex: 1 },
+
+                // Page size selector
+                this._buildPageSizeSelector(),
+
+                // Page info (right)
+                this._buildPageInfo()
+            ]
+        });
+
+        this.config.items = items;
+    }
+
+    private _buildStatsRow(): any | null {
+        const columns = this._getColumns();
+
+        // Check if any column has summary
+        const hasSummary = columns.some(col => (col as any).summary);
+        if (!hasSummary) return null;
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-grid-footer-stats',
+            layout: 'hbox',
+            _ezAfterRender: (el: HTMLElement) => {
+                this._statsEl = el;
+            },
+            items: columns.map(col => this._buildStatCell(col))
+        };
+    }
+
+    private _buildStatCell(col: NormalizedColumn): any {
+        // Width / flex - same as header/body cells
+        const cellStyle = col.width != null
+            ? { width: `${col.width}px` }
+            : undefined;
+
+        const cellFlex = col.width != null
+            ? undefined
+            : (col.flex ?? 1);
+
+        // No summary - empty cell
+        if (!(col as any).summary) {
+            return {
+                eztype: 'EzComponent',
+                cls: 'ez-grid-footer-stat-cell',
+                style: cellStyle,
+                flex: cellFlex
+            };
+        }
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-grid-footer-stat-cell',
+            style: cellStyle,
+            flex: cellFlex,
+            attrs: {
+                'data-col-id': col._id
+            },
+            _ezAfterRender: (el: HTMLElement) => {
+                this._updateStatCell(el, col);
+            }
+        };
+    }
+
+    private _updateStatCell(el: HTMLElement, col: NormalizedColumn): void {
+        if (!el || !(col as any).summary) return;
+
+        const value = this._calculateStat(col);
+        const label = this._getStatLabel((col as any).summary);
+
+        el.textContent = `${label}: ${value}`;
+    }
+
+    private _calculateStat(col: NormalizedColumn): string | number {
+        const data = this.grid?.controller?.state?.data ?? [];
+        const field = col.index;
+
+        if (!field || data.length === 0) {
+            return '-';
+        }
+
+        const values = data
+            .map(row => row[field])
+            .filter(v => v != null && v !== '');
+
+        const numericValues = values
+            .map(v => parseFloat(String(v)))
+            .filter(n => !isNaN(n));
+
+        const summaryType = typeof (col as any).summary === 'string'
+            ? (col as any).summary
+            : (col as any).summary?.type ?? 'count';
+
+        switch (summaryType.toLowerCase()) {
+            case 'count':
+                return values.length;
+
+            case 'sum':
+                return numericValues.length
+                    ? this._formatNumber(numericValues.reduce((a, b) => a + b, 0))
+                    : '-';
+
+            case 'avg':
+            case 'average':
+                return numericValues.length
+                    ? this._formatNumber(numericValues.reduce((a, b) => a + b, 0) / numericValues.length)
+                    : '-';
+
+            case 'min':
+                return numericValues.length
+                    ? this._formatNumber(Math.min(...numericValues))
+                    : '-';
+
+            case 'max':
+                return numericValues.length
+                    ? this._formatNumber(Math.max(...numericValues))
+                    : '-';
+
+            default:
+                return values.length;
+        }
+    }
+
+    private _getStatLabel(summary: any): string {
+        const type = typeof summary === 'string'
+            ? summary
+            : summary?.type ?? 'count';
+
+        const labels: Record<string, string> = {
+            count: 'Count',
+            sum: 'Sum',
+            avg: 'Avg',
+            average: 'Avg',
+            min: 'Min',
+            max: 'Max'
+        };
+
+        return labels[type.toLowerCase()] ?? 'Count';
+    }
+
+    private _formatNumber(num: number): string {
+        if (Number.isInteger(num)) {
+            return num.toLocaleString();
+        }
+        return num.toLocaleString(undefined, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2
+        });
+    }
+
+    private _getColumns(): NormalizedColumn[] {
+        const rawColumns = this.grid?.getVisibleColumns?.()
+            ?? this.grid?.columns
+            ?? [];
+
+        return typeof rawColumns === 'function'
+            ? (rawColumns as () => NormalizedColumn[])()
+            : rawColumns;
+    }
+
+    private _refreshStats(): void {
+        if (!this._statsEl) return;
+
+        const columns = this._getColumns();
+
+        for (const col of columns) {
+            if (!(col as any).summary) continue;
+
+            const cell = this._statsEl.querySelector(`[data-col-id="${col._id}"]`) as HTMLElement | null;
+            if (cell) {
+                this._updateStatCell(cell, col);
+            }
+        }
+    }
+
+    private _buildPageInfo(): any {
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-grid-footer-info',
+            _ezAfterRender: (el: HTMLElement) => {
+                this._infoEl = el;
+                this._updatePageInfo();
+            }
+        };
+    }
+
+    private _updatePageInfo(): void {
+        if (!this._infoEl) return;
+
+        const state = this.grid?.controller?.state;
+        if (!state) {
+            this._infoEl.textContent = '';
+            return;
+        }
+
+        const { page, pageSize, total } = state;
+        const start = total === 0 ? 0 : (page - 1) * pageSize + 1;
+        const end = Math.min(page * pageSize, total);
+
+        this._infoEl.textContent = `${start} - ${end} of ${total}`;
+    }
+
+    private _buildPageSizeSelector(): any {
+        const currentSize = this.grid?.controller?.state?.pageSize ?? 25;
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-grid-footer-pagesize',
+            layout: 'hbox',
+            items: [
+                {
+                    eztype: 'EzLabel',
+                    text: 'Per page:',
+                    cls: 'ez-grid-footer-pagesize-label'
+                },
+                {
+                    eztype: 'EzSelect',
+                    cls: 'ez-grid-footer-pagesize-select',
+                    options: this._pageSizeOptions,
+                    value: currentSize,
+                    onChange: (newSize: string) => {
+                        this.grid?.controller?.setPageSize?.(parseInt(newSize, 10));
+                        this.refresh();
+                    },
+                    _ezAfterRender: (el: HTMLElement, instance: any) => {
+                        this._pageSizeInstance = instance;
+                    }
+                }
+            ]
+        };
+    }
+
+    private _buildNavigationButtons(): any {
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-grid-footer-nav',
+            layout: 'hbox',
+            items: [
+                {
+                    eztype: 'button',
+                    cls: 'ez-grid-footer-nav-btn',
+                    text: '«',
+                    attrs: { title: 'First page' },
+                    _ezAfterRender: (el: HTMLButtonElement) => {
+                        this._btnFirst = el;
+                        el.addEventListener('click', () => this._goToPage(1));
+                    }
+                },
+                {
+                    eztype: 'button',
+                    cls: 'ez-grid-footer-nav-btn',
+                    text: '‹',
+                    attrs: { title: 'Previous page' },
+                    _ezAfterRender: (el: HTMLButtonElement) => {
+                        this._btnPrev = el;
+                        el.addEventListener('click', () => {
+                            const page = this.grid?.controller?.state?.page ?? 1;
+                            this._goToPage(page - 1);
+                        });
+                    }
+                },
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-grid-footer-page-indicator',
+                    _ezAfterRender: (el: HTMLElement) => {
+                        this._pageIndicatorEl = el;
+                        this._updatePageIndicator();
+                    }
+                },
+                {
+                    eztype: 'button',
+                    cls: 'ez-grid-footer-nav-btn',
+                    text: '›',
+                    attrs: { title: 'Next page' },
+                    _ezAfterRender: (el: HTMLButtonElement) => {
+                        this._btnNext = el;
+                        el.addEventListener('click', () => {
+                            const page = this.grid?.controller?.state?.page ?? 1;
+                            this._goToPage(page + 1);
+                        });
+                    }
+                },
+                {
+                    eztype: 'button',
+                    cls: 'ez-grid-footer-nav-btn',
+                    text: '»',
+                    attrs: { title: 'Last page' },
+                    _ezAfterRender: (el: HTMLButtonElement) => {
+                        this._btnLast = el;
+                        el.addEventListener('click', () => {
+                            const totalPages = this._getTotalPages();
+                            this._goToPage(totalPages);
+                        });
+                    }
+                },
+                {
+                    eztype: 'button',
+                    cls: 'ez-grid-footer-nav-btn ez-grid-footer-reload-btn',
+                    text: '↻',
+                    attrs: { title: 'Reload' },
+                    _ezAfterRender: (el: HTMLButtonElement) => {
+                        this._btnReload = el;
+                        el.addEventListener('click', () => {
+                            void this.grid?.refreshBody?.();
+                        });
+                    }
+                }
+            ]
+        };
+    }
+
+    private _goToPage(page: number): void {
+        const totalPages = this._getTotalPages();
+        const safePage = Math.max(1, Math.min(page, totalPages));
+
+        this.grid?.controller?.setPage?.(safePage);
+        this.refresh();
+    }
+
+    private _getTotalPages(): number {
+        const state = this.grid?.controller?.state;
+        if (!state) return 1;
+
+        const { pageSize, total } = state;
+        return Math.max(1, Math.ceil(total / pageSize));
+    }
+
+    private _updatePageIndicator(): void {
+        if (!this._pageIndicatorEl) return;
+
+        const state = this.grid?.controller?.state;
+        if (!state) {
+            this._pageIndicatorEl.textContent = '1 / 1';
+            return;
+        }
+
+        const { page } = state;
+        const totalPages = this._getTotalPages();
+
+        this._pageIndicatorEl.textContent = `${page} / ${totalPages}`;
+    }
+
+    private _updateButtonStates(): void {
+        const state = this.grid?.controller?.state;
+        const page = state?.page ?? 1;
+        const totalPages = this._getTotalPages();
+
+        const isFirst = page <= 1;
+        const isLast = page >= totalPages;
+
+        if (this._btnFirst) this._btnFirst.disabled = isFirst;
+        if (this._btnPrev) this._btnPrev.disabled = isFirst;
+        if (this._btnNext) this._btnNext.disabled = isLast;
+        if (this._btnLast) this._btnLast.disabled = isLast;
+    }
+
+    refresh(): void {
+        this._updatePageInfo();
+        this._updatePageIndicator();
+        this._updateButtonStates();
+        this._refreshStats();
+
+        // Update pageSize select
+        if (this._pageSizeInstance) {
+            const currentSize = this.grid?.controller?.state?.pageSize ?? 25;
+            this._pageSizeInstance.setValue(currentSize);
+        }
+    }
+}

package/components/grid/header/EzGridHeader.scss

@@ -0,0 +1,199 @@
+// ==========================================================
+// EzGridHeader
+// ==========================================================
+
+.ez-grid-header {
+  display: flex;
+  align-items: stretch;
+
+  background-color: var(--ez-grid-surface);
+  border-bottom: 1px solid var(--ez-grid-border);
+
+  min-height: var(--ez-grid-header-height);
+
+  // ----------------------------------------------------------
+  // Header cells
+  // ----------------------------------------------------------
+  .ez-grid-header-cell {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    padding: var(--ez-grid-cell-padding);
+    height: var(--ez-grid-header-height);
+    box-sizing: border-box;
+
+    font-size: var(--ez-grid-font-size);
+    font-weight: var(--ez-grid-font-weight-semibold);
+    color: var(--ez-grid-text-secondary);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    user-select: none;
+
+    // Subtle separator between columns
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      top: 10px;
+      right: 0;
+      width: 1px;
+      height: calc(100% - 20px);
+      background-color: var(--ez-grid-border-light);
+    }
+
+    // Hover state
+    &:hover {
+      background-color: var(--ez-grid-surface-hover);
+      cursor: pointer;
+    }
+
+    // --------------------------------------------------------
+    // Alignment helpers
+    // --------------------------------------------------------
+    &.align-left {
+      justify-content: flex-start;
+
+      .ez-grid-header-text {
+        text-align: left;
+      }
+    }
+
+    &.align-center {
+      justify-content: center;
+
+      .ez-grid-header-text {
+        text-align: center;
+      }
+    }
+
+    &.align-right {
+      justify-content: flex-end;
+
+      .ez-grid-header-text {
+        text-align: right;
+      }
+    }
+
+    // --------------------------------------------------------
+    // Header text
+    // --------------------------------------------------------
+    .ez-grid-header-text {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    // --------------------------------------------------------
+    // Sort icon
+    // --------------------------------------------------------
+    .ez-grid-header-sort-icon {
+      margin-left: 6px;
+      font-size: 11px;
+      opacity: 0.4;
+      color: var(--ez-grid-text-muted);
+
+      transition: opacity 0.15s ease,
+                  transform 0.15s ease,
+                  color 0.15s ease;
+    }
+
+    // --------------------------------------------------------
+    // Sorted states
+    // --------------------------------------------------------
+    &.is-sorted {
+      background-color: var(--ez-grid-surface-hover);
+      color: var(--ez-grid-text);
+
+      .ez-grid-header-sort-icon {
+        opacity: 1;
+        color: var(--ez-grid-primary);
+      }
+    }
+
+    &.is-sort-asc {
+      .ez-grid-header-sort-icon {
+        transform: translateY(-1px);
+      }
+    }
+
+    &.is-sort-desc {
+      .ez-grid-header-sort-icon {
+        transform: translateY(1px);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Resize handle
+    // --------------------------------------------------------
+    &.is-resizable {
+      .ez-grid-resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 6px;
+        height: 100%;
+        cursor: col-resize;
+        z-index: 10;
+
+        // Hover indicator
+        &::after {
+          content: '';
+          position: absolute;
+          top: 8px;
+          right: 2px;
+          width: 2px;
+          height: calc(100% - 16px);
+          background-color: transparent;
+          border-radius: 1px;
+          transition: background-color 0.15s ease;
+        }
+
+        &:hover::after {
+          background-color: var(--ez-grid-primary);
+        }
+      }
+
+      // Hide separator when resizable
+      &:not(:last-child)::after {
+        display: none;
+      }
+    }
+
+    // --------------------------------------------------------
+    // Drag & Drop reorder
+    // --------------------------------------------------------
+    &.is-reorderable {
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+
+    &.is-dragging {
+      opacity: 0.5;
+      cursor: grabbing;
+    }
+
+    &.drop-before {
+      box-shadow: inset 3px 0 0 var(--ez-grid-primary);
+    }
+
+    &.drop-after {
+      box-shadow: inset -3px 0 0 var(--ez-grid-primary);
+    }
+  }
+}
+
+// Global resize cursor (applied to body during resize)
+body.ez-grid-resizing {
+  cursor: col-resize;
+  user-select: none;
+
+  * {
+    cursor: col-resize;
+  }
+}