Appearance

Share Asset Dialog ​

File Information ​

  • Path: components/dam/Dialogs/ShareAssetDialog/index.vue
  • Purpose: Create and manage share links and embed codes for assets, folders, and collages

Overview ​

The Share Asset Dialog component provides a user-friendly interface for creating share links and embed codes. It supports sharing assets, folders, and collages with basic settings and links to advanced share options.

Key Features ​

  1. Share Link Generation

    • Generate share links for assets
    • Generate share links for folders
    • Generate share links for collages
    • Copy share link to clipboard

  2. Embed Code Generation

    • Generate embed codes for assets
    • Customize embed dimensions
    • Copy embed code to clipboard
    • Preview embed code

  3. Share Preview

    • Preview shared asset
    • Asset thumbnail display
    • Asset information display

  4. Tab Navigation

    • Link tab for share links
    • Embed tab for embed codes
    • Seamless switching

Props ​

javascript
{
  dialog: {
    type: Boolean,
    default: false
  },
  asset: {
    type: Object,
    required: true
    // Asset, folder, or collage object
  },
  assetType: {
    type: String,
    default: 'asset'
    // 'asset', 'folder', 'collage'
  },
  workspaceId: {
    type: [String, Number],
    required: true
  }
}

Data Properties ​

javascript
{
  shareLink: null,      // Share link object
  embedCode: null,      // Embed code object
  shareUrl: '',        // Share URL string
  embedCodeHtml: '',   // Embed code HTML string
  loading: false,      // Loading state
  activeTab: 'link'    // Active tab ('link' or 'embed')
}

Computed Properties ​

shareUrlDisplay ​

Returns formatted share URL for display

Checks if share link can be generated

canGenerateEmbed ​

Checks if embed code can be generated

Methods ​

Generates share link:

  • Calls share link API
  • Updates share link state
  • Updates share URL
  • Handles errors

generateEmbedCode() ​

Generates embed code:

  • Calls embed code API
  • Updates embed code state
  • Updates embed HTML
  • Handles errors

Copies share link to clipboard:

  • Copies URL to clipboard
  • Shows success message
  • Handles errors

copyEmbedCode() ​

Copies embed code to clipboard:

  • Copies HTML to clipboard
  • Shows success message
  • Handles errors

openAdvancedSettings() ​

Opens advanced share dialog:

  • Emits open-advanced event
  • Passes share link data
  • Closes current dialog

Events ​

  • close - Dialog closed
  • open-advanced - Advanced settings requested
  • share-created - Share link created
  • embed-created - Embed code created

API Endpoints ​

  • Endpoint: POST /digital-assets/dashboard/generate-share-assets-url
  • Request Body:
    json
    {
  "workspace_id": 123,
  "asset_id": 456,
  "asset_type": "asset"
}
  • Response: Share link object with URL

Generate Embed Code ​

  • Endpoint: POST /digital-assets/embed-code/generate
  • Request Body:
    json
    {
  "workspace_id": 123,
  "asset_id": 456
}
  • Response: Embed code object with HTML

Usage Examples ​

Basic Usage ​

vue
<template>
  <ShareAssetDialog
    :dialog="showShareDialog"
    :asset="selectedAsset"
    :asset-type="'asset'"
    :workspace-id="workspaceId"
    @close="showShareDialog = false"
    @open-advanced="openAdvancedShare"
  />
</template>

<script>
import ShareAssetDialog from '~/components/dam/Dialogs/ShareAssetDialog/index.vue'

export default {
  components: {
    ShareAssetDialog
  },
  data() {
    return {
      showShareDialog: false,
      selectedAsset: null
    }
  },
  methods: {
    openAdvancedShare(shareLink) {
      // Open advanced share dialog
    }
  }
}
</script>

Integration Points ​

  • Asset Components: Share from asset cards
  • Folder Components: Share folders
  • Collage Components: Share collages
  • Advanced Share Dialog: Advanced settings

Notes for Development ​

  • Component supports multiple asset types
  • Share links generated on demand
  • Embed codes customizable
  • Clipboard API used for copying
  • Links to advanced share dialog