Appearance

Asset Management ​

File Information ​

  • Path: app/pages/[brand_name]/files/[id].vue, app/components/card/Asset/
  • Purpose: Complete asset viewing, downloading, and management system

Overview ​

The Asset Management system provides comprehensive functionality for viewing, downloading, and managing digital assets. It supports multiple file types, asset previews, quick actions, bulk operations, and integration with sharing and download systems.

Architecture ​

System Components ​

  1. Asset Details Page: Individual asset view with metadata
  2. Asset Cards: Asset display in grid/list views
  3. Asset Preview: Quick view and full preview dialogs
  4. Asset Actions: Download, share, and other operations
  5. Bulk Operations: Operations on multiple selected assets

Key Features ​

1. Asset Viewing ​

  • Asset detail page with full metadata
  • Quick view dialog for preview without navigation
  • Full preview with zoom and navigation
  • Multiple file type support (images, videos, documents, audio)
  • Asset metadata display (name, size, type, dates, tags)

2. Asset Cards ​

  • Grid view with thumbnails
  • List view with detailed information
  • Selection support (single and multi-select)
  • Quick actions (download, share, view)
  • Loading states with skeleton loaders

3. Asset Preview ​

  • Quick view dialog for fast preview
  • Full-screen preview mode
  • Image zoom and pan
  • Video playback with controls
  • Document preview (PDF, Office files)
  • Keyboard navigation

4. Asset Actions ​

  • Download: Single and bulk downloads
  • Share: Share asset with permissions
  • View Details: Navigate to asset detail page
  • Convert: Asset format conversion (if supported)

5. Bulk Operations ​

  • Multi-select with Shift+Click support
  • Select all functionality
  • Bulk download
  • Bulk share
  • Selection count display

File Structure ​

Core Files ​

Vue Page Files (.vue) ​

  • app/pages/[brand_name]/files/[id].vue - Asset details page
    • Asset metadata display
    • Asset preview
    • Asset actions
    • Asset information

Route: /{brand_name}/files/{id}

Components ​

  • app/components/card/Asset/AssetCard.vue - Asset card component

    • Asset thumbnail display
    • Asset metadata
    • Quick actions
    • Selection support

  • app/components/card/Asset/AssetContainer.vue - Asset container

    • Grid/list layout
    • Asset card rendering
    • Selection management

  • app/components/dialogs/QuickViewDialog.vue - Quick view dialog

    • Asset preview
    • Asset metadata
    • Quick actions

  • app/components/dialogs/AssetConverterDialog.vue - Asset converter dialog

    • Format selection
    • Quality settings
    • Conversion progress

Composables ​

  • app/composables/core/pages/useAssetDetails.ts - Asset details composable

    • Asset data fetching
    • Asset operations
    • Asset metadata management

  • app/composables/core/components/card/useAssetCard.ts - Asset card composable

    • Asset card logic
    • Selection handling
    • Action handlers

  • app/composables/core/components/dialogs/useQuickViewDialog.ts - Quick view composable

    • Preview state management
    • Navigation handling

API ​

  • app/composables/api/useAssetsApi.ts - Asset API operations
    • Get asset details
    • Update asset metadata
    • Delete asset
    • Convert asset format

Data Flow ​

Asset Viewing ​

  1. User clicks asset card or navigates to asset URL
  2. Asset details fetched from API
  3. Asset metadata displayed
  4. Asset preview loaded (if applicable)
  5. Actions available (download, share, etc.)

Asset Selection ​

  1. User clicks asset card checkbox or Shift+Click
  2. Selection state updated
  3. Selection count displayed
  4. Bulk actions enabled
  5. Selection persisted across pagination

User Interactions ​

  1. Asset Viewing

    • Click asset card to view details
    • Quick view from card actions
    • Full-screen preview

  2. Asset Selection

    • Single click to select
    • Shift+Click for range selection
    • Select all functionality

  3. Asset Actions

    • Download asset
    • Share asset
    • View asset details
    • Convert asset format

  4. Bulk Operations

    • Download selected assets
    • Share selected assets
    • Clear selection

File Type Support ​

  • Images: JPEG, PNG, GIF, WebP, SVG
  • Videos: MP4, WebM, MOV
  • Documents: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX
  • Audio: MP3, WAV, OGG
  • Other: ZIP, TXT, HTML