Appearance

Workspace Note Component ​

File Information ​

  • Path: components/theme/settings/WorkspaceNote.vue
  • Purpose: Displays current workspace context in settings pages
  • Type: Settings Theme Component

Overview ​

The Workspace Note component displays a note indicating which workspace the user is currently updating. It's used in settings pages to provide context about the active workspace.

Key Features ​

  1. Workspace Display

    • Shows current workspace name
    • Bold workspace name
    • Contextual message

  2. Workspace Detection

    • Gets workspace from route params
    • Falls back to auth workspace
    • Finds workspace from accessible workspaces

Props ​

This component does not accept props. It uses route params and authentication.

Data Properties ​

javascript
{
  workspace_id: number,           // Current workspace ID
  internal_workspace_id: number  // Internal workspace ID from route
}

Computed Properties ​

internalWorkspace ​

Finds workspace object from accessible workspaces:

  • Matches workspace ID
  • Returns workspace object with name and details
  • Returns undefined if not found

Template Structure ​

vue
<template>
  <div class="notes secondary">
    <p>
      You are updating under 
      <strong>{{ internalWorkspace.name }}</strong> 
      Workspace
    </p>
  </div>
</template>

Usage Examples ​

Basic Usage ​

vue
<template>
  <div>
    <WorkspaceNote />
    <!-- Settings form -->
  </div>
</template>

<script>
import WorkspaceNote from '~/components/theme/settings/WorkspaceNote.vue'

export default {
  components: {
    WorkspaceNote
  }
}
</script>

In Settings Page ​

vue
<template>
  <div class="settings-page">
    <WorkspaceNote />
    <v-card>
      <!-- Settings content -->
    </v-card>
  </div>
</template>

Styling ​

Uses CSS classes:

  • .notes - Note container
  • .secondary - Secondary styling

Integration Points ​

  • Settings Pages: Used in workspace settings pages
  • Auth: Accesses user workspaces
  • Router: Gets workspace from route params

Notes for Development ​

  • Simple contextual component
  • Workspace-aware
  • Route-based workspace detection
  • Fallback to auth workspace