qdadm 0.36.0 → 0.38.0

package/src/components/editors/PermissionEditor.vue

@@ -0,0 +1,535 @@
+<script setup>
+/**
+ * PermissionEditor - Fragmented autocomplete for permissions
+ *
+ * Single text input with segment-aware completion:
+ * - Type "au" → suggests "auth"
+ * - Tab/select → completes to "auth:"
+ * - Then suggests actions for that namespace
+ *
+ * Permission format: namespace:action
+ * - entity:books:read (namespace=entity:books, action=read)
+ * - auth:impersonate (namespace=auth, action=impersonate)
+ */
+
+import { ref, computed, watch, nextTick } from 'vue'
+import AutoComplete from 'primevue/autocomplete'
+import Chip from 'primevue/chip'
+import Button from 'primevue/button'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Permission registry instance
+   * @type {import('../../security/PermissionRegistry.js').PermissionRegistry}
+   */
+  permissionRegistry: {
+    type: Object,
+    required: true
+  },
+  placeholder: {
+    type: String,
+    default: 'Type permission...'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// Current input value
+const inputValue = ref('')
+const suggestions = ref([])
+const autocompleteRef = ref(null)
+
+// Get all permissions from registry
+const allPermissions = computed(() => {
+  if (!props.permissionRegistry) {
+    console.warn('[PermissionEditor] No permissionRegistry provided')
+    return []
+  }
+  const perms = props.permissionRegistry.getAll()
+  return perms
+})
+
+// Check if registry is available
+const hasRegistry = computed(() => {
+  return props.permissionRegistry && allPermissions.value.length > 0
+})
+
+// Get all permission keys
+const allPermissionKeys = computed(() => {
+  return allPermissions.value.map(p => p.key)
+})
+
+// Get all unique prefixes at each level
+// e.g., from "entity:books:read" we get ["entity", "entity:books", "entity:books:read"]
+const allPrefixes = computed(() => {
+  const prefixes = new Set()
+  for (const key of allPermissionKeys.value) {
+    const parts = key.split(':')
+    let current = ''
+    for (let i = 0; i < parts.length; i++) {
+      current = current ? current + ':' + parts[i] : parts[i]
+      prefixes.add(current)
+    }
+  }
+  return [...prefixes].sort()
+})
+
+// Get unique actions across all namespaces
+const allActions = computed(() => {
+  const actions = new Set()
+  for (const perm of allPermissions.value) {
+    actions.add(perm.action)
+  }
+  return [...actions].sort()
+})
+
+/**
+ * Generate suggestions based on current input
+ * Supports multi-level fragment completion:
+ * - "ent" → "entity:"
+ * - "entity:bo" → "entity:books:"
+ * - "entity:books:re" → "entity:books:read"
+ */
+function searchSuggestions(event) {
+  const query = event.query ?? ''
+  const queryLower = query.toLowerCase()
+
+  // Handle super wildcard **
+  if (query === '**') {
+    suggestions.value = [{
+      label: '**',
+      value: '**',
+      type: 'wildcard',
+      description: 'All permissions (super admin)'
+    }]
+    return
+  }
+
+  // Handle wildcard patterns
+  if (query.includes('*')) {
+    suggestions.value = generateWildcardSuggestions(query)
+    return
+  }
+
+  // Check if query ends with ':'  - user wants next level suggestions
+  const endsWithColon = query.endsWith(':')
+  const baseQuery = endsWithColon ? query.slice(0, -1) : query
+
+  const results = []
+
+  // Add wildcard option if at start or after colon
+  if (query === '' || endsWithColon) {
+    results.push({
+      label: query + '*:',
+      value: query + '*:',
+      type: 'namespace',
+      description: 'Wildcard (all at this level)'
+    })
+  }
+
+  // Find matching prefixes that are NEXT level completions
+  for (const prefix of allPrefixes.value) {
+    const prefixLower = prefix.toLowerCase()
+
+    if (endsWithColon) {
+      // After "entity:", suggest "entity:books", "entity:users", etc.
+      if (prefixLower.startsWith(queryLower) && prefix !== query.slice(0, -1)) {
+        const isComplete = allPermissionKeys.value.includes(prefix)
+        results.push({
+          label: isComplete ? prefix : prefix + ':',
+          value: isComplete ? prefix : prefix + ':',
+          type: isComplete ? 'permission' : 'namespace',
+          description: isComplete ? getPermissionLabel(prefix) : `${countChildren(prefix)} sub-items`
+        })
+      }
+    } else {
+      // Partial match: "ent" matches "entity", "entity:books:re" matches "entity:books:read"
+      if (prefixLower.startsWith(queryLower) || (query === '' && true)) {
+        // Only suggest if it's a progression from current input
+        if (prefix.toLowerCase() !== queryLower) {
+          const isComplete = allPermissionKeys.value.includes(prefix)
+          // Find the next colon boundary for namespace suggestions
+          const nextColonIdx = prefix.indexOf(':', query.length)
+          const suggestionValue = nextColonIdx > -1 ? prefix.slice(0, nextColonIdx + 1) : (isComplete ? prefix : prefix + ':')
+
+          // Avoid duplicates
+          if (!results.some(r => r.value === suggestionValue)) {
+            results.push({
+              label: suggestionValue,
+              value: suggestionValue,
+              type: suggestionValue.endsWith(':') ? 'namespace' : 'permission',
+              description: isComplete && !suggestionValue.endsWith(':') ? getPermissionLabel(prefix) : `${countChildren(suggestionValue.replace(/:$/, ''))} sub-items`
+            })
+          }
+        }
+      }
+    }
+  }
+
+  // Sort: namespaces first, then permissions
+  results.sort((a, b) => {
+    if (a.type === 'namespace' && b.type !== 'namespace') return -1
+    if (a.type !== 'namespace' && b.type === 'namespace') return 1
+    return a.label.localeCompare(b.label)
+  })
+
+  suggestions.value = results.slice(0, 20) // Limit to 20 suggestions
+}
+
+/**
+ * Generate wildcard suggestions
+ */
+function generateWildcardSuggestions(query) {
+  const results = []
+
+  // *: pattern - suggest actions
+  if (query === '*:' || query.startsWith('*:')) {
+    const actionPart = query.slice(2).toLowerCase()
+
+    results.push({
+      label: '*:*',
+      value: '*:*',
+      type: 'wildcard',
+      description: 'All permissions'
+    })
+
+    for (const action of allActions.value) {
+      if (actionPart === '' || action.toLowerCase().startsWith(actionPart)) {
+        results.push({
+          label: '*:' + action,
+          value: '*:' + action,
+          type: 'wildcard-action',
+          description: `All ${action} permissions`
+        })
+      }
+    }
+  } else if (query === '*') {
+    // Just * - suggest *: to continue
+    results.push({
+      label: '*:',
+      value: '*:',
+      type: 'namespace',
+      description: 'All namespaces (wildcard)'
+    })
+  }
+
+  return results
+}
+
+/**
+ * Count children of a prefix
+ */
+function countChildren(prefix) {
+  return allPrefixes.value.filter(p => p.startsWith(prefix + ':') || p === prefix).length
+}
+
+/**
+ * Get permission label
+ */
+function getPermissionLabel(key) {
+  const perm = props.permissionRegistry?.get(key)
+  return perm?.label || key
+}
+
+/**
+ * Handle selection from dropdown
+ */
+function onSelect(event) {
+  const selected = event.value
+
+  if (!selected) return
+
+  // If selection ends with ':', it's a namespace - continue typing
+  if (selected.value.endsWith(':')) {
+    inputValue.value = selected.value
+    nextTick(() => {
+      const input = autocompleteRef.value?.$el?.querySelector('input')
+      input?.focus()
+      // Trigger new search for next level and show dropdown
+      searchSuggestions({ query: selected.value })
+      // Force show the dropdown with new suggestions
+      autocompleteRef.value?.show()
+    })
+  } else {
+    // Complete permission or wildcard - add to list
+    if (!props.modelValue.includes(selected.value)) {
+      emit('update:modelValue', [...props.modelValue, selected.value])
+    }
+    inputValue.value = ''
+  }
+}
+
+/**
+ * Handle click on input - show suggestions if input ends with ':'
+ * This ensures the dropdown appears when clicking back into the field
+ */
+function onInputClick() {
+  if (inputValue.value.endsWith(':')) {
+    searchSuggestions({ query: inputValue.value })
+    nextTick(() => {
+      autocompleteRef.value?.show()
+    })
+  }
+}
+
+/**
+ * Handle keyboard events for Tab completion
+ */
+function onKeydown(event) {
+  if (event.key === 'Tab' && suggestions.value.length > 0) {
+    event.preventDefault()
+    // Select first suggestion
+    const first = suggestions.value[0]
+    if (first) {
+      // If it's a namespace, onSelect will show the dropdown for next level
+      onSelect({ value: first })
+    }
+  } else if (event.key === 'Enter' && inputValue.value) {
+    event.preventDefault()
+    const value = inputValue.value
+
+    // Check if it's a valid complete permission or wildcard pattern
+    if (allPermissionKeys.value.includes(value) || value.includes('*')) {
+      if (!props.modelValue.includes(value)) {
+        emit('update:modelValue', [...props.modelValue, value])
+      }
+      inputValue.value = ''
+    } else if (suggestions.value.length > 0) {
+      // Select first suggestion on Enter
+      onSelect({ value: suggestions.value[0] })
+    }
+  }
+}
+
+/**
+ * Remove a permission
+ */
+function removePermission(permKey) {
+  emit('update:modelValue', props.modelValue.filter(p => p !== permKey))
+}
+
+/**
+ * Get display info for a permission
+ */
+function getPermissionInfo(permKey) {
+  // Handle super wildcard
+  if (permKey === '**') {
+    return {
+      namespace: '',
+      action: '**',
+      label: 'All permissions',
+      isWildcard: true
+    }
+  }
+
+  // Handle wildcard patterns
+  if (permKey.includes('*')) {
+    const parts = permKey.split(':')
+    const action = parts.pop()
+    const namespace = parts.join(':')
+    return {
+      namespace: namespace || '*',
+      action,
+      label: permKey,
+      isWildcard: true
+    }
+  }
+
+  const perm = props.permissionRegistry?.get(permKey)
+  if (perm) {
+    return {
+      namespace: perm.namespace,
+      action: perm.action,
+      label: perm.label
+    }
+  }
+  // Fallback for unknown permissions
+  const parts = permKey.split(':')
+  return {
+    namespace: parts.slice(0, -1).join(':'),
+    action: parts[parts.length - 1],
+    label: permKey
+  }
+}
+
+/**
+ * Custom template for suggestions
+ */
+function getSuggestionClass(item) {
+  return item.type === 'namespace' ? 'suggestion-namespace' : 'suggestion-permission'
+}
+</script>
+
+<template>
+  <div class="permission-editor">
+    <!-- Selected permissions as chips -->
+    <div v-if="modelValue.length > 0" class="permission-chips">
+      <Chip
+        v-for="perm in modelValue"
+        :key="perm"
+        :label="perm"
+        removable
+        :disabled="disabled"
+        @remove="removePermission(perm)"
+        :class="['permission-chip', { 'wildcard-chip': getPermissionInfo(perm).isWildcard }]"
+      >
+        <template #default>
+          <template v-if="perm === '**'">
+            <span class="chip-wildcard">**</span>
+          </template>
+          <template v-else-if="getPermissionInfo(perm).namespace">
+            <span class="chip-namespace">{{ getPermissionInfo(perm).namespace }}:</span>
+            <span :class="['chip-action', { 'chip-wildcard': getPermissionInfo(perm).action === '*' }]">
+              {{ getPermissionInfo(perm).action }}
+            </span>
+          </template>
+          <template v-else>
+            <span class="chip-action">{{ perm }}</span>
+          </template>
+        </template>
+      </Chip>
+    </div>
+
+    <!-- Autocomplete input -->
+    <div class="permission-input">
+      <template v-if="hasRegistry">
+        <AutoComplete
+          ref="autocompleteRef"
+          v-model="inputValue"
+          :suggestions="suggestions"
+          optionLabel="label"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :minLength="0"
+          completeOnFocus
+          @complete="searchSuggestions"
+          @item-select="onSelect"
+          @keydown="onKeydown"
+          @click="onInputClick"
+          dropdown
+          class="w-full"
+        >
+          <template #option="{ option }">
+            <div :class="['suggestion-item', getSuggestionClass(option)]">
+              <span class="suggestion-label">{{ option.label }}</span>
+              <span class="suggestion-desc">{{ option.description }}</span>
+            </div>
+          </template>
+          <template #empty>
+            <div class="suggestion-empty">
+              No matching permissions
+            </div>
+          </template>
+        </AutoComplete>
+        <small class="text-color-secondary mt-1 block">
+          Type permission path (e.g., "entity:books:read"), Tab to complete
+        </small>
+      </template>
+      <template v-else>
+        <div class="no-registry">
+          <i class="pi pi-info-circle"></i>
+          <span>No permissions registered in the system</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Uses global .editor-box pattern */
+.permission-editor {
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background: var(--p-surface-50);
+}
+
+/* Uses global .editor-chips pattern */
+.permission-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--p-surface-200);
+}
+
+.permission-chip {
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+/* .chip-namespace, .chip-action, .chip-wildcard are global (main.css) */
+
+.wildcard-chip {
+  background: var(--p-orange-50) !important;
+  border-color: var(--p-orange-200) !important;
+}
+
+.permission-input {
+  display: flex;
+  flex-direction: column;
+}
+
+.suggestion-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  gap: 1rem;
+}
+
+.suggestion-namespace .suggestion-label,
+.suggestion-permission .suggestion-label {
+  font-family: monospace;
+}
+
+.suggestion-namespace .suggestion-label {
+  color: var(--p-primary-600);
+}
+
+.suggestion-permission .suggestion-label {
+  font-weight: 500;
+}
+
+.suggestion-desc {
+  font-size: 0.75rem;
+  color: var(--p-surface-500);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.suggestion-empty {
+  padding: 0.5rem;
+  color: var(--p-surface-400);
+  font-style: italic;
+}
+
+.no-registry {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  color: var(--p-surface-500);
+  font-style: italic;
+}
+
+:deep(.p-autocomplete) {
+  width: 100%;
+}
+
+:deep(.p-autocomplete-input) {
+  width: 100%;
+  font-family: monospace;
+}
+</style>

package/src/components/forms/FormField.vue

@@ -92,17 +92,7 @@ function onBlur() {
 </template>
 
 <style scoped>
-.field-hint {
-  color: var(--p-surface-500);
-  margin-top: 0.25rem;
-  display: block;
-}
-
-.field-error {
-  color: var(--p-red-500);
-  margin-top: 0.25rem;
-  display: block;
-}
+/* .field-hint and .field-error are global (main.css) */
 
 .field-invalid :deep(input),
 .field-invalid :deep(textarea),

package/src/components/index.js

@@ -36,6 +36,7 @@ export { default as FilterBar } from './lists/FilterBar.vue'
 export { default as KeyValueEditor } from './editors/KeyValueEditor.vue'
 export { default as LanguageEditor } from './editors/LanguageEditor.vue'
 export { default as ScopeEditor } from './editors/ScopeEditor.vue'
+export { default as PermissionEditor } from './editors/PermissionEditor.vue'
 export { default as JsonEditorFoldable } from './editors/JsonEditorFoldable.vue'
 export { default as JsonViewer } from './editors/JsonViewer.vue'
 

package/src/components/layout/AppLayout.vue

@@ -159,20 +159,32 @@ function handleLogout() {
 const slots = useSlots()
 const hasSlotContent = computed(() => !!slots.default)
 
-// Current page entity data - pages can inject and set this to avoid double fetch
-// When a page loads an entity, it sets this ref, and useNavContext uses it for breadcrumb
-const currentEntityData = ref(null)
-provide('qdadmCurrentEntityData', currentEntityData)
+// Breadcrumb entity data - multi-level support for parent/child entities
+// Map: level -> entityData (level 1 = parent, level 2 = child, etc.)
+const breadcrumbEntities = ref(new Map())
+
+/**
+ * Set entity data for breadcrumb at a specific level
+ * @param {object} data - Entity data
+ * @param {number} level - Breadcrumb level (1 = main entity, 2 = child, etc.)
+ */
+function setBreadcrumbEntity(data, level = 1) {
+  const newMap = new Map(breadcrumbEntities.value)
+  newMap.set(level, data)
+  breadcrumbEntities.value = newMap
+}
+
+provide('qdadmSetBreadcrumbEntity', setBreadcrumbEntity)
+provide('qdadmBreadcrumbEntities', breadcrumbEntities)
 
 // Clear entity data on route change (before new page mounts)
 watch(() => route.fullPath, () => {
-  currentEntityData.value = null
+  breadcrumbEntities.value = new Map()
 })
 
 // Navigation context (breadcrumb + navlinks from route config)
-const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks } = useNavContext({
-  entityData: currentEntityData
-})
+// Pass breadcrumbEntities directly since we're in the same component that provides it
+const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks } = useNavContext({ breadcrumbEntities })
 
 // Allow child pages to override breadcrumb/navlinks via provide/inject
 const breadcrumbOverride = ref(null)

package/src/components/layout/defaults/DefaultToaster.vue

@@ -5,12 +5,12 @@
  * Renders the Toast component for notifications.
  * Uses PrimeVue Toast with default positioning.
  *
- * This is the default component rendered in the "toaster" zone
- * when no blocks are registered.
+ * NOTE: For pages outside BaseLayout (like LoginPage),
+ * apps must include Toast in their App.vue root component.
  */
 import Toast from 'primevue/toast'
 </script>
 
 <template>
-  <Toast />
+  <Toast position="top-right" />
 </template>

package/src/components/pages/LoginPage.vue

@@ -131,22 +131,43 @@ async function handleLogin() {
       password: password.value
     })
 
