ezfw-core 1.0.21 → 1.0.23

package/components/kanban/column/EzKanbanColumn.ts

@@ -0,0 +1,253 @@
+import { EzBaseComponent } from '../../EzBaseComponent.js';
+import type { EzKanbanController } from '../state/EzKanbanController.js';
+import type { EzKanbanDragDrop } from '../state/EzKanbanDragDrop.js';
+import type { EzKanbanConfig, NormalizedColumn, KanbanCard } from '../EzKanbanTypes.js';
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+    define(name: string, cls: unknown): void;
+    dialog: {
+        prompt(opts: { title: string; placeholder: string; value?: string }): Promise<string | null>;
+        danger(opts: { title: string; message: string }): Promise<boolean>;
+        open(opts: unknown): Promise<unknown>;
+    };
+};
+
+interface EzKanbanColumnConfig {
+    column: NormalizedColumn;
+    kanbanController: EzKanbanController;
+    kanbanDragDrop: EzKanbanDragDrop;
+    kanbanConfig: EzKanbanConfig;
+    [key: string]: unknown;
+}
+
+export class EzKanbanColumn extends EzBaseComponent {
+    declare config: EzKanbanColumnConfig;
+
+    private _el: HTMLElement | null = null;
+    private _cardsContainer: HTMLElement | null = null;
+
+    async render(): Promise<HTMLElement> {
+        const { column, kanbanController, kanbanDragDrop, kanbanConfig } = this.config;
+
+        const width = kanbanConfig.columnWidth || 280;
+        const minWidth = kanbanConfig.columnMinWidth || 250;
+        const maxWidth = kanbanConfig.columnMaxWidth || 400;
+
+        const items: unknown[] = [];
+
+        // Header
+        items.push(await this._buildHeaderConfig());
+
+        // Cards container
+        const cardsContainerConfig = {
+            eztype: 'div',
+            cls: 'ez-kanban-column-cards',
+            items: await this._buildCardsConfigs()
+        };
+        items.push(cardsContainerConfig);
+
+        // Add card button
+        if (kanbanConfig.addCardEnabled !== false && !column.locked) {
+            items.push({
+                eztype: 'button',
+                cls: 'ez-kanban-add-card',
+                items: [
+                    { eztype: 'i', cls: 'fa-solid fa-plus' },
+                    { eztype: 'span', text: 'Add card' }
+                ],
+                onClick: () => this._openCardDialog()
+            });
+        }
+
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: 'ez-kanban-column',
+            'data-column-id': column._id,
+            style: {
+                width: `${width}px`,
+                minWidth: `${minWidth}px`,
+                maxWidth: `${maxWidth}px`,
+                '--column-color': column.color || undefined
+            },
+            items
+        }) as HTMLElement;
+
+        this._el = el;
+        this._cardsContainer = el.querySelector('.ez-kanban-column-cards');
+
+        this._setupDragDrop();
+
+        return el;
+    }
+
+    private async _buildHeaderConfig(): Promise<unknown> {
+        const { column, kanbanController, kanbanConfig } = this.config;
+        const cards = kanbanController.getFilteredCards(column._id);
+
+        const countText = column.limit
+            ? `${cards.length}/${column.limit}`
+            : String(cards.length);
+
+        const countCls = column.limit && cards.length >= column.limit
+            ? 'column-count at-limit'
+            : 'column-count';
+
+        const actionItems: unknown[] = [];
+
+        if (kanbanConfig.columnsEditable !== false) {
+            actionItems.push({
+                eztype: 'button',
+                cls: 'column-action',
+                title: 'Edit column',
+                items: [{ eztype: 'i', cls: 'fa-solid fa-pen' }],
+                onClick: (e: Event) => {
+                    e.stopPropagation();
+                    this._editColumn();
+                }
+            });
+        }
+
+        if (kanbanConfig.columnsDeletable !== false) {
+            actionItems.push({
+                eztype: 'button',
+                cls: 'column-action column-action--danger',
+                title: 'Delete column',
+                items: [{ eztype: 'i', cls: 'fa-solid fa-trash' }],
+                onClick: (e: Event) => {
+                    e.stopPropagation();
+                    this._deleteColumn();
+                }
+            });
+        }
+
+        return {
+            eztype: 'div',
+            cls: 'ez-kanban-column-header',
+            items: [
+                { eztype: 'span', cls: 'column-title', text: column.title },
+                { eztype: 'span', cls: countCls, text: countText },
+                { eztype: 'div', cls: 'column-actions', items: actionItems }
+            ]
+        };
+    }
+
+    private async _buildCardsConfigs(): Promise<unknown[]> {
+        const { column, kanbanController, kanbanDragDrop, kanbanConfig } = this.config;
+        const cards = kanbanController.getFilteredCards(column._id);
+
+        return cards.map(card => ({
+            eztype: 'EzKanbanCard',
+            card,
+            column,
+            kanbanController,
+            kanbanDragDrop,
+            kanbanConfig
+        }));
+    }
+
+    private _setupDragDrop(): void {
+        const { column, kanbanController, kanbanDragDrop, kanbanConfig } = this.config;
+
+        if (kanbanConfig.columnsReorderable !== false && this._el) {
+            const header = this._el.querySelector('.ez-kanban-column-header') as HTMLElement;
+            if (header) {
+                header.draggable = true;
+
+                header.addEventListener('dragstart', (e) => {
+                    kanbanDragDrop.handleColumnDragStart(e, column);
+                });
+
+                header.addEventListener('dragend', () => {
+                    kanbanDragDrop.handleColumnDragEnd();
+                });
+            }
+
+            this._el.addEventListener('dragover', (e) => {
+                const ctx = kanbanController.getDragContext();
+                if (ctx?.type === 'column') {
+                    kanbanDragDrop.handleColumnDragOver(e, column);
+                }
+            });
+
+            this._el.addEventListener('drop', (e) => {
+                const ctx = kanbanController.getDragContext();
+                if (ctx?.type === 'column') {
+                    kanbanDragDrop.handleColumnDrop(e, column);
+                }
+            });
+        }
+
+        if (kanbanConfig.cardsReorderable !== false && this._cardsContainer) {
+            this._cardsContainer.addEventListener('dragover', (e) => {
+                const ctx = kanbanController.getDragContext();
+                if (ctx?.type === 'card') {
+                    kanbanDragDrop.handleCardDragOver(e, column._id);
+                }
+            });
+
+            this._cardsContainer.addEventListener('dragleave', (e) => {
+                kanbanDragDrop.handleCardDragLeave(e);
+            });
+
+            this._cardsContainer.addEventListener('drop', (e) => {
+                const ctx = kanbanController.getDragContext();
+                if (ctx?.type === 'card') {
+                    kanbanDragDrop.handleCardDrop(e, column._id, this._cardsContainer!);
+                }
+            });
+        }
+    }
+
+    private _editColumn(): void {
+        const { column, kanbanController } = this.config;
+
+        ez.dialog.prompt({
+            title: 'Edit Column',
+            placeholder: 'Column name',
+            value: column.title
+        }).then((name: string | null) => {
+            if (name && name !== column.title) {
+                kanbanController.updateColumn(column._id, { title: name });
+            }
+        });
+    }
+
+    private _deleteColumn(): void {
+        const { column, kanbanController } = this.config;
+
+        ez.dialog.danger({
+            title: 'Delete Column',
+            message: `Are you sure you want to delete "${column.title}"? All cards in this column will be deleted.`
+        }).then((confirmed: boolean) => {
+            if (confirmed) {
+                kanbanController.deleteColumn(column._id);
+            }
+        });
+    }
+
+    private _openCardDialog(card?: KanbanCard): void {
+        const { column, kanbanController, kanbanConfig } = this.config;
+
+        ez.dialog.open({
+            title: card ? 'Edit Card' : 'New Card',
+            size: 'md',
+            items: [{
+                eztype: 'EzKanbanCardEditor',
+                card,
+                columnId: column._id,
+                availableLabels: kanbanConfig.availableLabels,
+                availableAssignees: kanbanConfig.availableAssignees,
+                onSave: (cardData: Partial<KanbanCard>) => {
+                    if (card) {
+                        kanbanController.updateCard(card.id, cardData);
+                    } else {
+                        kanbanController.addCard(column._id, cardData);
+                    }
+                }
+            }]
+        });
+    }
+}
+
+ez.define('EzKanbanColumn', EzKanbanColumn);

