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

package/app/pages/motor-media/files/CLAUDE.md

@@ -0,0 +1,7 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+*No recent activity*
+</claude-mem-context>

package/app/pages/motor-media/files/[id]/CLAUDE.md

@@ -0,0 +1,24 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 18, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #27256 | 4:59 PM | 🔄 | Major codebase cleanup and component consolidation | ~433 |
+| #26878 | 12:18 PM | 🟣 | Motor-Media Files Module Implementation Complete | ~429 |
+
+### Feb 27, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #30755 | 1:37 PM | 🔵 | Comprehensive Media Management System in Motor Admin Frontend | ~594 |
+
+### Mar 7, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #34014 | 10:53 AM | 🔴 | Fixed permission naming in motor-media pages to align with backend API | ~289 |
+</claude-mem-context>

package/app/pages/motor-media/files/[id]/edit.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { fileFormMeta } from '../../../../types/generated/form-meta'
+import { fileEditFormConfig, fileSelectOptionConfigs } from '@motor-cms/ui-core/app/types/config/file'
+
+definePageMeta({ layout: 'default', permission: 'files.write' })
+
+const route = useRoute()
+const { t } = useI18n()
+const client = useSanctumClient()
+const { success, error: notifyError } = useNotify()
+const router = useRouter()
+
+const { fields, schema, groups, state, loading, fetching, fetchError, formRef, selectOptions, selectOptionsLoading, deleteRecord, deleting } = await useEntityForm({
+  apiEndpoint: '/api/v2/files',
+  routePrefix: '/motor-media/files',
+  translationPrefix: 'motor-media.files',
+  formMeta: fileFormMeta,
+  formConfig: fileEditFormConfig,
+  mode: 'edit',
+  id: route.params.id as string,
+  selectOptionConfigs: fileSelectOptionConfigs
+})
+
+const fileId = route.params.id as string
+const replacementFile = ref<File | null>(null)
+
+const usageModalOpen = ref(false)
+const usageEndpoint = computed(() => `/api/v2/files/${fileId}/usage`)
+
+// Reuse the record already fetched by useEntityForm (no duplicate request)
+const { data: fileRecord } = useNuxtData<{ data: Record<string, unknown> }>(
+  `entity-form-/api/v2/files-${fileId}`
+)
+
+const currentFile = computed(() => {
+  const file = fileRecord.value?.data?.file as { url?: string, file_name?: string, mime_type?: string } | null
+  return file ?? null
+})
+
+const selectedCategories = ref<number[]>([])
+
+watch(fileRecord, (res) => {
+  if (res?.data) {
+    const cats = res.data.categories as Array<{ id: number }> | null
+    if (cats) {
+      selectedCategories.value = cats.map(c => c.id)
+    }
+  }
+}, { immediate: true })
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (input.files?.[0]) {
+    replacementFile.value = input.files[0]
+  }
+}
+
+async function submitFile(eventData: Record<string, unknown>): Promise<void> {
+  const body: Record<string, unknown> = { ...eventData, categories: selectedCategories.value }
+  if (replacementFile.value) {
+    body.file = await fileToDataUrl(replacementFile.value)
+  }
+  await client(`/api/v2/files/${fileId}`, { method: 'PATCH', body })
+  success(t('motor-media.files.edit_title'), t('motor-media.files.updated_success'))
+}
+
+function handleSubmitError(err: unknown) {
+  const fetchErr = err as { response?: { status?: number, _data?: { message?: string, errors?: Record<string, string[]> } } }
+  if (fetchErr.response?.status === 422 && fetchErr.response._data?.errors) {
+    const serverErrors = fetchErr.response._data.errors
+    const formErrors = Object.entries(serverErrors).map(([path, messages]) => ({
+      path,
+      message: messages[0] ?? ''
+    }))
+    formRef.value?.setErrors(formErrors)
+
+    const count = formErrors.length
+    const summary = count === 1
+      ? formErrors[0]!.message
+      : t('motor-core.global.validation_errors', { count })
+    notifyError(t('motor-core.global.validation_failed'), summary)
+
+    nextTick(() => {
+      const errorEl = document.querySelector('[class*="error"]')
+      errorEl?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    })
+  } else {
+    const message = err instanceof Error ? err.message : 'Failed to update file'
+    notifyError(t('motor-media.files.edit_title'), message)
+  }
+}
+
+async function onSubmit(event: { data: Record<string, unknown> }) {
+  loading.value = true
+  try {
+    await submitFile(event.data)
+    router.push('/motor-media/files')
+  } catch (err: unknown) {
+    handleSubmitError(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onSaveAndNew(event: { data: Record<string, unknown> }) {
+  loading.value = true
+  try {
+    await submitFile(event.data)
+    router.push('/motor-media/files/create')
+  } catch (err: unknown) {
+    handleSubmitError(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onSaveAndContinue(event: { data: Record<string, unknown> }) {
+  loading.value = true
+  try {
+    await submitFile(event.data)
+    nextTick(() => formRef.value?.captureSnapshot())
+  } catch (err: unknown) {
+    handleSubmitError(err)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <FormPage
+      :title="t('motor-media.files.edit_title')"
+      back-route="/motor-media/files"
+      :loading="fetching"
+      :error="fetchError"
+    >
+      <FormBase
+        ref="formRef"
+        v-model:state="state"
+        :fields="fields"
+        :schema="schema"
+        :groups="groups"
+        :select-options="selectOptions"
+        :select-options-loading="selectOptionsLoading"
+        :loading="loading"
+        :delete-record="deleteRecord"
+        :deleting="deleting"
+        cancel-route="/motor-media/files"
+        show-save-and-continue
+        show-save-and-new
+        @submit="onSubmit"
+        @save-and-continue="onSaveAndContinue"
+        @save-and-new="onSaveAndNew"
+      >
+        <template #after-fields>
+          <UPageCard :title="t('motor-media.files.group_categories')">
+            <FormInputsCategoryTreeInput
+              v-model="selectedCategories"
+              scope="media"
+            />
+          </UPageCard>
+
+          <UPageCard :title="t('motor-media.files.usage_title')">
+            <UButton
+              :label="t('motor-media.files.usage_title')"
+              icon="i-lucide-network"
+              variant="outline"
+              @click="usageModalOpen = true"
+            />
+          </UPageCard>
+
+          <UPageCard :title="t('motor-media.files.current_file')">
+            <div class="space-y-4">
+              <!-- Current file preview -->
+              <div
+                v-if="currentFile?.url"
+                class="flex items-center gap-4"
+              >
+                <img
+                  v-if="currentFile.mime_type?.startsWith('image/')"
+                  :src="currentFile.url"
+                  :alt="currentFile.file_name ?? ''"
+                  class="max-h-40 rounded object-contain"
+                >
+                <div
+                  v-else
+                  class="flex items-center gap-2"
+                >
+                  <UIcon
+                    name="i-lucide-file"
+                    class="size-8 text-muted"
+                  />
+                  <span class="text-sm">{{ currentFile.file_name }}</span>
+                </div>
+                <UButton
+                  icon="i-lucide-download"
+                  variant="outline"
+                  size="sm"
+                  :to="currentFile.url"
+                  target="_blank"
+                />
+              </div>
+
+              <!-- Replacement file input -->
+              <div class="space-y-2">
+                <UFormField
+                  name="replacement_file"
+                  :label="t('motor-media.files.replace_file')"
+                >
+                  <UInput
+                    type="file"
+                    class="w-full"
+                    @change="onFileChange"
+                  />
+                </UFormField>
+                <p
+                  v-if="replacementFile"
+                  class="text-sm text-muted"
+                >
+                  {{ replacementFile.name }} ({{ (replacementFile.size / 1024).toFixed(1) }} KB)
+                </p>
+              </div>
+            </div>
+          </UPageCard>
+        </template>
+      </FormBase>
+    </FormPage>
+
+    <EntityUsageModal
+      v-model:open="usageModalOpen"
+      :endpoint="usageEndpoint"
+      :title="t('motor-media.files.usage_title')"
+    />
+  </div>
+</template>

package/app/pages/motor-media/files/create.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { PendingFile } from '../../../components/form/inputs/MultiFileUpload.vue'
+import { fileFormMeta } from '../../../types/generated/form-meta'
+import { fileCreateFormConfig, fileSelectOptionConfigs } from '@motor-cms/ui-core/app/types/config/file'
+
+definePageMeta({ layout: 'default', permission: 'files.write' })
+
+const { t } = useI18n()
+const router = useRouter()
+const client = useSanctumClient()
+const { success, error: notifyError, warning } = useNotify()
+
+const formRef = ref<{ captureSnapshot: () => void, isDirty: boolean, setErrors: (errors: Array<{ path: string, message: string }>) => void } | null>(null)
+
+const { fields, schema, groups, state, selectOptions, selectOptionsLoading } = await useEntityForm({
+  apiEndpoint: '/api/v2/files',
+  routePrefix: '/motor-media/files',
+  translationPrefix: 'motor-media.files',
+  formMeta: fileFormMeta,
+  formConfig: fileCreateFormConfig,
+  mode: 'create',
+  selectOptionConfigs: fileSelectOptionConfigs
+})
+
+const selectedCategories = ref<number[]>([])
+
+const pendingFiles = ref<PendingFile[]>([])
+const uploading = ref(false)
+const uploadProgress = ref('')
+
+const defaults = computed(() => ({
+  description: (state.description as string) || '',
+  alt_text: (state.alt_text as string) || ''
+}))
+
+const submitted = ref(false)
+const categoriesError = computed(() =>
+  submitted.value && selectedCategories.value.length === 0
+    ? t('motor-media.files.categories_required')
+    : undefined
+)
+const filesError = computed(() =>
+  submitted.value && pendingFiles.value.length === 0
+    ? t('motor-media.files.files_required')
+    : undefined
+)
+
+// Clear errors once requirements are met
+watch(selectedCategories, () => {
+  if (selectedCategories.value.length > 0 && pendingFiles.value.length > 0) submitted.value = false
+})
+watch(pendingFiles, () => {
+  if (pendingFiles.value.length > 0 && selectedCategories.value.length > 0) submitted.value = false
+})
+
+function scrollToFirstError() {
+  nextTick(() => {
+    const errorEl = document.querySelector('.text-error')
+    if (errorEl) {
+      errorEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+  })
+}
+
+function handleServerError(err: unknown) {
+  const fetchErr = err as { response?: { status?: number, _data?: { message?: string, errors?: Record<string, string[]> } } }
+  if (fetchErr.response?.status === 422 && fetchErr.response._data?.errors) {
+    const serverErrors = fetchErr.response._data.errors
+    const formErrors = Object.entries(serverErrors).map(([path, messages]) => ({
+      path,
+      message: messages[0] ?? ''
+    }))
+    formRef.value?.setErrors(formErrors)
+
+    const count = formErrors.length
+    const summary = count === 1
+      ? formErrors[0]!.message
+      : t('motor-core.global.validation_errors', { count })
+    notifyError(t('motor-core.global.validation_failed'), summary)
+    scrollToFirstError()
+    return true
+  }
+  return false
+}
+
+async function onSubmit(event: { data: Record<string, unknown> }) {
+  submitted.value = true
+  if (selectedCategories.value.length === 0 || pendingFiles.value.length === 0) {
+    const missingFields: string[] = []
+    if (selectedCategories.value.length === 0) missingFields.push(t('motor-media.files.group_categories'))
+    if (pendingFiles.value.length === 0) missingFields.push(t('motor-media.files.pending_files'))
+    warning(t('motor-core.global.validation_failed'), missingFields.join(', '))
+    scrollToFirstError()
+    return
+  }
+
+  uploading.value = true
+  const total = pendingFiles.value.length
+  const errors: string[] = []
+
+  try {
+    for (let i = 0; i < total; i++) {
+      const pending = pendingFiles.value[i]!
+      uploadProgress.value = t('motor-media.files.upload_progress', { current: i + 1, total })
+
+      const fileData = await fileToDataUrl(pending.file)
+      const body = {
+        ...event.data,
+        description: pending.description,
+        alt_text: pending.alt_text,
+        categories: selectedCategories.value,
+        files: [fileData]
+      }
+
+      try {
+        await client('/api/v2/files', {
+          method: 'POST',
+          body
+        })
+      } catch (err: unknown) {
+        if (!handleServerError(err)) {
+          const message = err instanceof Error ? err.message : `Failed to upload ${pending.file.name}`
+          errors.push(`${pending.file.name}: ${message}`)
+        }
+      }
+    }
+
+    if (errors.length === 0) {
+      success(t('motor-media.files.create_title'), t('motor-media.files.created_success'))
+      router.push('/motor-media/files')
+    } else if (errors.length < total) {
+      const uploaded = total - errors.length
+      success(t('motor-media.files.create_title'), `${uploaded}/${total} files uploaded`)
+      notifyError(t('motor-media.files.create_title'), errors.join('\n'))
+      router.push('/motor-media/files')
+    } else {
+      notifyError(t('motor-media.files.create_title'), errors.join('\n'))
+    }
+  } finally {
+    uploading.value = false
+    uploadProgress.value = ''
+  }
+}
+</script>
+
+<template>
+  <FormPage
+    :title="t('motor-media.files.create_title')"
+    back-route="/motor-media/files"
+  >
+    <FormBase
+      ref="formRef"
+      v-model:state="state"
+      :fields="fields"
+      :schema="schema"
+      :groups="groups"
+      :select-options="selectOptions"
+      :select-options-loading="selectOptionsLoading"
+      :loading="uploading"
+      cancel-route="/motor-media/files"
+      @submit="onSubmit"
+    >
+      <template #after-fields>
+        <UPageCard :title="t('motor-media.files.group_categories')">
+          <FormInputsCategoryTreeInput
+            v-model="selectedCategories"
+            scope="media"
+          />
+          <p
+            v-if="categoriesError"
+            class="mt-2 text-sm text-error"
+          >
+            {{ categoriesError }}
+          </p>
+        </UPageCard>
+
+        <UPageCard :title="t('motor-media.files.pending_files')">
+          <p
+            v-if="uploadProgress"
+            class="mb-3 text-sm font-medium text-primary"
+          >
+            {{ uploadProgress }}
+          </p>
+          <FormInputsMultiFileUpload
+            :field="{ key: 'files', label: '', input: 'multi-file-upload', required: true }"
+            :model-value="(pendingFiles as any)"
+            :defaults="defaults"
+            accept="*/*"
+            @update:model-value="pendingFiles = $event"
+          />
+          <p
+            v-if="filesError"
+            class="mt-2 text-sm text-error"
+          >
+            {{ filesError }}
+          </p>
+        </UPageCard>
+      </template>
+    </FormBase>
+  </FormPage>
+</template>

package/app/pages/motor-media/files/index.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { components } from '@motor-cms/ui-core/app/types/generated/api'
+import type { BulkActionDef, RowActionDef } from '@motor-cms/ui-core/app/types/grid'
+import { fileMeta } from '../../../types/generated/grid-meta'
+import { fileGridConfig } from '@motor-cms/ui-core/app/types/config/file'
+
+type File = components['schemas']['FileResource']
+
+definePageMeta({ permission: 'files.read' })
+
+const client = useSanctumClient()
+const { t } = useI18n()
+
+const usageModalOpen = ref(false)
+const usageEndpoint = ref('')
+
+function openUsageModal(fileId: number) {
+  usageEndpoint.value = `/api/v2/files/${fileId}/usage`
+  usageModalOpen.value = true
+}
+
+// View mode toggle (persisted in cookie for SSR safety)
+const viewMode = useCookie<'gallery' | 'table'>('media-view-mode', { default: () => 'gallery' })
+
+// Table columns (only needed for table view)
+const columns = columnsFromMeta<File>(fileMeta, t, fileGridConfig)
+
+columns.unshift({
+  key: 'file',
+  label: t('motor-media.files.file'),
+  renderer: 'image',
+  width: 'w-36'
+})
+
+const descIdx = columns.findIndex(c => c.key === 'description')
+columns.splice(descIdx + 1, 0, {
+  key: 'file.file_name',
+  label: t('motor-media.files.file_name')
+})
+
+columns.push({
+  key: 'file.mime_type',
+  label: t('motor-media.files.mime_type')
+})
+
+columns.push(createdAtColumn(t, { key: 'file.created_at', sortKey: 'created_at' }))
+
+const rowActions: RowActionDef<File>[] = [
+  {
+    key: 'usage',
+    label: t('motor-media.files.usage_title'),
+    icon: 'i-lucide-link',
+    silent: true,
+    handler: (row: File) => {
+      openUsageModal(row.id as number)
+    }
+  }
+]
+
+const filters = [useClientFilter(), useCategoryFilter('media')]
+
+const bulkActions: BulkActionDef[] = [
+  {
+    key: 'delete',
+    label: t('motor-core.grid.delete_selected'),
+    icon: 'i-lucide-trash-2',
+    color: 'error',
+    permission: 'files.delete',
+    confirm: count => t('motor-core.grid.confirm_delete', { count }),
+    handler: async (ids) => {
+      await Promise.all(
+        ids.map(id => client(`/api/v2/files/${id}`, { method: 'DELETE' }))
+      )
+    }
+  }
+]
+
+const fetchFiles = useGridFetch<File>('/api/v2/files')
+</script>
+
+<template>
+  <div>
+    <GridPage
+      :title="t('motor-media.files.title')"
+      :subtitle="t('motor-media.files.subtitle')"
+      add-route="/motor-media/files/create"
+      :add-label="t('motor-media.files.add')"
+      write-permission="files.write"
+    >
+      <template #actions>
+        <div class="inline-flex rounded-lg ring-1 ring-[var(--ui-border)] overflow-hidden">
+          <button
+            class="flex items-center justify-center size-9 transition-colors"
+            :class="viewMode === 'gallery'
+              ? 'bg-[var(--ui-primary)] text-white'
+              : 'bg-[var(--ui-bg)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)]'"
+            :title="t('motor-media.files.view_gallery')"
+            @click="viewMode = 'gallery'"
+          >
+            <UIcon
+              name="i-lucide-layout-grid"
+              class="size-4"
+            />
+          </button>
+          <button
+            class="flex items-center justify-center size-9 transition-colors border-l border-[var(--ui-border)]"
+            :class="viewMode === 'table'
+              ? 'bg-[var(--ui-primary)] text-white'
+              : 'bg-[var(--ui-bg)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)]'"
+            :title="t('motor-media.files.view_table')"
+            @click="viewMode = 'table'"
+          >
+            <UIcon
+              name="i-lucide-table-2"
+              class="size-4"
+            />
+          </button>
+        </div>
+      </template>
+
+      <!-- Gallery view -->
+      <MediaGallery
+        v-if="viewMode === 'gallery'"
+        id="files-gallery"
+        :fetch="fetchFiles"
+        :filters="filters"
+        :bulk-actions="bulkActions"
+        :per-page="25"
+        @show-usage="openUsageModal"
+      >
+        <template #empty-action>
+          <UButton
+            to="/motor-media/files/create"
+            :label="t('motor-media.files.add')"
+            icon="i-lucide-plus"
+            size="sm"
+          />
+        </template>
+      </MediaGallery>
+
+      <!-- Table view -->
+      <GridBase
+        v-else
+        id="files-grid"
+        :fetch="fetchFiles"
+        :columns="columns"
+        :filters="filters"
+        :bulk-actions="bulkActions"
+        base-path="/motor-media/files"
+        name-key="description"
+        :row-actions="rowActions"
+        write-permission="files.write"
+        delete-permission="files.delete"
+        :row-click-to="(row: any) => `/motor-media/files/${row.id}/edit`"
+      />
+    </GridPage>
+
+    <EntityUsageModal
+      v-model:open="usageModalOpen"
+      :endpoint="usageEndpoint"
+      :title="t('motor-media.files.usage_title')"
+    />
+  </div>
+</template>

package/app/pages/motor-media/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({ permission: 'files.read' })
+</script>
+
+<template>
+  <SectionLanding
+    section-prefix="motor-media"
+    title-key="motor-media.global.media"
+    subtitle-key="motor-media.global.section_subtitle"
+  />
+</template>

package/app/plugins/grid-renderers.ts

@@ -0,0 +1,10 @@
+import { registerGridRenderers } from '#imports'
+import ImageRenderer from '../components/grid/renderers/ImageRenderer.vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('app:created', () => {
+    registerGridRenderers({
+      'image': ImageRenderer,
+    })
+  })
+})

package/app/types/generated/form-meta.ts

@@ -0,0 +1,38 @@
+/**
+ * Form field metadata — auto-generated from OpenAPI spec.
+ * Do not edit manually. Run `npm run sync:api` to regenerate.
+ */
+
+export const fileFormMeta = {
+  post: {
+    schemaName: 'FilePostRequest',
+    fields: {
+      client_id: { input: 'select' },
+      description: { input: 'textarea', required: true },
+      author: { input: 'text', required: true },
+      source: { input: 'text', required: true },
+      alt_text: { input: 'text', required: true },
+      is_global: { input: 'toggle' },
+      is_excluded_from_search_index: { input: 'toggle' },
+      file: { input: 'text' },
+      tags: { input: 'text' },
+      categories: { input: 'multi-select', required: true },
+      files: { input: 'text', required: true }
+    }
+  },
+  patch: {
+    schemaName: 'FilePatchRequest',
+    fields: {
+      client_id: { input: 'select' },
+      description: { input: 'textarea', required: true },
+      author: { input: 'text', required: true },
+      source: { input: 'text', required: true },
+      alt_text: { input: 'text', required: true },
+      is_global: { input: 'toggle' },
+      is_excluded_from_search_index: { input: 'toggle' },
+      tags: { input: 'text' },
+      categories: { input: 'multi-select', required: true },
+      file: { input: 'text' }
+    }
+  }
+} as const