Appearance

Folders List Page ​

File Information ​

  • Path: app/pages/[brand_name]/folders/index.vue
  • Route: /{brand_name}/folders
  • Purpose: Display list of all folders with grid/list views, sorting, and actions
  • Layout: collage-layout
  • Middleware: check-url

Overview ​

The Folders List page displays all folders in a grid or list view. Users can sort folders, view folder details, share folders, and download folders. This is the main entry point for folder navigation.

Key Features ​

  1. Folder Display

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

  2. Sorting

    • Sort by Name, Date Modified, Date Added, Total Count
    • Ascending/descending toggle
    • Visual sort indicators
    • Client-side sorting

  3. Folder Actions

    • Share folder
    • Download folder
    • Navigate to folder details
    • Folder menu with options

  4. Empty State

    • Message when no folders exist
    • Helpful description about folders

  5. Infinite Scroll

    • Automatic loading on scroll
    • Skeleton loaders
    • Scroll position management

Components Used ​

  • FolderCard - Folder card component for grid view
  • ShareAssetDialog - Share dialog component
  • AsyncIcon - Async icon component
  • v-skeleton-loader - Skeleton loaders
  • v-menu - Vuetify menu component
  • v-tooltip - Tooltip component

Composables Used ​

  • useFolders() - Folders list management (app/composables/core/pages/useFolders.ts)
  • useDownloadStore() - Download store
  • useSnackbar() - Snackbar notifications
  • useFileType() - File type utilities

Data Properties ​

Reactive Data (from useFolders composable) ​

typescript
{
  loading: boolean,                  // Loading state
  foldersList: Folder[],            // Folders array
  viewMode: 'list' | 'grid',        // Current view mode
  selected_items: Folder[],         // Selected folders
  select_all: boolean,              // Select all state
  shareDialog: boolean,             // Share dialog visibility
  share_items: Folder[],           // Folders to share
  download_items: Folder[],         // Folders to download
  hover_name: boolean,              // Name column hover
  hover_modified_at: boolean,      // Modified date hover
  hover_created_at: boolean,       // Created date hover
  hover_total: boolean,             // Total count hover
  showArrowSort: Record<string, boolean> // Sort arrow visibility
}

Computed Properties ​

getShareTitle ​

Returns share title based on selection.

typescript
computed(() => {
  if (share_items.value.length === 1) {
    return share_items.value[0].folder_name || ""
  }
  return ""
})

getShareDescription ​

Returns share description based on selection.

typescript
computed(() => {
  if (share_items.value.length === 1) {
    return share_items.value[0]?.description || ""
  }
  return ""
})

Methods ​

setCachedViewMode(mode: 'list' | 'grid') ​

Sets view mode and caches preference.

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

sortFolders(field: string, toggle: boolean) ​

Handles column sorting (client-side).

typescript
function sortFolders(field: string, toggle: boolean) {
  // Updates sort state
  // Performs client-side sorting
  // Updates arrow visibility
}

isActiveSort(field: string) ​

Returns CSS class for active sort column.

typescript
function isActiveSort(field: string): string {
  // Returns active class if field is sorted
}

formatDate(date: string) ​

Formats date for display.

typescript
function formatDate(date: string): string {
  // Formats date string
}

trackFolderClick(folder: Folder) ​

Tracks folder click analytics.

typescript
function trackFolderClick(folder: Folder) {
  // Tracks analytics event
  // Navigates to folder details
}

fileSelect(payload: any) ​

Handles folder selection.

typescript
function fileSelect(payload: any) {
  // Handles folder selection logic
}

downloadFolder() ​

Handles folder download.

typescript
async function downloadFolder() {
  // Downloads selected folder(s)
}

closeShareDialog() ​

Closes share dialog and resets state.

typescript
function closeShareDialog() {
  shareDialog.value = false
  share_items.value = []
}

getTotalAssets(folder: Folder) ​

Returns formatted total assets string.

typescript
function getTotalAssets(folder: Folder): string {
  // Returns formatted string with subfolders and assets count
}

User Interactions ​

  1. View Modes

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

  2. Sorting

    • Sort by Name, Date Modified, Date Added, Total Count
    • Click column headers to sort
    • Visual sort indicators

  3. Folder Navigation

    • Click folder to navigate to folder details
    • Navigate to subfolders

  4. Folder Actions

    • Share folder via menu
    • Download folder via menu
    • Folder options menu

  5. Empty State

    • Message displayed when no folders
    • Helpful description

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

Lifecycle Hooks ​

onMounted ​

Initializes folders data.

typescript
onMounted(async () => {
  // Fetches folders list
  // Sets up view mode from cache
})

API Endpoints ​

Get Folders List ​

  • Endpoint: GET /folders (via useFolders composable)
  • Parameters:
    typescript
    {
  workspace_id: string,
  page?: number,
  sort_by?: string,
  sort_value?: string
}
  • Response: Array of folder objects

User Flow ​

  1. User navigates to folders list page
  2. Page fetches folders list
  3. User can:
    • Toggle grid/list view
    • Sort by columns
    • Click folders to navigate to details
    • Share folders
    • Download folders
    • Scroll for more folders
  4. Empty state shown when no folders exist

Performance Optimizations ​

  1. View Mode Caching: User preference cached in localStorage
  2. Client-Side Sorting: Sorts loaded folders without API call
  3. Scroll Throttling: Scroll events handled efficiently
  4. Lazy Loading: Folders loaded on demand

Notes for Development ​

  • Page requires authentication (handled by global auth middleware)
  • View mode preference cached in localStorage
  • Client-side sorting only affects loaded folders
  • Empty state provides helpful information
  • Folder cards show asset and subfolder counts
  • Share dialog supports single folder sharing
  • Download supports single folder download