Appearance

Create Workspace ​

File Information ​

  • Path: pages/create-workspace.vue
  • Route: /create-workspace
  • Purpose: Create new workspace for user

Overview ​

The Create Workspace page allows authenticated users to create a new workspace. Users can set workspace name, description, initial configuration, and select a plan or subscription.

Key Features ​

  1. Workspace Creation Form

    • Workspace name input
    • Workspace description
    • Workspace slug (auto-generated)
    • Initial settings

  2. Plan Selection

    • Available plans display
    • Plan features comparison
    • Plan selection
    • Subscription setup

  3. Workspace Configuration

    • Initial module selection
    • Branding setup (optional)
    • Owner assignment
    • Settings configuration

  4. Validation

    • Name uniqueness check
    • Slug validation
    • Required fields validation
    • Form error handling

Components Used ​

  • Workspace form components
  • Plan selection components
  • Validation components
  • Module selection components

Data Properties ​

javascript
{
  form: {
    name: '',
    description: '',
    slug: '',
    plan: null,
    modules: []
  },
  creating: false,      // Creation state
  plans: [],           // Available plans
  errors: {},         // Form errors
  slugAvailable: true  // Slug availability
}

Computed Properties ​

isFormValid ​

Validates form data

generatedSlug ​

Generates slug from workspace name

selectedPlan ​

Returns selected plan object

Methods ​

generateSlug(name) ​

Generates workspace slug:

  • Converts name to slug format
  • Checks availability
  • Updates slug field

checkSlugAvailability(slug) ​

Checks if slug is available:

  • Validates slug format
  • Checks availability via API
  • Updates availability status

createWorkspace() ​

Creates workspace:

  • Validates form
  • Checks slug availability
  • Creates workspace via API
  • Sets up initial configuration
  • Redirects to workspace
  • Handles errors

selectPlan(planId) ​

Selects workspace plan:

  • Updates selected plan
  • Updates form data
  • Shows plan details

API Endpoints ​

Check Slug Availability ​

  • Endpoint: GET /workspace/check-slug
  • Query Parameters: slug
  • Response: Availability status

Create Workspace ​

  • Endpoint: POST /workspace/create
  • Request Body:
    json
    {
  "name": "My Workspace",
  "description": "Workspace description",
  "slug": "my-workspace",
  "plan_id": 1,
  "modules": ["dam"]
}
  • Response: Created workspace object

Get Available Plans ​

  • Endpoint: GET /plans/available
  • Response: Array of plan objects

User Flow ​

  1. User navigates to create workspace page
  2. User enters workspace name
  3. Slug is auto-generated
  4. User selects plan
  5. User configures initial settings
  6. User submits form
  7. Workspace is created
  8. User is redirected to new workspace
  9. Success message displayed

Notes for Development ​

  • Page requires authentication
  • Slug must be unique
  • Plan selection may be optional
  • Workspace owner is current user
  • Initial modules can be selected