qdadm 0.13.0

package/src/composables/useNavigation.js

@@ -0,0 +1,89 @@
+/**
+ * useNavigation - Navigation composable for AppLayout
+ *
+ * Provides reactive navigation state from moduleRegistry.
+ * All data comes from module init declarations.
+ * Nav items are filtered based on EntityManager.canRead() permissions.
+ */
+
+import { computed, inject } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getNavSections, isRouteInFamily } from '../module/moduleRegistry'
+
+/**
+ * Navigation composable
+ */
+export function useNavigation() {
+  const route = useRoute()
+  const router = useRouter()
+  const orchestrator = inject('qdadmOrchestrator', null)
+
+  /**
+   * Check if user can access a nav item based on its entity's canRead()
+   */
+  function canAccessNavItem(item) {
+    if (!item.entity || !orchestrator) return true
+    const manager = orchestrator.get(item.entity)
+    if (!manager) return true
+    return manager.canRead()
+  }
+
+  // Get nav sections from registry, filtering items based on permissions
+  const navSections = computed(() => {
+    const sections = getNavSections()
+    return sections
+      .map(section => ({
+        ...section,
+        items: section.items.filter(item => canAccessNavItem(item))
+      }))
+      .filter(section => section.items.length > 0)  // Hide empty sections
+  })
+
+  /**
+   * Check if a nav item is currently active
+   */
+  function isNavActive(item) {
+    const currentRouteName = route.name
+
+    // Exact match mode
+    if (item.exact) {
+      return currentRouteName === item.route
+    }
+
+    // Use registry's family detection
+    return isRouteInFamily(currentRouteName, item.route)
+  }
+
+  /**
+   * Check if section contains active item
+   */
+  function sectionHasActiveItem(section) {
+    return section.items.some(item => isNavActive(item))
+  }
+
+  /**
+   * Handle nav click - force navigation if on same route with query params
+   */
+  function handleNavClick(event, item) {
+    if (route.name === item.route && Object.keys(route.query).length > 0) {
+      event.preventDefault()
+      router.push({ name: item.route })
+    }
+  }
+
+  return {
+    // Data (from moduleRegistry)
+    navSections,
+
+    // Active state
+    isNavActive,
+    sectionHasActiveItem,
+
+    // Event handlers
+    handleNavClick,
+
+    // Current route info (reactive)
+    currentRouteName: computed(() => route.name),
+    currentRoutePath: computed(() => route.path)
+  }
+}

package/src/composables/usePageBuilder.js

