Appearance

File Details Page ​

File Information ​

  • Path: app/pages/[brand_name]/files/[id].vue
  • Route: /{brand_name}/files/{id}
  • Purpose: Display detailed information about a specific file/asset
  • Layout: collage-layout
  • Middleware: check-url

Overview ​

The File Details page displays comprehensive information about a specific asset, including preview, metadata, tags, custom fields, and actions like download and share. It provides a detailed view with expandable sidebar for asset information.

Key Features ​

  1. Asset Preview

    • Image/video/document preview
    • Full-screen viewing capability
    • Asset container component
    • Responsive display

  2. Asset Information

    • File name with tooltip
    • File metadata (size, type, dates)
    • Description display
    • Custom fields display
    • Expandable/collapsible sidebar

  3. Tags Management

    • Tags display
    • Tag list view
    • Empty state handling

  4. Asset Actions

    • Share asset
    • Download asset
    • Download with format conversion
    • Asset converter dialog

  5. Breadcrumb Navigation

    • Hierarchical navigation
    • Folder path display
    • Click to navigate

  6. Tab Navigation

    • Asset Info tab
    • Tags tab
    • Smooth tab transitions
    • Active tab indicator

Components Used ​

  • AssetContainer - Asset preview container (app/components/asset/AssetContainer.vue)
  • BreadCrumbs - Breadcrumb navigation component
  • ShareAssetDialog - Share dialog component
  • AssetConverterDialog - Asset converter dialog
  • AsyncIcon - Async icon component
  • v-skeleton-loader - Skeleton loaders
  • v-tooltip - Tooltip component
  • v-card - Vuetify card component
  • v-list - Vuetify list component
  • v-chip - Vuetify chip component

Composables Used ​

  • useAssetDetails() - Asset details management (app/composables/core/pages/useAssetDetails.ts)
  • useDownloadStore() - Download store
  • useSnackbar() - Snackbar notifications
  • useFileType() - File type utilities

Data Properties ​

Reactive Data (from useAssetDetails composable) ​

typescript
{
  file: Asset | null,                    // Current asset data
  tags: Tag[],                           // Asset tags
  metaData: any,                         // Asset metadata
  shareDialog: boolean,                  // Share dialog visibility
  isLoading: boolean,                    // Loading state
  close_menu: boolean,                  // Menu close state
  downloading: boolean,                  // Download in progress
  originalImageW: number,                // Original image width
  originalImageH: number,               // Original image height
  downloadingWithResolution: boolean,    // Download with resolution in progress
  contentLoading: boolean,               // Initial content loading
  tabLoading: boolean,                   // Tab content loading
  open_tab: string,                     // Active tab ('asset-info' | 'tags' | '')
  fileDescription: string,               // Asset description
  assetDownloadDialog: boolean,         // Asset converter dialog visibility
  workspaceId: string,                   // Workspace ID
  otherResolutions: any[],               // Available resolutions
  aspectRatio: number,                   // Image aspect ratio
  downloadableFormats: string[],         // Available download formats
  breadcrumbChildLnk: any[],            // Breadcrumb links
  tabMenuItems: any[],                   // Tab menu items
  assetInfoItems: any[],                 // Asset info list items
  customFields: any[]                    // Custom fields
}

Computed Properties ​

getShareTitle ​

Returns share title from file name (without extension).

typescript
computed(() => {
  if (file.value) {
    return file.value.display_file_name?.replace(
      new RegExp(`\\.${file.value?.file_type}$`, "i"),
      ""
    ) || ""
  }
  return ""
})

Methods ​

fetchAsyncData() ​

Fetches asset details from API.

typescript
async function fetchAsyncData() {
  // Fetches asset details
  // Loads tags
  // Loads metadata
  // Handles errors
}

openTab(tab: string) ​

Opens specified tab.

typescript
function openTab(tab: string) {
  open_tab.value = tab
  // Loads tab content if needed
}

downloadAndConvertFile() ​

Opens asset converter dialog or downloads file.

typescript
async function downloadAndConvertFile() {
  // Opens converter dialog for images
  // Direct download for other file types
}

handleConvert(resolution: any) ​

Handles format conversion and download.

typescript
async function handleConvert(resolution: any) {
  // Converts asset to specified format/resolution
  // Downloads converted file
}

downloadFile() ​

Downloads original file.

typescript
async function downloadFile() {
  // Downloads original asset file
}

formatDate(date: string) ​

Formats date for display.

typescript
function formatDate(date: string): string {
  // Formats date string
}

processFileName(fileName: string) ​

Processes file name for display.

typescript
function processFileName(fileName: string): string {
  // Truncates long file names
  // Handles special characters
}

isMultiSelect(field: any) ​

Checks if field is multi-select type.

typescript
function isMultiSelect(field: any): boolean {
  // Checks field type
}

closeAssetCovertDialog() ​

Closes asset converter dialog.

typescript
function closeAssetCovertDialog() {
  assetDownloadDialog.value = false
}

User Interactions ​

  1. Asset Preview

    • View asset in container
    • Full-screen viewing
    • Zoom and pan (for images)

  2. Tab Navigation

    • Click tabs to switch views
    • Asset Info tab shows metadata
    • Tags tab shows tags list

  3. Sidebar Toggle

    • Click close button to collapse sidebar
    • Sidebar expands on tab selection
    • Smooth width transitions

  4. Asset Actions

    • Click share icon to open share dialog
    • Click download icon to download or open converter
    • Download with format/resolution selection

  5. Breadcrumb Navigation

    • Click breadcrumb items to navigate
    • Navigate to parent folders
    • Navigate to folders list

Styling ​

  • Uses custom CSS from assets/scss/custom.scss
  • Responsive layout for asset preview and sidebar
  • Tab navigation styling
  • Sidebar expand/collapse animations
  • Skeleton loader styles
  • Custom scrollbar styling

Lifecycle Hooks ​

onMounted ​

Initializes asset data and sets up event listeners.

typescript
onMounted(async () => {
  await fetchAsyncData()
  // Sets up event listeners
})

API Endpoints ​

Get Asset Details ​

  • Endpoint: GET /assets/{id} (via useAssetDetails composable)
  • Parameters:
    typescript
    {
  id: string,
  workspace_id: string
}
  • Response: Asset object with metadata, tags, custom fields

Download Asset ​

  • Endpoint: GET /assets/{id}/download (via download store)
  • Response: File download

Convert Asset ​

  • Endpoint: POST /assets/{id}/convert (via asset converter)
  • Request: Format and resolution options
  • Response: Converted file download

User Flow ​

  1. User navigates to file details page via URL or asset click
  2. Page fetches asset details
  3. Asset preview displayed
  4. User can:
    • View asset information in sidebar
    • Switch between Asset Info and Tags tabs
    • Share asset
    • Download asset (original or converted)
    • Navigate via breadcrumbs
  5. Sidebar can be collapsed/expanded
  6. Asset converter dialog for format selection

Performance Optimizations ​

  1. Lazy Loading: Tab content loaded on demand
  2. Image Optimization: Responsive image loading
  3. Caching: Asset data cached when possible
  4. Skeleton Loaders: Show loading states during fetch

Notes for Development ​

  • Page requires authentication (handled by global auth middleware)
  • Asset ID from route parameters
  • Sidebar width transitions smoothly (80px to 400px)
  • Custom fields support multi-select display
  • Tags displayed as chips
  • Asset converter only available for images
  • Breadcrumbs generated from asset folder path
  • Empty states for tags and custom fields