Appearance

Search Bulk Actions Component ​

File Information ​

  • Path: components/dam/SearchBulkActions.vue
  • Purpose: Bulk action toolbar for performing operations on multiple selected search results

Overview ​

The SearchBulkActions component provides a toolbar with bulk operation buttons that appear when items are selected in search results. It supports bulk operations like download, share, add to collage, tag management, custom field updates, move, and delete. All operations are permission-based.

Key Features ​

  1. Bulk Operations

    • Bulk download
    • Bulk share
    • Add to collage
    • Tag management
    • Custom field updates
    • Move to folder
    • Delete

  2. Permission-Based Actions

    • Actions filtered by user permissions
    • Share/download (if canShareDownload)
    • Tag management (if canAddTags)
    • Custom fields (if canAddCustomFields)
    • Move content (if canMoveContent)
    • Delete (if canDeleteContent)
    • Create collages (if canCreateCollages)

  3. Selection Management

    • Selection count display
    • Select all functionality
    • Clear selection
    • Selection state management

  4. Progress Indicators

    • Loading states for operations
    • Progress feedback
    • Operation status

Props ​

javascript
{
  selectedItemsCount: {
    type: Number,
    default: 0,
    description: 'Number of selected items'
  },
  selectedItems: {
    type: Array,
    default: () => [],
    description: 'Array of selected item objects'
  },
  canShareDownload: {
    type: Boolean,
    default: false,
    description: 'Permission to share/download'
  },
  canAddTags: {
    type: Boolean,
    default: false,
    description: 'Permission to add tags'
  },
  canAddCustomFields: {
    type: Boolean,
    default: false,
    description: 'Permission to add custom fields'
  },
  canMoveContent: {
    type: Boolean,
    default: false,
    description: 'Permission to move content'
  },
  canDeleteContent: {
    type: Boolean,
    default: false,
    description: 'Permission to delete content'
  },
  canCreateCollages: {
    type: Boolean,
    default: false,
    description: 'Permission to create collages'
  }
}

Events ​

javascript
{
  'select-all': () => {},                 // Select all items
  'clear-selection': () => {},            // Clear selection
  'bulk-download': (items) => {},         // Bulk download
  'bulk-share': (items) => {},            // Bulk share
  'bulk-add-to-collage': (items) => {},   // Add to collage
  'bulk-tag': (items) => {},              // Bulk tag management
  'bulk-custom-field': (items) => {},     // Bulk custom field update
  'bulk-move': (items) => {},             // Bulk move
  'bulk-delete': (items) => {}            // Bulk delete
}

Data Properties ​

javascript
{
  downloadSlctd: boolean,        // Download in progress
  shareSlctd: boolean,          // Share in progress
  tagSlctd: boolean,            // Tag operation in progress
  moveSlctd: boolean,            // Move operation in progress
  deleteSlctd: boolean          // Delete operation in progress
}

Methods ​

handleSelectAllClick() ​

Handles select all click:

  • Toggles selection of all items
  • Emits select-all event
  • Updates selection state

handleShareClick() ​

Handles bulk share:

  • Opens share dialog
  • Passes selected items
  • Emits bulk-share event
  • Shows loading state

downloadFile() ​

Handles bulk download:

  • Initiates download for selected items
  • Shows progress indicator
  • Handles download completion
  • Emits bulk-download event

handleAddToCollageClick() ​

Handles add to collage:

  • Opens collage selection dialog
  • Adds selected items to collage
  • Emits bulk-add-to-collage event
  • Shows success message

handleTaggingButtonClick() ​

Handles bulk tag management:

  • Opens tag dialog
  • Applies tags to selected items
  • Emits bulk-tag event
  • Updates tag state

handleCustomFieldClick() ​

Handles bulk custom field update:

  • Opens custom field dialog
  • Updates custom fields for selected items
  • Emits bulk-custom-field event

handleMoveClick() ​

Handles bulk move:

  • Opens folder selection dialog
  • Moves selected items to folder
  • Emits bulk-move event
  • Shows loading state

handleDeleteClick() ​

Handles bulk delete:

  • Shows confirmation dialog
  • Deletes selected items
  • Emits bulk-delete event
  • Shows loading state

Bulk Operation Flow ​

  1. Selection

    • User selects multiple items
    • Selection count displayed
    • Bulk actions toolbar appears

  2. Operation Selection

    • User clicks bulk action button
    • Permission checked
    • Operation dialog opens

  3. Operation Execution

    • Operation performed on all selected items
    • Progress tracked
    • Success/error handling

  4. Completion

    • Selection cleared
    • Results refreshed
    • Success message shown

API Endpoints ​

  • POST /dam/assets/bulk-download - Bulk download

    • Request Body:
      json
      {
  "asset_ids": [1, 2, 3]
}
    • Response: Download URL or file stream

  • POST /dam/assets/bulk-share - Bulk share

    • Request Body:
      json
      {
  "asset_ids": [1, 2, 3],
  "share_options": {}
}

  • POST /dam/assets/bulk-tags - Bulk tag assignment

    • Request Body:
      json
      {
  "asset_ids": [1, 2, 3],
  "tag_ids": [1, 2]
}

  • POST /dam/assets/bulk-move - Bulk move

    • Request Body:
      json
      {
  "asset_ids": [1, 2, 3],
  "folder_id": 123
}

  • DELETE /dam/assets/bulk-delete - Bulk delete

    • Request Body:
      json
      {
  "asset_ids": [1, 2, 3]
}

Usage Examples ​

Basic Usage ​

vue
<template>
  <SearchBulkActions
    :selected-items-count="selectedCount"
    :selected-items="selectedItems"
    :can-share-download="canShareDownload"
    :can-add-tags="canAddTags"
    @bulk-download="handleBulkDownload"
    @bulk-share="handleBulkShare"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedCount: 0,
      selectedItems: [],
      canShareDownload: true,
      canAddTags: true
    }
  },
  methods: {
    handleBulkDownload(items) {
      // Handle bulk download
      this.downloadAssets(items)
    },
    handleBulkShare(items) {
      // Handle bulk share
      this.openShareDialog(items)
    }
  }
}
</script>

Styling ​

  • Uses custom CSS classes:
    • grid-list-view - Main container
    • totalSelected - Selection count chip
    • h-bg-purple-light - Action button styling
    • pointer - Clickable elements
    • Responsive design for mobile/tablet/desktop

Integration Points ​

  • Search Page: Main search interface
  • Share Dialogs: Share operation dialogs
  • Tag Dialogs: Tag management dialogs
  • Folder Dialogs: Move operation dialogs
  • Permission System: Access control

Notes for Development ​

  • Component only shows when items are selected
  • All actions are permission-gated
  • Progress indicators show operation status
  • Bulk operations handle errors gracefully
  • Selection state persists during operations
  • Operations can be cancelled if needed