trackops 2.0.3 → 2.0.5

package/ui/js/console-logger.js

@@ -1,172 +1,172 @@
-/**
- * console-logger.js — Panel de logs y captura de errores del frontend
- * Intercepta console.error, console.warn y window.onerror.
- * Muestra un panel colapsable en la parte inferior de la pantalla.
- */
-
-import * as state from './state.js';
-
-const MAX_LOGS = 100;
-let _panel = null;
-let _logsList = null;
-let _errorBadge = null;
-let _titleEl = null;
-let _errorCount = 0;
-
-/** Inicializa el módulo y vincula el panel del DOM */
-export function init() {
-  _panel     = document.getElementById('console-panel');
-  _logsList  = document.getElementById('console-logs');
-  _errorBadge = document.getElementById('console-error-count');
-  _titleEl   = document.getElementById('console-panel-title');
-
-  const closeBtn = document.getElementById('console-close-btn');
-  const clearBtn = document.getElementById('console-clear-btn');
-
-  closeBtn?.addEventListener('click', close);
-  clearBtn?.addEventListener('click', clear);
-
-  _patchConsole();
-  _attachWindowErrors();
-}
-
-/** Abre el panel de console */
-export function open() {
-  _panel?.classList.add('is-open');
-  state.update('consolePanelOpen', true);
-  // Scroll to bottom
-  setTimeout(() => { if (_logsList) _logsList.scrollTop = _logsList.scrollHeight; }, 50);
-}
-
-/** Cierra el panel */
-export function close() {
-  _panel?.classList.remove('is-open');
-  state.update('consolePanelOpen', false);
-}
-
-/** Toggle */
-export function toggle() {
-  if (state.get('consolePanelOpen')) close();
-  else open();
-}
-
-/** Limpia los logs */
-export function clear() {
-  state.update('consoleLogs', []);
-  _errorCount = 0;
-  if (_logsList) _logsList.innerHTML = '';
-  _updateErrorBadge();
-}
-
-/**
- * Añade una entrada al log
- * @param {'error'|'warn'|'info'|'debug'} level
- * @param {string} message
- */
-export function log(level, message) {
-  const entry = {
-    level,
-    message: String(message),
-    time: new Date().toISOString(),
-  };
-
-  const logs = state.get('consoleLogs');
-  logs.push(entry);
-  if (logs.length > MAX_LOGS) logs.shift();
-  state.update('consoleLogs', logs);
-
-  _appendEntry(entry);
-
-  if (level === 'error') {
-    _errorCount++;
-    _updateErrorBadge();
-    // Auto-abrir en error
-    if (!state.get('consolePanelOpen')) open();
-  }
-}
-
-function _appendEntry(entry) {
-  if (!_logsList) return;
-  const time = entry.time.slice(11, 23); // HH:mm:ss.mmm
-  const item = document.createElement('div');
-  item.className = 'console-log-entry';
-  item.setAttribute('role', 'listitem');
-  item.innerHTML = `
-    <span class="console-log-time">${time}</span>
-    <span class="log-level log-${entry.level}">[${entry.level.toUpperCase()}]</span>
-    <span class="console-log-msg">${_escapeHtml(entry.message)}</span>
-  `;
-  _logsList.appendChild(item);
-  _logsList.scrollTop = _logsList.scrollHeight;
-
-  // Limitar nodos en el DOM
-  while (_logsList.childElementCount > MAX_LOGS) {
-    _logsList.firstElementChild?.remove();
-  }
-}
-
-function _updateErrorBadge() {
-  if (!_errorBadge) return;
-  if (_errorCount > 0) {
-    _errorBadge.textContent = _errorCount;
-    _errorBadge.style.display = '';
-  } else {
-    _errorBadge.style.display = 'none';
-  }
-  // Actualizar badge del sidebar
-  const sidebarBadge = document.getElementById('sidebar-console-badge');
-  if (sidebarBadge) {
-    sidebarBadge.textContent = _errorCount;
-    sidebarBadge.style.display = _errorCount > 0 ? '' : 'none';
-  }
-}
-
-function _patchConsole() {
-  const _origError = console.error.bind(console);
-  const _origWarn  = console.warn.bind(console);
-  const _origLog   = console.log.bind(console);
-
-  console.error = (...args) => {
-    _origError(...args);
-    log('error', args.map(_serialize).join(' '));
-  };
-  console.warn = (...args) => {
-    _origWarn(...args);
-    log('warn', args.map(_serialize).join(' '));
-  };
-  // Solo capturar console.log marcados como [ops]
-  console.log = (...args) => {
-    _origLog(...args);
-    const msg = args.map(_serialize).join(' ');
-    if (msg.startsWith('[ops]') || msg.startsWith('[router]') || msg.startsWith('[api]')) {
-      log('info', msg);
-    }
-  };
-}
-
-function _attachWindowErrors() {
-  window.onerror = (message, source, lineno, colno, error) => {
-    const msg = error?.stack || `${message} (${source}:${lineno}:${colno})`;
-    log('error', msg);
-    return false; // Dejar que sigan propagándose
-  };
-
-  window.addEventListener('unhandledrejection', event => {
-    const msg = event.reason?.stack || String(event.reason);
-    log('error', `Unhandled Promise rejection: ${msg}`);
-  });
-}
-
-function _serialize(value) {
-  if (typeof value === 'string') return value;
-  if (value instanceof Error) return value.stack || value.message;
-  try { return JSON.stringify(value, null, 0); } catch { return String(value); }
-}
-
-function _escapeHtml(str) {
-  return String(str)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
+/**
+ * console-logger.js — Panel de logs y captura de errores del frontend
+ * Intercepta console.error, console.warn y window.onerror.
+ * Muestra un panel colapsable en la parte inferior de la pantalla.
+ */
+
+import * as state from './state.js';
+
+const MAX_LOGS = 100;
+let _panel = null;
+let _logsList = null;
+let _errorBadge = null;
+let _titleEl = null;
+let _errorCount = 0;
+
+/** Inicializa el módulo y vincula el panel del DOM */
+export function init() {
+  _panel     = document.getElementById('console-panel');
+  _logsList  = document.getElementById('console-logs');
+  _errorBadge = document.getElementById('console-error-count');
+  _titleEl   = document.getElementById('console-panel-title');
+
+  const closeBtn = document.getElementById('console-close-btn');
+  const clearBtn = document.getElementById('console-clear-btn');
+
+  closeBtn?.addEventListener('click', close);
+  clearBtn?.addEventListener('click', clear);
+
+  _patchConsole();
+  _attachWindowErrors();
+}
+
+/** Abre el panel de console */
+export function open() {
+  _panel?.classList.add('is-open');
+  state.update('consolePanelOpen', true);
+  // Scroll to bottom
+  setTimeout(() => { if (_logsList) _logsList.scrollTop = _logsList.scrollHeight; }, 50);
+}
+
+/** Cierra el panel */
+export function close() {
+  _panel?.classList.remove('is-open');
+  state.update('consolePanelOpen', false);
+}
+
+/** Toggle */
+export function toggle() {
+  if (state.get('consolePanelOpen')) close();
+  else open();
+}
+
+/** Limpia los logs */
+export function clear() {
+  state.update('consoleLogs', []);
+  _errorCount = 0;
+  if (_logsList) _logsList.innerHTML = '';
+  _updateErrorBadge();
+}
+
+/**
+ * Añade una entrada al log
+ * @param {'error'|'warn'|'info'|'debug'} level
+ * @param {string} message
+ */
+export function log(level, message) {
+  const entry = {
+    level,
+    message: String(message),
+    time: new Date().toISOString(),
+  };
+
+  const logs = state.get('consoleLogs');
+  logs.push(entry);
+  if (logs.length > MAX_LOGS) logs.shift();
+  state.update('consoleLogs', logs);
+
+  _appendEntry(entry);
+
+  if (level === 'error') {
+    _errorCount++;
+    _updateErrorBadge();
+    // Auto-abrir en error
+    if (!state.get('consolePanelOpen')) open();
+  }
+}
+
+function _appendEntry(entry) {
+  if (!_logsList) return;
+  const time = entry.time.slice(11, 23); // HH:mm:ss.mmm
+  const item = document.createElement('div');
+  item.className = 'console-log-entry';
+  item.setAttribute('role', 'listitem');
+  item.innerHTML = `
+    <span class="console-log-time">${time}</span>
+    <span class="log-level log-${entry.level}">[${entry.level.toUpperCase()}]</span>
+    <span class="console-log-msg">${_escapeHtml(entry.message)}</span>
+  `;
+  _logsList.appendChild(item);
+  _logsList.scrollTop = _logsList.scrollHeight;
+
+  // Limitar nodos en el DOM
+  while (_logsList.childElementCount > MAX_LOGS) {
+    _logsList.firstElementChild?.remove();
+  }
+}
+
+function _updateErrorBadge() {
+  if (!_errorBadge) return;
+  if (_errorCount > 0) {
+    _errorBadge.textContent = _errorCount;
+    _errorBadge.style.display = '';
+  } else {
+    _errorBadge.style.display = 'none';
+  }
+  // Actualizar badge del sidebar
+  const sidebarBadge = document.getElementById('sidebar-console-badge');
+  if (sidebarBadge) {
+    sidebarBadge.textContent = _errorCount;
+    sidebarBadge.style.display = _errorCount > 0 ? '' : 'none';
+  }
+}
+
+function _patchConsole() {
+  const _origError = console.error.bind(console);
+  const _origWarn  = console.warn.bind(console);
+  const _origLog   = console.log.bind(console);
+
+  console.error = (...args) => {
+    _origError(...args);
+    log('error', args.map(_serialize).join(' '));
+  };
+  console.warn = (...args) => {
+    _origWarn(...args);
+    log('warn', args.map(_serialize).join(' '));
+  };
+  // Solo capturar console.log marcados como [ops]
+  console.log = (...args) => {
+    _origLog(...args);
+    const msg = args.map(_serialize).join(' ');
+    if (msg.startsWith('[ops]') || msg.startsWith('[router]') || msg.startsWith('[api]')) {
+      log('info', msg);
+    }
+  };
+}
+
+function _attachWindowErrors() {
+  window.onerror = (message, source, lineno, colno, error) => {
+    const msg = error?.stack || `${message} (${source}:${lineno}:${colno})`;
+    log('error', msg);
+    return false; // Dejar que sigan propagándose
+  };
+
+  window.addEventListener('unhandledrejection', event => {
+    const msg = event.reason?.stack || String(event.reason);
+    log('error', `Unhandled Promise rejection: ${msg}`);
+  });
+}
+
+function _serialize(value) {
+  if (typeof value === 'string') return value;
+  if (value instanceof Error) return value.stack || value.message;
+  try { return JSON.stringify(value, null, 0); } catch { return String(value); }
+}
+
+function _escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

package/ui/js/filters.js

@@ -0,0 +1,247 @@
+/**
+ * filters.js — Filtros persistentes para vistas de tareas
+ * Persiste en localStorage + sincroniza con state.
+ */
+
+import * as state from './state.js';
+import { esc } from './utils.js';
+import { icon } from './icons.js';
+import { t } from './i18n.js';
+
+const STORAGE_PREFIX = 'ops-filters-';
+
+/** Claves de filtro soportadas */
+const FILTER_KEYS = ['status', 'priority', 'phase', 'stream', 'search'];
+
+// ─────────────────────────────── PERSISTENCE ─────────────────────────────────
+
+/**
+ * Guardar filtros de una vista en localStorage y state
+ * @param {string} viewId — ID de la vista (board, tasks)
+ * @param {Object} filters — Mapa de filtros activos
+ */
+export function save(viewId, filters) {
+  // Limpiar filtros vacios
+  const clean = {};
+  for (const key of FILTER_KEYS) {
+    if (filters[key]) clean[key] = filters[key];
+  }
+  localStorage.setItem(`${STORAGE_PREFIX}${viewId}`, JSON.stringify(clean));
+  state.update('activeFilters', clean);
+}
+
+/**
+ * Cargar filtros guardados de una vista
+ * @param {string} viewId
+ * @returns {Object} Filtros guardados o {}
+ */
+export function load(viewId) {
+  try {
+    const raw = localStorage.getItem(`${STORAGE_PREFIX}${viewId}`);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Limpiar filtros de una vista
+ * @param {string} viewId
+ */
+export function clear(viewId) {
+  localStorage.removeItem(`${STORAGE_PREFIX}${viewId}`);
+  state.update('activeFilters', {});
+}
+
+// ─────────────────────────────── APLICAR ─────────────────────────────────────
+
+/**
+ * Aplicar filtros a una lista de tareas
+ * @param {Array} tasks — Lista de tareas
+ * @param {Object} filters — Filtros activos
+ * @returns {Array} Tareas filtradas
+ */
+export function apply(tasks, filters) {
+  if (!filters || Object.keys(filters).length === 0) return tasks;
+
+  return tasks.filter(task => {
+    if (filters.status && task.status !== filters.status) return false;
+    if (filters.priority && task.priority !== filters.priority) return false;
+    if (filters.phase && task.phase !== filters.phase) return false;
+    if (filters.stream && task.stream !== filters.stream) return false;
+    if (filters.search) {
+      const q = filters.search.toLowerCase();
+      const haystack = `${task.title} ${task.id} ${task.summary || ''} ${task.stream || ''}`.toLowerCase();
+      if (!haystack.includes(q)) return false;
+    }
+    return true;
+  });
+}
+
+// ─────────────────────────────── CONTEO ──────────────────────────────────────
+
+/**
+ * Contar filtros activos
+ * @param {Object} filters
+ * @returns {number}
+ */
+export function count(filters) {
+  if (!filters) return 0;
+  return FILTER_KEYS.filter(k => filters[k]).length;
+}
+
+// ─────────────────────────────── UI ──────────────────────────────────────────
+
+/**
+ * Renderizar la barra de filtros (chips + selectores)
+ * @param {string} viewId — ID de la vista
+ * @param {Object} filters — Filtros actuales
+ * @param {Object} options — Opciones de renderizado
+ * @param {Array} [options.statuses] — Estados disponibles
+ * @param {Array} [options.priorities] — Prioridades disponibles
+ * @param {Array} [options.phases] — Fases disponibles
+ * @param {Array} [options.streams] — Streams disponibles
+ * @returns {string} HTML
+ */
+export function renderBar(viewId, filters, options = {}) {
+  const statusLabels = state.getStatusLabels?.() || {};
+  const phases = options.phases || state.getPhases?.() || [];
+  const statuses = options.statuses || ['pending', 'in_progress', 'in_review', 'blocked', 'completed', 'cancelled'];
+  const priorities = options.priorities || ['P0', 'P1', 'P2', 'P3'];
+  const streams = options.streams || [];
+
+  return `
+    <div class="filter-bar" role="search" aria-label="${t('ui.filters.label', {}, 'Filter tasks')}">
+      <div class="filter-controls">
+        ${_renderSelect('status', filters.status, statuses.map(s => ({
+          value: s, label: statusLabels[s] || s
+        })), t('ui.filters.status', {}, 'Status'))}
+
+        ${_renderSelect('priority', filters.priority, priorities.map(p => ({
+          value: p, label: p
+        })), t('ui.filters.priority', {}, 'Priority'))}
+
+        ${phases.length ? _renderSelect('phase', filters.phase, phases.map(p => ({
+          value: p.id, label: `${p.id} · ${p.label}`
+        })), t('ui.filters.phase', {}, 'Phase')) : ''}
+
+        ${streams.length ? _renderSelect('stream', filters.stream, streams.map(s => ({
+          value: s, label: s
+        })), t('ui.filters.stream', {}, 'Stream')) : ''}
+
+        <div class="filter-search">
+          <input
+            type="search"
+            class="form-input filter-search-input"
+            placeholder="${t('ui.filters.searchPlaceholder', {}, 'Search tasks...')}"
+            value="${esc(filters.search || '')}"
+            data-filter="search"
+            aria-label="${t('ui.filters.search', {}, 'Search')}"
+          />
+        </div>
+      </div>
+
+      ${count(filters) > 0 ? `
+        <div class="filter-active-bar">
+          ${_renderActiveChips(filters, statusLabels, phases)}
+          <button class="btn btn-ghost btn-sm filter-clear-all" type="button" data-filter-action="clear">
+            ${icon('x', 14)} ${t('ui.filters.clearAll', {}, 'Clear all')}
+          </button>
+        </div>
+      ` : ''}
+    </div>
+  `;
+}
+
+function _renderSelect(key, current, options, placeholder) {
+  return `
+    <select class="form-select filter-select" data-filter="${key}" aria-label="${placeholder}">
+      <option value="">${esc(placeholder)}</option>
+      ${options.map(o => `
+        <option value="${esc(o.value)}" ${current === o.value ? 'selected' : ''}>${esc(o.label)}</option>
+      `).join('')}
+    </select>
+  `;
+}
+
+function _renderActiveChips(filters, statusLabels, phases) {
+  const chips = [];
+
+  if (filters.status) {
+    chips.push({ key: 'status', label: statusLabels[filters.status] || filters.status });
+  }
+  if (filters.priority) {
+    chips.push({ key: 'priority', label: filters.priority });
+  }
+  if (filters.phase) {
+    const phase = phases.find(p => p.id === filters.phase);
+    chips.push({ key: 'phase', label: phase ? `${phase.id} · ${phase.label}` : filters.phase });
+  }
+  if (filters.stream) {
+    chips.push({ key: 'stream', label: filters.stream });
+  }
+  if (filters.search) {
+    chips.push({ key: 'search', label: `"${filters.search}"` });
+  }
+
+  return chips.map(c => `
+    <span class="chip chip-active" data-filter-remove="${c.key}">
+      ${esc(c.label)}
+      <button class="chip-remove" type="button" aria-label="Remove ${c.key} filter">${icon('x', 12)}</button>
+    </span>
+  `).join('');
+}
+
+/**
+ * Vincular eventos de la barra de filtros
+ * @param {string} viewId — ID de la vista
+ * @param {Function} onFilter — Callback cuando cambian los filtros
+ */
+export function bindBar(viewId, onFilter) {
+  const filters = load(viewId);
+
+  // Selectores
+  document.querySelectorAll('.filter-select').forEach(select => {
+    select.addEventListener('change', () => {
+      const key = select.dataset.filter;
+      if (key) {
+        filters[key] = select.value || undefined;
+        if (!select.value) delete filters[key];
+        save(viewId, filters);
+        onFilter(filters);
+      }
+    });
+  });
+
+  // Busqueda con debounce
+  const searchInput = document.querySelector('.filter-search-input');
+  let searchTimer = null;
+  searchInput?.addEventListener('input', () => {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(() => {
+      const val = searchInput.value.trim();
+      if (val) filters.search = val;
+      else delete filters.search;
+      save(viewId, filters);
+      onFilter(filters);
+    }, 300);
+  });
+
+  // Eliminar chip individual
+  document.querySelectorAll('[data-filter-remove]').forEach(chip => {
+    chip.addEventListener('click', () => {
+      const key = chip.dataset.filterRemove;
+      delete filters[key];
+      save(viewId, filters);
+      onFilter(filters);
+    });
+  });
+
+  // Limpiar todos
+  document.querySelector('.filter-clear-all')?.addEventListener('click', () => {
+    clear(viewId);
+    onFilter({});
+  });
+}
+
+export default { save, load, clear, apply, count, renderBar, bindBar };