Appearance

AssetCard Component ​

File Information ​

  • Path: app/components/card/Asset/AssetCard.vue
  • Purpose: Displays individual asset cards with thumbnail, metadata, and actions
  • Type: Card Component

Overview ​

The AssetCard component displays individual assets (images, videos, documents, etc.) in both grid and list views. It provides interactive features like selection, quick actions menu, download, and quick view.

Features ​

  • Asset Display: Shows asset thumbnail or preview
  • Selection Support: Checkbox for multi-select
  • Quick Actions: Context menu with actions (download, share, delete, etc.)
  • Quick View: Button to open quick view dialog
  • Download: Direct download button (for share-link mode)
  • Video Support: Video preview with play/pause controls
  • File Type Indicator: Chip showing file type
  • Hover Effects: Overlay options appear on hover
  • Responsive: Adapts to mobile and desktop screens

Props ​

typescript
{
  mosaic?: boolean              // Mosaic view mode
  file: Asset                   // Asset data object (required)
  insideFolder?: boolean        // Whether inside a folder
  downloading?: boolean         // Download in progress
  searchPage?: boolean          // Whether on search page
  flag?: string                 // Context flag (e.g., 'share-link', 'home-page')
  shiftKey?: number             // Shift key state for selection
  hideDownload?: boolean        // Hide download button
  isCheckBox?: boolean          // Show checkbox
}

Events ​

typescript
{
  quickView: []                 // Emitted when quick view is requested
  load: []                      // Emitted when asset loads
  assetView: []                 // Emitted when asset view is requested
  fileSelect: [file: Asset]     // Emitted when file is selected
  download: []                  // Emitted when download is requested
}

Composables Used ​

  • useAssetCard(props, emit) - Main composable handling asset card logic

Key Functionality ​

Asset Display ​

  • Displays video preview for video files
  • Shows image thumbnail for image files
  • Displays folder icon for assets in folders
  • Handles different file types appropriately

Selection ​

  • Checkbox appears on hover or when isCheckBox is true
  • Supports shift-click for range selection
  • Updates file.is_selected property

Quick Actions Menu ​

  • Context menu with actions based on permissions
  • Actions include: Download, Share, Delete, Move, etc.
  • Menu items visibility controlled by permissions

Quick View ​

  • Opens QuickViewDialog for asset preview
  • Supports different asset types (images, videos, documents)

Download ​

  • Direct download button in share-link mode
  • Shows loading state during download
  • Tooltip with download status

Usage Example ​

vue
<template>
  <AssetCard
    :file="asset"
    :flag="'home-page'"
    :is-check-box="true"
    @quick-view="handleQuickView"
    @file-select="handleFileSelect"
    @download="handleDownload"
  />
</template>

<script setup lang="ts">
import AssetCard from '~/components/card/Asset/AssetCard.vue'

const asset = ref({
  id: 1,
  file_name: 'example.jpg',
  file_type: 'jpg',
  // ... other asset properties
})

const handleQuickView = () => {
  // Open quick view dialog
}

const handleFileSelect = (file) => {
  // Handle file selection
}
</script>

Styling ​

Uses global SCSS classes:

  • .asset-card - Main card container
  • .visibleOptions - Shows options on small screens
  • .selected - Selected state styling
  • .optionIcon - Options menu button
  • .downloadIcon - Download button
  • .lightboxIcon - Quick view button
  • .chip-white - File type chip