trackops 2.0.3 → 2.0.5

package/ui/js/views/board.js

@@ -1,97 +1,121 @@
 /**
- * board.js — Tablero Kanban con drag & drop
+ * board.js — Headless Kanban module (embeddable inside tasks.js)
+ *
+ * Exports:
+ *   renderKanban(tasks, phases, opts)  — returns kanban board HTML (columns + cards only)
+ *   bindKanbanEvents()                 — binds drag-drop, card click/selection, task actions
  */
 
 import { icon } from '../icons.js';
 import * as state from '../state.js';
 import * as api from '../api.js';
-import * as router from '../router.js';
 import { flash } from './flash.js';
-import { esc, debounce } from '../utils.js';
+import { esc } from '../utils.js';
 import { t } from '../i18n.js';
 
 const COLUMNS = [
   { id: 'pending',     label: 'Pending' },
   { id: 'in_progress', label: 'In Progress' },
-  { id: 'in_review',  label: 'In Review' },
-  { id: 'blocked',    label: 'Blocked' },
-  { id: 'completed',  label: 'Completed' },
+  { id: 'in_review',   label: 'In Review' },
+  { id: 'blocked',     label: 'Blocked' },
+  { id: 'completed',   label: 'Completed' },
 ];
 
 let _dragTaskId = null;
 
