Appearance

Collage Management ​

File Information ​

  • Listing page: app/pages/[brand_name]/collage/index.vue — /{brand_name}/collage
  • Detail page: app/pages/[brand_name]/collage/[id]/index.vue — /{brand_name}/collage/{id}
  • Composables: useCollage.ts (listing), useCollageDetails.ts (detail)

Overview ​

The Collage Management system covers two pages: a top-level collage listing and a collage detail page. The detail page embeds an inner search for finding assets within the collage using Typesense filters.

Architecture ​

System Components ​

  1. Collage Listing Page: Browse all collages; grid or list view
  2. Collage Details Page: Display collage and its assets
  3. Collage Cards: Collage display in grid/list views
  4. Inner Search: Search assets within a collage via embedded search bar + SearchFilter
  5. Collage Operations: Share, download collage
  6. Bulk Operations: Operations on collage assets

Key Features ​

0. Collage Listing Page (collage/index.vue) ​

  • All collages displayed in grid or list view
  • Grid view: CollageCard components in responsive columns
  • List view: sortable table — Name, Description, Date Modified, Date Added, #Assets
  • Sort by Name (client-side via sortCollage())
  • Per-row options menu: Share (disabled when assets_count === 0 with tooltip)
  • Empty state: emptyCollageIcon + "No collages found here."
  • Composable: useCollage()

1. Collage Display ​

  • Collage metadata (name, description, asset count)
  • Asset list in grid or list view
  • Empty state handling
  • Back navigation to collage list
  • Collage information display

2. View Modes ​

  • Grid view with mosaic layout
  • List view with sortable columns
  • View mode preference caching
  • Smooth transitions between views
  • Client-side sorting for loaded assets

3. Sorting ​

  • Sort by Name, Date Modified, Date Added, File Size, File Type
  • Ascending/descending toggle
  • Visual sort indicators
  • Client-side sorting (affects loaded assets only)
  • Sort state management

4. Selection & Bulk Actions ​

  • Single and multi-select (Shift+Click support)
  • Select all functionality
  • Bulk download
  • Bulk share
  • Selection count display
  • Selection state persists across pagination

5. Collage Actions ​

  • Share entire collage
  • Download entire collage
  • Share selected assets
  • Download selected assets
  • Navigate to asset details

6. Inner Search (Collage Detail) ​

The collage detail page embeds a contextual search scoped to the current collage:

  • Search bar: v-text-field bound to searchTerm; placeholder Search in {collage_name}
  • Filter panel: SearchFilter component (file type, tags, custom fields, dates, users)
  • Events: handleSearchInput (debounced), performSearch (Enter key), clearSearch (× button), applySearchFilters (filter apply)
  • State: searchLoading — shows progress bar while Typesense query runs
  • Results replace the normal asset listing; clearing search restores all collage assets

7. Infinite Scroll Pagination ​

  • Automatic loading on scroll
  • Skeleton loaders
  • Scroll position management
  • Loads 36 assets per page
  • Scroll triggers at 85% of container height

File Structure ​

Core Files ​

Vue Page Files (.vue) ​

  • app/pages/[brand_name]/collage/index.vue — Collage listing page

    • All collages, grid/list view
    • Sortable list view (Name, Date Modified, Date Added, #Assets)
    • Per-collage share action (disabled for empty collages)
    • Route: /{brand_name}/collage

  • app/pages/[brand_name]/collage/[id]/index.vue — Collage details page

    • Collage asset display, view mode toggle
    • Sorting, selection, bulk operations
    • Embedded inner search with SearchFilter
    • Route: /{brand_name}/collage/{id}

Composables ​

  • app/composables/core/pages/useCollageDetails.ts - Collage details composable

    • Collage data fetching
    • Asset management
    • Collage operations
    • Collage sharing

  • app/composables/core/pages/useCollage.ts - Collage list composable

    • Collage fetching
    • Collage operations
    • Collage filtering

Components ​

  • app/components/card/CollageCard.vue - Collage card component
    • Collage thumbnail
    • Collage metadata
    • Quick actions
    • Navigation support

API ​

  • app/composables/api/useCollectionApi.ts - Collection/collage API
    • Get collection details
    • Get collections list
    • Create collection
    • Update collection
    • Delete collection

Data Flow ​

Collage Viewing ​

  1. User navigates to collage page
  2. Collage details fetched from API
  3. Collage assets loaded (paginated)
  4. Assets displayed in selected view mode
  5. Actions available (share, download, etc.)

Collage Operations ​

  1. User selects assets or entire collage
  2. Action triggered (download, share)
  3. Operation executed
  4. Results displayed
  5. State updated

User Interactions ​

  1. Collage Display

    • View collage metadata (name, description)
    • View collage assets
    • Navigate back to collage list

  2. View Modes

    • Toggle grid/list view
    • View mode preference cached
    • Smooth transitions

  3. Sorting

    • Sort by Name, Date Modified, Date Added, File Size, File Type
    • Click column headers to sort (client-side)
    • Visual sort indicators

  4. Selection

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

  5. Bulk Actions

    • Download selected assets
    • Share selected assets
    • Download entire collage
    • Share entire collage

  6. Asset Actions

    • Download single asset
    • Share single asset
    • Navigate to asset details

Performance Optimizations ​

  1. Pagination: Loads assets in pages (36 per page)
  2. Duplicate Prevention: Checks existing IDs before adding new files
  3. Client-Side Sorting: Sorts loaded assets without API call
  4. Scroll Throttling: Scroll events handled efficiently
  5. View Mode Caching: User preference cached in localStorage

API Endpoints ​

Get Collage Details ​

  • Endpoint: GET /collections/{id} (via getCollageDetailsApi())
  • Parameters: page, url_workspace_id, total_record
  • Response: Collage data with assets, asset count, asset IDs