qdadm 0.13.0

package/src/utils/debugInjector.js

@@ -0,0 +1,261 @@
+/* eslint-disable no-console */
+/**
+ * Debug Injector - Bypasses MCP/DevTools limitations
+ *
+ * Usage in browser console:
+ *   window.__debug.listFilters()
+ *   window.__debug.setFilter('queue_status', 'pending')
+ *   window.__debug.getVueApp()
+ *   window.__debug.triggerEvent('filterChange', { name: 'queue_status', value: 'pending' })
+ */
+
+class DebugInjector {
+  constructor() {
+    this.vueApp = null
+    this.components = new Map()
+  }
+
+  /**
+   * Initialize and expose to window
+   */
+  init() {
+    window.__debug = this
+    console.log('🔧 Debug Injector initialized. Use window.__debug to access.')
+    this.findVueApp()
+    return this
+  }
+
+  /**
+   * Find Vue app instance
+   */
+  findVueApp() {
+    const appEl = document.querySelector('#app')
+    if (appEl && appEl.__vue_app__) {
+      this.vueApp = appEl.__vue_app__
+      console.log('✅ Vue app found:', this.vueApp)
+      return this.vueApp
+    }
+    console.warn('⚠️ Vue app not found on #app')
+    return null
+  }
+
+  /**
+   * Get Vue component instance from DOM element
+   */
+  getComponentFromElement(selector) {
+    const el = typeof selector === 'string' ? document.querySelector(selector) : selector
+    if (!el) return null
+
+    // Vue 3 stores component on __vueParentComponent
+    let vnode = el.__vueParentComponent
+    while (vnode && !vnode.proxy) {
+      vnode = vnode.parent
+    }
+    return vnode?.proxy || null
+  }
+
+  /**
+   * Find all PrimeVue Select components
+   */
+  findSelects() {
+    const selects = document.querySelectorAll('[data-pc-name="select"]')
+    const results = []
+    selects.forEach((el, i) => {
+      const component = this.getComponentFromElement(el)
+      results.push({
+        index: i,
+        element: el,
+        component,
+        value: component?.modelValue,
+        placeholder: el.querySelector('[data-pc-section="label"]')?.textContent
+      })
+    })
+    console.table(results.map(r => ({
+      index: r.index,
+      placeholder: r.placeholder,
+      value: r.value
+    })))
+    return results
+  }
+
+  /**
+   * Simulate selecting a value in a PrimeVue Select
+   */
+  selectValue(selectIndex, optionText) {
+    const selects = this.findSelects()
+    const select = selects[selectIndex]
+    if (!select) {
+      console.error(`Select ${selectIndex} not found`)
+      return false
+    }
+
+    // Click to open dropdown
+    select.element.click()
+
+    // Wait for dropdown to open and find option
+    setTimeout(() => {
+      const options = document.querySelectorAll('[data-pc-section="option"]')
+      for (const opt of options) {
+        if (opt.textContent.includes(optionText)) {
+          console.log(`🎯 Clicking option: ${opt.textContent}`)
+          opt.click()
+          return true
+        }
+      }
+      console.error(`Option "${optionText}" not found`)
+      // Close dropdown
+      document.body.click()
+    }, 100)
+
+    return true
+  }
+
+  /**
+   * Direct Vue reactivity manipulation - find ListPage component
+   */
+  findListPage() {
+    // Find the main content area
+    const main = document.querySelector('main')
+    if (!main) return null
+
+    let component = this.getComponentFromElement(main)
+
+    // Walk up to find ListPage
+    while (component) {
+      if (component.$options?.name === 'ListPage' || component.localFilterValues) {
+        console.log('✅ Found ListPage component:', component)
+        return component
+      }
+      component = component.$parent
+    }
+
+    // Alternative: search in Vue app's component tree
+    console.warn('ListPage not found via DOM, searching component tree...')
+    return null
+  }
+
+  /**
+   * Get current filter values from ListPage
+   */
+  getFilterValues() {
+    const listPage = this.findListPage()
+    if (listPage) {
+      console.log('Filter values:', listPage.localFilterValues)
+      return listPage.localFilterValues
+    }
+    return null
+  }
+
+  /**
+   * Directly set a filter value (bypasses UI)
+   */
+  setFilterDirect(filterName, value) {
+    const listPage = this.findListPage()
+    if (!listPage) {
+      console.error('ListPage not found')
+      return false
+    }
+
+    console.log(`Setting ${filterName} = ${value}`)
+    listPage.localFilterValues[filterName] = value
+
+    // Trigger the change handler
+    if (listPage.onFilterChange) {
+      listPage.onFilterChange(filterName)
+    }
+
+    return true
+  }
+
+  /**
+   * Dispatch a custom event that Vue components can listen to
+   */
+  dispatchFilterChange(filterName, value) {
+    const event = new CustomEvent('debug:filterChange', {
+      detail: { filterName, value },
+      bubbles: true
+    })
+    document.dispatchEvent(event)
+    console.log(`📤 Dispatched debug:filterChange for ${filterName}=${value}`)
+  }
+
+  /**
+   * Log all Vue component instances in the tree
+   */
+  logComponentTree(root = null, depth = 0) {
+    if (!root) {
+      root = this.findVueApp()?._instance
+      if (!root) return
+    }
+
+    const indent = '  '.repeat(depth)
+    const name = root.type?.name || root.type?.__name || 'Anonymous'
+    console.log(`${indent}${name}`)
+
+    if (root.subTree?.children) {
+      for (const child of root.subTree.children) {
+        if (child?.component) {
+          this.logComponentTree(child.component, depth + 1)
+        }
+      }
+    }
+  }
+
+  /**
+   * Execute code in Vue component context
+   */
+  execInComponent(selector, code) {
+    const component = this.getComponentFromElement(selector)
+    if (!component) {
+      console.error('Component not found')
+      return null
+    }
+
+    try {
+      const fn = new Function('component', `with(component) { return ${code} }`)
+      return fn(component)
+    } catch (e) {
+      console.error('Exec failed:', e)
+      return null
+    }
+  }
+
+  /**
+   * Monitor all events on an element
+   */
+  monitorEvents(selector) {
+    const el = document.querySelector(selector)
+    if (!el) return
+
+    const events = ['click', 'change', 'input', 'focus', 'blur', 'mousedown', 'mouseup']
+    events.forEach(evt => {
+      el.addEventListener(evt, (e) => {
+        console.log(`📡 ${evt}:`, e.target, e)
+      }, true)
+    })
+    console.log(`Monitoring events on ${selector}`)
+  }
+
+  /**
+   * Quick help
+   */
+  help() {
+    console.log(`
+🔧 Debug Injector Commands:
+  __debug.findSelects()           - List all Select components
+  __debug.selectValue(0, 'text')  - Select option by text in Select #0
+  __debug.findListPage()          - Find ListPage component
+  __debug.getFilterValues()       - Get current filter values
+  __debug.setFilterDirect('name', 'value') - Directly set filter
+  __debug.monitorEvents('selector') - Monitor all events
+  __debug.logComponentTree()      - Log Vue component tree
+  __debug.help()                  - Show this help
+    `)
+  }
+}
+
+// Auto-initialize in development
+const debugInjector = new DebugInjector()
+
+export default debugInjector
+export { DebugInjector }

