ezfw-core 1.0.0

package/components/dataview/modes/EzDataViewCards.ts

@@ -0,0 +1,322 @@
+import { EzBaseComponent, EzBaseComponentConfig } from '../../EzBaseComponent.js';
+
+declare const ez: {
+    _createChildElements(items: unknown[], controller: string | null, state: unknown): Promise<Node[]>;
+    define(name: string, component: unknown): void;
+};
+
+interface EzStore {
+    state: {
+        data: unknown[];
+        loading: boolean;
+        page: number;
+        pageSize: number;
+        total: number;
+    };
+    on(event: string, callback: (...args: unknown[]) => void): () => void;
+    load(): Promise<void>;
+    reload(): Promise<void>;
+    getTotalPages(): number;
+    isFirstPage(): boolean;
+    isLastPage(): boolean;
+    goToFirstPage(): void;
+    goToPrevPage(): void;
+    goToNextPage(): void;
+    goToLastPage(): void;
+    setPageSize(size: number): void;
+}
+
+interface CardsConfig {
+    columns?: number | 'auto';
+    minWidth?: number;
+    gap?: number;
+    itemRender?: (item: unknown, index: number, meta: { isFirst: boolean; isLast: boolean; isEven: boolean }) => unknown;
+}
+
+export interface EzDataViewCardsConfig extends EzBaseComponentConfig {
+    store?: EzStore;
+    cardsConfig?: CardsConfig;
+}
+
+export class EzDataViewCards extends EzBaseComponent {
+    declare config: EzDataViewCardsConfig;
+    declare el: HTMLElement;
+
+    private _store: EzStore | null;
+    private _cardsConfig: CardsConfig;
+    private _unsubscribers: (() => void)[] = [];
+    private _cardsContainer: HTMLElement | null = null;
+    private _footerEl: HTMLElement | null = null;
+    private _btnFirst: HTMLButtonElement | null = null;
+    private _btnPrev: HTMLButtonElement | null = null;
+    private _btnNext: HTMLButtonElement | null = null;
+    private _btnLast: HTMLButtonElement | null = null;
+    private _pageIndicator: HTMLElement | null = null;
+    private _pageInfoEl: HTMLElement | null = null;
+
+    constructor(config: EzDataViewCardsConfig = {}) {
+        super(config);
+
+        this.config = config;
+        this._store = config.store || null;
+        this._cardsConfig = config.cardsConfig || {};
+    }
+
+    async render(): Promise<HTMLElement> {
+        const el = document.createElement('div');
+        el.className = 'ez-dataview-cards';
+        el.style.display = 'flex';
+        el.style.flexDirection = 'column';
+        el.style.flex = '1';
+        el.style.minHeight = '0';
+        el.style.overflow = 'hidden';
+
+        this._cardsContainer = document.createElement('div');
+        this._cardsContainer.className = 'ez-dataview-cards-grid';
+        this._applyGridStyles();
+
+        this._footerEl = document.createElement('div');
+        this._footerEl.className = 'ez-dataview-cards-footer';
+        this._footerEl.style.padding = '12px 16px';
+        this._footerEl.style.borderTop = '1px solid var(--ez-border)';
+        this._footerEl.style.display = 'flex';
+        this._footerEl.style.alignItems = 'center';
+        this._footerEl.style.gap = '16px';
+
+        el.appendChild(this._cardsContainer);
+        el.appendChild(this._footerEl);
+
+        if (this._store) {
+            this._unsubscribers.push(
+                this._store.on('datachange', () => this._renderCards()),
+                this._store.on('loadingchange', (loading: unknown) => this._onLoadingChange(loading as boolean)),
+                this._store.on('pagechange', () => this._updateFooter())
+            );
+
+            if (this._store.state.data.length > 0) {
+                await this._renderCards();
+            } else if (!this._store.state.loading) {
+                this._store.load();
+            }
+        }
+
+        await this._renderFooter();
+
+        this.el = el;
+        return el;
+    }
+
+    private _applyGridStyles(): void {
+        if (!this._cardsContainer) return;
+
+        const { columns = 'auto', minWidth = 300, gap = 16 } = this._cardsConfig;
+
+        const gridTemplate = columns === 'auto'
+            ? `repeat(auto-fill, minmax(${minWidth}px, 1fr))`
+            : `repeat(${columns}, 1fr)`;
+
+        this._cardsContainer.style.display = 'grid';
+        this._cardsContainer.style.gridTemplateColumns = gridTemplate;
+        this._cardsContainer.style.gap = `${gap}px`;
+        this._cardsContainer.style.padding = '16px';
+        this._cardsContainer.style.flex = '1';
+        this._cardsContainer.style.overflowY = 'auto';
+        this._cardsContainer.style.minHeight = '0';
+        this._cardsContainer.style.alignContent = 'start';
+    }
+
+    private _onLoadingChange(loading: boolean): void {
+        if (loading) {
+            this._showLoading();
+        }
+    }
+
+    private _showLoading(): void {
+        if (!this._cardsContainer) return;
+        this._cardsContainer.innerHTML = `
+            <div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--ez-text-tertiary);">
+                Loading...
+            </div>
+        `;
+    }
+
+    private async _renderCards(): Promise<void> {
+        if (!this._cardsContainer) return;
+
+        this._cardsContainer.innerHTML = '';
+
+        const data = this._store?.state.data || [];
+        const { itemRender } = this._cardsConfig;
+
+        if (!itemRender || data.length === 0) {
+            this._cardsContainer.innerHTML = `
+                <div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--ez-text-tertiary);">
+                    No items to display
+                </div>
+            `;
+            return;
+        }
+
+        const cardConfigs = data.map((item, index) => {
+            return itemRender(item, index, {
+                isFirst: index === 0,
+                isLast: index === data.length - 1,
+                isEven: index % 2 === 0
+            });
+        }).filter(Boolean);
+
+        const children = await ez._createChildElements(cardConfigs, null, null);
+
+        for (const child of children) {
+            if (child instanceof Node) {
+                this._cardsContainer.appendChild(child);
+            }
+        }
+
+        this._updateFooter();
+    }
+
+    private async _renderFooter(): Promise<void> {
+        if (!this._footerEl || !this._store) return;
+
+        const store = this._store;
+
+        const footerItems = [
+            {
+                eztype: 'EzComponent',
+                layout: 'hbox',
+                style: { gap: '4px' },
+                items: [
+                    {
+                        eztype: 'EzButton',
+                        text: '«',
+                        size: 'sm',
+                        variant: 'ghost',
+                        onClick: () => store.goToFirstPage(),
+                        _ezAfterRender: (el: HTMLButtonElement) => { this._btnFirst = el; }
+                    },
+                    {
+                        eztype: 'EzButton',
+                        text: '‹',
+                        size: 'sm',
+                        variant: 'ghost',
+                        onClick: () => store.goToPrevPage(),
+                        _ezAfterRender: (el: HTMLButtonElement) => { this._btnPrev = el; }
+                    },
+                    {
+                        eztype: 'span',
+                        style: { padding: '0 12px', fontSize: '13px', lineHeight: '28px' },
+                        text: `${store.state.page} / ${store.getTotalPages()}`,
+                        _ezAfterRender: (el: HTMLElement) => { this._pageIndicator = el; }
+                    },
+                    {
+                        eztype: 'EzButton',
+                        text: '›',
+                        size: 'sm',
+                        variant: 'ghost',
+                        onClick: () => store.goToNextPage(),
+                        _ezAfterRender: (el: HTMLButtonElement) => { this._btnNext = el; }
+                    },
+                    {
+                        eztype: 'EzButton',
+                        text: '»',
+                        size: 'sm',
+                        variant: 'ghost',
+                        onClick: () => store.goToLastPage(),
+                        _ezAfterRender: (el: HTMLButtonElement) => { this._btnLast = el; }
+                    }
+                ]
+            },
+            { eztype: 'EzComponent', flex: 1 },
+            {
+                eztype: 'EzComponent',
+                layout: 'hbox',
+                style: { alignItems: 'center', gap: '8px' },
+                items: [
+                    {
+                        eztype: 'span',
+                        text: 'Per page:',
+                        style: { fontSize: '13px', color: 'var(--ez-text-secondary)' }
+                    },
+                    {
+                        eztype: 'EzSelect',
+                        size: 'sm',
+                        options: [10, 25, 50, 100],
+                        value: store.state.pageSize,
+                        onChange: (val: string) => store.setPageSize(parseInt(val, 10))
+                    }
+                ]
+            },
+            {
+                eztype: 'span',
+                style: { fontSize: '13px', color: 'var(--ez-text-secondary)' },
+                _ezAfterRender: (el: HTMLElement) => {
+                    this._pageInfoEl = el;
+                    this._updatePageInfo();
+                }
+            }
+        ];
+
+        const children = await ez._createChildElements(footerItems, null, null);
+
+        for (const child of children) {
+            if (child instanceof Node) {
+                this._footerEl.appendChild(child);
+            }
+        }
+
+        this._updateButtonStates();
+    }
+
+    private _updateFooter(): void {
+        this._updatePageIndicator();
+        this._updatePageInfo();
+        this._updateButtonStates();
+    }
+
+    private _updatePageIndicator(): void {
+        if (this._pageIndicator && this._store) {
+            this._pageIndicator.textContent = `${this._store.state.page} / ${this._store.getTotalPages()}`;
+        }
+    }
+
+    private _updatePageInfo(): void {
+        if (this._pageInfoEl && this._store) {
+            const { page, pageSize, total } = this._store.state;
+            const start = total === 0 ? 0 : (page - 1) * pageSize + 1;
+            const end = Math.min(page * pageSize, total);
+            this._pageInfoEl.textContent = `${start} - ${end} of ${total}`;
+        }
+    }
+
+    private _updateButtonStates(): void {
+        if (!this._store) return;
+
+        const isFirst = this._store.isFirstPage();
+        const isLast = this._store.isLastPage();
+
+        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;
+    }
+
+    async refresh(): Promise<void> {
+        if (this._store) {
+            await this._store.reload();
+        }
+    }
+
+    destroy(): void {
+        for (const unsub of this._unsubscribers) {
+            if (typeof unsub === 'function') {
+                unsub();
+            }
+        }
+        this._unsubscribers = [];
+
+        super.destroy();
+    }
+}
+
+ez.define('EzDataViewCards', EzDataViewCards);

