qdadm 0.13.0

package/src/composables/useForm.js

@@ -0,0 +1,254 @@
+/**
+ * useForm - CRUD form composable extending useBareForm
+ *
+ * Provides standardized form handling:
+ * - Loading and saving states (via EntityManager)
+ * - Dirty state tracking (via useBareForm)
+ * - Unsaved changes guard (via useBareForm)
+ * - Toast notifications
+ * - Navigation helpers
+ *
+ * Usage:
+ * ```js
+ * // Minimal - reads config from EntityManager
+ * const { form, loading, saving, dirty, isEdit, submit, cancel } = useForm({
+ *   entity: 'users',
+ *   getId: () => route.params.id
+ * })
+ *
+ * // With overrides
+ * const { form, ... } = useForm({
+ *   entity: 'users',
+ *   getId: () => route.params.id,
+ *   initialData: { name: '', email: '' },  // Override manager.getInitialData()
+ *   routePrefix: 'user',                   // Override manager.routePrefix
+ *   entityName: 'User'                     // Override manager.label
+ * })
+ * ```
+ */
+import { ref, watch, onMounted, inject } from 'vue'
+import { useBareForm } from './useBareForm'
+import { deepClone } from '../utils/transformers'
+
+export function useForm(options = {}) {
+  const {
+    entity,
+    getId = null,
+    // Callbacks
+    transformLoad = (data) => data,
+    transformSave = (data) => data,
+    onLoadSuccess = null,
+    onSaveSuccess = null,
+    // Options
+    enableGuard = true,
+    redirectOnCreate = true,
+    getDirtyState = null,
+    usePatch = false  // Use PATCH instead of PUT for updates
+  } = options
+
+  // Get EntityManager via orchestrator
+  const orchestrator = inject('qdadmOrchestrator')
+  if (!orchestrator) {
+    throw new Error('[qdadm] Orchestrator not provided. Make sure to use createQdadm() with entityFactory.')
+  }
+  const manager = orchestrator.get(entity)
+
+  // Read config from manager with option overrides
+  const routePrefix = options.routePrefix ?? manager.routePrefix
+  const entityName = options.entityName ?? manager.label
+  const initialData = options.initialData ?? manager.getInitialData()
+
+  // Form-specific state
+  const form = ref(deepClone(initialData))
+  const originalData = ref(null)
+
+  // Dirty state getter
+  const dirtyStateGetter = getDirtyState || (() => ({ form: form.value }))
+
+  // Use base form for common functionality
+  const {
+    // Dependencies
+    router,
+    toast,
+    // State from useBareForm
+    loading,
+    saving,
+    dirty,
+    dirtyFields,
+    isEdit,
+    entityId,
+    // Dirty tracking
+    isFieldDirty,
+    takeSnapshot,
+    checkDirty,
+    // Helpers
+    cancel,
+    // Guard dialog for unsaved changes
+    guardDialog
+  } = useBareForm({
+    getState: dirtyStateGetter,
+    routePrefix,
+    guard: enableGuard,
+    onGuardSave: () => submit(false),
+    getId
+  })
+
+  // Watch for changes
+  watch(form, checkDirty, { deep: true })
+
+  // Load entity
+  async function load() {
+    if (!isEdit.value) {
+      form.value = deepClone(initialData)
+      takeSnapshot()
+      return
+    }
+
+    loading.value = true
+    try {
+      const responseData = await manager.get(entityId.value)
+      const data = transformLoad(responseData)
+      form.value = data
+      originalData.value = deepClone(data)
+      takeSnapshot()
+
+      if (onLoadSuccess) {
+        await onLoadSuccess(data)
+      }
+    } catch (error) {
+      console.error(`Failed to load ${entityName}:`, error)
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: error.response?.data?.detail || `Failed to load ${entityName}`,
+        life: 5000
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // Submit form
+  async function submit(andClose = true) {
+    saving.value = true
+    try {
+      const payload = transformSave(deepClone(form.value))
+
+      let responseData
+      if (isEdit.value) {
+        if (usePatch) {
+          responseData = await manager.patch(entityId.value, payload)
+        } else {
+          responseData = await manager.update(entityId.value, payload)
+        }
+      } else {
+        responseData = await manager.create(payload)
+      }
+
+      toast.add({
+        severity: 'success',
+        summary: 'Success',
+        detail: `${entityName} ${isEdit.value ? 'updated' : 'created'} successfully`,
+        life: 3000
+      })
+
+      // Update original data and snapshot
+      const savedData = transformLoad(responseData)
+      form.value = savedData
+      originalData.value = deepClone(savedData)
+      takeSnapshot()
+
+      if (onSaveSuccess) {
+        await onSaveSuccess(responseData, andClose)
+      }
+
+      if (andClose) {
+        router.push({ name: routePrefix })
+      } else if (!isEdit.value && redirectOnCreate) {
+        // Redirect to edit mode after create
+        const newId = responseData.id || responseData.key
+        router.replace({ name: `${routePrefix}-edit`, params: { id: newId } })
+      }
+
+      return responseData
+    } catch (error) {
+      console.error(`Failed to save ${entityName}:`, error)
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: error.response?.data?.detail || `Failed to save ${entityName}`,
+        life: 5000
+      })
+      throw error
+    } finally {
+      saving.value = false
+    }
+  }
+
+  // Delete entity
+  async function remove() {
+    if (!isEdit.value) return
+
+    try {
+      await manager.delete(entityId.value)
+      toast.add({
+        severity: 'success',
+        summary: 'Success',
+        detail: `${entityName} deleted successfully`,
+        life: 3000
+      })
+      router.push({ name: routePrefix })
+    } catch (error) {
+      console.error(`Failed to delete ${entityName}:`, error)
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: error.response?.data?.detail || `Failed to delete ${entityName}`,
+        life: 5000
+      })
+    }
+  }
+
+  // Reset form to original data
+  function reset() {
+    if (originalData.value) {
+      form.value = deepClone(originalData.value)
+    } else {
+      form.value = deepClone(initialData)
+    }
+    takeSnapshot()
+  }
+
+  // Load on mount if editing
+  onMounted(() => {
+    load()
+  })
+
+  return {
+    // Manager access
+    manager,
+
+    // State
+    form,
+    loading,
+    saving,
+    dirty,
+    dirtyFields,
+    isEdit,
+    entityId,
+    originalData,
+
+    // Actions
+    load,
+    submit,
+    cancel,
+    remove,
+    reset,
+    takeSnapshot,
+    checkDirty,
+    isFieldDirty,
+
+    // Guard dialog (for UnsavedChangesDialog - pass to PageLayout)
+    guardDialog
+  }
+}