-export async function render() {
-  const payload = state.getPayload();
-  if (!payload) return `<div class="empty-state" style="margin:3rem">${t('ui.board.noData', {}, 'No project data.')}</div>`;
+/**
+ * Render the kanban board HTML (columns + cards only).
+ *
+ * @param {Array} tasks     — pre-filtered task list
+ * @param {Array} phases    — array of phase objects ({ id, label, ... })
+ * @param {Object} opts     — { showCompleted, showCancelled, wipLimits }
+ *                            wipLimits is an optional map: { status: number }
+ * @returns {string} HTML string for the board grid
+ */
+export function renderKanban(tasks, phases, opts = {}) {
+  const { showCompleted = true, showCancelled = false, wipLimits = {} } = opts;
+
+  // Filter out completed / cancelled unless opted-in
+  let visibleTasks = tasks;
+  if (!showCompleted) {
+    visibleTasks = visibleTasks.filter(t => t.status !== 'completed');
+  }
+  if (!showCancelled) {
+    visibleTasks = visibleTasks.filter(t => t.status !== 'cancelled');
+  }
 
-  const tasks = _filterTasks(payload.derived.tasks);
-  const hasCancelled = tasks.some(t => t.status === 'cancelled');
+  // Build column set
+  const hasCancelled = showCancelled && visibleTasks.some(t => t.status === 'cancelled');
   const columns = hasCancelled
     ? [...COLUMNS, { id: 'cancelled', label: t('status.cancelled', {}, 'Cancelled') }]
     : COLUMNS.map(col => ({ ...col, label: t(`status.${col.id}`, {}, col.label) }));
 
-  const html = `
-    <div class="view-enter">
-      <div class="section-header">
-        <div class="section-header-left">
-          <p class="eyebrow">${t('ui.board.eyebrow', {}, 'Board')}</p>
-          <h2>${t('ui.board.title', {}, 'Operational board')}</h2>
-        </div>
-        <div style="display:flex;gap:var(--space-2)">
-          <button class="btn btn-ghost btn-sm" id="board-filter-done" type="button">
-            ${icon('check', 14)} ${_showCompleted() ? t('ui.board.hideCompleted', {}, 'Hide completed') : t('ui.board.showCompleted', {}, 'Show completed')}
-          </button>
-          <button class="btn btn-primary btn-sm" id="new-task-btn" type="button" aria-label="${t('ui.board.newTask', {}, 'Create new task')}">
-            ${icon('plus', 14)} ${t('ui.tasks.new', {}, 'New task')}
-          </button>
-        </div>
-      </div>
-
-      <div class="board-grid" id="board" aria-label="${t('ui.board.aria', {}, 'Task board by status')}" role="region">
-        ${columns.map(col => {
-          const colTasks = tasks.filter(t => t.status === col.id);
-          return _renderColumn(col, colTasks);
-        }).join('')}
-      </div>
+  return `
+    <div class="board-grid" id="board" aria-label="${t('ui.board.aria', {}, 'Task board by status')}" role="region">
+      ${columns.map(col => {
+        const colTasks = visibleTasks.filter(t => t.status === col.id);
+        const wipLimit = wipLimits[col.id] ?? null;
+        return _renderColumn(col, colTasks, phases, wipLimit);
+      }).join('')}
     </div>
   `;
-
-  setTimeout(() => _bindEvents(), 0);
-  return html;
 }
 
-function _filterTasks(tasks) {
-  let list = tasks;
-  const query = state.get('searchQuery')?.toLowerCase();
-  if (query) {
-    list = list.filter(t =>
-      t.title.toLowerCase().includes(query) ||
-      t.id.toLowerCase().includes(query) ||
-      (t.summary || '').toLowerCase().includes(query)
-    );
-  }
-  if (!_showCompleted()) {
-    list = list.filter(t => t.status !== 'completed' && t.status !== 'cancelled');
-  }
-  return list;
-}
+/**
+ * Bind kanban-specific events: drag-drop, card click/selection, task actions.
+ * Call this after the board HTML has been inserted into the DOM.
+ */
+export function bindKanbanEvents() {
+  const board = document.getElementById('board');
+  if (!board) return;
+
+  // Click on task card — select and highlight
+  board.addEventListener('click', e => {
+    const card = e.target.closest('.task-card');
+    if (!card) return;
+
+    const id = card.dataset.taskId;
+    state.update('selectedTaskId', id);
+
+    // Highlight the selected card without a full re-render
+    board.querySelectorAll('.task-card').forEach(c => {
+      c.classList.toggle('is-selected', c.dataset.taskId === id);
+      c.setAttribute('aria-selected', c.dataset.taskId === id ? 'true' : 'false');
+    });
+  });
+
+  // Keyboard on cards (Enter = select)
+  board.addEventListener('keydown', e => {
+    const card = e.target.closest('.task-card');
+    if (!card) return;
+    if (e.key === 'Enter') {
+      state.update('selectedTaskId', card.dataset.taskId);
+    }
+  });
 
-function _showCompleted() {
-  return sessionStorage.getItem('board-show-completed') === 'true';
+  // Drag & drop
+  _bindDragDrop(board);
 }
 
-function _renderColumn(col, tasks) {
+/* ------------------------------------------------------------------ */
+/*  Internal helpers                                                   */
+/* ------------------------------------------------------------------ */
+
+function _renderColumn(col, tasks, phases, wipLimit) {
+  const wipExceeded = wipLimit != null && tasks.length > wipLimit;
+  const wipAttr = wipLimit != null ? ` data-wip-limit="${wipLimit}"` : '';
+
   return `
-    <section class="board-column col-${col.id}" data-status="${col.id}" aria-label="${t('ui.board.column', { label: col.label }, `Column ${col.label}`)}">
-      <div class="board-column-header">
+    <section class="board-column col-${col.id}" data-status="${col.id}"${wipAttr} aria-label="${t('ui.board.column', { label: col.label }, `Column ${col.label}`)}">
+      <div class="board-column-header${wipExceeded ? ' wip-exceeded' : ''}">
         <h3 class="board-column-title" id="col-${col.id}">
           <span class="board-column-dot" aria-hidden="true"></span>
           ${esc(col.label)}
         </h3>
-        <span class="board-column-count" aria-label="${t('ui.board.tasksCount', { count: tasks.length }, `${tasks.length} tasks`)}">${tasks.length}</span>
+        <span class="board-column-count" aria-label="${t('ui.board.tasksCount', { count: tasks.length }, `${tasks.length} tasks`)}">${tasks.length}${wipLimit != null ? `/${wipLimit}` : ''}</span>
       </div>
       <div class="board-column-body" aria-labelledby="col-${col.id}" role="list">
-        ${tasks.map(t => _renderCard(t)).join('')}
+        ${tasks.map(task => _renderCard(task, phases)).join('')}
         ${tasks.length === 0
           ? `<div class="empty-state" style="padding:var(--space-5);min-height:80px;border-style:dashed">${t('ui.board.noTasks', {}, 'No tasks')}</div>`
           : ''}
@@ -100,10 +124,9 @@ function _renderColumn(col, tasks) {
   `;
 }
 
-function _renderCard(task) {
+function _renderCard(task, phases) {
   const isSelected = task.id === state.get('selectedTaskId');
   const statusLabels = state.getStatusLabels();
-  const phases = state.getPhases();
   const phaseInfo = phases.find(p => p.id === task.phase);
 
   const priorityVariant = { P0: 'danger', P1: 'warning', P2: 'accent', P3: 'muted' };
@@ -132,59 +155,7 @@ function _renderCard(task) {
   `;
 }
 
-function _bindEvents() {
-  const board = document.getElementById('board');
-  if (!board) return;
-
-  // Clic en task card → seleccionar y navegar a tasks
-  board.addEventListener('click', e => {
-    const card = e.target.closest('.task-card');
-    if (!card) return;
-
-    const id = card.dataset.taskId;
-    state.update('selectedTaskId', id);
-
-    // Navegar al editor si hubo doble clic; si un clic simple, solo marcar
-    if (e.detail === 2) {
-      router.navigate('tasks');
-    } else {
-      // Resaltar la card seleccionada sin re-render completo
-      board.querySelectorAll('.task-card').forEach(c => {
-        c.classList.toggle('is-selected', c.dataset.taskId === id);
-        c.setAttribute('aria-selected', c.dataset.taskId === id ? 'true' : 'false');
-      });
-    }
-  });
-
-  // Teclado en cards (Enter = seleccionar, Space = toggle)
-  board.addEventListener('keydown', e => {
-    const card = e.target.closest('.task-card');
-    if (!card) return;
-    if (e.key === 'Enter') {
-      state.update('selectedTaskId', card.dataset.taskId);
-      router.navigate('tasks');
-    }
-  });
-
-  // Toggle mostrar completadas
-  document.getElementById('board-filter-done')?.addEventListener('click', () => {
-    const current = _showCompleted();
-    sessionStorage.setItem('board-show-completed', current ? 'false' : 'true');
-    router.refresh();
-  });
-
-  // Nueva tarea
-  document.getElementById('new-task-btn')?.addEventListener('click', () => {
-    state.update('selectedTaskId', null);
-    router.navigate('tasks');
-  });
-
-  // Drag & drop
-  _bindDragDrop(board);
-}
-
 function _bindDragDrop(board) {
-  // Dragstart
   board.addEventListener('dragstart', e => {
     const card = e.target.closest('.task-card');
     if (!card) return;
@@ -213,7 +184,6 @@ function _bindDragDrop(board) {
   board.addEventListener('dragleave', e => {
     const col = e.target.closest('.board-column');
     if (!col) return;
-    // Solo eliminar si salimos de la columna, no de un hijo
     if (!col.contains(e.relatedTarget)) {
       col.classList.remove('is-drop-target');
     }