trackops 2.0.3 → 2.0.4

package/ui/js/views/tasks.js

@@ -1,116 +1,236 @@
 /**
- * tasks.js — Editor de tareas (split: lista + formulario)
+ * tasks.js — Unified Task Management View (Kanban | Scrum | List)
+ *
+ * Three agile modes toggled via tab pills, with shared filter bar.
+ * List mode preserves the original split-view task editor.
  */
 
-import { icon } from '../icons.js';
 import * as state from '../state.js';
 import * as api from '../api.js';
+import * as router from '../router.js';
+import { icon } from '../icons.js';
+import { t } from '../i18n.js';
+import { esc, formatDate, formatDuration, splitLines, extractHistory } from '../utils.js';
+import * as filters from '../filters.js';
+import { renderKanban, bindKanbanEvents } from './board.js';
+import { renderScrum, bindScrumEvents } from './scrum.js';
 import { flash } from './flash.js';
-import { esc, splitLines, formatDate } from '../utils.js';
 import * as timeTracker from '../time-tracker.js';
-import { t } from '../i18n.js';
+
+/* ─────────────────────────── Mode state ─────────────────────────── */
+
+let _activeMode = localStorage.getItem('ops-tasks-mode') || 'kanban';
+
+/* ─────────────────────────── Public API ─────────────────────────── */
 
 export async function render() {
   const payload = state.getPayload();
   if (!payload) return `<div class="empty-state" style="margin:3rem">${t('ui.tasks.noData', {}, 'No project data.')}</div>`;
 
-  const tasks   = _filterTasks(payload.derived.tasks);
-  const selTask  = state.findTask(state.get('selectedTaskId'));
-  const phases  = state.getPhases();
-  const statusLabels = state.getStatusLabels();
+  const projectName = payload.control?.project?.name || payload.control?.name || '';
+  const activeFilters = filters.load('tasks');
+  const allTasks = payload.derived?.tasks || [];
+  const filteredTasks = filters.apply(allTasks, activeFilters);
+  const phases = state.getPhases();
+  const streams = [...new Set(allTasks.map(t => t.stream).filter(Boolean))];
 
-  const html = `
-    <div class="view-enter">
-      <div class="section-header">
-        <div class="section-header-left">
-          <p class="eyebrow">Task Studio</p>
-          <h2>${t('ui.tasks.title', {}, 'Task Management')}</h2>
+  const modeContent = _renderModeContent(filteredTasks, phases, payload);
+
+  return `
+    <section class="view-section view-enter">
+      <div class="section-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3)">
+        <div>
+          ${projectName ? `<p class="section-eyebrow">${esc(projectName)}</p>` : ''}
+          <h2 class="section-title">${t('ui.tasks.title', {}, 'Tasks')}</h2>
+        </div>
+        <div style="display:flex;align-items:center;gap:var(--space-3)">
+          <div class="tab-pills">
+            <button class="tab-pill ${_activeMode === 'kanban' ? 'is-active' : ''}" data-mode="kanban">Kanban</button>
+            <button class="tab-pill ${_activeMode === 'scrum' ? 'is-active' : ''}" data-mode="scrum">Scrum</button>
+            <button class="tab-pill ${_activeMode === 'list' ? 'is-active' : ''}" data-mode="list">List</button>
+          </div>
+          <button class="btn btn-primary btn-sm" id="new-task-btn" type="button">
+            ${icon('plus', 14)} ${t('ui.tasks.new', {}, 'New task')}
+          </button>
         </div>
-        <button class="btn btn-primary btn-sm" id="new-task-btn-top" type="button">
-          ${icon('plus', 14)} ${t('ui.tasks.new', {}, 'New task')}
-        </button>
       </div>
 
-      <div class="grid-split">
+      <div id="tasks-filter-bar">
+        ${filters.renderBar('tasks', activeFilters, { phases, streams })}
+      </div>
 
-        <!-- Lista de tareas -->
-        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
-          <!-- Quick filter -->
-          <div style="display:flex;gap:var(--space-2);flex-wrap:wrap" role="group" aria-label="${t('ui.tasks.filters', {}, 'Status filters')}">
-            ${_renderStatusFilters(statusLabels, payload.derived.totals)}
-          </div>
+      <div id="tasks-mode-content">
+        ${modeContent}
+      </div>
+    </section>
+  `;
+}
 
-          <div class="stack stack-sm" id="task-list" aria-label="${t('ui.tasks.list', {}, 'Task list')}" role="list">
-            ${_renderTaskList(tasks, statusLabels, phases)}
-          </div>
+export function bindEvents() {
+  // Filter bar
+  filters.bindBar('tasks', () => _refreshModeContent());
+
+  // Mode toggle pills
+  document.querySelectorAll('[data-mode]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const mode = btn.dataset.mode;
+      if (mode === _activeMode) return;
+      _activeMode = mode;
+      localStorage.setItem('ops-tasks-mode', mode);
+
+      // Toggle active class on pills
+      document.querySelectorAll('.tab-pill[data-mode]').forEach(p => {
+        p.classList.toggle('is-active', p.dataset.mode === mode);
+      });
+
+      _refreshModeContent();
+    });
+  });
+
+  // New Task button — switch to list mode and open blank editor
+  document.getElementById('new-task-btn')?.addEventListener('click', () => {
+    _activeMode = 'list';
+    localStorage.setItem('ops-tasks-mode', 'list');
+
+    document.querySelectorAll('.tab-pill[data-mode]').forEach(p => {
+      p.classList.toggle('is-active', p.dataset.mode === 'list');
+    });
+
+    state.update('selectedTaskId', null);
+    _refreshModeContent();
+
+    // Focus the title field once rendered
+    setTimeout(() => document.getElementById('task-title')?.focus(), 0);
+  });
+
+  // Bind active mode events
+  _bindActiveModeEvents();
+}
+
+/* ────────────────────── Mode content rendering ──────────────────── */
+
+function _renderModeContent(filteredTasks, phases, payload) {
+  switch (_activeMode) {
+    case 'kanban':
+      return renderKanban(filteredTasks, phases, { showCompleted: false });
+    case 'scrum': {
+      const milestones = payload?.control?.milestones || [];
+      return renderScrum(filteredTasks, milestones, phases, {});
+    }
+    case 'list':
+      return _renderListMode(filteredTasks, phases);
+    default:
+      return renderKanban(filteredTasks, phases, { showCompleted: false });
+  }
+}
+
+function _refreshModeContent() {
+  const payload = state.getPayload();
+  if (!payload) return;
+
+  const activeFilters = filters.load('tasks');
+  const allTasks = payload.derived?.tasks || [];
+  const filteredTasks = filters.apply(allTasks, activeFilters);
+  const phases = state.getPhases();
+
+  const container = document.getElementById('tasks-mode-content');
+  if (container) {
+    container.innerHTML = _renderModeContent(filteredTasks, phases, payload);
+  }
+
+  _bindActiveModeEvents();
+}
+
+function _bindActiveModeEvents() {
+  switch (_activeMode) {
+    case 'kanban':
+      bindKanbanEvents();
+      break;
+    case 'scrum':
+      bindScrumEvents();
+      break;
+    case 'list':
+      _bindListEvents();
+      break;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+   LIST MODE — Split-view task list + editor
+   ═══════════════════════════════════════════════════════════════════ */
+
+function _renderListMode(tasks, phases) {
+  const selTask = state.findTask(state.get('selectedTaskId'));
+  const statusLabels = state.getStatusLabels();
+  const payload = state.getPayload();
+  const totals = payload?.derived?.totals || {};
+
+  return `
+    <div class="grid-split">
+
+      <!-- Task list panel -->
+      <div style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <!-- Quick status filter chips -->
+        <div style="display:flex;gap:var(--space-2);flex-wrap:wrap" role="group" aria-label="${t('ui.tasks.filters', {}, 'Status filters')}">
+          ${_renderStatusFilters(statusLabels, totals)}
         </div>
 
-        <!-- Editor de tarea -->
-        <div class="panel" id="task-editor" aria-label="${t('ui.tasks.editor', {}, 'Task editor')}" aria-live="polite">
-          ${_renderEditor(selTask, phases)}
+        <div class="stack stack-sm" id="task-list" aria-label="${t('ui.tasks.list', {}, 'Task list')}" role="list">
+          ${_renderTaskList(tasks, statusLabels, phases)}
         </div>
+      </div>
 
+      <!-- Task editor panel -->
+      <div class="panel" id="task-editor" aria-label="${t('ui.tasks.editor', {}, 'Task editor')}" aria-live="polite">
+        ${_renderEditor(selTask, phases)}
       </div>
+
     </div>
   `;
-
-  setTimeout(() => _bindEvents(), 0);
-  return html;
 }
 
-function _filterTasks(tasks) {
-  const query  = state.get('searchQuery')?.toLowerCase();
-  const filter = sessionStorage.getItem('tasks-filter') || '';
-  let list = [...tasks];
-  if (query) {
-    list = list.filter(t =>
-      t.title.toLowerCase().includes(query) ||
-      (t.summary || '').toLowerCase().includes(query) ||
-      t.id.toLowerCase().includes(query)
-    );
-  }
-  if (filter) list = list.filter(t => t.status === filter);
-  return list;
-}
+/* ─── Status filter chips ─── */
 
 function _renderStatusFilters(statusLabels, totals) {
-  const filters = [
-    { id: '',            label: t('ui.tasks.all', {}, 'All'), count: totals.all },
-    { id: 'pending',     label: statusLabels.pending || t('status.pending', {}, 'Pending'), count: totals.pending },
-    { id: 'in_progress', label: statusLabels.in_progress || t('status.in_progress', {}, 'In progress'), count: totals.inProgress },
-    { id: 'in_review',   label: statusLabels.in_review || t('status.in_review', {}, 'In review'), count: totals.inReview },
-    { id: 'blocked',     label: statusLabels.blocked || t('status.blocked', {}, 'Blocked'), count: totals.blocked },
-    { id: 'completed',   label: statusLabels.completed || t('status.completed', {}, 'Completed'), count: totals.completed },
+  const chipFilters = [
+    { id: '',            label: t('ui.tasks.all', {}, 'All'),                                                    count: totals.all },
+    { id: 'pending',     label: statusLabels.pending     || t('status.pending',     {}, 'Pending'),               count: totals.pending },
+    { id: 'in_progress', label: statusLabels.in_progress || t('status.in_progress', {}, 'In progress'),           count: totals.inProgress },
+    { id: 'in_review',   label: statusLabels.in_review   || t('status.in_review',   {}, 'In review'),             count: totals.inReview },
+    { id: 'blocked',     label: statusLabels.blocked     || t('status.blocked',     {}, 'Blocked'),               count: totals.blocked },
+    { id: 'completed',   label: statusLabels.completed   || t('status.completed',   {}, 'Completed'),             count: totals.completed },
   ];
   const active = sessionStorage.getItem('tasks-filter') || '';
-  return filters.map(f => `
+  return chipFilters.map(f => `
     <button class="chip ${f.id === active ? 'is-active' : ''}"
       type="button" data-task-filter="${esc(f.id)}"
       aria-pressed="${f.id === active}">
-      ${esc(f.label)} <span class="badge badge-muted" style="font-size:0.65rem">${f.count}</span>
+      ${esc(f.label)} <span class="badge badge-muted" style="font-size:0.65rem">${f.count ?? 0}</span>
     </button>
   `).join('');
 }
 
