Versions Component

File Information

• Path: components/dam/AssetList/Versions.vue
• Purpose: Manages and displays asset version history, allowing users to view, download, restore, and upload new versions of assets

Overview

The Versions component displays the version history of an asset, showing all previous versions with their creation dates, creators, and metadata. Users can preview, download, restore previous versions, and upload new versions. The component integrates with the asset versioning system to maintain a complete history of asset changes.

Key Features

1. Version Display

   • Lists all versions of an asset
   • Shows current version indicator
   • Displays version metadata (date, creator, version number)
   • Version thumbnails/previews

2. Version Actions

   • Preview version
   • Download version
   • Restore version (make current)
   • Upload new version

3. Version Management

   • Current version highlighting
   • Version comparison
   • Version metadata display
   • Version upload interface

4. Permission-Based Access

   • View versions (viewer, manager, admin)
   • Download versions (viewer, manager, admin)
   • Restore versions (manager, admin)
   • Upload versions (manager, admin)

Props

{
  asset: {
    type: Object,
    required: true,
    description: 'Current asset object with version information'
  },
  versions: {
    type: Array,
    default: () => [],
    description: 'Array of version objects'
  },
  versionListData: {
    type: Object,
    default: () => ({}),
    description: 'Version list metadata and state'
  },
  currentVersion: {
    type: Object,
    default: null,
    description: 'Current active version object'
  }
}

Events

{
  'version-selected': (version) => {},      // Version selected for view
  'version-restored': (version) => {},     // Version restored to current
  'version-uploaded': (version) => {},      // New version uploaded
  'version-downloaded': (version) => {},   // Version downloaded
  'preview-version': (version) => {}        // Version preview requested
}

Data Properties

{
  dynamicStyles: object,          // Dynamic styles for version avatars
  activeVersion: object,          // Currently active version
  canViewVersions: boolean,       // Permission to view versions
  canDownloadVersions: boolean,   // Permission to download versions
  canRestoreVersions: boolean,    // Permission to restore versions
  canUploadVersions: boolean,     // Permission to upload versions
  hasVisibleMenuItems: boolean   // Whether menu items are visible
}

Mixins Used

• imageStyle - Image styling utilities (~/mixins/imageStyle)
• commonFunctions - Common utility functions (~/mixins/common-functions)
• fileType - File type utilities (~/mixins/fileType)

Computed Properties

• canViewVersions - Permission check for viewing versions
• canDownloadVersions - Permission check for downloading versions
• canRestoreVersions - Permission check for restoring versions
• canUploadVersions - Permission check for uploading versions
• hasVisibleMenuItems - Whether any menu items should be visible

Methods

previewAsset()

Opens version preview:

• Loads version preview
• Opens preview dialog
• Displays version content
• Emits preview-version event

downloadVersion(versionId)

Downloads a specific version:

• Generates download URL
• Initiates file download
• Tracks download analytics
• Emits version-downloaded event

makeCurrent(versionId)

Restores a version to current:

• Shows confirmation dialog
• Calls restore API
• Updates current version
• Refreshes version list
• Emits version-restored event

uploadNewVersion()

Opens version upload interface:

• Opens version upload dialog
• Allows file selection
• Handles upload process
• Creates new version
• Emits version-uploaded event

getSrcPath(version)

Gets preview/thumbnail path for version:

• Returns thumbnail URL if available
• Falls back to original file URL
• Handles different file types
• Returns appropriate preview source

assetsListOnloadSetStyle(asset, styles, ref)

Sets dynamic styles for version avatar:

• Calculates image dimensions
• Sets aspect ratio
• Applies responsive styles
• Updates dynamic styles object

Version Object Structure

{
  id: number,                    // Version ID
  version: string,               // Version number (e.g., "v1", "v2")
  asset_id: number,              // Parent asset ID
  file_name: string,             // Original file name
  display_file_name: string,     // Display file name
  file_size: number,             // File size in bytes
  mime_type: string,             // MIME type
  created_at: string,            // Creation timestamp
  created_by: string,            // Creator name/email
  thumbnail_url: string,         // Thumbnail URL
  file_url: string,              // File URL
  is_current: boolean,           // Is current version
  metadata: object               // Additional metadata
}

API Endpoints

• GET /dam/assets/:id/versions - Fetch version list

  • Response: Array of version objects

• POST /dam/assets/:id/versions - Upload new version

  • Request: FormData with file
  • Response: New version object

• POST /dam/versions/:id/restore - Restore version to current

  • Response: Updated asset object

• GET /dam/versions/:id/download - Download version

  • Response: File download

• GET /dam/versions/:id/preview - Get version preview

  • Response: Preview URL or data

User Interactions

1. Viewing Versions

   • Version list displayed
   • Current version highlighted
   • Version metadata shown

2. Preview Version

   • Click preview option
   • Version preview opens
   • Can compare with current

3. Download Version

   • Click download option
   • File downloads
   • Download tracked

4. Restore Version

   • Click restore option
   • Confirmation shown
   • Version restored to current
   • Previous version becomes history

5. Upload New Version

   • Click upload option
   • File selection dialog opens
   • New version uploaded
   • Becomes current version

Permission Matrix

Action	Viewer	Manager	Admin
View Versions	✅	✅	✅
Download Versions	✅	✅	✅
Restore Versions	❌	✅	✅
Upload Versions	❌	✅	✅

Styling

• Uses custom CSS classes:
  • currentVersion - Current version styling
  • versionAvatar - Version thumbnail container
  • optionMenuList - Menu options list
  • optionMenuLink - Menu link styling
  • Responsive design for mobile/tablet/desktop

State Management

• Integrates with DAM store
• Updates asset state after version operations
• Syncs with asset details page
• Maintains version list state

Notes for Development

• Version numbers are auto-incremented
• Current version cannot be deleted
• Restoring a version creates a new version entry
• Version uploads follow same flow as asset uploads
• Version metadata is preserved
• Thumbnails are generated for each version

Related Documentation

• Asset Details Page - Asset management
• Asset Upload Component - Upload functionality
• Upload Flow Feature - Upload system
• DAM Store - State management