Appearance

Workspace Settings ​

File Information ​

  • Path: pages/_workspace_id/workspace-settings/index.vue
  • Route: /:workspace_id/workspace-settings
  • Purpose: Main workspace configuration and settings management

Overview ​

The Workspace Settings page is the main configuration page for workspace management. It provides access to workspace information, branding settings, general settings, owner management, module configuration, and subscription details.

Key Features ​

  1. Workspace Information

    • Workspace name and details
    • Workspace ID and slug
    • Creation date and last updated
    • Workspace status

  2. Workspace Branding

    • Logo upload and management
    • Primary color customization
    • Favicon settings
    • Brand portal customization

  3. General Settings

    • Workspace visibility
    • Module enablement
    • Feature flags
    • Workspace notes

  4. Owner Management

    • Current workspace owner
    • Transfer ownership functionality
    • Owner permissions

  5. Module Configuration

    • Enable/disable modules
    • Module-specific settings
    • Module access control

  6. Subscription Information

    • Current plan details
    • Subscription status
    • Billing information link

Components Used ​

  • AccountSettingsLeftMenu - Settings navigation menu
  • WorkspaceNote - Workspace notes display
  • WorkspaceOwnerDialog - Owner management dialog
  • StaticPlanWorkspaceBranding - Branding display

Data Properties ​

javascript
{
  workspace: null,           // Workspace object
  loading: false,           // Loading state
  saving: false,            // Saving state
  workspaceForm: {          // Workspace form data
    name: '',
    slug: '',
    logo: null,
    primary_color: '',
    notes: ''
  }
}

Computed Properties ​

workspaceId ​

Returns current workspace ID from route

canEditWorkspace ​

Checks if user can edit workspace settings

isOwner ​

Checks if current user is workspace owner

Methods ​

loadWorkspace() ​

Loads workspace details:

  • Fetches workspace data from API
  • Updates form data
  • Handles errors

saveWorkspace() ​

Saves workspace changes:

  • Validates form data
  • Updates workspace via API
  • Shows success/error messages
  • Refreshes workspace data

uploadLogo(file) ​

Uploads workspace logo:

  • Uploads logo file
  • Updates workspace logo URL
  • Handles upload errors

changeOwner() ​

Opens owner change dialog:

  • Shows WorkspaceOwnerDialog
  • Handles owner transfer

API Endpoints ​

Get Workspace Details ​

  • Endpoint: GET /view-workspace
  • Query Parameters: workspace_id
  • Response: Workspace object with all details

Update Workspace ​

  • Endpoint: PUT /workspace/update
  • Request Body: Workspace update data
  • Response: Updated workspace object
  • Endpoint: POST /workspace/upload-logo
  • Request: FormData with logo file
  • Response: Logo URL

User Flow ​

  1. User navigates to workspace settings
  2. Page loads workspace details
  3. User views/edits workspace information
  4. User updates branding (logo, colors)
  5. User manages workspace owner
  6. User configures modules
  7. Changes are saved
  8. Success message displayed

Environment Variables ​

  • API_BASE_URL - Backend API base URL

Notes for Development ​

  • Page requires workspace admin permissions
  • Logo upload uses FormData
  • Owner transfer requires confirmation
  • Module changes may require workspace reload
  • Branding changes apply immediately