@motor-cms/ui-admin 1.0.1-alpha.0

package/README.md

@@ -0,0 +1,77 @@
+# motor-ui-admin
+
+Admin UI layer for the Energis CMS. Provides CRUD pages for all core admin entities, plus the reusable form and grid component systems that power them.
+
+## Directory Structure
+
+```
+motor-ui-admin/
+├── app/
+│   ├── components/
+│   │   └── form/inputs/                    # Admin-specific form inputs
+│   │       ├── NestedDraggable.vue         # Tree reordering drag-and-drop
+│   │       ├── QuicklinksInput.vue         # Quicklinks entity input
+│   │       ├── CategoryTreeInput.vue       # Category tree selector
+│   │       └── CategoryTreePicker.vue      # Category tree picker with drag-and-drop
+│   ├── lang/
+│   │   ├── de/motor-admin/                 # German translations (13 modules)
+│   │   └── en/motor-admin/                 # English translations (13 modules)
+│   ├── pages/
+│   │   ├── index.vue                       # Root redirect
+│   │   ├── login.vue                       # Login page
+│   │   ├── dashboard.vue                   # Dashboard
+│   │   ├── profile.vue                     # User profile
+│   │   ├── search.vue                      # Global search
+│   │   └── motor-admin/
+│   │       ├── users/                      # Users CRUD
+│   │       ├── roles/                      # Roles CRUD
+│   │       ├── permission-groups/          # Permission groups CRUD
+│   │       ├── clients/                    # Clients CRUD
+│   │       ├── domains/                    # Domains CRUD
+│   │       ├── languages/                  # Languages CRUD
+│   │       ├── config-variables/           # Config variables CRUD
+│   │       ├── email-templates/            # Email templates CRUD
+│   │       ├── ai-system-prompts/          # AI system prompts CRUD
+│   │       ├── category-trees/             # Category trees + nested categories CRUD
+│   │       └── theme-preview/              # Theme preview tool
+│   └── types/generated/
+│       ├── form-meta.ts                    # Auto-generated form field metadata
+│       └── grid-meta.ts                    # Auto-generated grid column metadata
+├── tests/
+│   └── e2e/                                # 9 Playwright E2E specs
+├── nuxt.config.ts
+└── vitest.config.ts
+```
+
+## Key Features
+
+- **Form system** -- Metadata-driven forms built from auto-generated `form-meta.ts`. The `useEntityForm` composable handles field generation, Zod validation schemas, API submission, and navigation. `FormBase` renders fields by input type; `FormPage` provides the page shell.
+- **Grid system** -- Metadata-driven data grids built from auto-generated `grid-meta.ts`. The `useGridFetch`/`useGridData` composables handle paginated API fetching. `GridBase` renders columns using type-appropriate renderers. Supports sorting, search, filters, column visibility, row click navigation, row actions, and bulk actions with confirmation dialogs.
+- **Permission guards** -- Pages declare required permissions via `definePageMeta({ permission: '...' })`. Grid add buttons, row actions, and bulk actions respect permission checks.
+- **Entity CRUD pages** -- 10 admin entities with full index/create/edit page sets under `/motor-admin/`.
+- **i18n** -- 13 translation modules per locale (de, en) covering all entities plus global strings.
+
+## Dependencies
+
+This layer heavily consumes **motor-ui-core** for:
+- Composables: `useEntityForm`, `useGridFetch`, `useGridData`, `columnsFromMeta`, `createdAtColumn`, `useBreadcrumbs`, `usePermissions`, `useClientFilter`, `useIsActiveFilter`
+- Types: `FormInputProps`, `FormInputValue`, `RendererProps`, `BulkActionDef`, `BreadcrumbItem`, API schemas from `api.d.ts`
+- Form configs: per-entity configs in `motor-ui-core/app/types/config/`
+
+## Generated Metadata
+
+`form-meta.ts` and `grid-meta.ts` are auto-generated from the backend OpenAPI spec. Regenerate with:
+
+```bash
+pnpm sync:api
+```
+
+Do not edit these files manually.
+
+## Tests
+
+9 Playwright E2E specs under `tests/e2e/` covering grid loading, row navigation, and pagination for users, roles, clients, domains, languages, config variables, email templates, and category trees.
+
+```bash
+pnpm test:e2e
+```

