ezfw-core 1.0.21 → 1.0.23

package/components/kanban/card/EzKanbanCard.ts

@@ -0,0 +1,275 @@
+import styles from './EzKanbanCard.module.scss';
+import { cx } from '../../../utils/cssModules.js';
+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';
+
+const cls = cx(styles);
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+    define(name: string, cls: unknown): void;
+    dialog: {
+        open(opts: unknown): Promise<unknown>;
+    };
+};
+
+interface EzKanbanCardConfig {
+    card: KanbanCard;
+    column: NormalizedColumn;
+    kanbanController: EzKanbanController;
+    kanbanDragDrop: EzKanbanDragDrop;
+    kanbanConfig: EzKanbanConfig;
+    [key: string]: unknown;
+}
+
+export class EzKanbanCard extends EzBaseComponent {
+    declare config: EzKanbanCardConfig;
+
+    async render(): Promise<HTMLElement> {
+        const { card, column, kanbanController, kanbanDragDrop, kanbanConfig } = this.config;
+
+        if (kanbanConfig.cardRender) {
+            const customConfig = kanbanConfig.cardRender(card, column);
+            return await ez._createElement(customConfig);
+        }
+
+        const items: unknown[] = await this._buildContentItems();
+
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: this._getCardClasses(),
+            'data-card-id': String(card.id),
+            draggable: kanbanConfig.cardsReorderable !== false,
+            items,
+            onClick: () => kanbanConfig.onCardClick?.(card),
+            onDblClick: () => {
+                if (kanbanConfig.onCardDoubleClick) {
+                    kanbanConfig.onCardDoubleClick(card);
+                } else if (kanbanConfig.cardsEditable !== false) {
+                    this._openEditDialog();
+                }
+            }
+        }) as HTMLElement;
+
+        if (kanbanConfig.cardsReorderable !== false) {
+            el.addEventListener('dragstart', (e) => {
+                kanbanDragDrop.handleCardDragStart(e, card, column._id);
+            });
+
+            el.addEventListener('dragend', () => {
+                kanbanDragDrop.handleCardDragEnd();
+            });
+        }
+
+        return el;
+    }
+
+    private _getCardClasses(): string {
+        const { card } = this.config;
+        const classes = ['ez-kanban-card', cls('card')];
+
+        if (card.priority) {
+            classes.push(cls(card.priority));
+            classes.push(`priority-${card.priority}`);
+        }
+
+        return classes.filter(Boolean).join(' ');
+    }
+
+    private async _buildContentItems(): Promise<unknown[]> {
+        const { card, kanbanConfig } = this.config;
+        const items: unknown[] = [];
+
+        // Cover image
+        if (kanbanConfig.showCoverImage && card.coverImage) {
+            items.push({
+                eztype: 'img',
+                cls: cls('cover'),
+                src: card.coverImage,
+                alt: ''
+            });
+        }
+
+        // Labels
+        if (kanbanConfig.showLabels !== false && card.labels?.length) {
+            items.push({
+                eztype: 'div',
+                cls: cls('labels'),
+                items: card.labels.map(label => ({
+                    eztype: 'span',
+                    cls: cls('label'),
+                    style: { backgroundColor: label.color },
+                    text: label.text
+                }))
+            });
+        }
+
+        // Title
+        items.push({
+            eztype: 'div',
+            cls: cls('title'),
+            text: card.title
+        });
+
+        // Description
+        if (card.description) {
+            const maxLen = 100;
+            const descText = card.description.length > maxLen
+                ? card.description.substring(0, maxLen) + '...'
+                : card.description;
+
+            items.push({
+                eztype: 'div',
+                cls: cls('description'),
+                text: descText
+            });
+        }
+
+        // Footer
+        const footerItems = this._buildFooterItems();
+        if (footerItems.length > 0) {
+            items.push({
+                eztype: 'div',
+                cls: cls('footer'),
+                items: footerItems
+            });
+        }
+
+        return items;
+    }
+
+    private _buildFooterItems(): unknown[] {
+        const { card, kanbanConfig } = this.config;
+        const items: unknown[] = [];
+
+        // Due date
+        if (kanbanConfig.showDueDate !== false && card.dueDate) {
+            const date = new Date(card.dueDate);
+            const isOverdue = date < new Date();
+
+            items.push({
+                eztype: 'span',
+                cls: isOverdue ? [cls('dueDate'), cls('overdue')].join(' ') : cls('dueDate'),
+                items: [
+                    { eztype: 'i', cls: 'fa-regular fa-calendar' },
+                    { eztype: 'span', text: this._formatDate(date) }
+                ]
+            });
+        }
+
+        // Checklist
+        if (kanbanConfig.showChecklist && card.checklist) {
+            items.push({
+                eztype: 'span',
+                cls: cls('meta'),
+                items: [
+                    { eztype: 'i', cls: 'fa-regular fa-square-check' },
+                    { eztype: 'span', text: `${card.checklist.completed}/${card.checklist.total}` }
+                ]
+            });
+        }
+
+        // Attachments
+        if (kanbanConfig.showAttachments && card.attachments) {
+            items.push({
+                eztype: 'span',
+                cls: cls('meta'),
+                items: [
+                    { eztype: 'i', cls: 'fa-solid fa-paperclip' },
+                    { eztype: 'span', text: String(card.attachments) }
+                ]
+            });
+        }
+
+        // Comments
+        if (kanbanConfig.showComments && card.comments) {
+            items.push({
+                eztype: 'span',
+                cls: cls('meta'),
+                items: [
+                    { eztype: 'i', cls: 'fa-regular fa-comment' },
+                    { eztype: 'span', text: String(card.comments) }
+                ]
+            });
+        }
+
+        // Assignees
+        if (kanbanConfig.showAssignee !== false) {
+            const assignees = card.assignees || (card.assignee ? [card.assignee] : []);
+
+            if (assignees.length > 0) {
+                // Spacer
+                items.push({
+                    eztype: 'div',
+                    style: { flex: '1' }
+                });
+
+                const avatarItems: unknown[] = assignees.slice(0, 3).map(assignee => {
+                    if (assignee.avatar) {
+                        return {
+                            eztype: 'div',
+                            cls: cls('avatar'),
+                            title: assignee.name,
+                            items: [{
+                                eztype: 'img',
+                                src: assignee.avatar,
+                                alt: assignee.name
+                            }]
+                        };
+                    } else {
+                        return {
+                            eztype: 'div',
+                            cls: cls('avatar'),
+                            title: assignee.name,
+                            text: assignee.name.charAt(0).toUpperCase()
+                        };
+                    }
+                });
+
+                if (assignees.length > 3) {
+                    avatarItems.push({
+                        eztype: 'div',
+                        cls: [cls('avatar'), cls('avatarMore')].join(' '),
+                        text: `+${assignees.length - 3}`
+                    });
+                }
+
+                items.push({
+                    eztype: 'div',
+                    cls: cls('assignees'),
+                    items: avatarItems
+                });
+            }
+        }
+
+        return items;
+    }
+
+    private _formatDate(date: Date): string {
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return `${months[date.getMonth()]} ${date.getDate()}`;
+    }
+
+    private _openEditDialog(): void {
+        const { card, column, kanbanController, kanbanConfig } = this.config;
+
+        ez.dialog.open({
+            title: 'Edit Card',
+            size: 'md',
+            items: [{
+                eztype: 'EzKanbanCardEditor',
+                card,
+                columnId: column._id,
+                availableLabels: kanbanConfig.availableLabels,
+                availableAssignees: kanbanConfig.availableAssignees,
+                onSave: (cardData: Partial<KanbanCard>) => {
+                    kanbanController.updateCard(card.id, cardData);
+                }
+            }]
+        });
+    }
+}
+
+ez.define('EzKanbanCard', EzKanbanCard);

