qdadm 0.13.0

package/src/module/moduleRegistry.js

@@ -0,0 +1,222 @@
+/**
+ * Module Registry - Auto-discovery and registration system
+ *
+ * Each module can provide an init.js that registers:
+ * - Routes
+ * - Navigation items
+ * - Route families (for active state detection)
+ *
+ * Usage in module (modules/agents/init.js):
+ *
+ *   export function init(registry) {
+ *     registry.addRoutes('agents', [
+ *       { path: '', name: 'agents', component: () => import('./pages/AgentList.vue') },
+ *       { path: 'create', name: 'agent-create', component: () => import('./pages/AgentForm.vue') },
+ *       { path: ':id/edit', name: 'agent-edit', component: () => import('./pages/AgentForm.vue') }
+ *     ])
+ *
+ *     registry.addNavItem({
+ *       section: 'Simulation',
+ *       route: 'agents',
+ *       icon: 'pi pi-user',
+ *       label: 'Agents'
+ *     })
+ *
+ *     registry.addRouteFamily('agents', ['agent-'])
+ *   }
+ */
+
+// Storage
+const routes = []
+const navItems = []
+const routeFamilies = {}
+const navSections = new Map()
+const entityConfigs = new Map()  // Entity declarations from modules
+
+// Configurable section order (set via setSectionOrder or bootstrap)
+let sectionOrder = []
+
+/**
+ * Registry API passed to module init functions
+ */
+const registry = {
+  /**
+   * Add routes for this module
+   * @param {string} prefix - Path prefix for all routes (e.g., 'agents')
+   * @param {Array} moduleRoutes - Route definitions with relative paths
+   * @param {object} options - { entity?: string } - Entity name for permission checking
+   */
+  addRoutes(prefix, moduleRoutes, options = {}) {
+    const prefixedRoutes = moduleRoutes.map(route => ({
+      ...route,
+      path: route.path ? `${prefix}/${route.path}` : prefix,
+      meta: {
+        ...route.meta,
+        ...(options.entity && { entity: options.entity })
+      }
+    }))
+    routes.push(...prefixedRoutes)
+  },
+
+  /**
+   * Add a navigation item to a section
+   * @param {object} item - { section, route, icon, label, exact? }
+   */
+  addNavItem(item) {
+    const { section, ...navItem } = item
+    if (!navSections.has(section)) {
+      navSections.set(section, [])
+    }
+    navSections.get(section).push(navItem)
+    navItems.push(item)
+  },
+
+  /**
+   * Add route family mapping (for active state detection)
+   * @param {string} parent - Parent route name (e.g., 'agents')
+   * @param {Array<string>} prefixes - Child route prefixes (e.g., ['agent-'])
+   */
+  addRouteFamily(parent, prefixes) {
+    if (!routeFamilies[parent]) {
+      routeFamilies[parent] = []
+    }
+    routeFamilies[parent].push(...prefixes)
+  },
+
+  /**
+   * Declare an entity managed by this module
+   * @param {string} name - Entity name (e.g., 'users')
+   * @param {object|EntityManager} config - Entity config or manager instance
+   *   - If EntityManager instance: used directly
+   *   - If object: { endpoint, idField, storage?, ... } passed to factory
+   *
+   * Usage:
+   *   registry.addEntity('users', { endpoint: '/users' })
+   *   registry.addEntity('users', new CustomUsersManager())
+   */
+  addEntity(name, config) {
+    entityConfigs.set(name, config)
+  }
+}
+
+/**
+ * Set section order for navigation menu
+ * Called from bootstrap config
+ * @param {Array<string>} order - Section titles in order
+ */
+export function setSectionOrder(order) {
+  sectionOrder = order || []
+}
+
+/**
+ * Initialize modules from a glob import result
+ * The consuming app calls this with its own import.meta.glob
+ *
+ * Usage in app:
+ *   const moduleInits = import.meta.glob('./modules/* /init.js', { eager: true })
+ *   initModules(moduleInits)
+ *
+ * @param {object} moduleInits - Result of import.meta.glob
+ * @param {object} options - { coreNavItems: [] } - Core items not in modules
+ */
+export function initModules(moduleInits, options = {}) {
+  // Add core nav items (pages that aren't in modules)
+  if (options.coreNavItems) {
+    for (const item of options.coreNavItems) {
+      registry.addNavItem(item)
+    }
+  }
+
+  // Initialize all discovered modules
+  for (const path in moduleInits) {
+    const module = moduleInits[path]
+    if (typeof module.init === 'function') {
+      module.init(registry)
+    }
+  }
+}
+
+/**
+ * Get all registered routes
+ */
+export function getRoutes() {
+  return routes
+}
+
+/**
+ * Get navigation sections in order
+ */
+export function getNavSections() {
+  const sections = []
+
+  // First add sections in the configured order
+  for (const title of sectionOrder) {
+    if (navSections.has(title)) {
+      sections.push({
+        title,
+        items: navSections.get(title)
+      })
+    }
+  }
+
+  // Add any sections not in the predefined order
+  for (const [title, items] of navSections) {
+    if (!sectionOrder.includes(title)) {
+      sections.push({ title, items })
+    }
+  }
+
+  return sections
+}
+
+/**
+ * Get route families mapping
+ */
+export function getRouteFamilies() {
+  return routeFamilies
+}
+
+/**
+ * Get entity configurations declared by modules
+ * @returns {Map<string, object>}
+ */
+export function getEntityConfigs() {
+  return entityConfigs
+}
+
+/**
+ * Get a specific entity configuration
+ * @param {string} name - Entity name
+ * @returns {object|undefined}
+ */
+export function getEntityConfig(name) {
+  return entityConfigs.get(name)
+}
+
+/**
+ * Check if a route belongs to a family
+ */
+export function isRouteInFamily(currentRoute, parentRoute) {
+  if (currentRoute === parentRoute) return true
+
+  const prefixes = routeFamilies[parentRoute]
+  if (prefixes && currentRoute) {
+    return prefixes.some(prefix => currentRoute.startsWith(prefix))
+  }
+  return false
+}
+
+/**
+ * Reset registry (for testing)
+ */
+export function resetRegistry() {
+  routes.length = 0
+  navItems.length = 0
+  Object.keys(routeFamilies).forEach(key => delete routeFamilies[key])
+  navSections.clear()
+  entityConfigs.clear()
+  sectionOrder = []
+}
+
+// Export registry for direct access if needed
+export { registry }