package/app/components/form/inputs/CategoryTreeInput.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const { t } = useI18n()
+
+interface CategoryTreeItem extends TreeItem {
+  id: number
+  children?: CategoryTreeItem[]
+}
+
+interface Category {
+  id: number
+  name: string
+  parent_id: number | null
+  _lft: number
+  level: number
+}
+
+const props = defineProps<{
+  scope: string
+  modelValue?: number[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number[]]
+}>()
+
+const client = useSanctumClient()
+
+const treeItems = ref<CategoryTreeItem[]>([])
+const itemMap = new Map<number, CategoryTreeItem>()
+const selectedIds = ref(new Set<number>())
+
+function buildTree(categories: Category[]): CategoryTreeItem[] {
+  const sorted = [...categories].sort((a, b) => a._lft - b._lft)
+  const map = new Map<number, CategoryTreeItem>()
+  const roots: CategoryTreeItem[] = []
+
+  for (const cat of sorted) {
+    const item: CategoryTreeItem = {
+      id: cat.id,
+      label: cat.name,
+      children: [],
+      defaultExpanded: true
+    }
+    map.set(cat.id, item)
+    itemMap.set(cat.id, item)
+
+    if (cat.level === 0) continue // skip tree root
+
+    if (cat.parent_id && map.has(cat.parent_id) && map.get(cat.parent_id) !== undefined) {
+      const parent = map.get(cat.parent_id)!
+      if (categories.find(c => c.id === cat.parent_id)!.level > 0) {
+        parent.children!.push(item)
+        continue
+      }
+    }
+    roots.push(item)
+  }
+
+  return roots
+}
+
+function isSelected(item: CategoryTreeItem): boolean {
+  return selectedIds.value.has(item.id)
+}
+
+function getAllDescendantIds(item: CategoryTreeItem): number[] {
+  const ids: number[] = []
+  for (const child of item.children ?? []) {
+    ids.push(child.id)
+    ids.push(...getAllDescendantIds(child))
+  }
+  return ids
+}
+
+function isIndeterminate(item: CategoryTreeItem): boolean {
+  if (!item.children?.length) return false
+  const descendantIds = getAllDescendantIds(item)
+  const selectedCount = descendantIds.filter(id => selectedIds.value.has(id)).length
+  return selectedCount > 0 && selectedCount < descendantIds.length
+}
+
+function toggleItem(item: CategoryTreeItem) {
+  const ids = new Set(selectedIds.value)
+  if (ids.has(item.id)) {
+    ids.delete(item.id)
+  } else {
+    ids.add(item.id)
+  }
+  selectedIds.value = ids
+  emit('update:modelValue', [...ids])
+}
+
+// Sync incoming modelValue (IDs) → selectedIds
+function syncFromIds() {
+  if (!props.modelValue || props.modelValue.length === 0) {
+    selectedIds.value = new Set()
+    return
+  }
+  selectedIds.value = new Set(props.modelValue.filter(id => itemMap.has(id)))
+}
+
+watch(() => props.modelValue, syncFromIds, { deep: true })
+
+const { data: categoriesRes, status: fetchStatus } = useAsyncData<{ data: Category[] }>(
+  `category-tree-input-${props.scope}`,
+  () => client<{ data: Category[] }>(`/api/v2/categories?scope=${props.scope}&per_page=0`)
+)
+
+const loading = computed(() => fetchStatus.value === 'pending')
+
+watch(categoriesRes, (res) => {
+  if (res?.data) {
+    treeItems.value = buildTree(res.data)
+    syncFromIds()
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div
+    v-if="loading"
+    class="flex items-center gap-2 text-sm text-muted py-2"
+  >
+    <UIcon
+      name="i-lucide-loader-2"
+      class="size-4 animate-spin"
+    />
+    <span>{{ t('motor-core.global.loading') }}</span>
+  </div>
+  <UTree
+    v-else
+    :items="treeItems"
+    :get-key="(item: CategoryTreeItem) => String(item.id)"
+  >
+    <template #item-leading="{ item }">
+      <UCheckbox
+        :model-value="isIndeterminate(item as CategoryTreeItem) ? 'indeterminate' : isSelected(item as CategoryTreeItem)"
+        tabindex="-1"
+        @change="toggleItem(item as CategoryTreeItem)"
+        @click.stop
+      />
+    </template>
+    <template #item-label="{ item }">
+      <span
+        class="cursor-pointer select-none"
+        @click.stop="toggleItem(item as CategoryTreeItem)"
+      >
+        {{ (item as CategoryTreeItem).label }}
+      </span>
+    </template>
+  </UTree>
+</template>

package/app/components/form/inputs/CategoryTreePicker.vue

@@ -0,0 +1,355 @@
+<!-- app/components/form/inputs/CategoryTreePicker.vue -->
+<script setup lang="ts">
+import type { TreeNode } from '@motor-cms/ui-core/app/types/tree'
+
+interface CategoryItem {
+  id: number
+  name: string
+  parent_id: number | null
+  level: number
+}
+
+const TEMP_NEW_ID = -1
+
+const props = defineProps<{
+  treeId: string
+  modelValue: number | null
+  /** API endpoint to fetch tree items (defaults to category-trees endpoint) */
+  endpoint?: string
+  /** ID of the category being edited — shown highlighted & draggable */
+  currentId?: number
+  /** Name for a new item (create mode) — shown as a draggable node */
+  newItemName?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | null]
+  'update:previousSiblingId': [value: number | null]
+  'update:nextSiblingId': [value: number | null]
+}>()
+
+const { t } = useI18n()
+const sanctumClient = useSanctumClient()
+
+const tree = ref<TreeNode[]>([])
+const isCreateMode = computed(() => props.newItemName !== undefined && !props.currentId)
+const isEditMode = computed(() => !!props.currentId || isCreateMode.value)
+const activeItemId = computed(() => props.currentId ?? (isCreateMode.value ? TEMP_NEW_ID : undefined))
+
+// The parent_id of root-level categories (their parent is outside the returned list)
+const rootParentId = ref<number | null>(null)
+const isDragging = ref(false)
+const expandedIds = ref(new Set<number>())
+
+// IDs that can't be a drop/select target (current item + its descendants)
+const nonSelectableIds = computed(() => {
+  const ids = new Set<number>()
+  if (!props.currentId) return ids
+  ids.add(props.currentId)
+  let changed = true
+  while (changed) {
+    changed = false
+    for (const cat of categories.value) {
+      if (cat.parent_id !== null && ids.has(cat.parent_id) && !ids.has(cat.id)) {
+        ids.add(cat.id)
+        changed = true
+      }
+    }
+  }
+  return ids
+})
+
+const { data: categoriesRes, status: fetchStatus } = useAsyncData<{ data: CategoryItem[] }>(
+  `category-tree-picker-${props.treeId}`,
+  () => {
+    const url = props.endpoint
+      ? `${props.endpoint}?per_page=0`
+      : `/api/v2/category-trees/${props.treeId}/categories?per_page=0`
+    return sanctumClient<{ data: CategoryItem[] }>(url)
+  }
+)
+
+const categories = computed(() => categoriesRes.value?.data ?? [])
+const loading = computed(() => fetchStatus.value === 'pending')
+
+function buildTree(cats: CategoryItem[]): TreeNode[] {
+  const map = new Map<number, TreeNode>()
+  for (const cat of cats) {
+    map.set(cat.id, { id: cat.id, name: cat.name, children: [] })
+  }
+  const roots: TreeNode[] = []
+  for (const cat of cats) {
+    const node = map.get(cat.id)!
+    if (cat.parent_id !== null && map.has(cat.parent_id)) {
+      map.get(cat.parent_id)!.children.push(node)
+    } else {
+      roots.push(node)
+      // Capture the parent_id of root-level categories
+      if (rootParentId.value === null && cat.parent_id !== null) {
+        rootParentId.value = cat.parent_id
+      }
+    }
+  }
+  return roots
+}
+
+// Find ancestor IDs from root to target (not including target)
+function findPathTo(nodes: TreeNode[], targetId: number): number[] | null {
+  for (const node of nodes) {
+    if (node.id === targetId) return []
+    if (node.children.length > 0) {
+      const path = findPathTo(node.children, targetId)
+      if (path !== null) return [node.id, ...path]
+    }
+  }
+  return null
+}
+
+watch(categories, (cats) => {
+  tree.value = buildTree(cats)
+
+  // Empty tree: default rootParentId to the tree's own ID (root node)
+  if (rootParentId.value === null) {
+    rootParentId.value = Number(props.treeId)
+  }
+
+  // Create mode: insert virtual "new" node at the start of the root list
+  if (isCreateMode.value) {
+    tree.value.unshift({ id: TEMP_NEW_ID, name: props.newItemName || '', children: [] })
+    // Emit initial position (first child at root level)
+    emitPosition()
+  }
+
+  // Auto-expand path to current item (+ the item itself to show its children)
+  if (props.currentId) {
+    const path = findPathTo(tree.value, props.currentId)
+    if (path) {
+      expandedIds.value = new Set([...path, props.currentId])
+    }
+  }
+}, { immediate: true })
+
+// Keep the active node's name in sync with the prop
+watch(() => props.newItemName, (name) => {
+  const id = activeItemId.value
+  if (id === undefined) return
+  const node = findNode(tree.value, id)
+  if (node) node.name = name || ''
+})
+
+function toggleNode(id: number) {
+  const next = new Set(expandedIds.value)
+  if (next.has(id)) {
+    next.delete(id)
+  } else {
+    next.add(id)
+  }
+  expandedIds.value = next
+}
+
+// =============================================
+// Tree mutation (edit mode drag & drop)
+// =============================================
+
+function findAndRemove(nodes: TreeNode[], id: number): TreeNode | null {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]!
+    if (node.id === id) return nodes.splice(i, 1)[0] ?? null
+    const found = findAndRemove(node.children, id)
+    if (found) return found
+  }
+  return null
+}
+
+function findNode(nodes: TreeNode[], id: number): TreeNode | null {
+  for (const n of nodes) {
+    if (n.id === id) return n
+    const found = findNode(n.children, id)
+    if (found) return found
+  }
+  return null
+}
+
+/** Find the list containing the active item and emit its parent + siblings */
+function emitPosition() {
+  const id = activeItemId.value
+  if (id === undefined) return
+
+  function findInList(nodes: TreeNode[], parentId: number | null): boolean {
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i]!.id === id) {
+        const prev = i > 0 ? (nodes[i - 1]?.id ?? null) : null
+        const next = i < nodes.length - 1 ? (nodes[i + 1]?.id ?? null) : null
+        emit('update:modelValue', parentId)
+        emit('update:previousSiblingId', prev)
+        emit('update:nextSiblingId', next)
+        return true
+      }
+      if (findInList(nodes[i]!.children, nodes[i]!.id)) return true
+    }
+    return false
+  }
+  findInList(tree.value, rootParentId.value)
+}
+
+function moveItem(itemId: number, newParentId: number | null, newIndex: number) {
+  const item = findAndRemove(tree.value, itemId)
+  if (!item) return
+
+  let targetList: TreeNode[]
+  if (newParentId === null || newParentId === rootParentId.value) {
+    targetList = tree.value
+  } else {
+    const parent = findNode(tree.value, newParentId)
+    if (!parent) return
+    targetList = parent.children
+  }
+
+  targetList.splice(newIndex, 0, item)
+
+  // Auto-expand the target parent so the user sees the result
+  if (newParentId !== null && !expandedIds.value.has(newParentId)) {
+    const next = new Set(expandedIds.value)
+    next.add(newParentId)
+    expandedIds.value = next
+  }
+
+  emitPosition()
+}
+
+// =============================================
+// Auto-expand collapsed parents on drag hover
+// =============================================
+
+const autoExpandedIds = new Set<number>()
+let hoverTimer: ReturnType<typeof setTimeout> | null = null
+let hoverTargetId: number | null = null
+
+function isDescendantOf(nodeId: number, ancestorId: number): boolean {
+  const catMap = new Map(categories.value.map(c => [c.id, c]))
+  let current = catMap.get(nodeId)
+  while (current) {
+    if (current.parent_id === ancestorId) return true
+    if (current.parent_id === null) return false
+    current = current.parent_id !== null ? catMap.get(current.parent_id) : undefined
+  }
+  return false
+}
+
+function collapseStaleAutoExpanded(currentItemId: number) {
+  if (autoExpandedIds.size === 0) return
+  const toRemove: number[] = []
+  for (const id of autoExpandedIds) {
+    if (id === currentItemId || isDescendantOf(currentItemId, id)) continue
+    toRemove.push(id)
+  }
+  if (toRemove.length === 0) return
+  const next = new Set(expandedIds.value)
+  for (const id of toRemove) {
+    next.delete(id)
+    autoExpandedIds.delete(id)
+  }
+  expandedIds.value = next
+}
+
+function cancelHoverExpand() {
+  if (hoverTimer) {
+    clearTimeout(hoverTimer)
+    hoverTimer = null
+    hoverTargetId = null
+  }
+}
+
+function startHoverExpand(id: number) {
+  if (id === hoverTargetId) return
+  cancelHoverExpand()
+  hoverTargetId = id
+  hoverTimer = setTimeout(() => {
+    const next = new Set(expandedIds.value)
+    next.add(id)
+    expandedIds.value = next
+    autoExpandedIds.add(id)
+    hoverTargetId = null
+    hoverTimer = null
+  }, 500)
+}
+
+/** Called from @dragover on each tree item during drag */
+function handleDragOver(itemId: number) {
+  collapseStaleAutoExpanded(itemId)
+
+  if (itemId === activeItemId.value) {
+    cancelHoverExpand()
+    return
+  }
+  if (nonSelectableIds.value.has(itemId)) {
+    cancelHoverExpand()
+    return
+  }
+  if (expandedIds.value.has(itemId)) {
+    cancelHoverExpand()
+    return
+  }
+
+  const node = findNode(tree.value, itemId)
+  if (!node || node.children.length === 0) {
+    cancelHoverExpand()
+    return
+  }
+
+  startHoverExpand(itemId)
+}
+
+/** Called after drop — keeps drop target expanded, collapses the rest */
+function cleanupAutoExpand(dropParentId: number | null) {
+  cancelHoverExpand()
+  if (dropParentId !== null) {
+    autoExpandedIds.delete(dropParentId)
+  }
+  if (autoExpandedIds.size === 0) return
+  const next = new Set(expandedIds.value)
+  for (const id of autoExpandedIds) {
+    next.delete(id)
+  }
+  expandedIds.value = next
+  autoExpandedIds.clear()
+}
+
+// Provide shared state for the recursive NestedDraggable components
+provide('categoryTree', {
+  currentId: computed(() => activeItemId.value),
+  nonSelectableIds,
+  moveItem,
+  isEditMode,
+  isDragging,
+  expandedIds: computed(() => expandedIds.value),
+  toggleNode,
+  handleDragOver,
+  cleanupAutoExpand
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      v-if="loading"
+      class="flex items-center gap-2 text-sm text-[var(--ui-text-muted)]"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="animate-spin"
+      />
+      {{ t('motor-core.global.loading') }}
+    </div>
+    <div
+      v-else
+      class="text-sm"
+    >
+      <FormInputsNestedDraggable
+        :items="tree"
+        :parent-id="rootParentId"
+        :depth="0"
+      />
+    </div>
+  </ClientOnly>
+</template>