package/src/composables/useGuardStore.js

@@ -0,0 +1,37 @@
+/**
+ * Shared reactive store for the unsaved changes guard dialog
+ *
+ * This store allows child components (forms) to register their guard dialog,
+ * and parent components (AppLayout) to render it.
+ */
+
+import { ref, shallowRef } from 'vue'
+
+// Shared reactive state
+const currentGuardDialog = shallowRef(null)
+
+/**
+ * Register a guard dialog (called by useBareForm)
+ * @param {Object} guardDialog - The guardDialog object from useUnsavedChangesGuard
+ */
+export function registerGuardDialog(guardDialog) {
+  currentGuardDialog.value = guardDialog
+}
+
+/**
+ * Unregister the current guard dialog (called on form unmount)
+ * @param {Object} guardDialog - The guardDialog to unregister (only unregisters if it matches)
+ */
+export function unregisterGuardDialog(guardDialog) {
+  if (currentGuardDialog.value === guardDialog) {
+    currentGuardDialog.value = null
+  }
+}
+
+/**
+ * Get the current guard dialog ref (used by AppLayout)
+ * @returns {ShallowRef} The reactive guard dialog reference
+ */
+export function useGuardDialog() {
+  return currentGuardDialog
+}

package/src/composables/useJsonSyntax.js

@@ -0,0 +1,101 @@
+/**
+ * useJsonSyntax - Shared JSON syntax highlighting utilities
+ *
+ * Provides consistent JSON formatting and syntax highlighting
+ * across JsonEditor, JsonViewer, and JsonEditorFoldable components.
+ */
+
+/**
+ * Apply syntax highlighting to JSON string
+ * @param {string} jsonText - Raw JSON text
+ * @returns {string} HTML with syntax highlighting spans
+ */
+export function highlightJson(jsonText) {
+  if (!jsonText) {
+    return ''
+  }
+
+  return jsonText
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    // Strings (values only - after colon or in arrays)
+    .replace(/("(?:[^"\\]|\\.)*")(?=\s*[,\]}]|\s*$)/gm, '<span class="json-string">$1</span>')
+    // Keys (before colon)
+    .replace(/("(?:[^"\\]|\\.)*")(\s*:)/g, '<span class="json-key">$1</span>$2')
+    // Numbers
+    .replace(/\b(-?\d+\.?\d*)\b/g, '<span class="json-number">$1</span>')
+    // Booleans
+    .replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>')
+    // Null
+    .replace(/\bnull\b/g, '<span class="json-null">null</span>')
+}
+
+/**
+ * Get the type of a JSON value for display
+ * @param {any} value - The value to check
+ * @returns {string} Type name: 'string', 'number', 'boolean', 'null', 'array', 'object'
+ */
+export function getJsonValueType(value) {
+  if (value === null) return 'null'
+  if (Array.isArray(value)) return 'array'
+  return typeof value
+}
+
+/**
+ * Get a short preview of a JSON value
+ * @param {any} value - The value to preview
+ * @param {number} maxLength - Maximum length for string previews
+ * @returns {string} Short preview text
+ */
+export function getJsonPreview(value, maxLength = 50) {
+  const type = getJsonValueType(value)
+
+  switch (type) {
+    case 'string': {
+      const preview = value.substring(0, maxLength)
+      return preview + (value.length > maxLength ? '...' : '')
+    }
+    case 'array':
+      return `[${value.length} item${value.length !== 1 ? 's' : ''}]`
+    case 'object':
+      return `{${Object.keys(value).length} key${Object.keys(value).length !== 1 ? 's' : ''}}`
+    case 'null':
+      return 'null'
+    case 'boolean':
+      return String(value)
+    case 'number':
+      return String(value)
+    default:
+      return String(value)
+  }
+}
+
+/**
+ * Safely parse JSON with error handling
+ * @param {string} text - JSON text to parse
+ * @returns {{ value: any, error: string | null }} Parse result
+ */
+export function safeJsonParse(text) {
+  if (!text || !text.trim()) {
+    return { value: null, error: null }
+  }
+  try {
+    return { value: JSON.parse(text), error: null }
+  } catch (e) {
+    return { value: null, error: e.message }
+  }
+}
+
+/**
+ * CSS class names for JSON syntax highlighting
+ * Import these in your component's style section
+ */
+export const JSON_SYNTAX_CLASSES = `
+.json-key { color: #881391; }
+.json-string { color: #1a1aa6; }
+.json-number { color: #1c00cf; }
+.json-boolean { color: #0d22aa; font-weight: 500; }
+.json-null { color: #808080; font-style: italic; }
+.json-placeholder { color: var(--p-surface-400); }
+`