Appearance

Add Tags Component ​

File Information ​

  • Path: components/dam/AssetList/AddTags.vue
  • Purpose: Component for adding and managing tags on assets in the asset list context

Overview ​

The AddTags component provides tag management functionality for assets. It wraps the TagsBox dialog component and handles tag addition, removal, and search. The component is used throughout the application wherever tags need to be managed on assets, including asset lists, asset details, and bulk operations.

Key Features ​

  1. Tag Management

    • Add tags to assets
    • Remove tags from assets
    • Search existing tags
    • Create new tags on-the-fly

  2. Tag Display

    • Shows currently assigned tags
    • Tag chips with colors
    • Tag removal buttons
    • Tag count display

  3. Tag Search

    • Search available tags
    • Autocomplete suggestions
    • Filter tags by name
    • Popular tags display

  4. Validation

    • Tag name validation (minimum length)
    • Duplicate tag detection
    • Tag format validation
    • Error handling

Props ​

javascript
{
  tags: {
    type: Array,
    default: () => [],
    description: 'Array of available tags for the workspace'
  },
  file: {
    type: Object,
    default: () => ({}),
    description: 'Asset object to add tags to'
  }
}

Events ​

javascript
{
  'tags-updated': (tags) => {},      // Tags updated on asset
  'tag-added': (tag) => {},          // Tag added to asset
  'tag-removed': (tag) => {},        // Tag removed from asset
  'tag-created': (tag) => {},        // New tag created
  'add-tags-duplicate': (isDuplicate) => {} // Duplicate tag detected
}

Data Properties ​

javascript
{
  tagsAdded: array,              // Tags selected/added
  tagSearchResult: array,         // Search results
  openTagSearchList: boolean,    // Tag search list visibility
  loading: boolean,              // Loading state
  searching: boolean,             // Search in progress
  workspaceId: string           // Workspace ID
}

Components Used ​

  • TagsBox - Tag selection dialog (~/components/dam/Dialogs/AddTags/TagsBox.vue)

Mixins Used ​

  • commonFunctions - Common utility functions (~/mixins/common-functions)

Methods ​

addTag() ​

Adds tags to asset:

  • Validates selected tags
  • Filters and formats tag names
  • Checks for duplicates
  • Calls API to assign tags
  • Updates local state
  • Emits tags-updated event
  • Shows success/error messages

handleRemoveTag(tag) ​

Handles tag removal:

  • Removes tag from tagsAdded array
  • Updates UI
  • Emits tag-removed event

removeTag(tag) ​

Removes tag from asset:

  • Calls API to remove tag
  • Updates local state
  • Refreshes tag list
  • Emits tags-updated event

tagSearch(query) ​

Searches for tags:

  • Debounced search function
  • Calls tag search API
  • Updates tagSearchResult
  • Filters available tags
  • Shows search results

updateAddedTags(tags) ​

Updates added tags list:

  • Syncs tagsAdded with TagsBox component
  • Updates local state
  • Validates tag list

closeTagSearchMenu() ​

Closes tag search menu:

  • Hides search results
  • Resets search state
  • Updates UI

API Endpoints ​

  • POST /dam/assets/:id/tags - Add tags to asset

    • Request Body:
      json
      {
  "tags": ["tag1", "tag2", "tag3"]
}
    • Response: Updated asset with tags

  • DELETE /dam/assets/:id/tags - Remove tags from asset

    • Request Body:
      json
      {
  "tag_ids": [1, 2]
}
    • Response: Success message

  • GET /dam/tags/search - Search tags

    • Query Parameters:
      • q: Search query
      • workspace_id: Workspace ID
    • Response: Array of matching tags

  • POST /dam/tags - Create new tag

    • Request Body:
      json
      {
  "name": "new-tag",
  "color": "#FF5722"
}
    • Response: Created tag object

Tag Validation ​

  • Minimum Length: Tags must be at least 3 characters
  • Format: Tags are trimmed and URL-decoded
  • Duplicates: Duplicate tags are detected and prevented
  • Workspace Scope: Tags are workspace-specific

Usage Examples ​

Basic Usage ​

vue
<template>
  <AddTags
    :tags="availableTags"
    :file="selectedAsset"
    @tags-updated="handleTagsUpdate"
  />
</template>

<script>
export default {
  components: {
    AddTags: () => import('~/components/dam/AssetList/AddTags.vue')
  },
  methods: {
    handleTagsUpdate(tags) {
      // Handle tags update
      this.$store.dispatch('dam/updateAssetTags', {
        assetId: this.selectedAsset.id,
        tags: tags
      })
    }
  }
}
</script>

With Event Bus ​

The component uses EventBus for duplicate tag detection:

javascript
// Listen for duplicate tags
EventBus.$on('add-tags-duplicate', (isDuplicate) => {
  if (isDuplicate) {
    this.$snackbar.warning('Tag already exists on this asset')
  }
})

Integration Points ​

  • TagsBox Component: Tag selection interface
  • EventBus: Duplicate tag detection
  • Common Functions Mixin: Utility functions
  • DAM Store: Asset state updates
  • Analytics: Tag operation tracking

Error Handling ​

  • Validation Errors: Shown immediately
  • Duplicate Tags: Warning message via EventBus
  • API Errors: Error snackbar notification
  • Network Errors: Retry option provided

Notes for Development ​

  • Component wraps TagsBox for consistent UI
  • Tag names are URL-decoded before processing
  • Minimum tag length is enforced (3 characters)
  • Duplicate detection prevents adding same tag twice
  • Tags are trimmed of whitespace
  • Component integrates with EventBus for cross-component communication