Appearance

DAM Uploaded Assets Page ​

File Information ​

  • Path: pages/_workspace_id/dam/uploaded.vue
  • Route: /:workspace_id/dam/uploaded
  • Middleware: authCheck, checkWorkspace, can-access-dam-module, check-if-suspended
  • Layout: damLayout

Purpose ​

The Uploaded Assets page displays all uncategorized assets that have been uploaded but not yet organized into folders. It provides tools to review, tag, add custom fields, and organize these assets. The page has two views: "Uploaded" (admin/internal uploads) and "Requested" (external user uploads).

Key Features ​

  1. Dual View Tabs

    • Uploaded Tab: Shows assets uploaded by workspace users
    • Requested Tab: Shows assets uploaded by external users
    • Toggle between views with count indicators

  2. Bulk Operations

    • Bulk tag assignment
    • Bulk custom field updates
    • Bulk move to folders
    • Bulk selection with count indicator

  3. Asset Management

    • View uncategorized assets
    • Add tags to assets
    • Add custom fields
    • Move assets to folders
    • View asset details

  4. Pagination & Infinite Scroll

    • Loads assets in batches
    • Infinite scroll for better UX
    • Pagination controls

  5. Permission-Based Actions

    • Actions filtered by user permissions
    • Tag management (if canAddTags)
    • Custom fields (if canAddCustomFields)
    • Move content (if canMoveContent)

Components Used ​

  • AssetList - Asset grid/list display (~/components/dam/AssetList)
  • AddTagsDialog - Tag management dialog
  • CustomFieldDialog - Custom field dialog
  • FolderDialogs - Folder selection for moving assets
  • Various SVG icons (TagsIcon, CustomFieldsIcon, MoveIcon, etc.)
  • Skeleton loaders for loading states

Data Properties ​

javascript
{
  contentLoading: boolean,      // Initial content loading state
  isAdminTab: boolean,          // Active tab (true = Uploaded, false = Requested)
  files: array,                 // Uploaded assets array
  externalFiles: array,         // Requested assets array
  total: number,                // Total uploaded assets count
  externalTotal: number,        // Total requested assets count
  totalUncategorized: number,  // Total uncategorized assets
  selectedFileCount: number,     // Number of selected files
  selectedFiles: array,         // Array of selected file IDs
  pageScrolling: boolean,       // Scroll state indicator
  canAddTags: boolean,          // Permission to add tags
  canAddCustomFields: boolean, // Permission to add custom fields
  canMoveContent: boolean,     // Permission to move content
  canDeleteContent: boolean,   // Permission to delete content
  pagination: {
    page: number,              // Current page
    limit: number,             // Items per page
    hasMore: boolean           // More items available
  }
}

Mixins Used ​

  • fileSelection - File selection utilities
  • commonFunctions - Common utility functions
  • fileType - File type utilities
  • imageStyle - Image styling utilities

Computed Properties ​

  • selectedFileCount - Count of selected files
  • canAddTags - Permission check for tag management
  • canAddCustomFields - Permission check for custom fields
  • canMoveContent - Permission check for moving content
  • canDeleteContent - Permission check for deleting content

Methods ​

changeView(tab) ​

Switches between Uploaded and Requested tabs:

  • Updates isAdminTab state
  • Fetches appropriate asset list
  • Resets selection
  • Updates URL if needed

fetchUploadedAssets(flag = false) ​

Fetches uploaded assets:

  • Loads assets from API
  • Handles pagination
  • Updates files array
  • Updates total count
  • Handles infinite scroll

fetchRequestedAssets(flag = false) ​

Fetches requested (external) assets:

  • Loads external assets from API
  • Handles pagination
  • Updates externalFiles array
  • Updates externalTotal count
  • Handles infinite scroll

handleBulkOperation(operation) ​

Handles bulk operations:

  • 'add-tags': Opens tag dialog for selected files
  • 'custom-field': Opens custom field dialog
  • 'move': Opens folder selection dialog
  • 'delete': Shows delete confirmation

handleScroll(type) ​

Handles infinite scroll:

  • Detects scroll position
  • Loads more items when near bottom
  • Updates pagination state
  • Prevents duplicate requests

toggleSelectAll(select) ​

Toggles selection of all visible files:

  • Selects/deselects all files
  • Updates selectedFiles array
  • Updates selectedFileCount

handleFileSelect(file, selected) ​

Handles individual file selection:

  • Adds/removes file from selection
  • Updates selection count
  • Updates UI state

API Endpoints ​

  • GET /dam/uploaded-assets - Fetch uploaded assets

    • Query Parameters:
      • page: Page number
      • limit: Items per page
      • workspace_id: Workspace ID
    • Response: Array of asset objects with pagination metadata

  • GET /dam/requested-assets - Fetch requested (external) assets

    • Query Parameters: Same as above
    • Response: Array of external asset objects

  • POST /dam/assets/bulk-tags - Bulk tag assignment

    • Request Body:
      json
      {
  "asset_ids": [1, 2, 3],
  "tags": ["tag1", "tag2"]
}

  • POST /dam/assets/bulk-move - Bulk move to folder

    • Request Body:
      json
      {
  "asset_ids": [1, 2, 3],
  "folder_id": 123
}

User Interactions ​

  1. Tab Switching

    • Click "Uploaded" or "Requested" tab
    • View switches with count indicators
    • Assets list refreshes

  2. Asset Selection

    • Click assets to select
    • Use "Select All" for bulk selection
    • Selection count displayed

  3. Bulk Operations

    • Select multiple assets
    • Click bulk action button (tags, custom fields, move)
    • Complete operation in dialog
    • Assets updated

  4. Asset Management

    • Click asset to view details
    • Use context menu for actions
    • Move to folders
    • Add tags/custom fields

  5. Infinite Scroll

    • Scroll down to load more
    • Automatic pagination
    • Loading indicator shown

Permission-Based Features ​

  • Tag Management: Only if user has canAddTags permission
  • Custom Fields: Only if user has canAddCustomFields permission
  • Move Content: Only if user has canMoveContent permission
  • Delete Content: Only if user has canDeleteContent permission

Styling ​

  • Uses custom CSS classes:
    • collage-body - Main container
    • collageDetailTitle - Page title area
    • toggleButton - Tab toggle buttons
    • grid-list-view - Asset grid/list container
    • totalSelected - Selection count chip
    • Responsive design for mobile/tablet/desktop

State Management ​

  • Integrates with DAM store for asset updates
  • Updates store after bulk operations
  • Syncs with asset list across application

Notes for Development ​

  • The page handles two distinct asset types (uploaded vs requested)
  • Bulk operations are permission-gated
  • Infinite scroll improves performance for large lists
  • Selection state persists during operations
  • External assets may have different permissions
  • Uncategorized count includes both types