Appearance

QuickViewDialog Component ​

File Information ​

  • Path: app/components/dialogs/QuickViewDialog.vue
  • Purpose: Quick preview dialog for assets with metadata and actions
  • Type: Dialog Component

Overview ​

The QuickViewDialog component provides a quick preview of assets in a modal dialog. It displays asset preview using AssetContainer and provides actions like download and open detail view.

Features ​

  • Asset Preview: Displays asset using AssetContainer component
  • Metadata Tooltip: Info tooltip with asset details (ID, credit, dates, dimensions)
  • Download: Download button with loading state
  • Open Detail View: Menu option to open full asset detail page
  • Version Support: Shows version information for versioned assets
  • Loading States: Skeleton loader during content load
  • Responsive: Adapts to mobile and desktop
  • Video Error Handling: Handles video preview errors

Props ​

typescript
{
  dialog: boolean              // Dialog visibility (required)
  assetPreview: Asset         // Asset data object (required)
  isVersion?: boolean         // Whether showing version preview
  searchPage?: boolean        // Whether on search page
  flag?: string               // Context flag (default: "quick-view")
  subFlag?: string            // Sub-context flag
  hide_download?: boolean     // Hide download button
}

Events ​

typescript
{
  'update:dialog': [value: boolean]  // Dialog visibility update
  'close': []                         // Dialog closed
}

Composables Used ​

  • useAssetQuickViewDialog(props, emit) - Dialog logic and state management

Key Functionality ​

Asset Preview ​

  • Uses AssetContainer for preview
  • Supports all asset types (images, videos, PDFs, documents)
  • Handles video errors
  • Loading skeleton during load

Metadata Display ​

  • Info tooltip with asset details:
    • Asset ID
    • Created by (credit)
    • Date uploaded
    • Last modified
    • File type
    • Dimensions (if available)

Actions ​

  • Download: Downloads asset with loading indicator
  • Open Detail View: Navigates to full asset detail page
  • Close: Closes dialog

Version Support ​

  • Shows version number in title for versioned assets
  • Displays "Preview of {version}" format

Usage Example ​

vue
<template>
  <QuickViewDialog
    :dialog="showQuickView"
    :asset-preview="selectedAsset"
    :flag="'quick-view'"
    @update:dialog="showQuickView = $event"
    @close="showQuickView = false"
  />
</template>

<script setup lang="ts">
import QuickViewDialog from '~/components/dialogs/QuickViewDialog.vue'

const showQuickView = ref(false)
const selectedAsset = ref(null)
</script>

Styling ​

Uses global SCSS classes:

  • .v-dialog-global - Dialog container
  • .quickViewDialog - Quick view specific styling
  • .previewDialogTitle - Title section
  • .assetsDetailBox - Asset preview container
  • .imageSkeleton - Loading skeleton