+    toast.add({
+      severity: 'success',
+      summary: 'Welcome',
+      detail: `Logged in as ${result.user?.username || result.user?.email || username.value}`,
+      life: 3000
+    })
+
     // Emit business signal if enabled
     if (props.emitSignal && orchestrator?.signals) {
       orchestrator.signals.emit('auth:login', { user: result.user })
     }
 
-    // Emit component event
     emit('login', result)
-
     router.push(props.redirectTo)
   } catch (error) {
+    password.value = ''
+
+    const message = error.response?.data?.error?.message
+      || error.response?.data?.message
+      || error.message
+      || 'Invalid credentials'
+
     toast.add({
       severity: 'error',
       summary: 'Login Failed',
-      detail: error.message || 'Invalid credentials',
-      life: 3000
+      detail: message,
+      life: 5000
     })
+
+    if (orchestrator?.signals) {
+      orchestrator.signals.emit('auth:login:error', {
+        username: username.value,
+        error: message,
+        status: error.response?.status
+      })
+    }
+
     emit('error', error)
   } finally {
     loading.value = false
@@ -167,7 +188,7 @@ async function handleLogin() {
         </div>
       </template>
       <template #content>
-        <form @submit.prevent="handleLogin" class="qdadm-login-form">
+        <form @submit.prevent="handleLogin" class="qdadm-login-form" autocomplete="off">
           <div class="qdadm-login-field">
             <label for="qdadm-username">{{ usernameLabel }}</label>
             <InputText