104 lines
3.4 KiB
Markdown
104 lines
3.4 KiB
Markdown
# Episode Dropdown Simplification
|
|
|
|
## Changes Made
|
|
|
|
Simplified the episode dropdown in the shot management interface to use basic episode names instead of complex displays with progress bars, badges, and icons.
|
|
|
|
## Before
|
|
The dropdown items showed:
|
|
- Status icons (Clock, Play, Pause, CheckCircle, XCircle)
|
|
- Episode name
|
|
- Progress bar with percentage
|
|
- Shot count badge with status-based styling
|
|
- Complex layout with multiple visual elements
|
|
|
|
The "All Episodes" option showed:
|
|
- Layers icon
|
|
- Overall progress bar
|
|
- Episode count badge
|
|
- Total shot count badge
|
|
|
|
## After
|
|
The dropdown items now show:
|
|
- Simple episode name only
|
|
- Clean, minimal design
|
|
- Easier to scan and select
|
|
|
|
The "All Episodes" option now shows:
|
|
- Just the text "All Episodes"
|
|
|
|
## Benefits
|
|
|
|
1. **Cleaner UI**: Less visual clutter in the dropdown
|
|
2. **Faster Loading**: No need to calculate progress or render complex components
|
|
3. **Better Performance**: Simpler rendering with fewer DOM elements
|
|
4. **Easier to Read**: Episode names are the primary focus
|
|
5. **Consistent with Standard Dropdowns**: Follows common UI patterns
|
|
|
|
## Files Modified
|
|
|
|
- `frontend/src/components/episode/EpisodeDropdown.vue`
|
|
- Simplified SelectItem templates
|
|
- Removed unused icon imports (Film, Layers, Clock, Play, Pause, CheckCircle, XCircle)
|
|
- Removed unused Badge component import
|
|
- Removed computed properties: `totalShotCount`, `overallProgress`
|
|
- Simplified `sortedEpisodes` computed property
|
|
- Removed methods: `getEpisodeStatusVariant()`, `getEpisodeStatusIcon()`
|
|
|
|
## Functionality Preserved
|
|
|
|
All core functionality remains intact:
|
|
- ✅ Episode selection
|
|
- ✅ "All Episodes" option
|
|
- ✅ Episode sorting (by episode number or name)
|
|
- ✅ Loading state
|
|
- ✅ Error state
|
|
- ✅ Create episode option (for coordinators/admins)
|
|
- ✅ Refresh button
|
|
- ✅ Episode filtering in shot browser
|
|
|
|
## Usage
|
|
|
|
The component works exactly the same way from a parent component perspective:
|
|
|
|
```vue
|
|
<EpisodeDropdown
|
|
:project-id="projectId"
|
|
:selected-episode-id="selectedEpisodeId"
|
|
@episode-selected="handleEpisodeSelected"
|
|
@create-episode="handleCreateEpisode"
|
|
/>
|
|
```
|
|
|
|
## Visual Comparison
|
|
|
|
### Before:
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ 📚 All Episodes [▓▓▓░░] 75% 3 eps 12 shots │
|
|
├─────────────────────────────────────────┤
|
|
│ ⏰ Episode 1 [▓▓░░░] 40% 4 shots │
|
|
│ ▶️ Episode 2 [▓▓▓▓░] 80% 5 shots │
|
|
│ ✅ Episode 3 [▓▓▓▓▓] 100% 3 shots │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### After:
|
|
```
|
|
┌─────────────────────┐
|
|
│ All Episodes │
|
|
├─────────────────────┤
|
|
│ Episode 1 │
|
|
│ Episode 2 │
|
|
│ Episode 3 │
|
|
└─────────────────────┘
|
|
```
|
|
|
|
## Future Enhancements
|
|
|
|
If detailed episode information is needed, consider:
|
|
1. Adding a tooltip on hover showing episode details
|
|
2. Creating a separate episode info panel
|
|
3. Adding episode details to the shot browser header
|
|
4. Creating an episode management page with full details
|