Appearance

Collages Page ​

File Information ​

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

Purpose ​

The Collages page displays and manages collages in the DAM workspace. Collages are collections of assets that can be organized, shared, and managed as groups.

Key Features ​

  1. Collage Display

    • Grid view of collages
    • Collage cards with previews
    • Collage metadata (asset count, description)
    • Last modified date

  2. Collage Operations

    • Create new collages
    • Edit collage details
    • Delete collages
    • Share collages
    • Set collage permissions
    • Download collages

  3. View Modes

    • Grid view (default)
    • View mode preference saved

  4. Selection

    • Single collage selection
    • Multi-collage selection
    • Select all functionality
    • Bulk operations

  5. Real-time Updates

    • Live updates via Pusher
    • Automatic refresh on changes

Components Used ​

  • CollageCard - Collage display card
  • CreateCollageDialog - Create/edit collage dialog
  • PermissionDialog - Permission management dialog
  • ShareAssetDialog - Share collage dialog
  • Skeleton loaders for loading states

Data Properties ​

javascript
{
  loading: boolean,              // Initial loading state
  collagesList: array,           // Collage list
  viewMode: string,              // View mode
  loadMore: boolean,             // Load more indicator
  selectedCollage: object,       // Selected collage for operations
  shareDialog: boolean,           // Share dialog visibility
  createCollageDialog: boolean,  // Create dialog visibility
  deleteDialog: boolean,         // Delete dialog visibility
  permissionDialog: boolean,    // Permission dialog visibility
  delete_items: array,            // Items to delete
  share_items: array,            // Items to share
  canCreateCollages: boolean,    // Permission to create collages
  canShareDownload: boolean,     // Permission to share/download
  canDeleteContent: boolean      // Permission to delete content
}

Methods ​

fetchCollages(flag = false) ​

Fetches collages from API:

  • Loads collages for workspace
  • Handles pagination
  • Updates collage list

createCollage(payload) ​

Creates new collage:

  • Validates collage data
  • Calls create API
  • Updates collage list
  • Opens collage details

editCollage(collage) ​

Edits existing collage:

  • Opens edit dialog
  • Pre-fills form with collage data
  • Updates collage on save

deleteCollage() ​

Deletes selected collages:

  • Confirms deletion
  • Calls delete API
  • Updates collage list

shareCollage(collage) ​

Shares collage:

  • Opens share dialog
  • Configures sharing options
  • Creates share link

setPermissions(collage) ​

Sets collage permissions:

  • Opens permission dialog
  • Updates permissions
  • Refreshes collage list

handleScroll() ​

Handles infinite scroll:

  • Detects scroll position
  • Loads more collages when needed

API Endpoints ​

  • GET /dam/collages - Fetch collages
  • POST /dam/collages - Create collage
  • PUT /dam/collages/:id - Update collage
  • DELETE /dam/collages/:id - Delete collage
  • POST /dam/collages/:id/share - Share collage
  • GET /dam/collages/:id/download - Download collage

User Interactions ​

  1. View Collages

    • Browse collages in grid view
    • Scroll to load more collages
    • Click collage to view details

  2. Create Collage

    • Click "New Collage" button
    • Enter collage name and description
    • Submit to create

  3. Collage Actions

    • Click collage to open details
    • Right-click or menu for actions
    • Select multiple collages for bulk operations

  4. Manage Collages

    • Edit collage details
    • Delete collages
    • Set permissions
    • Share collages

Real-time Features ​

  • Listens to Pusher events:
    • collage.created - New collage created
    • collage.updated - Collage updated
    • collage.deleted - Collage deleted