qdadm 0.13.0 → 0.14.2

package/src/composables/useBareForm.js

@@ -1,4 +1,4 @@
-import { ref, computed, provide, onUnmounted } from 'vue'
+import { ref, computed, provide, inject, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useToast } from 'primevue/usetoast'
 import { useDirtyState } from './useDirtyState'
@@ -20,6 +20,9 @@ import { registerGuardDialog, unregisterGuardDialog } from './useGuardStore'
  *   } = useBareForm({
  *     getState: () => ({ form: form.value }),
  *     routePrefix: 'agents',    // for cancel() navigation
+ *     entityName: 'Agent',      // for auto-title (optional, or use 'entity' for auto-lookup)
+ *     labelField: 'name',       // field to use as entity label (optional)
+ *     entity: 'agents',         // EntityManager name for auto metadata (optional)
  *     guard: true,              // enable unsaved changes modal
  *     onGuardSave: () => save() // optional save callback for guard modal
  *   })
@@ -32,20 +35,25 @@ import { registerGuardDialog, unregisterGuardDialog } from './useGuardStore'
  * - Common computed (isEdit, entityId)
  * - Navigation helpers (cancel)
  * - Access to router, route, toast
+ * - Auto page title via provide (for PageHeader)
  *
  * @param {Object} options
  * @param {Function} options.getState - Function returning current form state for comparison
  * @param {string} options.routePrefix - Route name for cancel navigation (default: '')
+ * @param {string} options.entityName - Display name for entity (default: from manager or derived from routePrefix)
+ * @param {string|Function} options.labelField - Field name or function to extract entity label (default: from manager or 'name')
+ * @param {string|Ref|Object} options.entity - EntityManager name (string) for auto metadata, OR entity data (Ref/Object) for breadcrumb
  * @param {boolean} options.guard - Enable unsaved changes guard (default: true)
  * @param {Function} options.onGuardSave - Callback for save button in guard modal
  * @param {Function} options.getId - Custom function to extract entity ID from route (optional)