package/components/dataview/modes/EzDataViewGrid.ts

@@ -0,0 +1,76 @@
+import { EzBaseComponent, EzBaseComponentConfig } from '../../EzBaseComponent.js';
+
+declare const ez: {
+    _createChildElements(items: unknown[], controller: string | null, state: unknown): Promise<Node[]>;
+    define(name: string, component: unknown): void;
+};
+
+interface EzGridInstance {
+    [key: string]: unknown;
+}
+
+interface EzDataViewInstance {
+    _gridInstance?: EzGridInstance;
+    [key: string]: unknown;
+}
+
+interface GridConfig {
+    [key: string]: unknown;
+}
+
+export interface EzDataViewGridConfig extends EzBaseComponentConfig {
+    gridConfig?: GridConfig;
+    dataView?: EzDataViewInstance;
+    model?: string;
+    remote?: unknown;
+}
+
+export class EzDataViewGrid extends EzBaseComponent {
+    declare config: EzDataViewGridConfig;
+    declare el: HTMLElement;
+
+    private _gridInstance: EzGridInstance | null = null;
+
+    constructor(config: EzDataViewGridConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    async render(): Promise<HTMLElement> {
+        const { gridConfig = {}, dataView, model, remote } = this.config;
+
+        const gridCfg = {
+            eztype: 'EzGrid',
+            flex: 1,
+            model,
+            remote,
+            autoLoad: true,
+            ...gridConfig,
+            title: null,
+            _ezAfterRender: (_el: HTMLElement, instance: EzGridInstance) => {
+                this._gridInstance = instance;
+                if (dataView) {
+                    dataView._gridInstance = instance;
+                }
+            }
+        };
+
+        const children = await ez._createChildElements([gridCfg], null, null);
+
+        if (children[0] instanceof Node) {
+            this.el = children[0] as HTMLElement;
+            return this.el;
+        }
+
+        const el = document.createElement('div');
+        el.textContent = 'Failed to render grid';
+        this.el = el;
+        return el;
+    }
+
+    getGridInstance(): EzGridInstance | null {
+        return this._gridInstance;
+    }
+}
+
+ez.define('EzDataViewGrid', EzDataViewGrid);