@@ -0,0 +1,334 @@
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useToast } from 'primevue/usetoast'
+import { useConfirm } from 'primevue/useconfirm'
+
+/**
+ * usePageBuilder - Base builder for dashboard pages
+ *
+ * Provides procedural API for:
+ * - Header actions (addHeaderAction, addRefreshAction, etc.)
+ * - Cards zone (addCard)
+ * - Main content configuration (datatable, tree, custom)
+ *
+ * Usage:
+ * const page = usePageBuilder()
+ *
+ * // Header
+ * page.addHeaderAction('refresh', { icon: 'pi pi-refresh', onClick: refresh })
+ *
+ * // Cards
+ * page.addCard('total', { value: 42, label: 'Total Events' })
+ *
+ * // Main content - DataTable
+ * page.setDataTable({ lazy: true, paginator: true })
+ * page.addColumn('name', { header: 'Name', sortable: true })
+ * page.addRowAction('edit', { icon: 'pi pi-pencil', onClick: edit })
+ *
+ * // Or Tree view
+ * page.setTreeView({ selectionMode: 'single' })
+ *
+ * // Or fully custom (use slot in template)
+ * page.setCustomContent()
+ */
+export function usePageBuilder(_config = {}) {
+  const router = useRouter()
+  const toast = useToast()
+  const confirm = useConfirm()
+
+  // ============ HEADER ACTIONS ============
+  const headerActionsMap = ref(new Map())
+
+  /**
+   * Add a header action button
+   */
+  function addHeaderAction(name, actionConfig) {
+    headerActionsMap.value.set(name, {
+      name,
+      severity: 'secondary',
+      ...actionConfig
+    })
+  }
+
+  function removeHeaderAction(name) {
+    headerActionsMap.value.delete(name)
+  }
+
+  function updateHeaderAction(name, updates) {
+    const existing = headerActionsMap.value.get(name)
+    if (existing) {
+      headerActionsMap.value.set(name, { ...existing, ...updates })
+    }
+  }
+
+  /**
+   * Get header actions with resolved state
+   */
+  function getHeaderActions(state = {}) {
+    const actions = []
+    for (const [, action] of headerActionsMap.value) {
+      if (action.visible && !action.visible(state)) continue
+      actions.push({
+        ...action,
+        label: typeof action.label === 'function' ? action.label(state) : action.label,
+        isLoading: action.loading ? action.loading(state) : false
+      })
+    }
+    return actions
+  }
+
+  const headerActions = computed(() => getHeaderActions())
+
+  /**
+   * Add standard refresh action
+   */
+  function addRefreshAction(onClick, options = {}) {
+    const loadingRef = options.loadingRef || ref(false)
+    addHeaderAction('refresh', {
+      label: 'Refresh',
+      icon: 'pi pi-refresh',
+      onClick,
+      loading: () => loadingRef.value,
+      ...options
+    })
+    return loadingRef
+  }
+
+  // ============ CARDS ============
+  const cardsMap = ref(new Map())
+
+  function addCard(name, cardConfig) {
+    cardsMap.value.set(name, { name, ...cardConfig })
+  }
+
+  function updateCard(name, cardConfig) {
+    const existing = cardsMap.value.get(name)
+    if (existing) {
+      cardsMap.value.set(name, { ...existing, ...cardConfig })
+    }
+  }
+
+  function removeCard(name) {
+    cardsMap.value.delete(name)
+  }
+
+  const cards = computed(() => Array.from(cardsMap.value.values()))
+
+  // ============ MAIN CONTENT ============
+  const contentType = ref('custom') // 'datatable', 'tree', 'custom'
+  const contentConfig = ref({})
+
+  // DataTable specific
+  const columnsMap = ref(new Map())
+  const rowActionsMap = ref(new Map())
+  const items = ref([])
+  const loading = ref(false)
+  const selected = ref([])
+
+  // Pagination
+  const page = ref(1)
+  const pageSize = ref(10)
+  const totalRecords = ref(0)
+  const sortField = ref(null)
+  const sortOrder = ref(1)
+
+  // Search & Filters
+  const searchQuery = ref('')
+  const filtersMap = ref(new Map())
+  const filterValues = ref({})
+
+  /**
+   * Set main content to DataTable
+   */
+  function setDataTable(options = {}) {
+    contentType.value = 'datatable'
+    contentConfig.value = {
+      paginator: true,
+      rows: 10,
+      rowsPerPageOptions: [10, 25, 50],
+      stripedRows: true,
+      removableSort: true,
+      dataKey: 'id',
+      ...options
+    }
+    if (options.pageSize) pageSize.value = options.pageSize
+  }
+
+  /**
+   * Set main content to Tree view
+   */
+  function setTreeView(options = {}) {
+    contentType.value = 'tree'
+    contentConfig.value = {
+      selectionMode: 'single',
+      ...options
+    }
+  }
+
+  /**
+   * Set main content to custom (use slot)
+   */
+  function setCustomContent() {
+    contentType.value = 'custom'
+    contentConfig.value = {}
+  }
+
+  /**
+   * Add a column to DataTable
+   */
+  function addColumn(field, columnConfig) {
+    columnsMap.value.set(field, {
+      field,
+      header: field.charAt(0).toUpperCase() + field.slice(1),
+      ...columnConfig
+    })
+  }
+
+  function removeColumn(field) {
+    columnsMap.value.delete(field)
+  }
+
+  const columns = computed(() => Array.from(columnsMap.value.values()))
+
+  /**
+   * Add a row action
+   */
+  function addRowAction(name, actionConfig) {
+    rowActionsMap.value.set(name, {
+      name,
+      severity: 'secondary',
+      ...actionConfig
+    })
+  }
+
+  function removeRowAction(name) {
+    rowActionsMap.value.delete(name)
+  }
+
+  function resolveValue(value, row) {
+    return typeof value === 'function' ? value(row) : value
+  }
+
+  function getRowActions(row) {
+    const actions = []
+    for (const [, action] of rowActionsMap.value) {
+      if (action.visible && !action.visible(row)) continue
+      actions.push({
+        name: action.name,
+        icon: resolveValue(action.icon, row),
+        tooltip: resolveValue(action.tooltip, row),
+        severity: resolveValue(action.severity, row) || 'secondary',
+        isDisabled: action.disabled ? action.disabled(row) : false,
+        handler: () => action.onClick(row)
+      })
+    }
+    return actions
+  }
+
+  /**
+   * Add a filter
+   */
+  function addFilter(name, filterConfig) {
+    filtersMap.value.set(name, {
+      name,
+      type: 'select',
+      placeholder: name,
+      ...filterConfig
+    })
+    if (filterValues.value[name] === undefined) {
+      filterValues.value[name] = filterConfig.default ?? null
+    }
+  }
+
+  function removeFilter(name) {
+    filtersMap.value.delete(name)
+    delete filterValues.value[name]
+  }
+
+  const filters = computed(() => Array.from(filtersMap.value.values()))
+
+  /**
+   * Set search config
+   */
+  const searchConfig = ref({ placeholder: 'Search...', fields: [] })
+
+  function setSearch(config) {
+    searchConfig.value = { ...searchConfig.value, ...config }
+  }
+
+  // Pagination handlers
+  function onPage(event) {
+    page.value = event.page + 1
+    pageSize.value = event.rows
+  }
+
+  function onSort(event) {
+    sortField.value = event.sortField
+    sortOrder.value = event.sortOrder
+  }
+
+  // Selection
+  const hasSelection = computed(() => selected.value.length > 0)
+  const selectionCount = computed(() => selected.value.length)
+
+  return {
+    // Header Actions
+    headerActions,
+    addHeaderAction,
+    removeHeaderAction,
+    updateHeaderAction,
+    getHeaderActions,
+    addRefreshAction,
+
+    // Cards
+    cards,
+    addCard,
+    updateCard,
+    removeCard,
+
+    // Main Content
+    contentType,
+    contentConfig,
+    setDataTable,
+    setTreeView,
+    setCustomContent,
+
+    // DataTable
+    columns,
+    addColumn,
+    removeColumn,
+    items,
+    loading,
+    selected,
+    hasSelection,
+    selectionCount,
+
+    // Row Actions
+    addRowAction,
+    removeRowAction,
+    getRowActions,
+
+    // Pagination
+    page,
+    pageSize,
+    totalRecords,
+    sortField,
+    sortOrder,
+    onPage,
+    onSort,
+
+    // Search & Filters
+    searchQuery,
+    searchConfig,
+    setSearch,
+    filters,
+    filterValues,
+    addFilter,
+    removeFilter,
+
+    // Utilities
+    toast,
+    confirm,
+    router
+  }
+}

