trackops 2.0.3 → 2.0.4

package/ui/js/views/scrum.js

@@ -0,0 +1,476 @@
+/**
+ * scrum.js — Scrum mode view for the Tasks page
+ *
+ * Exports:
+ *   renderScrum(tasks, milestones, phases, opts) — returns HTML string
+ *   bindScrumEvents()                            — binds all interactions
+ */
+
+import * as state from '../state.js';
+import * as api from '../api.js';
+import { icon } from '../icons.js';
+import { t } from '../i18n.js';
+import { esc, formatDate } from '../utils.js';
+import { lineChart } from '../charts.js';
+import { flash } from './flash.js';
+
+/* ------------------------------------------------------------------ */
+/*  Constants                                                          */
+/* ------------------------------------------------------------------ */
+
+const SCRUM_COLUMNS = [
+  { id: 'todo',  label: 'To Do',  statuses: ['pending'],                 dotColor: 'var(--accent-blue, var(--accent))' },
+  { id: 'doing', label: 'Doing',  statuses: ['in_progress', 'in_review', 'blocked'], dotColor: 'var(--accent-cyan, var(--accent))' },
+  { id: 'done',  label: 'Done',   statuses: ['completed'],               dotColor: 'var(--success, var(--accent-green, #22c55e))' },
+];
+
+const STATUS_ACTION_MAP = {
+  todo:  'pending',
+  doing: 'start',
+  done:  'complete',
+};
+
+const SPRINT_DAYS = 14;
+
+let _dragTaskId = null;
+
+/* ------------------------------------------------------------------ */
+/*  Sprint helpers                                                     */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Determine the current sprint from milestones.
+ * Current sprint = nearest future milestone, or most recent past one.
+ */
+function _currentSprint(milestones) {
+  if (!milestones || milestones.length === 0) return null;
+
+  const now = Date.now();
+  const sorted = [...milestones]
+    .filter(m => m.date)
+    .sort((a, b) => new Date(a.date) - new Date(b.date));
+
+  // Nearest future milestone
+  const future = sorted.find(m => new Date(m.date) >= now);
+  if (future) return future;
+
+  // Most recent past milestone
+  return sorted[sorted.length - 1] || null;
+}
+
+/**
+ * Compute sprint start date: either the milestone before the current one,
+ * or current milestone date minus SPRINT_DAYS.
+ */
+function _sprintDateRange(sprint, milestones) {
+  if (!sprint) {
+    const end = new Date();
+    const start = new Date(end);
+    start.setDate(start.getDate() - SPRINT_DAYS);
+    return { start, end };
+  }
+
+  const end = new Date(sprint.date);
+  const sorted = [...milestones]
+    .filter(m => m.date)
+    .sort((a, b) => new Date(a.date) - new Date(b.date));
+  const idx = sorted.findIndex(m => m.id === sprint.id);
+  const prev = idx > 0 ? sorted[idx - 1] : null;
+
+  const start = prev ? new Date(prev.date) : new Date(end);
+  if (!prev) start.setDate(start.getDate() - SPRINT_DAYS);
+
+  return { start, end };
+}
+
+function _daysRemaining(endDate) {
+  const diff = Math.ceil((endDate - Date.now()) / (1000 * 60 * 60 * 24));
+  return Math.max(0, diff);
+}
+
+/**
+ * Build burndown data points for the line chart.
+ * Simple model: assumes tasks complete linearly across sprint range.
+ */
+function _buildBurndownData(sprintTasks, startDate, endDate) {
+  const totalDays = Math.max(1, Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)));
+  const total = sprintTasks.length;
+  const completedTasks = sprintTasks.filter(t => t.status === 'completed');
+
+  // Ideal line
+  const points = [];
+  const step = Math.max(1, Math.floor(totalDays / Math.min(totalDays, 10)));
+
+  for (let d = 0; d <= totalDays; d += step) {
+    const date = new Date(startDate);
+    date.setDate(date.getDate() + d);
+    const dayStr = date.toISOString().slice(5, 10); // MM-DD
+
+    // Count tasks completed by this date
+    const doneByDate = completedTasks.filter(task => {
+      const history = task.history || [];
+      const completedEntry = history.find(h => h.action === 'complete' || h.status === 'completed');
+      if (completedEntry) {
+        return new Date(completedEntry.timestamp || completedEntry.date) <= date;
+      }
+      return false;
+    }).length;
+
+    const remaining = total - doneByDate;
+    points.push({ label: dayStr, value: Math.max(0, remaining) });
+  }
+
+  // Ensure we have at least 2 points
+  if (points.length < 2) {
+    points.push({ label: 'Start', value: total });
+    points.push({ label: 'Now', value: total - completedTasks.length });
+  }
+
+  return points;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Render                                                             */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Render the full Scrum view.
+ *
+ * @param {Array}  tasks      — full task list
+ * @param {Array}  milestones — milestones from project_control.json
+ * @param {Array}  phases     — phase objects ({ id, label, ... })
+ * @param {Object} opts       — options
+ * @returns {string} HTML string
+ */
+export function renderScrum(tasks, milestones = [], phases = [], opts = {}) {
+  const sprint = _currentSprint(milestones);
+  const { start: sprintStart, end: sprintEnd } = _sprintDateRange(sprint, milestones);
+  const daysLeft = _daysRemaining(sprintEnd);
+
+  // Partition tasks by scrum category
+  const activeTasks = tasks.filter(t => t.status !== 'cancelled');
+  const todoTasks = activeTasks.filter(t => t.status === 'pending');
+  const doingTasks = activeTasks.filter(t =>
+    t.status === 'in_progress' || t.status === 'in_review' || t.status === 'blocked'
+  );
+  const doneTasks = activeTasks.filter(t => t.status === 'completed');
+
+  // Sprint tasks = all non-cancelled (the sprint encompasses active work)
+  const sprintTasks = [...todoTasks, ...doingTasks, ...doneTasks];
+  const committed = sprintTasks.length;
+  const completed = doneTasks.length;
+  const remaining = committed - completed;
+
+  // Burndown
+  const burndownData = _buildBurndownData(sprintTasks, sprintStart, sprintEnd);
+  const burndownSvg = lineChart(burndownData, {
+    width: 200,
+    height: 80,
+    color: 'var(--accent-blue, var(--accent))',
+    showDots: false,
+    showGrid: false,
+    fill: true,
+    animate: true,
+  });
+
+  // Sprint info
+  const sprintTitle = sprint ? esc(sprint.title) : 'Current Sprint';
+  const sprintMeta = sprint
+    ? `${formatDate(sprintStart, 'date')} — ${formatDate(sprintEnd, 'date')} &middot; ${daysLeft} ${daysLeft === 1 ? 'day' : 'days'} remaining`
+    : `${formatDate(sprintStart, 'date')} — ${formatDate(sprintEnd, 'date')} &middot; ${daysLeft} ${daysLeft === 1 ? 'day' : 'days'} remaining`;
+
+  // No milestones notice
+  const noMilestonesNotice = milestones.length === 0
+    ? `<div class="glass-card" style="text-align:center;padding:var(--space-8, 2rem)">
+        <p style="color:var(--text-secondary)">No sprints configured yet.</p>
+        <p style="color:var(--text-muted);font-size:var(--text-sm, 0.875rem)">
+          Add milestones to your project to enable sprint tracking.
+        </p>
+      </div>`
+    : '';
+
+  // Column data for the board
+  const columnData = [
+    { ...SCRUM_COLUMNS[0], tasks: todoTasks },
+    { ...SCRUM_COLUMNS[1], tasks: doingTasks },
+    { ...SCRUM_COLUMNS[2], tasks: doneTasks },
+  ];
+
+  return `
+    <div class="scrum-view" style="display:flex;flex-direction:column;gap:var(--space-4, 1rem)">
+
+      <!-- Sprint Panel -->
+      <div class="glass-card scrum-sprint-panel">
+        <div class="scrum-sprint-header" style="display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4, 1rem);justify-content:space-between">
+          <div style="min-width:180px">
+            <h3 class="scrum-sprint-title" style="margin:0;font-size:var(--text-lg, 1.125rem);color:var(--text-primary)">${sprintTitle}</h3>
+            <p class="scrum-sprint-meta" style="margin:var(--space-1, 0.25rem) 0 0;font-size:var(--text-sm, 0.875rem);color:var(--text-muted)">${sprintMeta}</p>
+          </div>
+          <div class="scrum-sprint-stats" style="display:flex;gap:var(--space-5, 1.25rem);text-align:center">
+            <div class="scrum-stat">
+              <span class="scrum-stat-value" style="display:block;font-size:var(--text-xl, 1.25rem);font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums">${committed}</span>
+              <span class="scrum-stat-label" style="font-size:var(--text-xs, 0.75rem);color:var(--text-muted)">Committed</span>
+            </div>
+            <div class="scrum-stat">
+              <span class="scrum-stat-value" style="display:block;font-size:var(--text-xl, 1.25rem);font-weight:700;color:var(--success, #22c55e);font-variant-numeric:tabular-nums">${completed}</span>
+              <span class="scrum-stat-label" style="font-size:var(--text-xs, 0.75rem);color:var(--text-muted)">Done</span>
+            </div>
+            <div class="scrum-stat">
+              <span class="scrum-stat-value" style="display:block;font-size:var(--text-xl, 1.25rem);font-weight:700;color:var(--warning, #f59e0b);font-variant-numeric:tabular-nums">${remaining}</span>
+              <span class="scrum-stat-label" style="font-size:var(--text-xs, 0.75rem);color:var(--text-muted)">Remaining</span>
+            </div>
+          </div>
+          <!-- Mini burndown -->
+          <div class="scrum-burndown" id="scrum-burndown-chart" style="flex-shrink:0">
+            ${burndownSvg}
+          </div>
+        </div>
+      </div>
+
+      ${noMilestonesNotice}
+
+      <!-- Sprint Board (3 columns) -->
+      <div class="scrum-board" id="scrum-board" style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3, 0.75rem);min-height:300px" role="region" aria-label="Sprint board">
+        ${columnData.map(col => _renderColumn(col, phases)).join('')}
+      </div>
+
+      <!-- Product Backlog -->
+      ${_renderBacklog(todoTasks, phases)}
+    </div>
+  `;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Column rendering                                                   */
+/* ------------------------------------------------------------------ */
+
+function _renderColumn(col, phases) {
+  return `
+    <div class="scrum-column" data-scrum-status="${col.id}" style="display:flex;flex-direction:column;background:var(--surface-2, rgba(255,255,255,0.03));border-radius:var(--radius-md, 8px);border:1px solid var(--border, rgba(255,255,255,0.08));overflow:hidden">
+      <div class="scrum-column-header" style="display:flex;align-items:center;gap:var(--space-2, 0.5rem);padding:var(--space-3, 0.75rem) var(--space-3, 0.75rem);border-bottom:1px solid var(--border, rgba(255,255,255,0.08))">
+        <span class="scrum-column-dot" style="width:8px;height:8px;border-radius:50%;background:${col.dotColor};flex-shrink:0" aria-hidden="true"></span>
+        <span style="font-size:var(--text-sm, 0.875rem);font-weight:600;color:var(--text-primary)">${esc(col.label)}</span>
+        <span class="scrum-column-count" style="margin-left:auto;font-size:var(--text-xs, 0.75rem);color:var(--text-muted);font-variant-numeric:tabular-nums">${col.tasks.length}</span>
+      </div>
+      <div class="scrum-column-body" style="flex:1;padding:var(--space-2, 0.5rem);display:flex;flex-direction:column;gap:var(--space-2, 0.5rem);overflow-y:auto;min-height:100px" role="list">
+        ${col.tasks.map(task => _renderCard(task, phases)).join('')}
+        ${col.tasks.length === 0
+          ? `<div style="padding:var(--space-5, 1.25rem);text-align:center;color:var(--text-muted);font-size:var(--text-sm, 0.875rem);border:1px dashed var(--border, rgba(255,255,255,0.08));border-radius:var(--radius-sm, 4px);min-height:80px;display:flex;align-items:center;justify-content:center">No tasks</div>`
+          : ''}
+      </div>
+    </div>
+  `;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Card rendering                                                     */
+/* ------------------------------------------------------------------ */
+
+function _renderCard(task, phases) {
+  const priorityVariant = { P0: 'danger', P1: 'warning', P2: 'accent', P3: 'muted' };
+  const phaseInfo = phases.find(p => p.id === task.phase);
+  const isBlocked = task.status === 'blocked';
+
+  return `
+    <div class="scrum-card glass-card" data-task-id="${esc(task.id)}" draggable="true" role="listitem" tabindex="0"
+         style="padding:var(--space-3, 0.75rem);border-radius:var(--radius-sm, 4px);cursor:grab"
+         aria-label="${esc(task.title)}, ${esc(task.status)}, priority ${esc(task.priority)}">
+      <div style="display:flex;justify-content:space-between;align-items:start;gap:var(--space-2, 0.5rem)">
+        <span class="scrum-card-title" style="font-size:var(--text-sm, 0.875rem);font-weight:500;color:var(--text-primary);line-height:1.3">${esc(task.title)}</span>
+        <span class="badge badge-${priorityVariant[task.priority] || 'muted'}" style="flex-shrink:0">${esc(task.priority)}</span>
+      </div>
+      <div class="scrum-card-meta" style="display:flex;flex-wrap:wrap;gap:var(--space-1, 0.25rem);margin-top:var(--space-2, 0.5rem)">
+        <span class="badge badge-muted">${esc(phaseInfo?.label || task.phase)}</span>
+        ${isBlocked ? `<span class="badge badge-danger">${icon('alertTriangle', 10)} Blocked</span>` : ''}
+      </div>
+    </div>
+  `;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Backlog rendering                                                  */
+/* ------------------------------------------------------------------ */
+
+function _renderBacklog(pendingTasks, phases) {
+  // Product backlog = pending tasks (never started)
+  const backlogTasks = pendingTasks.filter(task => {
+    const history = task.history || [];
+    // Only show tasks that have never been moved out of pending
+    return history.length === 0 || history.every(h => h.status === 'pending' || h.action === 'create');
+  });
+
+  if (backlogTasks.length === 0) return '';
+
+  const priorityVariant = { P0: 'danger', P1: 'warning', P2: 'accent', P3: 'muted' };
+
+  const items = backlogTasks.map(task => {
+    const phaseInfo = phases.find(p => p.id === task.phase);
+    return `
+      <div class="scrum-backlog-item" data-task-id="${esc(task.id)}" draggable="true"
+           style="display:flex;align-items:center;gap:var(--space-3, 0.75rem);padding:var(--space-2, 0.5rem) var(--space-3, 0.75rem);border-radius:var(--radius-sm, 4px);border:1px solid var(--border, rgba(255,255,255,0.08));cursor:grab"
+           role="listitem" tabindex="0">
+        <span style="flex:1;font-size:var(--text-sm, 0.875rem);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(task.title)}</span>
+        <span class="badge badge-${priorityVariant[task.priority] || 'muted'}" style="flex-shrink:0">${esc(task.priority)}</span>
+        ${phaseInfo ? `<span class="badge badge-muted" style="flex-shrink:0">${esc(phaseInfo.label)}</span>` : ''}
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="glass-card scrum-backlog" style="margin-top:var(--space-2, 0.5rem)">
+      <div class="scrum-backlog-header" style="display:flex;align-items:center;justify-content:space-between;padding:var(--space-3, 0.75rem);border-bottom:1px solid var(--border, rgba(255,255,255,0.08))">
+        <h3 style="margin:0;font-size:var(--text-base, 1rem);color:var(--text-primary)">Product Backlog</h3>
+        <span class="badge badge-muted">${backlogTasks.length} items</span>
+      </div>
+      <div class="scrum-backlog-body" style="padding:var(--space-2, 0.5rem);display:flex;flex-direction:column;gap:var(--space-2, 0.5rem);max-height:300px;overflow-y:auto" role="list">
+        ${items}
+      </div>
+    </div>
+  `;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Event binding                                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Bind scrum-specific events: drag-drop between columns, card selection.
+ * Call this after the scrum HTML has been inserted into the DOM.
+ */
+export function bindScrumEvents() {
+  const board = document.getElementById('scrum-board');
+  if (!board) return;
+
+  // Card click — select and highlight
+  board.addEventListener('click', e => {
+    const card = e.target.closest('.scrum-card');
+    if (!card) return;
+
+    const id = card.dataset.taskId;
+    state.update('selectedTaskId', id);
+
+    board.querySelectorAll('.scrum-card').forEach(c => {
+      c.classList.toggle('is-selected', c.dataset.taskId === id);
+      c.setAttribute('aria-selected', c.dataset.taskId === id ? 'true' : 'false');
+    });
+  });
+
+  // Keyboard: Enter = select
+  board.addEventListener('keydown', e => {
+    const card = e.target.closest('.scrum-card');
+    if (!card) return;
+    if (e.key === 'Enter') {
+      state.update('selectedTaskId', card.dataset.taskId);
+    }
+  });
+
+  // Drag & drop on the sprint board columns
+  _bindDragDrop(board, '.scrum-column');
+
+  // Also bind drag on backlog items
+  const backlog = document.querySelector('.scrum-backlog-body');
+  if (backlog) {
+    backlog.addEventListener('dragstart', e => {
+      const item = e.target.closest('.scrum-backlog-item');
+      if (!item) return;
+      _dragTaskId = item.dataset.taskId;
+      item.classList.add('is-dragging');
+      item.style.opacity = '0.4';
+      e.dataTransfer.setData('text/plain', _dragTaskId);
+      e.dataTransfer.effectAllowed = 'move';
+    });
+
+    backlog.addEventListener('dragend', e => {
+      const item = e.target.closest('.scrum-backlog-item');
+      if (item) {
+        item.classList.remove('is-dragging');
+        item.style.opacity = '';
+      }
+      _dragTaskId = null;
+    });
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Drag & drop                                                        */
+/* ------------------------------------------------------------------ */
+
+function _bindDragDrop(board, columnSelector) {
+  board.addEventListener('dragstart', e => {
+    const card = e.target.closest('.scrum-card');
+    if (!card) return;
+    _dragTaskId = card.dataset.taskId;
+    card.classList.add('is-dragging');
+    card.style.opacity = '0.4';
+    e.dataTransfer.setData('text/plain', _dragTaskId);
+    e.dataTransfer.effectAllowed = 'move';
+  });
+
+  board.addEventListener('dragend', e => {
+    const card = e.target.closest('.scrum-card');
+    if (card) {
+      card.classList.remove('is-dragging');
+      card.style.opacity = '';
+    }
+    _dragTaskId = null;
+    board.querySelectorAll(columnSelector).forEach(col => col.classList.remove('is-drop-target'));
+  });
+
+  board.addEventListener('dragover', e => {
+    e.preventDefault();
+    const col = e.target.closest(columnSelector);
+    if (!col) return;
+    e.dataTransfer.dropEffect = 'move';
+    board.querySelectorAll(columnSelector).forEach(c => c.classList.remove('is-drop-target'));
+    col.classList.add('is-drop-target');
+    col.style.outline = '2px solid var(--accent)';
+    col.style.outlineOffset = '-2px';
+  });
+
+  board.addEventListener('dragleave', e => {
+    const col = e.target.closest(columnSelector);
+    if (!col) return;
+    if (!col.contains(e.relatedTarget)) {
+      col.classList.remove('is-drop-target');
+      col.style.outline = '';
+      col.style.outlineOffset = '';
+    }
+  });
+
+  board.addEventListener('drop', async e => {
+    e.preventDefault();
+    const col = e.target.closest(columnSelector);
+    if (!col) return;
+
+    col.classList.remove('is-drop-target');
+    col.style.outline = '';
+    col.style.outlineOffset = '';
+
+    const taskId = e.dataTransfer.getData('text/plain') || _dragTaskId;
+    if (!taskId) return;
+
+    const scrumStatus = col.dataset.scrumStatus;
+    const action = STATUS_ACTION_MAP[scrumStatus];
+    if (!action) return;
+
+    // Check if the task is already in the target status
+    const task = state.getPayload()?.derived?.tasks?.find(t => t.id === taskId);
+    if (!task) return;
+
+    const targetStatuses = SCRUM_COLUMNS.find(c => c.id === scrumStatus)?.statuses || [];
+    if (targetStatuses.includes(task.status)) return; // already there
+
+    try {
+      await api.taskAction(taskId, action,
+        t('ui.scrum.movedFromBoard', { status: scrumStatus }, `Moved to ${scrumStatus} from sprint board.`)
+      );
+      flash(
+        t('ui.scrum.movedSuccess', { status: scrumStatus }, `Task moved to ${scrumStatus}.`),
+        'success'
+      );
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(err.message, 'error');
+    }
+  });
+}