Shared Assets Page

File Information

• Path: app/pages/shared-assets/[type].vue
• Route: /shared-assets/{type}
• Purpose: Public shared assets page accessible via share links
• Layout: default
• Middleware: None (public page)

Overview

The Shared Assets page displays assets that have been shared via share links. This is a public page that doesn't require authentication, allowing external users to view and download shared assets. It supports both grid and list views with sorting, selection, and download functionality.

Key Features

1. Public Access

   • No authentication required
   • Accessible via share link URLs
   • Brand-agnostic (works across brands)

2. Asset Display

   • Grid view with asset/folder cards
   • List view with sortable columns
   • View mode toggle
   • View mode preference caching

3. Share Information

   • Share title display
   • Share description (truncated with expand)
   • Share page owner information
   • Breadcrumb navigation (if nested)

4. Sorting

   • Sort by Name, Date Modified, Date Added, File Size, File Type
   • Ascending/descending toggle
   • Visual sort indicators
   • Client-side sorting

5. Selection & Download

   • Single and multi-select
   • Select all functionality
   • Bulk download
   • Selection count display

6. Folder Navigation

   • Navigate to shared folders
   • Breadcrumb navigation
   • Back navigation

7. Powered by Collage Footer

   • Branding footer
   • Link to Collage website

Components Used

• FolderCard - Folder card component
• AssetCard - Asset card component
• ShareLinkListTable - List view table component
• BreadCrumbs - Breadcrumb navigation component
• AsyncIcon - Async icon component
• GridViewSkeleton - Grid view skeleton loader
• ListViewSkeleton - List view skeleton loader
• v-tooltip - Tooltip component

Composables Used

• useExternalShare() - External share functionality (app/composables/core/pages/useExternalShare.ts)
• useDownloadStore() - Download store
• useSnackbar() - Snackbar notifications
• useFileType() - File type utilities

Data Properties

Reactive Data (from useExternalShare composable)

{
  contentLoading: boolean,          // Initial content loading
  download_items: any[],           // Items to download
  pageScrolling: boolean,          // Page scrolling state
  scrollContainer: HTMLElement | null, // Scroll container ref
  shareTitle: string,              // Share title
  sharePageOwner: string,          // Share page owner name
  truncatedDescription: string,    // Truncated description
  showMoreDetails: boolean,        // Description expand state
  shareDescp: string,              // Full share description
  selectedCount: number,           // Selected items count
  select_all: boolean,             // Select all state
  downloading: boolean,            // Download in progress
  mode: 'grid' | 'list',          // View mode
  enableBackBtn: boolean,          // Back button visibility
  breadcrumbChildLnk: any[],      // Breadcrumb links
  loading: boolean,                // Loading state
  shareAssets: any[],              // Shared assets array
  isSmallScreen: boolean,          // Small screen flag
  folderCardKey: number,           // Folder card key
  fileCardKey: number,             // File card key
  loadMore: boolean,               // Load more state
  sort_loader: string,             // Active sort column loader
  showArrowSort: Record<string, boolean>, // Sort arrow visibility
  page_sort_by: 'ASC' | 'DESC'    // Sort direction
}

Computed Properties

truncatedDescription

Returns truncated share description.

computed(() => {
  if (showMoreDetails.value && shareDescp.value.length > 250) {
    return shareDescp.value.slice(0, 250)
  }
  return shareDescp.value
})

Methods

toggleSelectAll(select: boolean)

Toggles select all state.

function toggleSelectAll(select: boolean) {
  select_all.value = select
  // Updates all items selection state
}

changeView(mode: 'grid' | 'list')

Changes view mode and caches preference.

function changeView(mode: 'grid' | 'list') {
  mode.value = mode
  // Caches preference in localStorage
}

handleSort(field: string)

Handles column sorting.

function handleSort(field: string) {
  // Updates sort state
  // Performs client-side sorting
}

fileSelect(payload: any)

Handles file/folder selection.

function fileSelect(payload: any) {
  // Handles selection logic with Shift+Click support
}

handleDownload(file: any)

Handles file download.

function handleDownload(file: any) {
  download_items.value = [file]
  downloadFile()
}

downloadFile(flag: string)

Downloads selected items.

async function downloadFile(flag: string = "selected") {
  // Downloads selected files/folders
}

openFolder(folder: any)

Opens shared folder.

function openFolder(folder: any) {
  // Navigates to shared folder contents
}

goBack()

Navigates back in breadcrumb hierarchy.

function goBack() {
  // Navigates to parent folder or share root
}

onAssetView(asset: any)

Handles asset view action.

function onAssetView(asset: any) {
  // Opens asset in viewer or navigates to asset details
}

User Interactions

1. View Modes

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

2. Sorting

   • Sort by Name, Date Modified, Date Added, File Size, File Type
   • Click column headers to sort
   • Visual sort indicators

3. Selection

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

4. Download

   • Download single files/folders
   • Bulk download selected items
   • Download progress indication

5. Folder Navigation

   • Click folders to navigate
   • Use breadcrumbs to navigate up
   • Back button navigation

6. Description

   • Expand/collapse description
   • "Show more/less" toggle

Styling

• Uses custom CSS from assets/scss/custom.scss
• Responsive breakpoints for mobile/tablet/desktop
• Grid/list view styling
• Skeleton loaders for loading states
• Custom scrollbar styling
• "Powered by Collage" footer styling

Lifecycle Hooks

onMounted

Initializes shared assets data.

onMounted(async () => {
  // Fetches shared assets based on type parameter
  // Sets up view mode from cache
})

API Endpoints

Get Shared Assets

• Endpoint: GET /shared-assets/{type} (via useExternalShare composable)
• Parameters:

  {
    type: string,  // Share type from route
    query?: string // Share query parameters
  }

• Response: Shared assets array with metadata

User Flow

1. User clicks share link (e.g., /shared-assets/{type}?{query})
2. Page loads shared assets (no authentication required)
3. User can:
   • View share title and description
   • Toggle grid/list view
   • Sort by columns
   • Select assets/folders
   • Download selected items
   • Navigate to shared folders
   • Use breadcrumbs to navigate
4. Empty state shown when no assets shared

Performance Optimizations

1. View Mode Caching: User preference cached in localStorage
2. Client-Side Sorting: Sorts loaded assets without API call
3. Scroll Throttling: Scroll events handled efficiently
4. Lazy Loading: Assets loaded on demand
5. Skeleton Loaders: Show loading states during fetch

Notes for Development

• Page is public (no authentication required)
• Share type from route parameter
• Share query parameters in URL
• View mode preference cached in localStorage
• Client-side sorting only affects loaded assets
• Breadcrumbs shown for nested folders
• Back button shown when in nested folder
• "Powered by Collage" footer always visible
• Download works without authentication
• Selection supports Shift+Click for range

Related Documentation

• useExternalShare Composable - External share composable
• ShareAssetDialog Component - Share dialog component
• FolderCard Component - Folder card component
• AssetCard Component - Asset card component