package/src/utils/formatters.js

@@ -0,0 +1,165 @@
+/**
+ * Centralized formatting utilities
+ *
+ * Usage:
+ *   import { formatDate, formatDateTime, formatDuration } from '@/dashboard/utils/formatters'
+ *
+ *   {{ formatDate(item.created_at) }}
+ *   {{ formatDateTime(item.updated_at) }}
+ */
+
+// =============================================================================
+// DATE/TIME FORMATTING
+// =============================================================================
+
+/**
+ * Format a date string to localized date+time
+ * Default format: toLocaleString() (e.g., "20/12/2025, 14:30:00")
+ *
+ * @param {string|Date} dateStr - ISO date string or Date object
+ * @param {object} options - Intl.DateTimeFormat options
+ * @returns {string} Formatted date string or '-' if empty
+ */
+export function formatDate(dateStr, options = {}) {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  if (isNaN(date.getTime())) return '-'
+
+  if (Object.keys(options).length === 0) {
+    return date.toLocaleString()
+  }
+  return date.toLocaleString(undefined, options)
+}
+
+/**
+ * Format to full datetime with year (20/12/2025 14:30)
+ */
+export function formatDateTime(dateStr) {
+  return formatDate(dateStr, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+/**
+ * Format to short datetime without year (20/12 14:30)
+ */
+export function formatDateTimeShort(dateStr) {
+  return formatDate(dateStr, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+/**
+ * Format to date only (20/12/2025)
+ */
+export function formatDateOnly(dateStr) {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  if (isNaN(date.getTime())) return '-'
+  return date.toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  })
+}
+
+/**
+ * Format to time only (14:30:00)
+ */
+export function formatTimeOnly(dateStr) {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  if (isNaN(date.getTime())) return '-'
+  return date.toLocaleTimeString()
+}
+
+/**
+ * Format with "Never" as default (for last_used fields)
+ */
+export function formatDateOrNever(dateStr) {
+  if (!dateStr) return 'Never'
+  return formatDate(dateStr)
+}
+
+// =============================================================================
+// DURATION FORMATTING
+// =============================================================================
+
+/**
+ * Format a duration in milliseconds to human-readable string
+ *
+ * @param {number} ms - Duration in milliseconds
+ * @returns {string} Human-readable duration (e.g., "2h 30m 15s" or "45.2s")
+ */
+export function formatDuration(ms) {
+  if (ms === null || ms === undefined) return '-'
+  if (ms < 1000) return `${ms}ms`
+
+  const seconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+
+  if (hours > 0) {
+    const remainingMinutes = minutes % 60
+    const remainingSeconds = seconds % 60
+    return `${hours}h ${remainingMinutes}m ${remainingSeconds}s`
+  }
+  if (minutes > 0) {
+    const remainingSeconds = seconds % 60
+    return `${minutes}m ${remainingSeconds}s`
+  }
+  // Show decimal seconds for short durations
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+/**
+ * Format duration from start/end timestamps
+ */
+export function formatDurationBetween(startDate, endDate) {
+  if (!startDate || !endDate) return '-'
+  const start = new Date(startDate)
+  const end = new Date(endDate)
+  if (isNaN(start.getTime()) || isNaN(end.getTime())) return '-'
+  return formatDuration(end - start)
+}
+
+// =============================================================================
+// NUMBER FORMATTING
+// =============================================================================
+
+/**
+ * Format a number with locale-specific separators
+ */
+export function formatNumber(value, options = {}) {
+  if (value === null || value === undefined) return '-'
+  return value.toLocaleString(undefined, options)
+}
+
+/**
+ * Format bytes to human-readable size
+ */
+export function formatBytes(bytes) {
+  if (bytes === null || bytes === undefined) return '-'
+  if (bytes === 0) return '0 B'
+
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const k = 1024
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${units[i]}`
+}
+
+/**
+ * Format a percentage
+ */
+export function formatPercent(value, decimals = 1) {
+  if (value === null || value === undefined) return '-'
+  return `${(value * 100).toFixed(decimals)}%`
+}

package/src/utils/index.js

@@ -0,0 +1,35 @@
+/**
+ * qdadm - Utils exports
+ */
+
+// Formatters
+export {
+  formatDate,
+  formatDateTime,
+  formatDateTimeShort,
+  formatDateOnly,
+  formatTimeOnly,
+  formatDateOrNever,
+  formatDuration,
+  formatDurationBetween,
+  formatNumber,
+  formatBytes,
+  formatPercent
+} from './formatters'
+
+// Transformers
+export {
+  toKeyValueArray,
+  toKeyValueObject,
+  toLanguageCodes,
+  toLanguageObjects,
+  toDateObject,
+  toIsoDate,
+  toIsoDateTime,
+  deepClone,
+  getSparseUpdate,
+  isEqual
+} from './transformers'
+
+// Debug Injector
+export { default as debugInjector, DebugInjector } from './debugInjector'

package/src/utils/transformers.js

@@ -0,0 +1,105 @@
+/**
+ * Data transformation utilities for forms
+ *
+ * Provides consistent conversions between API data formats and form structures.
+ */
+
+/**
+ * Convert object {key: value} to array [{key, value}] for KeyValueEditor
+ */
+export function toKeyValueArray(obj) {
+  if (!obj || typeof obj !== 'object') return []
+  return Object.entries(obj).map(([key, value]) => ({ key, value }))
+}
+
+/**
+ * Convert array [{key, value}] to object {key: value} for API
+ */
+export function toKeyValueObject(arr) {
+  if (!Array.isArray(arr)) return {}
+  return Object.fromEntries(
+    arr.filter(item => item.key && item.key.trim())
+       .map(item => [item.key.trim(), item.value])
+  )
+}
+
+/**
+ * Convert language objects [{code, fluency}] to array of codes ['en', 'fr']
+ */
+export function toLanguageCodes(languages) {
+  if (!Array.isArray(languages)) return []
+  return languages.map(l => typeof l === 'string' ? l : l.code).filter(Boolean)
+}
+
+/**
+ * Convert array of codes to language objects [{code, fluency}]
+ */
+export function toLanguageObjects(codes, defaultFluency = 1) {
+  if (!Array.isArray(codes)) return []
+  return codes.filter(Boolean).map(code => ({
+    code: typeof code === 'string' ? code : code.code,
+    fluency: typeof code === 'object' ? code.fluency : defaultFluency
+  }))
+}
+
+/**
+ * Convert ISO date string to Date object
+ */
+export function toDateObject(dateStr) {
+  if (!dateStr) return null
+  if (dateStr instanceof Date) return dateStr
+  return new Date(dateStr)
+}
+
+/**
+ * Convert Date to ISO date string (YYYY-MM-DD)
+ */
+export function toIsoDate(date) {
+  if (!date) return null
+  if (typeof date === 'string') return date.split('T')[0]
+  return date.toISOString().split('T')[0]
+}
+
+/**
+ * Convert Date to ISO datetime string
+ */
+export function toIsoDateTime(date) {
+  if (!date) return null
+  if (typeof date === 'string') return date
+  return date.toISOString()
+}
+
+/**
+ * Deep clone an object (for snapshots)
+ */
+export function deepClone(obj) {
+  if (obj === null || typeof obj !== 'object') return obj
+  if (obj instanceof Date) return new Date(obj)
+  if (Array.isArray(obj)) return obj.map(deepClone)
+  return Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => [k, deepClone(v)])
+  )
+}
+
+/**
+ * Get sparse update object (only changed fields)
+ */
+export function getSparseUpdate(original, modified, excludeFields = []) {
+  const patch = {}
+  for (const key in modified) {
+    if (excludeFields.includes(key)) continue
+    const origVal = JSON.stringify(original[key])
+    const modVal = JSON.stringify(modified[key])
+    if (origVal !== modVal) {
+      patch[key] = modified[key]
+    }
+  }
+  return patch
+}
+
+/**
+ * Check if two values are deeply equal
+ */
+export function isEqual(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b)
+}