@motor-cms/ui-media 3.0.2 → 4.0.0

package/app/components/media/Gallery.vue

@@ -8,6 +8,12 @@ import type {
 } from '@motor-cms/ui-core/app/types/grid'
 import type { FileResource } from '../../types/media'
 
+export interface GallerySortOption {
+  label: string
+  field: string
+  direction: 'asc' | 'desc'
+}
+
 const props = withDefaults(defineProps<{
   id: string
   fetch: (params: GridParams) => Promise<PaginatedResponse<FileResource>>
@@ -15,9 +21,11 @@ const props = withDefaults(defineProps<{
   bulkActions?: BulkActionDef[]
   searchable?: boolean
   perPage?: number
+  sortOptions?: GallerySortOption[]
 }>(), {
   searchable: true,
-  perPage: 25
+  perPage: 25,
+  sortOptions: () => []
 })
 
 const emit = defineEmits<{
@@ -36,6 +44,26 @@ if (props.filters) {
   gridState.initFilters(props.filters.map(f => f.key))
 }
 
+// Sort dropdown — option key is `${field}:${direction}`
+function sortKey(opt: GallerySortOption): string {
+  return `${opt.field}:${opt.direction}`
+}
+const sortSelectItems = computed(() =>
+  props.sortOptions.map(opt => ({ label: opt.label, value: sortKey(opt) }))
+)
+const activeSortKey = computed(() => {
+  const field = gridState.state.sort
+  if (!field) {
+    // Pick the first option as the visible default so the dropdown isn't empty
+    return props.sortOptions[0] ? sortKey(props.sortOptions[0]) : ''
+  }
+  return `${field}:${gridState.state.direction}`
+})
+function onSortChange(value: string): void {
+  const opt = props.sortOptions.find(o => sortKey(o) === value)
+  if (opt) gridState.setSort(opt.field, opt.direction)
+}
+
 // Accumulated items + internal pagination
 const items = ref<FileResource[]>([])
 const currentPage = ref(0)
@@ -189,6 +217,16 @@ useIntersectionObserver(
       @reset-filters="gridState.resetFilters()"
     >
       <template #toolbar-extra>
+        <USelect
+          v-if="sortOptions.length > 0"
+          :model-value="activeSortKey"
+          :items="sortSelectItems"
+          value-key="value"
+          label-key="label"
+          :aria-label="t('motor-core.grid.sort')"
+          class="w-44"
+          @update:model-value="onSortChange"
+        />
         <span
           v-if="totalItems > 0"
           class="text-sm text-muted whitespace-nowrap"

package/app/lang/de/motor-media/files.json

@@ -3,7 +3,7 @@
   "file": "Datei",
   "title": "Dateien",
   "subtitle": "Dateien verwalten",
-  "add": "Datei hinzufuegen",
+  "add": "Datei hinzufügen",
   "create_title": "Dateien hochladen",
   "edit_title": "Datei bearbeiten",
   "view_title": "Datei ansehen",
@@ -19,22 +19,22 @@
   "categories": "Kategorien",
   "client_id": "Mandant",
   "is_global": "Global",
-  "is_excluded_from_search_index": "Vom Suchindex ausschliessen",
+  "is_excluded_from_search_index": "Vom Suchindex ausschließen",
   "group_basic": "Allgemein",
   "group_categories": "Kategorien",
   "group_settings": "Einstellungen",
-  "drop_files": "Dateien hierher ziehen oder klicken zum Auswaehlen",
+  "drop_files": "Dateien hierher ziehen oder klicken zum Auswählen",
   "browse": "Durchsuchen",
-  "pending_files": "Ausgewaehlte Dateien",
-  "no_files_selected": "Keine Dateien ausgewaehlt",
+  "pending_files": "Ausgewählte Dateien",
+  "no_files_selected": "Keine Dateien ausgewählt",
   "current_file": "Aktuelle Datei",
   "replace_file": "Datei ersetzen",
   "url_copied": "URL in die Zwischenablage kopiert",
   "copy_url": "URL kopieren",
   "preview": "Vorschau",
   "upload_progress": "Lade Datei {current} von {total} hoch...",
-  "categories_required": "Bitte mindestens eine Kategorie auswaehlen",
-  "files_required": "Bitte mindestens eine Datei auswaehlen",
+  "categories_required": "Bitte mindestens eine Kategorie auswählen",
+  "files_required": "Bitte mindestens eine Datei auswählen",
   "view_gallery": "Galerie-Ansicht",
   "view_table": "Tabellen-Ansicht",
   "all_loaded": "Alle Dateien geladen",

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

@@ -76,6 +76,11 @@ const bulkActions: BulkActionDef[] = [
 ]
 
 const fetchFiles = useGridFetch<File>('/api/v2/files')
+
+const gallerySortOptions = computed(() => [
+  { label: t('motor-core.grid.sort_newest_first'), field: 'created_at', direction: 'desc' as const },
+  { label: t('motor-core.grid.sort_oldest_first'), field: 'created_at', direction: 'asc' as const }
+])
 </script>
 
 <template>
@@ -125,6 +130,7 @@ const fetchFiles = useGridFetch<File>('/api/v2/files')
         :filters="filters"
         :bulk-actions="bulkActions"
         :per-page="25"
+        :sort-options="gallerySortOptions"
         @show-usage="openUsageModal"
       >
         <template #empty-action>

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

@@ -7,12 +7,12 @@ export const fileMeta = {
   schemaName: 'FileResource',
   fields: {
     id: { type: 'integer', renderer: 'number', hideable: false },
-    client_id: { type: 'string' },
+    client_id: { type: 'integer', renderer: 'number' },
     client: { type: 'ref', renderer: 'text', ref: 'ClientResource', labelKey: 'name' },
     description: { type: 'string' },
     author: { type: 'string' },
     source: { type: 'string' },
-    is_global: { type: 'boolean', renderer: 'boolean' },
+    is_global: { type: 'integer', renderer: 'number' },
     alt_text: { type: 'string' },
     file: { type: 'unknown' },
     categories: { type: 'ref[]', renderer: 'list', ref: 'CategoryResource', labelKey: 'name' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-cms/ui-media",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -13,7 +13,7 @@
     "@vueuse/core": "^14.0.0"
   },
   "peerDependencies": {
-    "@motor-cms/ui-core": ">=3.0.2",
+    "@motor-cms/ui-core": ">=4.0.0",
     "nuxt": "^4.0.0",
     "vue": "^3.5.0"
   }