package/src/orchestrator/Orchestrator.js

@@ -0,0 +1,141 @@
+/**
+ * Orchestrator - Manager of EntityManagers
+ *
+ * Central registry that creates and distributes EntityManagers.
+ * Uses a factory function provided by the consuming application.
+ * Entity configs can be declared by modules via registry.addEntity().
+ *
+ * Usage:
+ * ```js
+ * // Dashboard provides a factory that receives (name, config)
+ * const entityFactory = (entityName, entityConfig) => {
+ *   // entityConfig comes from registry.addEntity() or is undefined
+ *   if (entityConfig instanceof EntityManager) {
+ *     return entityConfig  // Module provided a custom manager
+ *   }
+ *   return new EntityManager({
+ *     name: entityName,
+ *     storage: new ApiStorage({
+ *       endpoint: entityConfig?.endpoint || `/${entityName}`,
+ *       client
+ *     })
+ *   })
+ * }
+ *
+ * const orchestrator = new Orchestrator({ entityFactory })
+ *
+ * // Get managers (created lazily)
+ * const usersManager = orchestrator.get('users')
+ * ```
+ */
+import { getEntityConfig } from '../module/moduleRegistry.js'
+
+export class Orchestrator {
+  constructor(options = {}) {
+    const {
+      entityFactory = null,
+      // Optional: pre-registered managers (for special cases)
+      managers = {}
+    } = options
+
+    this._entityFactory = entityFactory
+    this._managers = new Map()
+
+    // Register pre-provided managers
+    for (const [name, manager] of Object.entries(managers)) {
+      this.register(name, manager)
+    }
+  }
+
+  /**
+   * Set the entity factory
+   * @param {function} factory - (entityName, entityConfig) => EntityManager
+   */
+  setFactory(factory) {
+    this._entityFactory = factory
+  }
+
+  /**
+   * Register an EntityManager manually
+   * Use this for special managers that don't follow the factory pattern
+   *
+   * @param {string} name - Entity name
+   * @param {EntityManager} manager - Manager instance
+   */
+  register(name, manager) {
+    this._managers.set(name, manager)
+    if (manager.onRegister) {
+      manager.onRegister(this)
+    }
+  }
+
+  /**
+   * Check if a manager exists (registered or can be created)
+   * @param {string} name - Entity name
+   * @returns {boolean}
+   */
+  has(name) {
+    return this._managers.has(name) || !!this._entityFactory
+  }
+
+  /**
+   * Get an EntityManager by name
+   * Creates it via factory if not already registered
+   *
+   * @param {string} name - Entity name
+   * @returns {EntityManager}
+   */
+  get(name) {
+    // Return existing manager
+    if (this._managers.has(name)) {
+      return this._managers.get(name)
+    }
+
+    // Get entity config from module registry (if declared)
+    const entityConfig = getEntityConfig(name)
+
+    // If config is already an EntityManager, use it directly
+    if (entityConfig && typeof entityConfig.get === 'function') {
+      this.register(name, entityConfig)
+      return entityConfig
+    }
+
+    // Create via factory
+    if (this._entityFactory) {
+      const manager = this._entityFactory(name, entityConfig)
+      if (manager) {
+        this.register(name, manager)
+        return manager
+      }
+    }
+
+    throw new Error(`[Orchestrator] No manager for entity "${name}" and no factory provided`)
+  }
+
+  /**
+   * Get all registered manager names
+   * @returns {string[]}
+   */
+  getRegisteredNames() {
+    return Array.from(this._managers.keys())
+  }
+
+  /**
+   * Dispose all managers
+   */
+  dispose() {
+    for (const [, manager] of this._managers) {
+      if (manager.onDispose) {
+        manager.onDispose()
+      }
+    }
+    this._managers.clear()
+  }
+}
+
+/**
+ * Factory function to create an Orchestrator
+ */
+export function createOrchestrator(options) {
+  return new Orchestrator(options)
+}

