Appearance

Folder Details Page ​

File Information ​

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

Purpose ​

The Folder Details page displays the contents of a specific folder, including subfolders and assets. Users can manage folder contents, navigate subfolders, and perform bulk operations on items within the folder.

Key Features ​

  1. Folder Contents Display

    • Subfolders listing
    • Assets listing
    • Grid and list view modes
    • Breadcrumb navigation

  2. Folder Operations

    • Create subfolders
    • Rename folder
    • Delete folder
    • Move folder
    • Set folder permissions
    • Share folder

  3. Asset Operations

    • View assets
    • Rename assets
    • Move assets
    • Delete assets
    • Add to collage
    • Download assets

  4. Bulk Operations

    • Multi-select items
    • Bulk download
    • Bulk delete
    • Bulk share
    • Bulk move

  5. Real-time Updates

    • Live updates via Pusher
    • Automatic refresh on changes

Components Used ​

  • FolderCard - Folder display card
  • FileListingCard - Asset display card
  • ShareAssetDialog - Share dialog
  • DeleteDialog - Confirmation dialog
  • CreateFolderDialog - Create/rename dialog
  • PermissionDialog - Permission management
  • MoveFolderDialog - Move asset dialog
  • SaveToCollection - Add to collage dialog

Data Properties ​

javascript
{
  folder: object,            // Current folder data
  folderAssets: array,      // Assets in folder
  subFolders: array,       // Subfolders
  selectedItems: array,    // Selected items
  viewMode: string,       // 'grid' or 'list'
  loading: boolean,        // Loading state
  currentPage: number,    // Pagination
  lastPage: number        // Last page
}

Methods ​

fetchFolder(flag = 'no-sort') ​

Fetches folder contents from API

handleScroll(flag = 'main') ​

Handles infinite scroll loading

toggleSelect(file) ​

Toggles item selection

toggleSelectAll() ​

Selects/deselects all items

openAsset(asset) ​

Opens asset details page

openMoveFolder(asset) ​

Opens move dialog

moveFolders(moveTo) ​

Moves items to destination

changeFileName(newName, item) ​

Renames file/folder

deleteFile() ​

Deletes selected items

onPermissionUpdated(permission) ​

Updates folder permissions

API Endpoints ​

  • GET /dam/folders/:id - Fetch folder details
  • GET /dam/folders/:id/contents - Fetch folder contents
  • POST /dam/folders/:id/subfolders - Create subfolder
  • PUT /dam/folders/:id - Update folder
  • DELETE /dam/folders/:id - Delete folder
  • POST /dam/folders/:id/move - Move folder