package/components/kanban/card/EzKanbanCardEditor.ts

@@ -0,0 +1,209 @@
+import { EzBaseComponent } from '../../EzBaseComponent.js';
+import type { KanbanCard, KanbanLabel, KanbanAssignee, KanbanPriority } from '../EzKanbanTypes.js';
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+    define(name: string, cls: unknown): void;
+};
+
+interface EzKanbanCardEditorConfig {
+    card?: KanbanCard;
+    columnId: string;
+    availableLabels?: KanbanLabel[];
+    availableAssignees?: KanbanAssignee[];
+    onSave?: (data: Partial<KanbanCard>) => void;
+    [key: string]: unknown;
+}
+
+export class EzKanbanCardEditor extends EzBaseComponent {
+    declare config: EzKanbanCardEditorConfig;
+
+    private _formData: Partial<KanbanCard> = {};
+    private _selectedLabels: Set<string | number> = new Set();
+
+    async render(): Promise<HTMLElement> {
+        const { card, availableLabels, availableAssignees } = this.config;
+
+        this._formData = card ? { ...card } : {};
+        this._selectedLabels = new Set((card?.labels || []).map(l => l.id));
+
+        const items: unknown[] = [];
+
+        // Title input
+        items.push({
+            eztype: 'EzInput',
+            label: 'Title',
+            value: card?.title || '',
+            placeholder: 'Card title',
+            required: true,
+            onInput: (value: string) => {
+                this._formData.title = value;
+            }
+        });
+
+        // Description textarea
+        items.push({
+            eztype: 'EzTextarea',
+            label: 'Description',
+            value: card?.description || '',
+            placeholder: 'Add a description...',
+            rows: 3,
+            onInput: (value: string) => {
+                this._formData.description = value;
+            }
+        });
+
+        // Priority and Due Date row
+        items.push({
+            eztype: 'div',
+            style: { display: 'flex', gap: '16px' },
+            items: [
+                {
+                    eztype: 'EzSelect',
+                    label: 'Priority',
+                    value: card?.priority || 'none',
+                    options: [
+                        { value: 'none', text: 'None' },
+                        { value: 'low', text: 'Low' },
+                        { value: 'medium', text: 'Medium' },
+                        { value: 'high', text: 'High' },
+                        { value: 'critical', text: 'Critical' }
+                    ],
+                    flex: 1,
+                    onChange: (value: KanbanPriority) => {
+                        this._formData.priority = value;
+                    }
+                },
+                {
+                    eztype: 'EzDatePicker',
+                    label: 'Due Date',
+                    value: card?.dueDate ? new Date(card.dueDate) : null,
+                    flex: 1,
+                    onChange: (value: Date | null) => {
+                        this._formData.dueDate = value?.toISOString() || null;
+                    }
+                }
+            ]
+        });
+
+        // Labels section
+        if (availableLabels?.length) {
+            items.push(await this._buildLabelsSection(availableLabels));
+        }
+
+        // Assignee select
+        if (availableAssignees?.length) {
+            items.push({
+                eztype: 'EzSelect',
+                label: 'Assignee',
+                value: card?.assignee?.id || '',
+                options: [
+                    { value: '', text: 'Unassigned' },
+                    ...availableAssignees.map(a => ({ value: a.id, text: a.name }))
+                ],
+                onChange: (value: string | number) => {
+                    if (value) {
+                        this._formData.assignee = availableAssignees.find(a => a.id === value) || null;
+                    } else {
+                        this._formData.assignee = null;
+                    }
+                }
+            });
+        }
+
+        // Actions row
+        items.push({
+            eztype: 'div',
+            style: { display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '8px' },
+            items: [{
+                eztype: 'EzButton',
+                text: card ? 'Save Changes' : 'Create Card',
+                variant: 'primary',
+                onClick: () => this._handleSave()
+            }]
+        });
+
+        const form = await ez._createElement({
+            eztype: 'div',
+            cls: 'ez-kanban-card-editor',
+            style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' },
+            items
+        }) as HTMLElement;
+
+        return form;
+    }
+
+    private async _buildLabelsSection(availableLabels: KanbanLabel[]): Promise<unknown> {
+        const labelButtons = availableLabels.map(label => ({
+            eztype: 'button',
+            type: 'button',
+            style: {
+                padding: '4px 12px',
+                borderRadius: '4px',
+                border: `2px solid ${this._selectedLabels.has(label.id) ? label.color : 'transparent'}`,
+                background: label.color,
+                color: 'white',
+                fontSize: '12px',
+                cursor: 'pointer',
+                transition: 'border-color 0.15s'
+            },
+            text: label.text,
+            onClick: (e: Event) => {
+                const btn = e.currentTarget as HTMLButtonElement;
+                if (this._selectedLabels.has(label.id)) {
+                    this._selectedLabels.delete(label.id);
+                    btn.style.borderColor = 'transparent';
+                } else {
+                    this._selectedLabels.add(label.id);
+                    btn.style.borderColor = label.color;
+                }
+                this._formData.labels = availableLabels.filter(l => this._selectedLabels.has(l.id));
+            }
+        }));
+
+        return {
+            eztype: 'div',
+            items: [
+                {
+                    eztype: 'label',
+                    style: { fontSize: '13px', fontWeight: '500', marginBottom: '8px', display: 'block' },
+                    text: 'Labels'
+                },
+                {
+                    eztype: 'div',
+                    style: { display: 'flex', flexWrap: 'wrap', gap: '8px' },
+                    items: labelButtons
+                }
+            ]
+        };
+    }
+
+    private _handleSave(): void {
+        if (this._formData.title?.trim()) {
+            this.config.onSave?.(this._formData);
+            if (this.el) {
+                const dialog = this._findParentDialog(this.el);
+                if (dialog) {
+                    (dialog as unknown as { close: () => void }).close();
+                }
+            }
+        }
+    }
+
+    private _findParentDialog(el: HTMLElement): HTMLElement | null {
+        let current: HTMLElement | null = el;
+        while (current) {
+            if (current.classList.contains('ez-dialog')) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+
+    getData(): Partial<KanbanCard> {
+        return this._formData;
+    }
+}
+
+ez.define('EzKanbanCardEditor', EzKanbanCardEditor);