76 lines
3.2 KiB
Markdown
76 lines
3.2 KiB
Markdown
# Task Detail Panel Tabs Refactor
|
|
|
|
## Overview
|
|
Restructured the TaskDetailPanel component to match the ShotDetailPanel layout with a tabbed interface.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Header Simplification
|
|
- **Before**: Header showed "Task Details" title with task name and description in the content area
|
|
- **After**: Header shows task name and status badge, with close button on the right
|
|
- Task description moved to the Infos tab content
|
|
|
|
### 2. Tab Layout
|
|
- **Before**: Nested tabs for Notes/Attachments/Submissions at the bottom of a scrolling content area
|
|
- **After**: Top-level tabs (Infos | Notes | Attachments | Submissions) similar to ShotDetailPanel
|
|
- Tabs are positioned at the top with rounded-none and border-b styling
|
|
- Each tab shows badge counts for Notes, Attachments, and Submissions
|
|
|
|
### 3. Infos Tab Content
|
|
The Infos tab now contains all task information in organized sections:
|
|
|
|
- **Description**: Task description (if available)
|
|
- **Quick Actions**: Start Task, Submit Work, Reassign buttons
|
|
- **Status**: Status dropdown selector
|
|
- **Task Information**:
|
|
- Type (with badge)
|
|
- Deadline (with calendar icon and color coding)
|
|
- Assigned user (with avatar)
|
|
- Created/Updated timestamps
|
|
- **Context**: Project, Episode, Shot, Asset information
|
|
|
|
### 4. Other Tabs
|
|
- **Notes Tab**: Full-page TaskNotes component
|
|
- **Attachments Tab**: Full-page TaskAttachments component
|
|
- **Submissions Tab**: Full-page TaskSubmissions component
|
|
|
|
## Visual Structure
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ [Task Name] [Status Badge] [X] │ ← Header
|
|
├─────────────────────────────────────────┤
|
|
│ Infos | Notes (2) | Attachments | Sub. │ ← Tabs
|
|
├─────────────────────────────────────────┤
|
|
│ │
|
|
│ Tab Content (scrollable) │
|
|
│ │
|
|
│ - Description │
|
|
│ - Quick Actions │
|
|
│ - Status │
|
|
│ - Task Information │
|
|
│ - Context │
|
|
│ │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
## Benefits
|
|
|
|
1. **Consistency**: Matches ShotDetailPanel design pattern
|
|
2. **Better Organization**: Information is grouped logically in sections
|
|
3. **Improved UX**: Tabs are always visible at the top, making navigation easier
|
|
4. **Cleaner Header**: Simplified header focuses on task identity
|
|
5. **More Space**: Each tab gets full panel space for its content
|
|
|
|
## Technical Details
|
|
|
|
- Removed `Separator` component (no longer needed with tab layout)
|
|
- Added `Label` component for form labels
|
|
- Fixed TypeScript errors related to avatar properties
|
|
- Maintained all existing functionality (status updates, assignments, quick actions)
|
|
- Preserved loading and error states
|
|
|
|
## Files Modified
|
|
|
|
- `frontend/src/components/task/TaskDetailPanel.vue`
|