Appearance

useShareDialogApi Composable ​

File Information ​

  • Path: app/composables/api/useShareDialogApi.ts
  • Purpose: Share URL generation API for share dialogs
  • Category: API Composable

Overview ​

The useShareDialogApi composable provides functionality to generate share URLs for assets, folders, and collages. This is used in share dialogs to create shareable links.

Functions ​

generateShareUrl ​

Generates a share URL for a resource (asset, folder, or collage).

Signature:

typescript
generateShareUrl(
  endpoint: string, 
  body: any
): Promise<{ data: { share_url: string; id: string; assets_id?: string } }>

Parameters:

  • endpoint: string - API endpoint for share URL generation (varies by resource type)
  • body: any - Share configuration data

Returns:

  • Promise<{ data: { share_url: string; id: string; assets_id?: string } }> - Share URL response

Response Type:

typescript
{
  data: {
    share_url: string      // Generated share URL
    id: string              // Share link ID
    assets_id?: string       // Asset ID (if applicable)
  }
}

Usage:

typescript
const { generateShareUrl } = useShareDialogApi()

// Generate share URL for asset
const response = await generateShareUrl('/digital/share-asset', {
  asset_id: 'asset-123',
  permission: 'view',
  password: 'optional-password',
  expires_at: '2024-12-31'
})

const shareUrl = response.data.share_url
const shareId = response.data.id

Common Endpoints ​

Share Asset ​

Endpoint: /digital/share-asset

Body:

typescript
{
  asset_id: string
  permission?: string      // 'view', 'download', etc.
  password?: string         // Optional password
  expires_at?: string       // Optional expiration date
  title?: string           // Optional share title
  description?: string      // Optional description
}

Share Folder ​

Endpoint: /digital/share-folder

Body:

typescript
{
  folder_id: string
  permission?: string
  password?: string
  expires_at?: string
}

Share Collage ​

Endpoint: /digital/share-collage

Body:

typescript
{
  collage_id: string
  permission?: string
  password?: string
  expires_at?: string
}

Complete Usage Example ​

typescript
const { generateShareUrl } = useShareDialogApi()

// In share dialog component
const shareAsset = async (assetId: string, options: ShareOptions) => {
  try {
    const response = await generateShareUrl('/digital/share-asset', {
      asset_id: assetId,
      permission: options.permission || 'view',
      password: options.password,
      expires_at: options.expiresAt,
      title: options.title,
      description: options.description
    })
    
    return {
      url: response.data.share_url,
      id: response.data.id
    }
  } catch (error) {
    console.error('Failed to generate share URL:', error)
    throw error
  }
}

Integration with Share Dialog ​

vue
<script setup lang="ts">
const { generateShareUrl } = useShareDialogApi()
const snackbar = useSnackbar()

const shareDialog = ref(false)
const shareUrl = ref('')
const loading = ref(false)

const handleShare = async (assetId: string) => {
  loading.value = true
  try {
    const response = await generateShareUrl('/digital/share-asset', {
      asset_id: assetId,
      permission: 'view'
    })
    
    shareUrl.value = response.data.share_url
    shareDialog.value = true
  } catch (error) {
    snackbar.showError('Failed to generate share URL')
  } finally {
    loading.value = false
  }
}

const copyShareUrl = () => {
  navigator.clipboard.writeText(shareUrl.value)
  snackbar.showSuccess('Share URL copied to clipboard')
}
</script>

Error Handling ​

The composable includes error handling:

typescript
catch (error) {
  console.error('Failed to generate share url:', error)
  throw error
}

Use Cases ​

Quick Share ​

typescript
const { generateShareUrl } = useShareDialogApi()

const quickShare = async (assetId: string) => {
  const response = await generateShareUrl('/digital/share-asset', {
    asset_id: assetId,
    permission: 'view'
  })
  
  // Copy to clipboard
  await navigator.clipboard.writeText(response.data.share_url)
  snackbar.showSuccess('Share link copied!')
}

Share with Options ​

typescript
const { generateShareUrl } = useShareDialogApi()

const shareWithOptions = async (
  assetId: string,
  options: {
    password?: string
    expiresAt?: string
    permission: string
  }
) => {
  const response = await generateShareUrl('/digital/share-asset', {
    asset_id: assetId,
    ...options
  })
  
  return response.data
}