package/src/composables/useStatus.js

@@ -0,0 +1,146 @@
+/**
+ * useStatus - Generic status composable
+ *
+ * Loads and formats status options from any API endpoint.
+ * Provides caching, label/severity lookup helpers.
+ *
+ * Usage:
+ * const { options, loadOptions, getLabel, getSeverity } = useStatus({
+ *   endpoint: '/reference/queue-statuses',
+ *   labelField: 'label',
+ *   valueField: 'value',
+ *   severityField: 'severity'
+ * })
+ */
+
+import { ref, inject } from 'vue'
+
+// Global cache for status options (keyed by endpoint)
+const statusCache = new Map()
+
+export function useStatus(config = {}) {
+  const {
+    endpoint,
+    labelField = 'label',
+    valueField = 'value',
+    severityField = 'severity',
+    // Optional: static options instead of API fetch
+    staticOptions = null,
+    // Optional: custom severity mapping function
+    severityMapper = null,
+    // Optional: default severity if not found
+    defaultSeverity = 'secondary'
+  } = config
+
+  const api = inject('apiAdapter')
+  const options = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  /**
+   * Load options from API or use static options
+   */
+  async function loadOptions(force = false) {
+    // Use static options if provided
+    if (staticOptions) {
+      options.value = staticOptions
+      return options.value
+    }
+
+    if (!endpoint) {
+      console.warn('[useStatus] No endpoint provided')
+      return []
+    }
+
+    // Check cache first (unless force refresh)
+    if (!force && statusCache.has(endpoint)) {
+      options.value = statusCache.get(endpoint)
+      return options.value
+    }
+
+    if (!api) {
+      console.warn('[useStatus] apiAdapter not provided')
+      return []
+    }
+
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await api.request('GET', endpoint)
+      // Handle both array response and { items: [] } response
+      const items = Array.isArray(response) ? response : (response?.items || response?.data || [])
+      options.value = items
+      statusCache.set(endpoint, items)
+      return items
+    } catch (e) {
+      error.value = e.message
+      console.error(`[useStatus] Failed to load options from ${endpoint}:`, e)
+      return []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * Get label for a status value
+   */
+  function getLabel(value) {
+    if (value == null) return ''
+    const option = options.value.find(opt =>
+      (typeof opt === 'string' ? opt : opt[valueField]) === value
+    )
+    if (!option) return String(value)
+    return typeof option === 'string' ? option : option[labelField]
+  }
+
+  /**
+   * Get severity for a status value (for Tag/Badge color)
+   */
+  function getSeverity(value) {
+    if (value == null) return defaultSeverity
+
+    // Use custom mapper if provided
+    if (severityMapper) {
+      return severityMapper(value) || defaultSeverity
+    }
+
+    const option = options.value.find(opt =>
+      (typeof opt === 'string' ? opt : opt[valueField]) === value
+    )
+    if (!option || typeof option === 'string') return defaultSeverity
+    return option[severityField] || defaultSeverity
+  }
+
+  /**
+   * Get full option object for a value
+   */
+  function getOption(value) {
+    if (value == null) return null
+    return options.value.find(opt =>
+      (typeof opt === 'string' ? opt : opt[valueField]) === value
+    )
+  }
+
+  /**
+   * Clear cache for this endpoint or all endpoints
+   */
+  function clearCache(all = false) {
+    if (all) {
+      statusCache.clear()
+    } else if (endpoint) {
+      statusCache.delete(endpoint)
+    }
+  }
+
+  return {
+    options,
+    loading,
+    error,
+    loadOptions,
+    getLabel,
+    getSeverity,
+    getOption,
+    clearCache
+  }
+}