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

package/README.md

@@ -0,0 +1,122 @@
+# motor-ui-media
+
+Media library layer for the Energis CMS. Provides file upload, gallery browsing, metadata editing, and file usage tracking.
+
+## Directory Structure
+
+```
+motor-ui-media/
+├── app/
+│   ├── components/
+│   │   ├── form/inputs/
+│   │   │   └── MultiFileUpload.vue     # Drag-drop multi-file input with per-file metadata
+│   │   └── media/
+│   │       ├── Gallery.vue             # Infinite-scroll masonry gallery with search/filters
+│   │       └── GalleryCard.vue         # Media card (thumbnail, lightbox, download, copy URL, usage)
+│   ├── lang/
+│   │   ├── de/motor-media/             # German translations (2 modules: global, files)
+│   │   └── en/motor-media/             # English translations (2 modules: global, files)
+│   ├── pages/
+│   │   └── motor-media/
+│   │       ├── index.vue               # Landing redirect
+│   │       └── files/
+│   │           ├── index.vue           # Files grid/gallery (dual view mode)
+│   │           ├── create.vue          # Multi-file upload with categories
+│   │           └── [id]/edit.vue       # File metadata edit + file replacement
+│   └── types/
+│       ├── media.ts                    # MediaFile, FileResource interfaces
+│       └── generated/
+│           ├── form-meta.ts            # Auto-generated form field metadata
+│           └── grid-meta.ts            # Auto-generated grid column metadata
+├── tests/
+│   └── e2e/
+│       └── media-files-grid.spec.ts    # Gallery view loading test
+├── nuxt.config.ts
+└── vitest.config.ts
+```
+
+## Key Features
+
+| Feature | Description |
+|---------|-------------|
+| Dual view modes | Gallery (masonry) and table views, toggled via a `useCookie`-persisted preference |
+| Multi-file upload | Drag-drop zone, per-file description/alt text, sequential upload with progress |
+| Gallery masonry | Responsive CSS columns (2-5) with infinite scroll via IntersectionObserver |
+| Gallery card | Image thumbnail with lazy loading, lightbox preview, download, copy URL, usage modal |
+| File metadata | Description, alt text, category tree assignment, file replacement on edit |
+| Bulk delete | Multi-select with Cmd/Ctrl+click, bulk delete with confirmation |
+| File usage tracking | EntityUsageModal shows where each file is referenced |
+| Search and filtering | Client filter, category filter, text search (URL-synced via `useGridState`) |
+
+## Components
+
+### Gallery.vue
+
+Infinite-scroll masonry grid for media files. Accepts a `fetch` function (from `useGridFetch`), filters, and bulk actions. Uses `useIntersectionObserver` from VueUse to trigger `loadMore()` when the sentinel element becomes visible. Exposes a `refresh()` method.
+
+### GalleryCard.vue
+
+Renders a single media file as a card. Features:
+- Image thumbnail or MIME-type icon for non-images
+- Hover overlay with lightbox, download, copy URL, and usage actions
+- Selection checkbox (Cmd/Ctrl+click when bulk actions are available)
+- File extension badge and creation date
+
+### MultiFileUpload.vue
+
+Drag-and-drop file input. Manages pending files with per-entry description and alt text fields. Propagates form-level defaults to non-dirty entries. Emits `PendingFile[]`.
+
+## Types
+
+| Type | File | Description |
+|------|------|-------------|
+| `MediaFile` | `types/media.ts` | File metadata (url, file_name, mime_type, size, conversions) |
+| `FileResource` | `types/media.ts` | API resource (id, description, file, categories) |
+
+## Pages
+
+| Route | Permission | Description |
+|-------|------------|-------------|
+| `/motor-media` | -- | Landing/redirect |
+| `/motor-media/files` | `files.read` | Grid or gallery view with filters and bulk actions |
+| `/motor-media/files/create` | `files.write` | Multi-file upload with category selection |
+| `/motor-media/files/[id]/edit` | `files.write` | Edit metadata, replace file, view usage |
+
+## Dependencies
+
+This layer consumes **motor-ui-core** for:
+- Composables: `useEntityForm`, `useGridFetch`, `useGridState`, `columnsFromMeta`, `createdAtColumn`, `useClientFilter`, `useCategoryFilter`, `useNotify`, `useShortcutRegistry`, `fileToDataUrl`
+- Components: `GridBase`, `GridPage`, `GridToolbar`, `GridBulkActions`, `FormBase`, `FormPage`, `EntityUsageModal`, `MediaLightbox`, `FormInputsCategoryTreeInput`
+- Types: `FormInputProps`, `GridParams`, `PaginatedResponse`, `FilterDef`, `BulkActionDef`, `RowActionDef`
+- Form configs: `fileCreateFormConfig`, `fileEditFormConfig`, `fileSelectOptionConfigs` from `motor-ui-core/app/types/config/file`
+
+No custom composables or stores -- all state is managed via motor-ui-core composables and component-local refs.
+
+## i18n
+
+2 translation modules per locale under `motor-media`:
+
+| Module | Keys |
+|--------|------|
+| `global` | Navigation and section labels |
+| `files` | File-specific labels (title, subtitle, add, upload progress, field labels, etc.) |
+
+Reference: `t('motor-media.files.<key>')`
+
+## 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
+
+1 Playwright E2E spec verifying that the gallery view loads correctly on `/motor-media/files`.
+
+```bash
+pnpm test:e2e
+```

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

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import type { FormInputProps } from '@motor-cms/ui-core/app/types/form'
+
+export interface PendingFile {
+  file: File
+  description: string
+  alt_text: string
+}
+
+interface Props extends FormInputProps {
+  accept?: string
+  defaults?: { description: string, alt_text: string }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  accept: 'image/*',
+  defaults: () => ({ description: '', alt_text: '' })
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [files: PendingFile[]]
+}>()
+
+const { t } = useI18n()
+
+const pendingFiles = ref<PendingFile[]>([])
+const isDragging = ref(false)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+// Dirty tracking: keyed by index-stable ID per entry
+let nextId = 0
+const entryIds = ref<number[]>([])
+const dirtyFields = new Map<number, Set<string>>()
+
+const previews = computed(() =>
+  pendingFiles.value.map((entry, index) => ({
+    entry,
+    id: entryIds.value[index]!,
+    url: URL.createObjectURL(entry.file),
+    sizeHuman: formatFileSize(entry.file.size)
+  }))
+)
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function addFiles(newFiles: FileList | File[]) {
+  const fileArray = Array.from(newFiles)
+  const desc = props.defaults?.description ?? ''
+  const alt = props.defaults?.alt_text ?? ''
+  for (const file of fileArray) {
+    const id = nextId++
+    entryIds.value.push(id)
+    pendingFiles.value.push({
+      file,
+      description: desc,
+      alt_text: alt
+    })
+  }
+  pendingFiles.value = [...pendingFiles.value]
+  entryIds.value = [...entryIds.value]
+  emit('update:modelValue', pendingFiles.value)
+}
+
+function removeFile(index: number) {
+  URL.revokeObjectURL(previews.value[index]!.url)
+  const removedId = entryIds.value[index]!
+  dirtyFields.delete(removedId)
+  pendingFiles.value.splice(index, 1)
+  entryIds.value.splice(index, 1)
+  pendingFiles.value = [...pendingFiles.value]
+  entryIds.value = [...entryIds.value]
+  emit('update:modelValue', pendingFiles.value)
+}
+
+function updateField(index: number, field: 'description' | 'alt_text', value: string) {
+  const id = entryIds.value[index]!
+  if (!dirtyFields.has(id)) {
+    dirtyFields.set(id, new Set())
+  }
+  dirtyFields.get(id)!.add(field)
+  pendingFiles.value[index]![field] = value
+  pendingFiles.value = [...pendingFiles.value]
+  emit('update:modelValue', pendingFiles.value)
+}
+
+// Propagate defaults to non-dirty entries
+watch(
+  [() => props.defaults?.description, () => props.defaults?.alt_text],
+  ([newDesc, newAlt]) => {
+    if (pendingFiles.value.length === 0) return
+    let changed = false
+    for (let i = 0; i < pendingFiles.value.length; i++) {
+      const id = entryIds.value[i]!
+      const dirty = dirtyFields.get(id)
+      if (!dirty?.has('description') && pendingFiles.value[i]!.description !== (newDesc ?? '')) {
+        pendingFiles.value[i]!.description = newDesc ?? ''
+        changed = true
+      }
+      if (!dirty?.has('alt_text') && pendingFiles.value[i]!.alt_text !== (newAlt ?? '')) {
+        pendingFiles.value[i]!.alt_text = newAlt ?? ''
+        changed = true
+      }
+    }
+    if (changed) {
+      pendingFiles.value = [...pendingFiles.value]
+      emit('update:modelValue', pendingFiles.value)
+    }
+  }
+)
+
+function onDrop(event: DragEvent) {
+  isDragging.value = false
+  if (event.dataTransfer?.files) {
+    addFiles(event.dataTransfer.files)
+  }
+}
+
+function onDragOver(event: DragEvent) {
+  event.preventDefault()
+  isDragging.value = true
+}
+
+function onDragLeave() {
+  isDragging.value = false
+}
+
+function openFilePicker() {
+  fileInputRef.value?.click()
+}
+
+function onFileInputChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (input.files) {
+    addFiles(input.files)
+    input.value = ''
+  }
+}
+
+onBeforeUnmount(() => {
+  previews.value.forEach(p => URL.revokeObjectURL(p.url))
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Drop zone -->
+    <div
+      class="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors cursor-pointer"
+      :class="isDragging ? 'border-primary bg-primary/5' : 'border-muted hover:border-primary/50'"
+      @drop.prevent="onDrop"
+      @dragover="onDragOver"
+      @dragleave="onDragLeave"
+      @click="openFilePicker"
+    >
+      <UIcon
+        name="i-lucide-upload-cloud"
+        class="size-10 text-muted"
+      />
+      <p class="text-sm text-muted">
+        {{ t('motor-media.files.drop_files') }}
+      </p>
+      <UButton
+        variant="outline"
+        size="sm"
+        icon="i-lucide-folder-open"
+        @click.stop="openFilePicker"
+      >
+        {{ t('motor-media.files.browse') }}
+      </UButton>
+      <input
+        ref="fileInputRef"
+        type="file"
+        :accept="accept"
+        multiple
+        class="hidden"
+        @change="onFileInputChange"
+      >
+    </div>
+
+    <!-- Pending files list -->
+    <div
+      v-if="pendingFiles.length > 0"
+      class="space-y-2"
+    >
+      <p class="text-sm font-medium">
+        {{ t('motor-media.files.pending_files') }} ({{ pendingFiles.length }})
+      </p>
+      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <div
+          v-for="(preview, index) in previews"
+          :key="preview.id"
+          class="rounded-lg border p-3 space-y-3"
+        >
+          <div class="flex items-center gap-3">
+            <img
+              v-if="preview.entry.file.type.startsWith('image/')"
+              :src="preview.url"
+              :alt="preview.entry.file.name"
+              class="size-12 rounded object-cover shrink-0"
+            >
+            <UIcon
+              v-else
+              name="i-lucide-file"
+              class="size-12 text-muted shrink-0"
+            />
+            <div class="min-w-0 flex-1">
+              <p class="truncate text-sm font-medium">
+                {{ preview.entry.file.name }}
+              </p>
+              <p class="text-xs text-muted">
+                {{ preview.entry.file.type || t('motor-core.global.unknown') }} &middot; {{ preview.sizeHuman }}
+              </p>
+            </div>
+            <UButton
+              icon="i-lucide-x"
+              variant="ghost"
+              size="xs"
+              color="error"
+              @click="removeFile(index)"
+            />
+          </div>
+          <UFormField :label="t('motor-media.files.description')">
+            <UInput
+              :model-value="preview.entry.description"
+              size="sm"
+              class="w-full"
+              @update:model-value="updateField(index, 'description', $event as string)"
+            />
+          </UFormField>
+          <UFormField :label="t('motor-media.files.alt_text')">
+            <UInput
+              :model-value="preview.entry.alt_text"
+              size="sm"
+              class="w-full"
+              @update:model-value="updateField(index, 'alt_text', $event as string)"
+            />
+          </UFormField>
+        </div>
+      </div>
+    </div>
+    <p
+      v-else
+      class="text-sm text-muted"
+    >
+      {{ t('motor-media.files.no_files_selected') }}
+    </p>
+  </div>
+</template>

package/app/components/grid/renderers/ImageRenderer.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { RendererProps, MediaValue } from '@motor-cms/ui-core/app/types/grid'
+
+const props = defineProps<RendererProps<MediaValue | null>>()
+
+const toast = useToast()
+const { t } = useI18n()
+const lightboxOpen = ref(false)
+
+const runtimeConfig = useRuntimeConfig()
+const backendBaseUrl = runtimeConfig.public.backendBaseUrl as string
+
+const downloadUrl = computed(() => {
+  const fileId = props.row?.id
+  if (!fileId) return undefined
+  return `${backendBaseUrl}/download/${fileId}`
+})
+
+const thumbnailUrl = computed(() => {
+  // Prefer API url (actual storage/CDN URL) when available
+  if (props.value?.url) return props.value.url
+  if (!props.row?.id) return undefined
+  return `${backendBaseUrl}/download/${props.row.id}`
+})
+
+const isImage = computed(() => {
+  return props.value?.mime_type?.startsWith('image/')
+})
+
+const fileExtension = computed(() => {
+  if (!props.value?.file_name) return ''
+  return props.value.file_name.split('.').pop()?.toUpperCase() ?? ''
+})
+
+const mimeIcon = computed(() => {
+  const mime = props.value?.mime_type ?? ''
+  if (mime.startsWith('video/')) return 'i-lucide-film'
+  if (mime.startsWith('audio/')) return 'i-lucide-music'
+  if (mime.includes('pdf')) return 'i-lucide-file-text'
+  if (mime.includes('zip') || mime.includes('archive') || mime.includes('compressed')) return 'i-lucide-archive'
+  if (mime.includes('spreadsheet') || mime.includes('excel') || mime.includes('csv')) return 'i-lucide-table'
+  if (mime.includes('document') || mime.includes('word') || mime.includes('text')) return 'i-lucide-file-text'
+  return 'i-lucide-file'
+})
+
+async function copyUrl() {
+  const url = downloadUrl.value
+  if (!url) return
+  try {
+    await navigator.clipboard.writeText(url)
+  } catch {
+    const textarea = document.createElement('textarea')
+    textarea.value = url
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+  }
+  toast.add({
+    title: t('motor-media.files.url_copied'),
+    icon: 'i-lucide-check',
+    color: 'success'
+  })
+}
+
+async function forceDownload() {
+  const url = downloadUrl.value
+  if (!url) return
+  try {
+    const response = await fetch(url, { credentials: 'include' })
+    const blob = await response.blob()
+    const blobUrl = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = blobUrl
+    a.download = props.value?.file_name ?? 'download'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(blobUrl)
+  } catch {
+    const a = document.createElement('a')
+    a.href = url
+    a.download = props.value?.file_name ?? 'download'
+    a.target = '_blank'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="value"
+    class="py-2"
+  >
+    <!-- Thumbnail container: fixed size, hover to enlarge -->
+    <div class="group/thumb relative size-28 rounded-lg overflow-hidden ring-1 ring-[var(--ui-border)] bg-[var(--ui-bg-elevated)] shadow-sm hover:shadow-lg hover:ring-[var(--ui-border-accented)] transition-all duration-300 cursor-pointer">
+      <!-- Image thumbnail -->
+      <img
+        v-if="isImage && thumbnailUrl"
+        :src="thumbnailUrl"
+        :alt="value.file_name ?? ''"
+        class="size-full object-cover transition-transform duration-300 group-hover/thumb:scale-110"
+        @click.stop="lightboxOpen = true"
+      >
+      <!-- Non-image file placeholder -->
+      <div
+        v-else
+        class="size-full flex flex-col items-center justify-center gap-1 bg-[var(--ui-bg-muted)]"
+      >
+        <UIcon
+          :name="mimeIcon"
+          class="size-7 text-[var(--ui-text-dimmed)]"
+        />
+        <span
+          v-if="fileExtension"
+          class="text-[9px] font-bold tracking-wider text-[var(--ui-text-dimmed)] uppercase"
+        >
+          {{ fileExtension }}
+        </span>
+      </div>
+
+      <!-- Hover overlay with actions -->
+      <div class="absolute inset-0 flex items-center justify-center gap-2 bg-black/50 opacity-0 group-hover/thumb:opacity-100 transition-opacity duration-200">
+        <button
+          v-if="isImage"
+          class="flex items-center justify-center size-9 rounded-full bg-white/20 text-white backdrop-blur-sm hover:bg-white/40 transition-colors"
+          :title="t('motor-media.files.preview')"
+          @click.stop="lightboxOpen = true"
+        >
+          <UIcon
+            name="i-lucide-expand"
+            class="size-4"
+          />
+        </button>
+        <button
+          class="flex items-center justify-center size-9 rounded-full bg-white/20 text-white backdrop-blur-sm hover:bg-white/40 transition-colors"
+          :title="t('motor-core.global.download')"
+          @click.stop="forceDownload"
+        >
+          <UIcon
+            name="i-lucide-download"
+            class="size-4"
+          />
+        </button>
+        <button
+          class="flex items-center justify-center size-9 rounded-full bg-white/20 text-white backdrop-blur-sm hover:bg-white/40 transition-colors"
+          :title="t('motor-media.files.copy_url')"
+          @click.stop="copyUrl"
+        >
+          <UIcon
+            name="i-lucide-link"
+            class="size-4"
+          />
+        </button>
+      </div>
+    </div>
+
+    <MediaLightbox
+      v-if="isImage"
+      v-model:open="lightboxOpen"
+      :src="downloadUrl ?? ''"
+      :alt="value.file_name"
+      :file-name="value.file_name"
+      :download-url="downloadUrl"
+    />
+  </div>
+  <span
+    v-else
+    class="text-[var(--ui-text-muted)]"
+  >-</span>
+</template>