- * @param {Ref|Object} options.entity - Entity data for dynamic breadcrumb labels (optional)
  * @param {Function} options.breadcrumbLabel - Callback (entity) => string for custom breadcrumb label (optional)
  */
 export function useBareForm(options = {}) {
   const {
     getState,
     routePrefix = '',
+    entityName = null,
+    labelField = null,
     guard = true,
     onGuardSave = null,
     getId = null,
@@ -57,6 +65,19 @@ export function useBareForm(options = {}) {
     throw new Error('useBareForm requires a getState function')
   }
 
+  // Try to get EntityManager metadata if entity is a string
+  let manager = null
+  if (typeof entity === 'string') {
+    const orchestrator = inject('qdadmOrchestrator', null)
+    if (orchestrator) {
+      try {
+        manager = orchestrator.get(entity)
+      } catch {
+        // Manager not found, continue without it
+      }
+    }
+  }
+
   // Router, route, toast - common dependencies
   const router = useRouter()
   const route = useRoute()
@@ -88,8 +109,53 @@ export function useBareForm(options = {}) {
   provide('isFieldDirty', isFieldDirty)
   provide('dirtyFields', dirtyFields)
 
+  // Resolve entityName: explicit > manager > derived from routePrefix
+  const derivedEntityName = routePrefix
+    ? routePrefix.charAt(0).toUpperCase() + routePrefix.slice(1).replace(/s$/, '')
+    : null
+  const effectiveEntityName = entityName || manager?.label || derivedEntityName
+
+  // Resolve labelField: explicit > manager > default 'name'
+  const effectiveLabelField = labelField || manager?.labelField || 'name'
+
+  // Provide entity context for child components (e.g., SeverityTag auto-discovery)
+  if (routePrefix) {
+    const entityNameForProvider = routePrefix.endsWith('s') ? routePrefix : routePrefix + 's'
+    provide('mainEntity', entityNameForProvider)
+  } else if (typeof entity === 'string') {
+    provide('mainEntity', entity)
+  }
+
+  // Auto page title parts for PageHeader
+  const getEntityLabel = () => {
+    const state = getState()
+    const formData = state.form || state
+    if (!formData) return null
+    // Use manager.getEntityLabel if available, otherwise use effectiveLabelField
+    if (manager) {
+      return manager.getEntityLabel(formData)
+    }
+    if (typeof effectiveLabelField === 'function') {
+      return effectiveLabelField(formData)
+    }
+    return formData[effectiveLabelField] || null
+  }
+
+  const pageTitleParts = computed(() => ({
+    action: isEdit.value ? 'Edit' : 'Create',
+    entityName: effectiveEntityName,
+    entityLabel: isEdit.value ? getEntityLabel() : null
+  }))
+
+  // Provide title parts for automatic PageHeader consumption
+  if (effectiveEntityName) {
+    provide('qdadmPageTitleParts', pageTitleParts)
+  }
+
   // Breadcrumb (auto-generated from route path, with optional entity for dynamic labels)
-  const { breadcrumbItems } = useBreadcrumb({ entity, getEntityLabel: breadcrumbLabel })
+  // Only pass entity to breadcrumb if it's actual entity data (not a string manager name)
+  const breadcrumbEntity = typeof entity === 'string' ? null : entity
+  const { breadcrumbItems } = useBreadcrumb({ entity: breadcrumbEntity, getEntityLabel: breadcrumbLabel })
 
   // Unsaved changes guard
   let guardDialog = null
@@ -117,6 +183,9 @@ export function useBareForm(options = {}) {
     route,
     toast,
 
+    // Manager (if resolved from entity string)
+    manager,
+
     // State
     loading,
     saving,
@@ -138,6 +207,9 @@ export function useBareForm(options = {}) {
     breadcrumb: breadcrumbItems,
 
     // Guard dialog (for UnsavedChangesDialog component)
-    guardDialog
+    guardDialog,
+
+    // Title helpers
+    pageTitleParts
   }
 }

package/src/composables/useBreadcrumb.js

@@ -131,8 +131,16 @@ export function useBreadcrumb(options = {}) {
     return items
   }
 
+  // Action segments that should be excluded from breadcrumb
+  const actionSegments = ['edit', 'create', 'show', 'view', 'new', 'delete']
+
   /**
    * Build breadcrumb automatically from route path
+   *
+   * Breadcrumb shows navigable parents only:
+   * - Excludes action segments (edit, create, show, etc.)
+   * - Excludes IDs
+   * - All items have links (to navigate back to parent)
    */
   function buildFromPath(entity, getEntityLabel) {
     const items = []
@@ -147,19 +155,17 @@ export function useBreadcrumb(options = {}) {
       const segment = segments[i]
       currentPath += `/${segment}`
 
-      // Handle IDs: numeric, UUID, ULID, or any alphanumeric string > 10 chars - use entity label instead
+      // Skip action segments (edit, create, show, etc.)
+      if (actionSegments.includes(segment.toLowerCase())) {
+        continue
+      }
+
+      // Skip IDs: numeric, UUID, ULID, or any alphanumeric string > 10 chars
       const isId = /^\d+$/.test(segment) ||  // numeric
         segment.match(/^[0-9a-f-]{36}$/i) ||  // UUID
         segment.match(/^[0-7][0-9a-hjkmnp-tv-z]{25}$/i) ||  // ULID
-        (segment.match(/^[a-z0-9]+$/i) && segment.length > 10)  // Generated ID (like LocalStorage)
+        (segment.match(/^[a-z0-9]+$/i) && segment.length > 10)  // Generated ID
       if (isId) {
-        // If we have entity data, show its label instead of the ID
-        if (entity && getEntityLabel) {
-          const entityLabel = getEntityLabel(entity)
-          if (entityLabel) {
-            items.push({ label: entityLabel, to: null, icon: null })
-          }
-        }
         continue
       }
 
@@ -179,14 +185,17 @@ export function useBreadcrumb(options = {}) {
         icon: i === 0 ? iconMap[segment] : null
       }
 
-      // Last item has no link
-      if (i === segments.length - 1) {
-        item.to = null
-      }
-
       items.push(item)
     }
 
+    // Remove last item if it matches current route (we only show parents)
+    if (items.length > 1) {
+      const lastItem = items[items.length - 1]
+      if (lastItem.to?.name === route.name) {
+        items.pop()
+      }
+    }
+
     return items
   }
 

package/src/composables/useForm.js

@@ -26,7 +26,7 @@
  * })
  * ```
  */
-import { ref, watch, onMounted, inject } from 'vue'
+import { ref, computed, watch, onMounted, inject, provide } from 'vue'
 import { useBareForm } from './useBareForm'
 import { deepClone } from '../utils/transformers'
 
@@ -83,6 +83,8 @@ export function useForm(options = {}) {
     checkDirty,
     // Helpers
     cancel,
+    // Breadcrumb
+    breadcrumb,
     // Guard dialog for unsaved changes
     guardDialog
   } = useBareForm({
@@ -224,6 +226,42 @@ export function useForm(options = {}) {
     load()
   })
 
+  // ============ COMPUTED TITLE ============
+
+  /**
+   * Entity display label (e.g., "David Berlioz" for an agent)
+   * Uses manager.getEntityLabel() with labelField config
+   */
+  const entityLabel = computed(() => {
+    return manager.getEntityLabel(form.value)
+  })
+
+  /**
+   * Auto-generated page title
+   * - Edit mode: "Edit Agent: David Berlioz"
+   * - Create mode: "Create Agent"
+   */
+  const pageTitle = computed(() => {
+    if (isEdit.value) {
+      const label = entityLabel.value
+      return label ? `Edit ${entityName}: ${label}` : `Edit ${entityName}`
+    }
+    return `Create ${entityName}`
+  })
+
+  /**
+   * Structured page title for decorated rendering
+   * Returns { action, entityName, entityLabel } for custom styling
+   */
+  const pageTitleParts = computed(() => ({
+    action: isEdit.value ? 'Edit' : 'Create',
+    entityName,
+    entityLabel: isEdit.value ? entityLabel.value : null
+  }))
+
+  // Provide title parts for automatic PageHeader consumption
+  provide('qdadmPageTitleParts', pageTitleParts)
+
   return {
     // Manager access
     manager,
@@ -248,7 +286,15 @@ export function useForm(options = {}) {
     checkDirty,
     isFieldDirty,
 
+    // Breadcrumb (auto-generated from route)
+    breadcrumb,
+
     // Guard dialog (for UnsavedChangesDialog - pass to PageLayout)
-    guardDialog
+    guardDialog,
+
+    // Title helpers
+    entityLabel,
+    pageTitle,
+    pageTitleParts
   }
 }

package/src/composables/useListPageBuilder.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, onMounted, inject } from 'vue'
+import { ref, computed, watch, onMounted, inject, provide } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
@@ -155,6 +155,9 @@ export function useListPageBuilder(config = {}) {
   }
   const manager = orchestrator.get(entity)
 
+  // Provide entity context for child components (e.g., SeverityTag auto-discovery)
+  provide('mainEntity', entity)
+
   // Read config from manager with option overrides
   const entityName = config.entityName ?? manager.label
   const entityNamePlural = config.entityNamePlural ?? manager.labelPlural
@@ -663,71 +666,35 @@ export function useListPageBuilder(config = {}) {
     searchConfig.value = { ...searchConfig.value, ...searchCfg }
   }
 
-  // ============ SMART FILTER MODE ============
-  // Threshold priority: config option > manager.localFilterThreshold > default (100)
-  const resolvedThreshold = computed(() => {
-    if (autoFilterThreshold !== 100) return autoFilterThreshold  // Explicit config
-    return manager?.localFilterThreshold ?? 100
-  })
+  // ============ CACHE MODE ============
+  // EntityManager handles caching and filtering automatically via query()
+  // This computed applies any custom local_filter callbacks on top
+  const fromCache = ref(false)
 
-  const effectiveFilterMode = computed(() => {
-    if (filterMode !== 'auto') return filterMode
-    // Switch to local if we have few items
-    return items.value.length > 0 && items.value.length < resolvedThreshold.value ? 'local' : 'manager'
-  })
-
-  // Computed for local filtering
-  // Only applied when effectiveFilterMode === 'local'
-  // In manager mode, items are already filtered by the manager
   const filteredItems = computed(() => {
-    const isLocalMode = effectiveFilterMode.value === 'local'
-
-    // In manager mode, return items as-is (manager already filtered)
-    if (!isLocalMode) {
-      return items.value
-    }
-
-    // Local mode: apply all filtering client-side
     let result = [...items.value]
 
-    // Apply search
-    // local_search: false = manager only, skip in local mode
-    if (searchQuery.value && searchConfig.value.local_search !== false) {
-      const query = searchQuery.value.toLowerCase()
-      // Default: search on configured fields
-      const localSearch = searchConfig.value.local_search || (
-        searchConfig.value.fields?.length
-          ? (item, q) => searchConfig.value.fields.some(field =>
-              String(item[field] || '').toLowerCase().includes(q)
-            )
-          : null
-      )
-      if (localSearch) {
-        result = result.filter(item => localSearch(item, query))
-      }
-    }
-
-    // Apply filters
+    // Apply custom local_filter callbacks (UI-specific post-filters)
     for (const [name, value] of Object.entries(filterValues.value)) {
       if (value === null || value === undefined || value === '') continue
       const filterDef = filtersMap.value.get(name)
 
-      // local_filter: false = manager only, skip in local mode
-      if (filterDef?.local_filter === false) continue
+      // Only apply if there's a custom local_filter callback
+      if (typeof filterDef?.local_filter !== 'function') continue
 
-      // Default: simple equality on field
-      const localFilter = filterDef?.local_filter || ((item, val) => {
-        const itemValue = item[name]
-        if (val === '__null__') return itemValue === null || itemValue === undefined
-        return itemValue === val
-      })
-      result = result.filter(item => localFilter(item, value))
+      result = result.filter(item => filterDef.local_filter(item, value))
+    }
+
+    // Apply custom local_search callback
+    if (searchQuery.value && typeof searchConfig.value.local_search === 'function') {
+      const query = searchQuery.value.toLowerCase()
+      result = result.filter(item => searchConfig.value.local_search(item, query))
     }
 
     return result
   })
 
-  // Items to display - always use filteredItems (handles both modes correctly)
+  // Items to display
   const displayItems = computed(() => filteredItems.value)
 
   // ============ LOADING ============
@@ -736,36 +703,40 @@ export function useListPageBuilder(config = {}) {
   async function loadItems(extraParams = {}, { force = false } = {}) {
     if (!manager) return
 
-    // Skip API call if local filtering and data already loaded (unless forced)
-    if (!force && effectiveFilterMode.value === 'local' && items.value.length > 0) {
-      return
+    // If forced, invalidate the manager's cache first
+    if (force && manager.invalidateCache) {
+      manager.invalidateCache()
     }
 
     loading.value = true
     try {
+      // Build query params
       let params = { ...extraParams }
 
-      if (serverSide) {
-        params.page = page.value
-        params.page_size = pageSize.value
-        if (sortField.value) {
-          params.sort_by = sortField.value
-          params.sort_order = sortOrder.value === 1 ? 'asc' : 'desc'
-        }
+      // Pagination and sorting
+      params.page = page.value
+      params.page_size = pageSize.value
+      if (sortField.value) {
+        params.sort_by = sortField.value
+        params.sort_order = sortOrder.value === 1 ? 'asc' : 'desc'
       }
 
-      // Add search param to manager (only if no local_search callback)
-      if (searchQuery.value && searchConfig.value.fields?.length && !searchConfig.value.local_search) {
+      // Add search param (skip if custom local_search callback)
+      if (searchQuery.value && typeof searchConfig.value.local_search !== 'function') {
         params.search = searchQuery.value
       }
 
-      // Add filter values to manager (skip filters with local_filter - they're local-only)
+      // Add filter values (skip filters with custom local_filter callback)
+      const filters = {}
       for (const [name, value] of Object.entries(filterValues.value)) {
         if (value === null || value === undefined || value === '') continue
         const filterDef = filtersMap.value.get(name)
-        // Skip virtual filters (those with local_filter) - not sent to manager
-        if (filterDef?.local_filter) continue
-        params[name] = value
+        // Skip filters with custom local_filter - they're applied in filteredItems
+        if (typeof filterDef?.local_filter === 'function') continue
+        filters[name] = value
+      }
+      if (Object.keys(filters).length > 0) {
+        params.filters = filters
       }
 
       // Hook: modify params before request
@@ -773,7 +744,13 @@ export function useListPageBuilder(config = {}) {
         params = onBeforeLoad(params) || params
       }
 
-      const response = await manager.list(params)
+      // Use manager.query() for automatic cache handling
+      const response = manager.query
+        ? await manager.query(params)
+        : await manager.list(params)
+
+      // Track if response came from cache
+      fromCache.value = response.fromCache || false
 
       // Hook: transform response
       let processedData
@@ -812,13 +789,13 @@ export function useListPageBuilder(config = {}) {
     pageSize.value = event.rows
     // Save page size preference to cookie
     setCookie(COOKIE_NAME, event.rows, COOKIE_EXPIRY_DAYS)
-    if (serverSide) loadItems()
+    loadItems()
   }
 
   function onSort(event) {
     sortField.value = event.sortField
     sortOrder.value = event.sortOrder
-    if (serverSide) loadItems()
+    loadItems()
   }
 
   // ============ NAVIGATION ============
@@ -827,11 +804,11 @@ export function useListPageBuilder(config = {}) {
   }
 
   function goToEdit(item) {
-    router.push({ name: `${routePrefix}-edit`, params: { [resolvedDataKey]: item[resolvedDataKey] } })
+    router.push({ name: `${routePrefix}-edit`, params: { id: item[resolvedDataKey] } })
   }
 
   function goToShow(item) {
-    router.push({ name: `${routePrefix}-show`, params: { [resolvedDataKey]: item[resolvedDataKey] } })
+    router.push({ name: `${routePrefix}-show`, params: { id: item[resolvedDataKey] } })
   }
 
   // ============ DELETE ============
@@ -1126,7 +1103,7 @@ export function useListPageBuilder(config = {}) {
     filters,
     filterValues,
     filteredItems,
-    effectiveFilterMode,
+    fromCache,  // true if last query used cache
     addFilter,
     removeFilter,
     setFilterValue,

package/src/composables/useManager.js

@@ -0,0 +1,20 @@
+/**
+ * useManager - Access EntityManager by name
+ *
+ * @param {string} entityName - Entity name (e.g., 'jobs', 'stories')
+ * @returns {EntityManager|null} - The entity manager or null if not found
+ *
+ * @example
+ * const jobs = useManager('jobs')
+ * const severity = jobs.getSeverity('status', 'completed')
+ */
+import { inject } from 'vue'
+
+export function useManager(entityName) {
+  const orchestrator = inject('qdadmOrchestrator')
+  if (!orchestrator) {
+    console.warn('[qdadm] useManager: orchestrator not available')
+    return null
+  }
+  return orchestrator.get(entityName)
+}