package/components/kanban/state/EzKanbanController.ts

@@ -0,0 +1,373 @@
+import { signal, computed } from '@preact/signals-core';
+import type {
+    KanbanCard,
+    KanbanColumn,
+    NormalizedColumn,
+    KanbanControllerState,
+    KanbanFilterConfig,
+    DragContext,
+    EzKanbanConfig
+} from '../EzKanbanTypes.js';
+
+export class EzKanbanController {
+    private _columns = signal<NormalizedColumn[]>([]);
+    private _loading = signal(false);
+    private _error = signal<Error | null>(null);
+    private _filters = signal<KanbanFilterConfig>({});
+    private _dragContext = signal<DragContext | null>(null);
+
+    private _listeners: Record<string, Array<(payload: unknown) => void>> = {};
+    private _config: EzKanbanConfig;
+
+    constructor(config: EzKanbanConfig) {
+        this._config = config;
+
+        if (config.columns || config.cards) {
+            this.setData(config.columns || [], config.cards || []);
+        }
+    }
+
+    get state(): KanbanControllerState {
+        return {
+            columns: this._columns.value,
+            loading: this._loading.value,
+            error: this._error.value,
+            filters: this._filters.value,
+            dragContext: this._dragContext.value
+        };
+    }
+
+    get columns() {
+        return computed(() => this._columns.value);
+    }
+
+    get loading() {
+        return computed(() => this._loading.value);
+    }
+
+    on(event: string, fn: (payload: unknown) => void): () => void {
+        (this._listeners[event] ??= []).push(fn);
+        return () => this.off(event, fn);
+    }
+
+    off(event: string, fn: (payload: unknown) => void): void {
+        if (!this._listeners[event]) return;
+        this._listeners[event] = this._listeners[event].filter(l => l !== fn);
+    }
+
+    emit(event: string, payload: unknown): void {
+        this._listeners[event]?.forEach(fn => fn(payload));
+    }
+
+    setData(columns: KanbanColumn[], cards: KanbanCard[]): void {
+        const normalized = this._normalizeColumns(columns, cards);
+        this._columns.value = normalized;
+        this.emit('datachange', normalized);
+    }
+
+    async load(): Promise<void> {
+        const remote = this._config.remote;
+        if (!remote) return;
+
+        this._loading.value = true;
+        this.emit('loadingchange', true);
+
+        try {
+            const result = await (window as unknown as { ez: { _api: { request: (url: string) => Promise<unknown> } } }).ez._api.request(remote.api);
+
+            const source = remote.source || {};
+            const columnsPath = source.columnsPath || 'columns';
+            const cardsPath = source.cardsPath || 'cards';
+
+            const columns = this._getNestedValue(result, columnsPath) as KanbanColumn[];
+            const cards = this._getNestedValue(result, cardsPath) as KanbanCard[];
+
+            this.setData(columns, cards);
+        } catch (err) {
+            this._error.value = err as Error;
+            this.emit('error', err);
+        } finally {
+            this._loading.value = false;
+            this.emit('loadingchange', false);
+        }
+    }
+
+    async reload(): Promise<void> {
+        return this.load();
+    }
+
+    addCard(columnId: string | number, cardData: Partial<KanbanCard>): KanbanCard {
+        const id = cardData.id || `card-${Date.now()}`;
+        const card: KanbanCard = {
+            id,
+            columnId,
+            title: cardData.title || 'New Card',
+            ...cardData
+        };
+
+        const columns = [...this._columns.value];
+        const colIndex = columns.findIndex(c => c._id === String(columnId));
+
+        if (colIndex !== -1) {
+            columns[colIndex] = {
+                ...columns[colIndex],
+                cards: [card, ...columns[colIndex].cards]
+            };
+            this._columns.value = columns;
+            this.emit('cardcreate', { card, columnId });
+            this.emit('datachange', columns);
+        }
+
+        return card;
+    }
+
+    updateCard(cardId: string | number, updates: Partial<KanbanCard>): KanbanCard | null {
+        const columns = [...this._columns.value];
+        let updatedCard: KanbanCard | null = null;
+
+        for (let i = 0; i < columns.length; i++) {
+            const cardIndex = columns[i].cards.findIndex(c => c.id === cardId);
+            if (cardIndex !== -1) {
+                updatedCard = { ...columns[i].cards[cardIndex], ...updates };
+                columns[i] = {
+                    ...columns[i],
+                    cards: columns[i].cards.map((c, idx) =>
+                        idx === cardIndex ? updatedCard! : c
+                    )
+                };
+                break;
+            }
+        }
+
+        if (updatedCard) {
+            this._columns.value = columns;
+            this.emit('cardupdate', { card: updatedCard, changes: updates });
+            this.emit('datachange', columns);
+        }
+
+        return updatedCard;
+    }
+
+    deleteCard(cardId: string | number): KanbanCard | null {
+        const columns = [...this._columns.value];
+        let deletedCard: KanbanCard | null = null;
+        let columnId: string | null = null;
+
+        for (let i = 0; i < columns.length; i++) {
+            const cardIndex = columns[i].cards.findIndex(c => c.id === cardId);
+            if (cardIndex !== -1) {
+                deletedCard = columns[i].cards[cardIndex];
+                columnId = columns[i]._id;
+                columns[i] = {
+                    ...columns[i],
+                    cards: columns[i].cards.filter(c => c.id !== cardId)
+                };
+                break;
+            }
+        }
+
+        if (deletedCard) {
+            this._columns.value = columns;
+            this.emit('carddelete', { card: deletedCard, columnId });
+            this.emit('datachange', columns);
+        }
+
+        return deletedCard;
+    }
+
+    moveCard(cardId: string | number, toColumnId: string | number, toIndex: number): void {
+        const columns = [...this._columns.value];
+        let movedCard: KanbanCard | null = null;
+        let fromColumnId: string | null = null;
+        let fromIndex = -1;
+
+        for (let i = 0; i < columns.length; i++) {
+            const cardIndex = columns[i].cards.findIndex(c => c.id === cardId);
+            if (cardIndex !== -1) {
+                movedCard = columns[i].cards[cardIndex];
+                fromColumnId = columns[i]._id;
+                fromIndex = cardIndex;
+                columns[i] = {
+                    ...columns[i],
+                    cards: columns[i].cards.filter(c => c.id !== cardId)
+                };
+                break;
+            }
+        }
+
+        if (!movedCard || fromColumnId === null) return;
+
+        const targetColIndex = columns.findIndex(c => c._id === String(toColumnId));
+        if (targetColIndex === -1) return;
+
+        movedCard = { ...movedCard, columnId: toColumnId };
+        const targetCards = [...columns[targetColIndex].cards];
+        targetCards.splice(toIndex, 0, movedCard);
+
+        columns[targetColIndex] = {
+            ...columns[targetColIndex],
+            cards: targetCards
+        };
+
+        this._columns.value = columns;
+        this.emit('cardmove', {
+            card: movedCard,
+            fromColumnId,
+            toColumnId,
+            fromIndex,
+            toIndex
+        });
+        this.emit('datachange', columns);
+    }
+
+    addColumn(columnData: Partial<KanbanColumn>): NormalizedColumn {
+        const id = columnData.id || `col-${Date.now()}`;
+        const column: NormalizedColumn = {
+            id,
+            _id: String(id),
+            title: columnData.title || 'New Column',
+            cards: [],
+            ...columnData
+        };
+
+        this._columns.value = [...this._columns.value, column];
+        this.emit('columncreate', column);
+        this.emit('datachange', this._columns.value);
+
+        return column;
+    }
+
+    updateColumn(columnId: string | number, updates: Partial<KanbanColumn>): NormalizedColumn | null {
+        const columns = [...this._columns.value];
+        const colIndex = columns.findIndex(c => c._id === String(columnId));
+
+        if (colIndex === -1) return null;
+
+        const updated = { ...columns[colIndex], ...updates };
+        columns[colIndex] = updated;
+        this._columns.value = columns;
+
+        this.emit('columnupdate', updated);
+        this.emit('datachange', columns);
+
+        return updated;
+    }
+
+    deleteColumn(columnId: string | number): NormalizedColumn | null {
+        const columns = this._columns.value;
+        const column = columns.find(c => c._id === String(columnId));
+
+        if (!column) return null;
+
+        this._columns.value = columns.filter(c => c._id !== String(columnId));
+        this.emit('columndelete', column);
+        this.emit('datachange', this._columns.value);
+
+        return column;
+    }
+
+    moveColumn(columnId: string | number, toIndex: number): void {
+        const columns = [...this._columns.value];
+        const fromIndex = columns.findIndex(c => c._id === String(columnId));
+
+        if (fromIndex === -1 || fromIndex === toIndex) return;
+
+        const [column] = columns.splice(fromIndex, 1);
+        columns.splice(toIndex, 0, column);
+
+        this._columns.value = columns;
+        this.emit('columnmove', { column, fromIndex, toIndex });
+        this.emit('datachange', columns);
+    }
+
+    setFilters(filters: KanbanFilterConfig): void {
+        this._filters.value = { ...this._filters.value, ...filters };
+        this.emit('filterchange', this._filters.value);
+    }
+
+    clearFilters(): void {
+        this._filters.value = {};
+        this.emit('filterchange', {});
+    }
+
+    getFilters(): KanbanFilterConfig {
+        return this._filters.value;
+    }
+
+    getFilteredCards(columnId: string): KanbanCard[] {
+        const column = this._columns.value.find(c => c._id === columnId);
+        if (!column) return [];
+
+        const filters = this._filters.value;
+        let cards = [...column.cards];
+
+        if (filters.search) {
+            const search = filters.search.toLowerCase();
+            cards = cards.filter(c =>
+                c.title.toLowerCase().includes(search) ||
+                c.description?.toLowerCase().includes(search)
+            );
+        }
+
+        if (filters.assignees?.length) {
+            cards = cards.filter(c => {
+                if (c.assignee && filters.assignees!.includes(c.assignee.id)) return true;
+                if (c.assignees?.some(a => filters.assignees!.includes(a.id))) return true;
+                return false;
+            });
+        }
+
+        if (filters.labels?.length) {
+            cards = cards.filter(c =>
+                c.labels?.some(l => filters.labels!.includes(l.id))
+            );
+        }
+
+        if (filters.priorities?.length) {
+            cards = cards.filter(c =>
+                c.priority && filters.priorities!.includes(c.priority)
+            );
+        }
+
+        return cards;
+    }
+
+    setDragContext(context: DragContext | null): void {
+        this._dragContext.value = context;
+    }
+
+    getDragContext(): DragContext | null {
+        return this._dragContext.value;
+    }
+
+    findCard(cardId: string | number): KanbanCard | null {
+        for (const col of this._columns.value) {
+            const card = col.cards.find(c => c.id === cardId);
+            if (card) return card;
+        }
+        return null;
+    }
+
+    findCardIndex(cardId: string | number, columnId: string): number {
+        const column = this._columns.value.find(c => c._id === columnId);
+        if (!column) return -1;
+        return column.cards.findIndex(c => c.id === cardId);
+    }
+
+    private _normalizeColumns(columns: KanbanColumn[], cards: KanbanCard[]): NormalizedColumn[] {
+        return columns.map(col => ({
+            ...col,
+            _id: String(col.id),
+            cards: cards.filter(c => String(c.columnId) === String(col.id))
+        }));
+    }
+
+    private _getNestedValue(obj: unknown, path: string): unknown {
+        return path.split('.').reduce((acc, key) => {
+            if (acc && typeof acc === 'object' && key in acc) {
+                return (acc as Record<string, unknown>)[key];
+            }
+            return undefined;
+        }, obj);
+    }
+}