package/src/orchestrator/index.js

@@ -0,0 +1,8 @@
+/**
+ * Orchestrator Module
+ *
+ * Manager of EntityManagers - central registry for entity access.
+ */
+
+export { Orchestrator, createOrchestrator } from './Orchestrator.js'
+export { useOrchestrator, useEntity } from './useOrchestrator.js'

package/src/orchestrator/useOrchestrator.js

@@ -0,0 +1,61 @@
+/**
+ * useOrchestrator - Composable to access the Orchestrator
+ *
+ * Usage:
+ * ```js
+ * const { orchestrator, getManager } = useOrchestrator()
+ *
+ * // Get a specific manager
+ * const usersManager = getManager('users')
+ *
+ * // Use it
+ * const { items } = await usersManager.list({ page: 1 })
+ * ```
+ */
+import { inject } from 'vue'
+
+export function useOrchestrator() {
+  const orchestrator = inject('qdadmOrchestrator')
+
+  if (!orchestrator) {
+    throw new Error('[qdadm] Orchestrator not provided. Make sure to use createQdadm() with entityFactory.')
+  }
+
+  /**
+   * Get an EntityManager by name
+   * @param {string} name - Entity name
+   * @returns {EntityManager}
+   */
+  function getManager(name) {
+    return orchestrator.get(name)
+  }
+
+  /**
+   * Check if a manager exists
+   * @param {string} name - Entity name
+   * @returns {boolean}
+   */
+  function hasManager(name) {
+    return orchestrator.has(name)
+  }
+
+  return {
+    orchestrator,
+    getManager,
+    hasManager
+  }
+}
+
+/**
+ * useEntity - Shorthand composable to get a specific EntityManager
+ *
+ * Usage:
+ * ```js
+ * const users = useEntity('users')
+ * const { items } = await users.list()
+ * ```
+ */
+export function useEntity(name) {
+  const { getManager } = useOrchestrator()
+  return getManager(name)
+}

package/src/plugin.js

