Appearance

Folders Page ​

File Information ​

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

Purpose ​

The Folders page displays and manages root-level folders in the DAM workspace. Users can create, view, organize, share, and manage folders with various permissions.

Key Features ​

  1. Folder Display

    • Grid view and list view
    • Folder cards with thumbnails
    • Folder metadata (asset count, subfolder count)
    • Uncategorized files folder

  2. Folder Operations

    • Create new folders
    • Rename folders
    • Delete folders
    • Move folders
    • Set folder permissions
    • Share folders
    • Download folders

  3. View Modes

    • Grid view (default)
    • List view
    • View mode preference saved

  4. Selection

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

  5. Real-time Updates

    • Live updates via Pusher
    • Automatic refresh on changes

Components Used ​

  • FolderCard - Folder display card (~/components/dam/Folders/FolderCard.vue)
  • ShareAssetDialog - Share folder dialog (~/components/dam/Dialogs/ShareAssetDialog)
  • DeleteDialog - Confirmation dialog for deletion (~/components/theme/global/Dialog/ConfirmationDialog.vue)
  • EditFolderDailog - Create/rename folder dialog (~/components/dam/Dialogs/CreateCollageDialog.vue)
  • PermissionDialog - Permission management dialog (~/components/dam/Dialogs/PermissionDialog)
  • MoveFolderDialog - Move folder dialog (~/components/dam/Dialogs/FolderDialogs/FolderDialog.vue)
  • Skeleton loaders for loading states

Data Properties ​

javascript
{
  viewMode: string,             // 'grid' or 'list' (from viewModeCache mixin)
  loading: boolean,             // Initial loading state
  selectedFolder: object,       // Selected folder for operations
  permissionDialog: boolean,    // Permission dialog visibility
  deleteDialog: boolean,        // Delete dialog visibility
  shareDialog: boolean,         // Share dialog visibility
  currentPage: number,          // Current page for pagination
  lastPage: number,            // Last page number
  workspace_id: string,         // Workspace ID from route params
  renaming: boolean,            // Renaming state
  renameDialog: boolean,        // Rename dialog visibility
  selected_items: array,       // Selected items array
  download_items: array,       // Items to download
  share_items: array,          // Items to share
  delete_items: array,         // Items to delete
  foldersList: array,          // Folder list
  select_all: boolean,         // Select all flag
  loadMore: boolean,           // Load more indicator
  pageScrolling: boolean,      // Page scrolling state
  page_sort_value: string,    // Sort field value
  page_sort_by: string,       // Sort order (ASC/DESC)
  total_folders: number,       // Total folders count
  uncategoriseObj: object,     // Uncategorized files object
  download_all: boolean,       // Download all flag
  move_folder_dialog: boolean, // Move folder dialog visibility
  hover_name: boolean,         // Hover state for name column
  hover_total: boolean,        // Hover state for total column
  hover_modified_at: boolean,  // Hover state for modified date
  hover_created_at: boolean    // Hover state for created date
}

Mixins Used ​

  • commonFunctions - Common utility functions (~/mixins/common-functions)
  • viewModeCache - View mode caching functionality (~/mixins/view-mode-cache)

Computed Properties ​

  • canCreateFolders - Permission to create folders
  • canShareDownload - Permission to share/download
  • canMoveContent - Permission to move content
  • canDeleteContent - Permission to delete content

Methods ​

fetchFolders(flag = false, noSort = false) ​

Fetches folders from API:

  • Loads root-level folders
  • Handles pagination
  • Updates folder list
  • Sorts folders (unless noSort is true)

fetchUnCategorised(flag = true) ​

Fetches uncategorized files:

  • Loads files without folder assignment
  • Creates virtual "Uncategorized" folder
  • Updates folder list

setViewMode(mode) ​

Changes view mode:

  • Updates current mode
  • Saves preference to cache
  • Refreshes view

addFolderDialog() ​

Opens create folder dialog:

  • Initializes dialog
  • Resets form
  • Shows dialog

handleScroll(flag, main) ​

Handles infinite scroll:

  • Detects scroll position
  • Loads more folders when needed
  • Updates pagination state

toggleSelect(folder) ​

Toggles folder selection:

  • Adds/removes from selection
  • Updates UI state

toggleSelectAll() ​

Toggles select all:

  • Selects/deselects all folders
  • Updates selection state

fileSelect(asset) ​

Handles file selection:

  • Updates file selection state
  • Emits selection event

downloadFolder(flag, selected) ​

Downloads folder(s):

  • Prepares download
  • Calls download API
  • Handles progress

deleteFolder() ​

Deletes selected folders:

  • Confirms deletion
  • Calls delete API
  • Updates folder list

renameFolder(payload) ​

Renames folder:

  • Validates new name
  • Calls rename API
  • Updates folder list

onPermissionUpdated(folder, permission) ​

Handles permission update:

  • Updates folder permissions
  • Refreshes folder list
  • Updates UI

openMoveFolder(folder) ​

Opens move folder dialog:

  • Initializes move dialog
  • Shows folder hierarchy
  • Handles move operation

moveFolders(moveTo) ​

Moves folders to destination:

  • Validates destination
  • Calls move API
  • Updates folder list

sortFolders(sortField, isSort) ​

Sorts folders:

  • Updates sort field
  • Applies sorting
  • Refreshes view

trackFolderClick(folder) ​

Tracks folder click analytics:

  • Dispatches analytics event
  • Records user interaction

API Endpoints ​

  • GET /dam/folders - Fetch root folders
  • POST /dam/folders - Create folder
  • PUT /dam/folders/:id - Update folder
  • DELETE /dam/folders/:id - Delete folder
  • POST /dam/folders/:id/move - Move folder
  • POST /dam/folders/:id/share - Share folder
  • GET /dam/folders/:id/download - Download folder
  • GET /dam/uncategorized - Fetch uncategorized files

User Interactions ​

  1. View Folders

    • Browse folders in grid or list view
    • Scroll to load more folders
    • Switch between view modes

  2. Create Folder

    • Click "New Folder" button
    • Enter folder name
    • Submit to create

  3. Folder Actions

    • Click folder to open
    • Right-click or menu for actions
    • Select multiple folders for bulk operations

  4. Manage Folders

    • Rename folders
    • Move folders
    • Delete folders
    • Set permissions
    • Share folders

Real-time Features ​

  • Listens to Pusher events:
    • folder.created - New folder created
    • folder.updated - Folder updated
    • folder.deleted - Folder deleted
    • folder.moved - Folder moved

Styling ​

  • Uses custom CSS from assets/css/collages-list.css
  • Responsive design for mobile/tablet/desktop
  • Skeleton loaders for loading states
  • Smooth animations for transitions

Notes for Development ​

  • Folders are fetched with pagination support
  • View mode preference is cached
  • Uncategorized files are displayed as a special folder
  • Bulk operations require proper permissions
  • Real-time updates require Pusher connection
  • Folder operations are tracked for analytics