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