Appearance

Common Functions Mixin ​

File Information ​

  • Path: mixins/common-functions.js
  • Purpose: Provides general utility functions and analytics tracking

Methods ​

dispatchAnalytics(payload) ​

Dispatches analytics event to backend.

Parameters:

  • payload (Object) - Analytics event data

Example:

javascript
this.dispatchAnalytics({
  action: 'view_asset',
  asset_id: asset.id,
  workspace_id: workspace.id
})

Features:

  • Collects browser and location information
  • Encodes and obfuscates transaction data
  • Sends to backend API endpoint

dispatchAnalyticsShare(payload) ​

Dispatches share-specific analytics event.

Parameters:

  • payload (Object) - Share analytics data

Example:

javascript
this.dispatchAnalyticsShare({
  action: 'share_asset',
  asset_id: asset.id,
  share_type: 'link'
})

getErrorMessage(error) ​

Extracts error message from error object.

Parameters:

  • error (Error|Object) - Error object

Returns: String - Error message

Example:

javascript
try {
  await this.$axios.post('/api/endpoint')
} catch (error) {
  const message = this.getErrorMessage(error)
  this.$snackbar.error(message)
}

formatFileSize(bytes) ​

Formats file size in human-readable format.

Parameters:

  • bytes (Number) - File size in bytes

Returns: String - Formatted file size (e.g., "1.5 MB")

Example:

javascript
const size = this.formatFileSize(1048576) // "1 MB"

formatDate(date, format) ​

Formats date according to specified format.

Parameters:

  • date (Date|String) - Date to format
  • format (String) - Date format string

Returns: String - Formatted date

Example:

javascript
const formatted = this.formatDate(new Date(), 'YYYY-MM-DD')

debounce(func, wait) ​

Creates a debounced function.

Parameters:

  • func (Function) - Function to debounce
  • wait (Number) - Wait time in milliseconds

Returns: Function - Debounced function

Example:

javascript
const debouncedSearch = this.debounce(this.search, 300)

throttle(func, limit) ​

Creates a throttled function.

Parameters:

  • func (Function) - Function to throttle
  • limit (Number) - Time limit in milliseconds

Returns: Function - Throttled function

Analytics Payload Structure ​

javascript
{
  action: string,           // Action name
  asset_id: string,         // Asset identifier (optional)
  folder_id: string,        // Folder identifier (optional)
  collage_id: string,       // Collage identifier (optional)
  workspace_id: string,     // Workspace identifier
  userAgentAndLocation: {   // Browser and location info
    location: object,
    agent: object
  }
}

Browser Information Collection ​

The mixin automatically collects:

  • User agent information
  • Geographic location (via API)
  • Browser details
  • OS information

Data Encoding ​

Analytics data is:

  1. JSON stringified
  2. Base64 encoded
  3. String reversed (obfuscation)
  4. Sent to backend

API Endpoints ​

  • POST /add-transaction-activity - Submit analytics event
  • GET /api/browser-os - Get browser and location info

Usage in Components ​

vue
<script>
import commonFunctions from '~/mixins/common-functions'

export default {
  mixins: [commonFunctions],
  methods: {
    async handleAssetView(asset) {
      await this.dispatchAnalytics({
        action: 'view_asset',
        asset_id: asset.id
      })
    }
  }
}
</script>