@@ -0,0 +1,142 @@
+/**
+ * qdadm Vue Plugin
+ *
+ * Creates and configures the qdadm framework for Vue applications.
+ */
+
+import { Orchestrator } from './orchestrator/Orchestrator.js'
+
+/**
+ * Creates the qdadm plugin with the given configuration
+ *
+ * @param {object} options - Configuration options
+ * @param {function} options.entityFactory - Factory function: (entityName, entityConfig) => EntityManager
+ * @param {object} options.managers - Pre-registered managers to override defaults (e.g., { users: myUsersManager })
+ * @param {object} options.orchestrator - Or provide a pre-configured Orchestrator instance
+ * @param {object} options.authAdapter - Optional: Auth adapter for login/logout
+ * @param {object} options.router - Required: Vue Router instance
+ * @param {object} options.toast - Required: Toast notification service
+ * @param {object} options.app - Optional: App branding configuration
+ * @param {object} options.modules - Optional: Module system configuration
+ * @param {object} options.features - Optional: Feature toggles (auth, poweredBy)
+ * @param {object} options.builtinModules - Optional: Builtin modules configuration
+ * @param {object} options.endpoints - Optional: API endpoints configuration
+ * @returns {object} Vue plugin
+ */
+export function createQdadm(options) {
+  return {
+    install(app) {
+      // Validation des contrats requis
+      if (!options.entityFactory && !options.orchestrator && !options.managers) {
+        throw new Error('[qdadm] entityFactory, orchestrator, or managers required')
+      }
+      if (!options.router) {
+        throw new Error('[qdadm] router required')
+      }
+      if (!options.toast) {
+        throw new Error('[qdadm] toast required')
+      }
+
+      // Create or use provided Orchestrator
+      let orchestrator = options.orchestrator
+      if (!orchestrator) {
+        orchestrator = new Orchestrator({
+          entityFactory: options.entityFactory,
+          managers: options.managers || {}
+        })
+      } else if (options.managers) {
+        // Register additional managers on existing orchestrator
+        for (const [name, manager] of Object.entries(options.managers)) {
+          orchestrator.register(name, manager)
+        }
+      }
+
+      // Features config avec défauts
+      const features = {
+        auth: true,
+        poweredBy: true,
+        ...options.features
+      }
+
+      // App config avec défauts
+      const appConfig = {
+        name: 'Admin',
+        shortName: 'Admin',
+        logo: null,
+        logoSmall: null,
+        favicon: null,
+        version: null,
+        theme: {
+          primary: '#3B82F6',
+          surface: '#1E293B',
+          ...options.app?.theme
+        },
+        ...options.app
+      }
+
+      // Endpoints config
+      const endpoints = {
+        users: '/users',
+        roles: '/roles',
+        ...options.endpoints
+      }
+
+      // Builtin modules config
+      const builtinModules = {
+        users: features.auth,
+        roles: features.auth,
+        ...options.builtinModules
+      }
+
+      // Validation conditionnelle
+      if (features.auth && !options.authAdapter) {
+        throw new Error('[qdadm] authAdapter required when features.auth is true')
+      }
+
+      // Provide all dependencies
+      app.provide('qdadmOrchestrator', orchestrator)
+      app.provide('qdadmRouter', options.router)
+      app.provide('qdadmToast', options.toast)
+      app.provide('qdadmFeatures', features)
+      app.provide('qdadmApp', appConfig)
+      app.provide('qdadmEndpoints', endpoints)
+      app.provide('qdadmBuiltinModules', builtinModules)
+
+      if (options.authAdapter) {
+        app.provide('authAdapter', options.authAdapter)
+      }
+
+      if (options.modules?.sectionOrder) {
+        app.provide('qdadmSectionOrder', options.modules.sectionOrder)
+      }
+
+      // Add route guard for entity permissions
+      options.router.beforeEach((to, from, next) => {
+        const entity = to.meta?.entity
+        if (entity) {
+          const manager = orchestrator.get(entity)
+          if (manager && !manager.canRead()) {
+            // Redirect to home or show forbidden
+            console.warn(`[qdadm] Access denied to ${to.path} (entity: ${entity})`)
+            return next({ path: '/' })
+          }
+        }
+        next()
+      })
+
+      // Appliquer le thème via CSS variables
+      if (appConfig.theme) {
+        document.documentElement.style.setProperty('--qdadm-primary', appConfig.theme.primary)
+        document.documentElement.style.setProperty('--qdadm-surface', appConfig.theme.surface)
+      }
+
+      // Appliquer le favicon
+      if (appConfig.favicon) {
+        const link = document.querySelector("link[rel~='icon']") || document.createElement('link')
+        link.rel = 'icon'
+        link.href = appConfig.favicon
+        document.head.appendChild(link)
+      }
+    }
+  }
+}

package/src/styles/_alerts.css

@@ -0,0 +1,48 @@
+/**
+ * Alert and Notice Boxes
+ * Warning, info, and system notice styles
+ */
+
+/* Warning banner (yellow) - for system notices */
+.alert-warning {
+  background: var(--p-yellow-50);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--p-yellow-200);
+}
+
+.alert-warning-icon {
+  color: var(--p-yellow-600);
+}
+
+.alert-warning-text {
+  margin-left: 0.5rem;
+  color: var(--p-yellow-700);
+}
+
+/* Info banner (orange) - for important notices */
+.alert-info {
+  color: var(--p-orange-600);
+  margin-bottom: 1rem;
+}
+
+/* Key info panel - for displaying read-only metadata */
+.key-info-panel {
+  background: var(--p-surface-50);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 0.5rem;
+}
+
+.key-info-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  align-items: center;
+}
+
+.key-info-item small {
+  color: var(--p-surface-500);
+  display: block;
+}

package/src/styles/_code.css

@@ -0,0 +1,33 @@
+/**
+ * Code and Key Display
+ * Monospace text, code boxes, and key displays
+ */
+
+/* Code box - for displaying keys, code, or technical values */
+.code-box {
+  word-break: break-all;
+  font-family: monospace;
+  background: var(--p-surface-100);
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+/* Small code display */
+.code-box--sm {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+}
+
+/* Tag with small font for compact display */
+.tag-sm {
+  font-size: 0.7rem;
+}
+
+.tag-xs {
+  font-size: 0.75rem;
+}
+
+/* Constrained width for tag previews */
+.tags-constrained {
+  max-width: 300px;
+}

package/src/styles/_dialogs.css

@@ -0,0 +1,17 @@
+/**
+ * Dialog Content Styles
+ * Styles for modal dialog content
+ */
+
+/* Dialog content spacing */
+.dialog-content {
+  margin-bottom: 1rem;
+}
+
+/* Dialog section title */
+.dialog-section-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--p-surface-600);
+}