Skip to content

DAM Trash Page ​

File Information ​

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

Purpose ​

The Trash page displays deleted assets and folders that can be restored or permanently deleted. It provides a safety net for accidental deletions and allows workspace administrators to manage deleted content. Users can restore items to their original location or permanently delete them.

Key Features ​

  1. Deleted Items Display

    • Shows deleted assets
    • Shows deleted folders
    • Displays deletion date and time
    • Shows original location information
  2. Restore Functionality

    • Restore individual items
    • Bulk restore selected items
    • Restore to original location
    • Permission-based restore access
  3. Permanent Deletion

    • Permanently delete individual items
    • Bulk permanent deletion
    • Empty trash functionality
    • Confirmation dialogs for safety
  4. Bulk Operations

    • Select multiple items
    • Bulk restore
    • Bulk permanent delete
    • Selection count indicator
  5. Filtering & Search

    • Filter by item type (assets/folders)
    • Search deleted items
    • Sort by deletion date
    • View original location

Components Used ​

  • AssetList - Asset grid/list display for deleted assets
  • FolderList - Folder list display for deleted folders
  • DeleteDialog - Confirmation dialog for permanent deletion
  • RestoreIcon - Restore action icon
  • DeleteIcon - Delete action icon
  • OptionIcon - Menu options icon
  • Skeleton loaders for loading states

Data Properties ​

javascript
{
  contentLoading: boolean,      // Initial content loading state
  files: array,                 // Deleted assets array
  folders: array,              // Deleted folders array
  selectedCount: number,        // Number of selected items
  selectedFiles: array,        // Selected asset IDs
  selectedFolders: array,       // Selected folder IDs
  restoring: boolean,          // Restore operation in progress
  deleting: boolean,           // Delete operation in progress
  pageScrolling: boolean,     // Scroll state indicator
  canRestoreTrash: boolean,    // Permission to restore items
  canDeleteTrash: boolean,     // Permission to permanently delete
  canEmptyTrash: boolean,      // Permission to empty trash
  mainTrashMenu: array,        // Trash menu options
  pagination: {
    page: number,              // Current page
    limit: number,             // Items per page
    hasMore: boolean           // More items available
  }
}

Mixins Used ​

  • fileSelection - File selection utilities
  • commonFunctions - Common utility functions
  • fileType - File type utilities
  • imageStyle - Image styling utilities

Computed Properties ​

  • selectedCount - Total count of selected items (files + folders)
  • canRestoreTrash - Permission check for restore (typically manager/admin)
  • canDeleteTrash - Permission check for permanent delete
  • canEmptyTrash - Permission check for emptying trash
  • mainTrashMenu - Menu options based on permissions and state

Methods ​

fetchTrashItems(flag = false) ​

Fetches deleted items:

  • Loads deleted assets and folders from API
  • Handles pagination
  • Updates files and folders arrays
  • Handles infinite scroll
  • Merges results for display

selectionClick(action) ​

Handles bulk selection actions:

  • 'restore': Restores selected items
  • 'delete': Permanently deletes selected items
  • Shows confirmation for delete operations
  • Updates UI state

restoreItem(item, type) ​

Restores a single item:

  • item: Item object (asset or folder)
  • type: Item type ('file' or 'folder')
  • Calls restore API
  • Updates item status
  • Refreshes trash list
  • Shows success notification

restoreSelected() ​

Restores all selected items:

  • Iterates through selected items
  • Calls restore for each item
  • Handles batch restore API if available
  • Updates selection state
  • Shows progress indicator

permanentDeleteItem(item, type) ​

Permanently deletes a single item:

  • Shows confirmation dialog
  • Calls permanent delete API
  • Removes item from trash list
  • Updates counts
  • Shows success notification

permanentDeleteSelected() ​

Permanently deletes all selected items:

  • Shows confirmation dialog
  • Calls bulk delete API
  • Removes items from trash list
  • Updates counts
  • Shows success notification

emptyTrash() ​

Empties entire trash:

  • Shows confirmation dialog
  • Calls empty trash API
  • Clears all deleted items
  • Updates UI
  • Shows success notification

handleScroll(type) ​

Handles infinite scroll:

  • Detects scroll position
  • Loads more items when near bottom
  • Updates pagination state
  • Prevents duplicate requests

toggleSelectAll(select) ​

Toggles selection of all visible items:

  • Selects/deselects all files and folders
  • Updates selection arrays
  • Updates selection count

API Endpoints ​

  • GET /dam/trash - Fetch deleted items

    • Query Parameters:
      • page: Page number
      • limit: Items per page
      • workspace_id: Workspace ID
    • Response: Object with files and folders arrays
  • POST /dam/trash/restore - Restore item(s)

    • Request Body:
      json
      {
        "item_ids": [1, 2, 3],
        "item_types": ["file", "folder", "file"]
      }
    • Response: Success message and restored items
  • DELETE /dam/trash/delete - Permanently delete item(s)

    • Request Body:
      json
      {
        "item_ids": [1, 2, 3],
        "item_types": ["file", "folder", "file"]
      }
    • Response: Success message
  • DELETE /dam/trash/empty - Empty entire trash

    • Request: Workspace ID
    • Response: Success message

User Interactions ​

  1. Viewing Trash

    • Navigate to trash page
    • View deleted assets and folders
    • See deletion date and original location
  2. Item Selection

    • Click items to select
    • Use "Select All" for bulk selection
    • Selection count displayed
  3. Restore Operations

    • Click restore icon on item
    • Or select multiple and click bulk restore
    • Items restored to original location
    • Success notification shown
  4. Permanent Deletion

    • Click delete icon on item
    • Or select multiple and click bulk delete
    • Confirmation dialog shown
    • Items permanently deleted
    • Success notification shown
  5. Empty Trash

    • Click trash menu option
    • Confirmation dialog shown
    • All items permanently deleted
    • Trash emptied

Permission-Based Features ​

  • Restore: Typically available to managers and admins
  • Permanent Delete: Available to users with delete permission
  • Empty Trash: Usually restricted to workspace admins
  • View Trash: Available to all DAM users

Trash Retention ​

  • Items remain in trash for a configurable period (typically 30 days)
  • Automatic permanent deletion after retention period
  • Manual permanent deletion available before retention expires
  • Original location information preserved for restore

Styling ​

  • Uses custom CSS classes:
    • collage-body - Main container
    • collageDetailTitle - Page title area
    • grid-list-view - Item grid/list container
    • totalSelected - Selection count chip
    • optionMenuList - Menu options list
    • Responsive design for mobile/tablet/desktop

State Management ​

  • Integrates with DAM store
  • Updates store after restore operations
  • Syncs with asset/folder lists after restore
  • Removes items from store after permanent delete

Notes for Development ​

  • Trash items retain original location information
  • Restore operations may fail if original location no longer exists
  • Permanent deletion is irreversible
  • Bulk operations are more efficient than individual operations
  • Trash retention period is configurable per workspace
  • Empty trash requires admin confirmation