trackops 2.0.4 → 2.0.5

package/ui/js/filters.js

@@ -1,247 +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 };
+/**
+ * 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 };