+/* ─── Task list cards ─── */
+
 function _renderTaskList(tasks, statusLabels, phases) {
   if (!tasks.length) return `<div class="empty-state">${t('ui.tasks.noMatch', {}, 'No matching tasks.')}</div>`;
   const selectedId = state.get('selectedTaskId');
   const priorityVariant = { P0: 'danger', P1: 'warning', P2: 'accent', P3: 'muted' };
 
-  return tasks.map(t => {
-    const phase = phases.find(p => p.id === t.phase);
+  return tasks.map(tk => {
+    const phase = phases.find(p => p.id === tk.phase);
     return `
-      <div class="task-card ${t.id === selectedId ? 'is-selected' : ''}"
-        data-task-id="${esc(t.id)}"
+      <div class="task-card ${tk.id === selectedId ? 'is-selected' : ''}"
+        data-task-id="${esc(tk.id)}"
         role="listitem" tabindex="0"
-        aria-selected="${t.id === selectedId}"
-        aria-label="${esc(t.title)}"
+        aria-selected="${tk.id === selectedId}"
+        aria-label="${esc(tk.title)}"
       >
-        <strong class="task-card-title">${esc(t.title)}</strong>
-        <span class="task-card-id">${esc(t.id)}</span>
+        <strong class="task-card-title">${esc(tk.title)}</strong>
+        <span class="task-card-id">${esc(tk.id)}</span>
         <div class="task-card-meta" style="margin-top:var(--space-2)">
-          <span class="badge badge-${priorityVariant[t.priority] || 'muted'}">${esc(t.priority)}</span>
-          <span class="badge status-${t.status}">${esc(statusLabels[t.status] || t.status)}</span>
+          <span class="badge badge-${priorityVariant[tk.priority] || 'muted'}">${esc(tk.priority)}</span>
+          <span class="badge status-${tk.status}">${esc(statusLabels[tk.status] || tk.status)}</span>
           ${phase ? `<span class="badge badge-muted">${esc(phase.label)}</span>` : ''}
         </div>
       </div>
@@ -118,19 +238,21 @@ function _renderTaskList(tasks, statusLabels, phases) {
   }).join('');
 }
 
+/* ─── Task editor ─── */
+
 function _renderEditor(task, phases) {
   const isNew = !task;
-  const phases_opts = phases.map(p =>
+  const phasesOpts = phases.map(p =>
     `<option value="${esc(p.id)}" ${!isNew && task.phase === p.id ? 'selected' : ''}>${esc(p.id)} — ${esc(p.label)}</option>`
   ).join('');
 
   const statuses = [
-    { id: 'pending',     label: t('status.pending', {}, 'Pending') },
+    { id: 'pending',     label: t('status.pending',     {}, 'Pending') },
     { id: 'in_progress', label: t('status.in_progress', {}, 'In progress') },
-    { id: 'in_review',   label: t('status.in_review', {}, 'In review') },
-    { id: 'blocked',     label: t('status.blocked', {}, 'Blocked') },
-    { id: 'completed',   label: t('status.completed', {}, 'Completed') },
-    { id: 'cancelled',   label: t('status.cancelled', {}, 'Cancelled') },
+    { id: 'in_review',   label: t('status.in_review',   {}, 'In review') },
+    { id: 'blocked',     label: t('status.blocked',     {}, 'Blocked') },
+    { id: 'completed',   label: t('status.completed',   {}, 'Completed') },
+    { id: 'cancelled',   label: t('status.cancelled',   {}, 'Cancelled') },
   ];
 
   return `
@@ -154,7 +276,7 @@ function _renderEditor(task, phases) {
       </div>
     </div>
 
-    <!-- Action strip -->
+    <!-- Quick action strip -->
     ${!isNew ? `
       <div class="panel-footer" style="display:flex;gap:var(--space-2);flex-wrap:wrap" role="group" aria-label="${t('ui.tasks.quickActions', {}, 'Quick task actions')}">
         <button class="chip is-active" type="button" data-task-action="start" aria-label="${t('ui.tasks.start', {}, 'Start task')}">${t('ui.tasks.startLabel', {}, 'Start')}</button>
@@ -179,7 +301,7 @@ function _renderEditor(task, phases) {
         <div class="field-row">
           <div class="field">
             <label for="task-phase">${t('ui.tasks.field.phase', {}, 'Phase')}</label>
-            <select id="task-phase" name="phase">${phases_opts}</select>
+            <select id="task-phase" name="phase">${phasesOpts}</select>
           </div>
           <div class="field">
             <label for="task-priority">${t('ui.tasks.field.priority', {}, 'Priority')}</label>
@@ -264,8 +386,10 @@ function _renderEditor(task, phases) {
   `;
 }
 
-function _bindEvents() {
-  // Seleccionar tarea de la lista
+/* ─── List mode event binding ─── */
+
+function _bindListEvents() {
+  // Select task from list
   document.getElementById('task-list')?.addEventListener('click', e => {
     const card = e.target.closest('[data-task-id]');
     if (!card) return;
@@ -273,36 +397,26 @@ function _bindEvents() {
     state.update('selectedTaskId', id);
     const editor = document.getElementById('task-editor');
     if (editor) {
-      const phases   = state.getPhases();
-      const selTask  = state.findTask(id);
+      const phases = state.getPhases();
+      const selTask = state.findTask(id);
       editor.innerHTML = _renderEditor(selTask, phases);
       _bindEditorForm();
     }
-    // Actualizar selección en lista
-    document.querySelectorAll('[data-task-id]').forEach(c => {
+    // Update selection highlight in list
+    document.querySelectorAll('#task-list [data-task-id]').forEach(c => {
       c.classList.toggle('is-selected', c.dataset.taskId === id);
       c.setAttribute('aria-selected', c.dataset.taskId === id);
     });
   });
 
-  // Filtros de estado
+  // Status filter chips
   document.querySelectorAll('[data-task-filter]').forEach(btn => {
     btn.addEventListener('click', () => {
       sessionStorage.setItem('tasks-filter', btn.dataset.taskFilter);
-      import('../router.js').then(r => r.refresh());
+      _refreshModeContent();
     });
   });
 
-  // Nueva tarea
-  document.getElementById('new-task-btn-top')?.addEventListener('click', () => {
-    state.update('selectedTaskId', null);
-    const editor = document.getElementById('task-editor');
-    if (editor) {
-      editor.innerHTML = _renderEditor(null, state.getPhases());
-      _bindEditorForm();
-    }
-  });
-
   _bindEditorForm();
 }
 
@@ -322,7 +436,10 @@ function _bindEditorForm() {
     state.update('selectedTaskId', null);
     const editor = document.getElementById('task-editor');
     if (editor) {
-      editor.innerHTML = _renderEditor({ ...task, title: `${task.title} (${t('ui.tasks.copySuffix', {}, 'copy')})`, status: 'pending', history: [] }, state.getPhases());
+      editor.innerHTML = _renderEditor(
+        { ...task, title: `${task.title} (${t('ui.tasks.copySuffix', {}, 'copy')})`, status: 'pending', history: [] },
+        state.getPhases()
+      );
       _bindEditorForm();
       document.getElementById('task-title')?.focus();
     }
@@ -330,18 +447,18 @@ function _bindEditorForm() {
 
   // Timer quick start
   document.getElementById('timer-quick-btn')?.addEventListener('click', async () => {
-      const task = state.findTask(state.get('selectedTaskId'));
-      if (!task) return;
-      await timeTracker.start(task.id, task.title);
+    const task = state.findTask(state.get('selectedTaskId'));
+    if (!task) return;
+    await timeTracker.start(task.id, task.title);
   });
 
-  // Action strip
+  // Quick action strip
   document.querySelectorAll('[data-task-action]').forEach(btn => {
     btn.addEventListener('click', async () => {
       const taskId = state.get('selectedTaskId');
       if (!taskId) { flash(t('ui.tasks.selectFirst', {}, 'Select a task first.'), 'warning'); return; }
       const action = btn.dataset.taskAction;
-      const note   = document.getElementById('task-note')?.value?.trim() || '';
+      const note = document.getElementById('task-note')?.value?.trim() || '';
       try {
         await api.taskAction(taskId, action, note || t('ui.tasks.defaultActionNote', { action }, `Change to "${action}" from the board.`));
         flash(t('ui.tasks.updated', {}, 'Status updated.'), 'success');
@@ -384,7 +501,7 @@ async function _submitForm() {
   };
 
   if (!payload.title) {
-    flash('El título es obligatorio.', 'error');
+    flash(t('ui.tasks.titleRequired', {}, 'Title is required.'), 'error');
     get('task-title')?.focus();
     return;
   }
@@ -393,11 +510,11 @@ async function _submitForm() {
   try {
     if (selectedId) {
       await api.updateTask(selectedId, payload);
-      flash('Tarea actualizada.', 'success');
+      flash(t('ui.tasks.taskUpdated', {}, 'Task updated.'), 'success');
     } else {
       const result = await api.createTask(payload);
       state.update('selectedTaskId', result.task?.id);
-      flash('Tarea creada.', 'success');
+      flash(t('ui.tasks.taskCreated', {}, 'Task created.'), 'success');
     }
     window.dispatchEvent(new CustomEvent('ops:refresh'));
   } catch (err) {