qdadm 0.13.0

package/src/components/editors/ScopeEditor.vue

@@ -0,0 +1,341 @@
+<script setup>
+import { ref, onMounted, watch, inject } from 'vue'
+import AutoComplete from 'primevue/autocomplete'
+import Select from 'primevue/select'
+import Button from 'primevue/button'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // Scope configuration
+  scopeEndpoint: {
+    type: String,
+    default: '/reference/scopes' // Endpoint to load scope definition from API
+  },
+  scopePrefix: {
+    type: String,
+    default: 'faketual' // Prefix for scope strings (e.g., "faketual.resource:action")
+  },
+  // Default resources/actions if API not available
+  defaultResources: {
+    type: Array,
+    default: () => ['api', 'users', 'roles', 'apikeys']
+  },
+  defaultActions: {
+    type: Array,
+    default: () => ['read', 'write', 'grant']
+  }
+})
+
+// Get API adapter (optional)
+const api = inject('apiAdapter', null)
+
+const emit = defineEmits(['update:modelValue'])
+
+// Scope structure from API
+const scopeDefinition = ref({
+  resources: [],
+  actions: [],
+})
+const loading = ref(true)
+
+// Local scopes state
+const scopeRows = ref([])
+
+// Resource suggestions for autocomplete
+const resourceSuggestions = ref([])
+
+// All resources with * prefix
+const allResources = computed(() => ['*', ...scopeDefinition.value.resources])
+
+// All actions with access prefix
+const allActions = computed(() => ['access', ...scopeDefinition.value.actions])
+
+import { computed } from 'vue'
+
+/**
+ * Search resources for autocomplete
+ */
+function searchResources(event) {
+  const query = (event.query || '').toLowerCase()
+  if (!query) {
+    resourceSuggestions.value = [...allResources.value]
+  } else {
+    resourceSuggestions.value = allResources.value.filter(r =>
+      r.toLowerCase().includes(query)
+    )
+  }
+}
+
+/**
+ * Parse a scope string into resource and action
+ */
+function parseScope(scope) {
+  if (!scope) return { resource: '', action: '' }
+  // prefix.resource:action
+  const regex = new RegExp(`^${props.scopePrefix}\\.([^:]+):(.+)$`)
+  const match = scope.match(regex)
+  if (match) {
+    return { resource: match[1], action: match[2] }
+  }
+  return { resource: '', action: '' }
+}
+
+/**
+ * Build scope string from resource and action
+ */
+function buildScope(resource, action) {
+  if (!resource || !action) return ''
+  return `${props.scopePrefix}.${resource}:${action}`
+}
+
+// Initialize from modelValue
+function initFromValue() {
+  if (!props.modelValue || props.modelValue.length === 0) {
+    scopeRows.value = []
+    return
+  }
+  scopeRows.value = props.modelValue.map(scope => {
+    const { resource, action } = parseScope(scope)
+    return { resource, action }
+  })
+}
+
+// Emit changes - only complete scopes
+function emitChanges() {
+  const scopes = scopeRows.value
+    .map(row => buildScope(row.resource, row.action))
+    .filter(s => s) // Filter out empty
+  emit('update:modelValue', scopes)
+}
+
+// Add new scope row
+function addRow() {
+  scopeRows.value.push({ resource: '', action: 'read' })
+}
+
+// Remove scope row
+function removeRow(index) {
+  scopeRows.value.splice(index, 1)
+  emitChanges()
+}
+
+// Update resource
+function updateResource(index, value) {
+  scopeRows.value[index].resource = value
+  if (value && scopeRows.value[index].action) {
+    emitChanges()
+  }
+}
+
+// Update action
+function updateAction(index, value) {
+  scopeRows.value[index].action = value
+  if (scopeRows.value[index].resource && value) {
+    emitChanges()
+  }
+}
+
+// Check if row is complete
+function isRowComplete(row) {
+  return row.resource && row.action
+}
+
+// Load scope definition from API
+async function loadScopeDefinition() {
+  loading.value = true
+  try {
+    if (!api) {
+      // No API adapter, use defaults
+      scopeDefinition.value = {
+        resources: [...props.defaultResources],
+        actions: [...props.defaultActions],
+      }
+      return
+    }
+
+    const data = await api.request('GET', props.scopeEndpoint)
+    scopeDefinition.value = {
+      resources: data.resources || [...props.defaultResources],
+      actions: data.actions || [...props.defaultActions],
+    }
+  } catch (error) {
+    console.error('[ScopeEditor] Failed to load scope definition:', error)
+    scopeDefinition.value = {
+      resources: [...props.defaultResources],
+      actions: [...props.defaultActions],
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// Watch for external changes
+watch(() => props.modelValue, (newVal) => {
+  // Compare to avoid loops
+  const currentScopes = scopeRows.value
+    .map(row => buildScope(row.resource, row.action))
+    .filter(s => s)
+    .sort()
+    .join(',')
+  const newScopes = (newVal || []).sort().join(',')
+
+  if (currentScopes !== newScopes) {
+    initFromValue()
+  }
+}, { deep: true })
+
+onMounted(async () => {
+  await loadScopeDefinition()
+  initFromValue()
+})
+</script>
+
+<template>
+  <div class="scope-editor">
+    <div v-if="scopeRows.length === 0" class="scope-empty">
+      <span class="text-surface-400">No scopes defined</span>
+    </div>
+
+    <div v-for="(row, index) in scopeRows" :key="index" class="scope-row">
+      <span class="scope-prefix">{{ scopePrefix }}.</span>
+      <AutoComplete
+        v-model="row.resource"
+        :suggestions="resourceSuggestions"
+        @complete="searchResources"
+        @change="updateResource(index, row.resource)"
+        @item-select="(e) => updateResource(index, e.value)"
+        :disabled="disabled || loading"
+        placeholder="resource"
+        class="scope-resource"
+        :dropdown="true"
+        :minLength="0"
+      />
+      <span class="scope-separator">:</span>
+      <Select
+        v-model="row.action"
+        :options="allActions"
+        @change="updateAction(index, row.action)"
+        :disabled="disabled || loading"
+        placeholder="action"
+        class="scope-action"
+      />
+      <span v-if="isRowComplete(row)" class="scope-valid">✓</span>
+      <span v-else class="scope-incomplete">...</span>
+      <Button
+        icon="pi pi-trash"
+        severity="danger"
+        text
+        rounded
+        size="small"
+        :disabled="disabled"
+        @click="removeRow(index)"
+        class="scope-remove"
+      />
+    </div>
+
+    <div class="scope-add">
+      <Button
+        label="Add Scope"
+        icon="pi pi-plus"
+        severity="secondary"
+        text
+        size="small"
+        :disabled="disabled"
+        @click="addRow"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scope-editor {
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background: var(--p-surface-50);
+}
+
+.scope-empty {
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+.scope-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.scope-prefix {
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: var(--p-surface-500);
+  flex-shrink: 0;
+}
+
+.scope-separator {
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: var(--p-surface-500);
+  flex-shrink: 0;
+}
+
+.scope-resource {
+  flex: 1 1 auto !important;
+  min-width: 200px !important;
+}
+
+.scope-action {
+  width: 120px !important;
+  min-width: 120px !important;
+  flex: 0 0 120px !important;
+}
+
+.scope-valid {
+  color: var(--p-green-500);
+  font-weight: bold;
+  width: 20px;
+  text-align: center;
+}
+
+.scope-incomplete {
+  color: var(--p-surface-400);
+  width: 20px;
+  text-align: center;
+}
+
+.scope-remove {
+  flex-shrink: 0;
+}
+
+.scope-add {
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--p-surface-200);
+}
+
+:deep(.scope-resource .p-autocomplete) {
+  width: 100% !important;
+}
+
+:deep(.scope-resource .p-autocomplete-input) {
+  width: 100%;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+:deep(.scope-action .p-select) {
+  width: 120px !important;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+</style>

package/src/components/editors/VanillaJsonEditor.vue

@@ -0,0 +1,185 @@
+<script setup>
+/**
+ * VanillaJsonEditor - JSON editor using vanilla-jsoneditor
+ *
+ * Provides tree/text/table modes like jsoneditoronline.org
+ *
+ * Usage:
+ * <VanillaJsonEditor v-model="jsonData" mode="tree" />
+ */
+
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { JSONEditor } from 'vanilla-jsoneditor'
+
+const props = defineProps({
+  modelValue: {
+    type: [Object, Array, String, null],
+    default: () => ({})
+  },
+  mode: {
+    type: String,
+    default: 'tree', // 'tree', 'text', 'table'
+    validator: (v) => ['tree', 'text', 'table'].includes(v)
+  },
+  height: {
+    type: String,
+    default: '400px'
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  mainMenuBar: {
+    type: Boolean,
+    default: true
+  },
+  navigationBar: {
+    type: Boolean,
+    default: true
+  },
+  statusBar: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'error'])
+
+const containerRef = ref(null)
+let editor = null
+// Flag to prevent onChange from firing during programmatic updates (instance-specific)
+const updatingFromProp = ref(false)
+
+// Parse value to ensure it's an object/array
+function parseValue(val) {
+  if (val === null || val === undefined) {
+    return {}
+  }
+  if (typeof val === 'string') {
+    try {
+      return JSON.parse(val)
+    } catch {
+      return {}
+    }
+  }
+  return val
+}
+
+// Initialize editor
+onMounted(() => {
+  if (!containerRef.value) return
+
+  const content = {
+    json: parseValue(props.modelValue)
+  }
+
+  editor = new JSONEditor({
+    target: containerRef.value,
+    props: {
+      content,
+      mode: props.mode,
+      readOnly: props.readOnly,
+      mainMenuBar: props.mainMenuBar,
+      navigationBar: props.navigationBar,
+      statusBar: props.statusBar,
+      onChange: (updatedContent, previousContent, { contentErrors, patchResult: _patchResult }) => {
+        // Skip if this change came from a programmatic prop update
+        if (updatingFromProp.value) return
+
+        if (contentErrors) {
+          emit('error', contentErrors)
+          return
+        }
+
+        // Extract JSON from content
+        let newValue
+        if (updatedContent.json !== undefined) {
+          newValue = updatedContent.json
+        } else if (updatedContent.text !== undefined) {
+          try {
+            newValue = JSON.parse(updatedContent.text)
+          } catch {
+            // Invalid JSON in text mode, don't emit
+            return
+          }
+        }
+
+        if (newValue !== undefined) {
+          emit('update:modelValue', newValue)
+          emit('change', newValue)
+        }
+      }
+    }
+  })
+})
+
+// Watch for external changes
+watch(() => props.modelValue, (newVal) => {
+  if (!editor) return
+
+  const currentContent = editor.get()
+  const newParsed = parseValue(newVal)
+
+  // Only update if different (avoid loops)
+  const currentJson = currentContent.json !== undefined
+    ? currentContent.json
+    : (currentContent.text ? JSON.parse(currentContent.text) : null)
+
+  if (JSON.stringify(currentJson) !== JSON.stringify(newParsed)) {
+    // Set flag to prevent onChange from emitting during this update
+    updatingFromProp.value = true
+    editor.set({ json: newParsed })
+    // Reset flag after the update is processed
+    nextTick(() => {
+      updatingFromProp.value = false
+    })
+  }
+}, { deep: true })
+
+// Watch mode changes
+watch(() => props.mode, (newMode) => {
+  if (editor) {
+    editor.updateProps({ mode: newMode })
+  }
+})
+
+// Watch readOnly changes
+watch(() => props.readOnly, (newReadOnly) => {
+  if (editor) {
+    editor.updateProps({ readOnly: newReadOnly })
+  }
+})
+
+// Cleanup
+onUnmounted(() => {
+  if (editor) {
+    editor.destroy()
+    editor = null
+  }
+})
+</script>
+
+<template>
+  <div class="vanilla-json-editor" :style="{ height }">
+    <div ref="containerRef" class="editor-container"></div>
+  </div>
+</template>
+
+<style scoped>
+.vanilla-json-editor {
+  width: 100%;
+  border: 1px solid var(--p-surface-300);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.editor-container {
+  height: 100%;
+}
+
+/* Override some vanilla-jsoneditor styles for dark mode compatibility */
+:deep(.jse-main) {
+  --jse-theme-color: var(--p-primary-color, #10b981);
+  --jse-theme-color-highlight: var(--p-primary-100, #d1fae5);
+}
+</style>

package/src/components/forms/FormActions.vue

@@ -0,0 +1,104 @@
+<script setup>
+/**
+ * FormActions - Reusable form action buttons
+ *
+ * Props:
+ * - isEdit: Boolean - Edit mode (changes labels)
+ * - saving: Boolean - Loading state
+ * - dirty: Boolean - Form has unsaved changes
+ *
+ * Emits:
+ * - save: Save and stay on form
+ * - saveAndClose: Save and navigate back
+ * - cancel: Cancel/close without saving
+ */
+
+import Button from 'primevue/button'
+
+defineProps({
+  isEdit: {
+    type: Boolean,
+    default: false
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  dirty: {
+    type: Boolean,
+    default: true  // Default true for backwards compatibility
+  },
+  showSaveAndClose: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['save', 'saveAndClose', 'cancel'])
+</script>
+
+<template>
+  <div class="form-actions">
+    <div class="form-actions-left">
+      <Button
+        type="button"
+        :label="isEdit ? 'Update' : 'Create'"
+        :loading="saving"
+        :disabled="!dirty || saving"
+        icon="pi pi-check"
+        @click="emit('save')"
+        v-tooltip.top="'Save and continue editing'"
+      />
+      <Button
+        v-if="showSaveAndClose"
+        type="button"
+        :label="isEdit ? 'Update & Close' : 'Create & Close'"
+        :loading="saving"
+        :disabled="!dirty || saving"
+        icon="pi pi-check-circle"
+        severity="success"
+        @click="emit('saveAndClose')"
+        v-tooltip.top="'Save and return to list'"
+      />
+      <span v-if="dirty" class="dirty-indicator" v-tooltip.top="'Unsaved changes'">
+        <i class="pi pi-circle-fill"></i>
+      </span>
+    </div>
+    <Button
+      type="button"
+      label="Cancel"
+      severity="secondary"
+      icon="pi pi-times"
+      @click="emit('cancel')"
+      :disabled="saving"
+    />
+  </div>
+</template>
+
+<style scoped>
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--p-surface-200);
+}
+
+.form-actions-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dirty-indicator {
+  color: var(--p-orange-500);
+  font-size: 0.5rem;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+</style>

package/src/components/forms/FormField.vue

@@ -0,0 +1,64 @@
+<script setup>
+/**
+ * FormField - Wrapper for form fields with automatic dirty state styling
+ *
+ * Usage:
+ * <FormField name="username" label="Username *">
+ *   <InputText v-model="form.username" />
+ * </FormField>
+ *
+ * The parent form must provide isFieldDirty via useForm's provideFormContext()
+ */
+import { inject, computed } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  hint: {
+    type: String,
+    default: ''
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Inject isFieldDirty from parent form (provided by useForm)
+const isFieldDirty = inject('isFieldDirty', () => false)
+
+const isDirty = computed(() => isFieldDirty(props.name))
+
+const fieldClasses = computed(() => [
+  'form-field',
+  {
+    'field-dirty': isDirty.value
+  }
+])
+
+const fieldStyle = computed(() =>
+  props.fullWidth ? { gridColumn: '1 / -1' } : {}
+)
+</script>
+
+<template>
+  <div :class="fieldClasses" :style="fieldStyle">
+    <label v-if="label" :for="name">{{ label }}</label>
+    <slot ></slot>
+    <small v-if="hint" class="field-hint">{{ hint }}</small>
+  </div>
+</template>
+
+<style scoped>
+.field-hint {
+  color: var(--p-surface-500);
+  margin-top: 0.25rem;
+  display: block;
+}
+</style>