Appearance

Current Workspace Mixin ​

File Information ​

  • Path: mixins/currentWorkspace.js
  • Purpose: Workspace ID management and authentication context

Overview ​

The Current Workspace mixin provides easy access to the current workspace ID and authentication context. It automatically determines the workspace ID from either the authentication object or route parameters, and updates when the route changes.

Key Features ​

  1. Workspace ID Access

    • Automatic workspace ID detection
    • Route parameter fallback
    • Authentication context support

  2. Reactive Updates

    • Watches route parameters
    • Updates workspace ID on route change
    • Maintains authentication context

  3. Authentication Integration

    • Accesses authentication object
    • Uses auth ID if available
    • Falls back to route params

Data Properties ​

javascript
{
  auth: object|null  // Authentication object from $_auth() helper
}

Computed Properties ​

workspaceId ​

Returns current workspace ID:

  • First checks auth.id if authentication object exists
  • Falls back to $route.params.workspace_id
  • Returns workspace ID string

Logic:

javascript
workspaceId() {
  return this.auth ? this.auth.id : this.$route.params.workspace_id
}

Watchers ​

$route.params ​

Watches route parameter changes:

  • Updates auth object when route changes
  • Re-evaluates workspace ID
  • Maintains current workspace context

Usage Examples ​

Basic Usage ​

vue
<script>
import currentWorkspace from '~/mixins/currentWorkspace'

export default {
  mixins: [currentWorkspace],
  methods: {
    async fetchData() {
      // Use workspaceId computed property
      const response = await this.$axios.get(
        `/api/workspaces/${this.workspaceId}/assets`
      )
      return response.data
    }
  }
}
</script>

In Template ​

vue
<template>
  <div>
    <p>Current Workspace: {{ workspaceId }}</p>
    <button @click="loadWorkspaceData">Load Data</button>
  </div>
</template>

<script>
import currentWorkspace from '~/mixins/currentWorkspace'

export default {
  mixins: [currentWorkspace],
  methods: {
    async loadWorkspaceData() {
      const data = await this.$axios.get(
        `/api/workspaces/${this.workspaceId}/data`
      )
      // Handle data
    }
  }
}
</script>

With API Calls ​

vue
<script>
import currentWorkspace from '~/mixins/currentWorkspace'

export default {
  mixins: [currentWorkspace],
  async mounted() {
    // Workspace ID automatically available
    await this.loadAssets()
  },
  methods: {
    async loadAssets() {
      try {
        const response = await this.$axios.get(
          `/api/workspaces/${this.workspaceId}/dam/assets`
        )
        this.assets = response.data
      } catch (error) {
        this.$snackbar.error('Failed to load assets')
      }
    }
  }
}
</script>

Authentication Helper ​

The mixin uses $_auth() helper function:

  • Returns authentication object if available
  • Contains workspace/user information
  • Updated on route changes

Route Parameter Fallback ​

If authentication object is not available:

  • Uses $route.params.workspace_id
  • Works with dynamic routes
  • Updates automatically on route change

Integration Points ​

  • All Pages: Workspace-scoped pages
  • API Calls: Workspace-specific endpoints
  • Store: Workspace state management
  • Components: Workspace context

Notes for Development ​

  • Mixin provides simple workspace ID access
  • Automatically handles route changes
  • Supports both auth-based and route-based workspace ID
  • Reactive to route parameter changes
  • Minimal overhead, just computed property