156 lines
4.2 KiB
Markdown
156 lines
4.2 KiB
Markdown
# Project Switcher Component
|
|
|
|
The ProjectSwitcher component provides a dropdown interface in the sidebar header that allows users to switch between different projects and navigate to project-specific views.
|
|
|
|
## Features
|
|
|
|
### 1. Project Selection
|
|
- **Dropdown Interface**: Click the project header to see all available projects
|
|
- **Visual Icons**: Each project has a unique icon for easy identification
|
|
- **Status Display**: Shows current project status (In Progress, Pre-Production, etc.)
|
|
- **Keyboard Shortcuts**: Use ⌘1, ⌘2, etc. to quickly switch projects
|
|
|
|
### 2. Project Views
|
|
- **All Projects**: Overview of all projects (default view)
|
|
- **Specific Projects**: Individual project dashboards
|
|
- **Automatic Navigation**: Switches routes when project is selected
|
|
|
|
### 3. Role-Based Features
|
|
- **Create Project**: Admins and coordinators can create new projects
|
|
- **Project Access**: Users see projects based on their permissions
|
|
- **Developer Mode**: Developers see a static header instead of project switcher
|
|
|
|
## Implementation
|
|
|
|
### Components Structure
|
|
```
|
|
ProjectSwitcher.vue
|
|
├── DropdownMenu (from shadcn-vue)
|
|
├── SidebarMenuButton
|
|
└── Project Icons (from lucide-vue-next)
|
|
```
|
|
|
|
### State Management
|
|
Uses `useProjectsStore()` for:
|
|
- Managing available projects
|
|
- Tracking active project
|
|
- Handling project switching
|
|
- Persisting project state
|
|
|
|
### Integration Points
|
|
- **AppSidebar**: Conditionally shows ProjectSwitcher for non-developer users
|
|
- **Router**: Automatically navigates to project-specific routes
|
|
- **Projects Store**: Manages project data and active state
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Project Switching
|
|
1. Click the project header in the sidebar
|
|
2. Select a project from the dropdown
|
|
3. Automatically navigates to project view
|
|
|
|
### Creating New Projects
|
|
1. Click the project header dropdown
|
|
2. Select "Create project" (admins/coordinators only)
|
|
3. Navigates to project creation form
|
|
|
|
### Keyboard Navigation
|
|
- `⌘1` - Switch to first project
|
|
- `⌘2` - Switch to second project
|
|
- etc.
|
|
|
|
## Project Data Structure
|
|
|
|
```typescript
|
|
interface Project {
|
|
id: number
|
|
name: string
|
|
status: string
|
|
icon: Component
|
|
description?: string
|
|
member_count?: number
|
|
}
|
|
```
|
|
|
|
### Default Projects
|
|
- **Project Alpha**: Feature film (In Progress)
|
|
- **Project Beta**: Animated series (Pre-Production)
|
|
- **Project Gamma**: Commercial campaign (Post-Production)
|
|
- **All Projects**: Overview view
|
|
|
|
## Responsive Behavior
|
|
|
|
### Desktop
|
|
- Dropdown opens to the right of the trigger
|
|
- Full project information displayed
|
|
- Keyboard shortcuts available
|
|
|
|
### Mobile
|
|
- Dropdown opens below the trigger
|
|
- Optimized for touch interaction
|
|
- Simplified layout for smaller screens
|
|
|
|
## Customization
|
|
|
|
### Adding New Projects
|
|
```typescript
|
|
const projectsStore = useProjectsStore()
|
|
projectsStore.addProject({
|
|
name: 'New Project',
|
|
status: 'Planning',
|
|
icon: NewIcon,
|
|
description: 'Project description'
|
|
})
|
|
```
|
|
|
|
### Custom Icons
|
|
Import from lucide-vue-next or use custom SVG components:
|
|
```typescript
|
|
import { CustomIcon } from '@/components/icons'
|
|
```
|
|
|
|
### Status Types
|
|
Common project statuses:
|
|
- `Planning`
|
|
- `Pre-Production`
|
|
- `In Progress`
|
|
- `Post-Production`
|
|
- `Completed`
|
|
- `On Hold`
|
|
|
|
## Integration with Routes
|
|
|
|
### Route Mapping
|
|
- `/projects` → All Projects view
|
|
- `/projects/1` → Project Alpha
|
|
- `/projects/2` → Project Beta
|
|
- `/projects/new` → Create new project
|
|
|
|
### Route Synchronization
|
|
The component automatically:
|
|
- Updates active project based on current route
|
|
- Navigates to appropriate route when project is selected
|
|
- Maintains project state across navigation
|
|
|
|
## Accessibility
|
|
|
|
### Features
|
|
- **Keyboard Navigation**: Full keyboard support
|
|
- **Screen Readers**: Proper ARIA labels and descriptions
|
|
- **Focus Management**: Logical tab order
|
|
- **High Contrast**: Works with system themes
|
|
|
|
### ARIA Labels
|
|
- Project buttons have descriptive labels
|
|
- Dropdown has proper role attributes
|
|
- Status information is announced
|
|
|
|
## Performance
|
|
|
|
### Optimizations
|
|
- **Computed Properties**: Reactive project filtering
|
|
- **Lazy Loading**: Projects loaded on demand
|
|
- **Minimal Re-renders**: Efficient Vue reactivity
|
|
- **Store Caching**: Project data cached in store
|
|
|
|
The ProjectSwitcher provides an intuitive way for users to navigate between projects while maintaining context and state throughout the application. |