323 lines
9.8 KiB
Markdown
323 lines
9.8 KiB
Markdown
# Task Detail Panel Implementation
|
|
|
|
## Overview
|
|
|
|
The Task Detail Panel is a right-side panel component that displays comprehensive task information and provides quick actions for task management. It follows the ftrack-style interface pattern with a focus on usability and efficiency.
|
|
|
|
## Component Location
|
|
|
|
`frontend/src/components/task/TaskDetailPanel.vue`
|
|
|
|
## Features Implemented
|
|
|
|
### 1. Quick Action Buttons
|
|
|
|
The panel displays context-aware quick action buttons based on the current user's role and the task status:
|
|
|
|
- **Start Task**: Visible when task status is "Not Started" and user is assigned to the task
|
|
- Changes task status to "In Progress"
|
|
- Only available to assigned artists
|
|
|
|
- **Submit Work**: Visible when task status is "In Progress" or "Retake" and user is assigned
|
|
- Directs user to the Submissions tab
|
|
- Only available to assigned artists
|
|
|
|
- **Reassign**: Visible to coordinators and admins
|
|
- Opens assignment dialog to reassign task to another project member
|
|
- Shows all project members with their department roles
|
|
|
|
### 2. Status Update Control
|
|
|
|
- Dropdown selector for changing task status
|
|
- Available statuses: Not Started, In Progress, Submitted, Approved, Retake
|
|
- Artists can update their own tasks
|
|
- Coordinators and admins can update any task
|
|
- Real-time status updates with toast notifications
|
|
|
|
### 3. Task Assignment Dialog
|
|
|
|
- Command-style searchable dialog for selecting project members
|
|
- Displays member name and department role
|
|
- Pre-selects current assignee when dialog opens
|
|
- Filters members by name as you type
|
|
- Only accessible to coordinators and admins
|
|
|
|
### 4. Enhanced Metadata Display
|
|
|
|
- **Task Type**: Badge showing the task type (modeling, animation, etc.)
|
|
- **Status**: Color-coded status badge
|
|
- **Deadline**: Date with color coding based on urgency
|
|
- Red: Overdue
|
|
- Orange: Due within 3 days
|
|
- Yellow: Due within 7 days
|
|
- Default: Normal
|
|
- **Assigned To**: User name with icon
|
|
- **Context Information**: Project, Episode, Shot, or Asset details
|
|
|
|
### 5. Tabbed Interface
|
|
|
|
Three tabs for organizing task-related content:
|
|
|
|
- **Notes**: Threaded production notes with rich text
|
|
- **Attachments**: File attachments with categorization
|
|
- **Submissions**: Work submissions with version history
|
|
|
|
Each tab displays a badge count showing the number of items.
|
|
|
|
## Component Props
|
|
|
|
```typescript
|
|
interface Props {
|
|
taskId: number // ID of the task to display
|
|
}
|
|
```
|
|
|
|
## Component Events
|
|
|
|
```typescript
|
|
interface Emits {
|
|
close: [] // Emitted when user closes the panel
|
|
taskUpdated: [] // Emitted when task is updated (status, assignment, etc.)
|
|
}
|
|
```
|
|
|
|
## API Integration
|
|
|
|
### Endpoints Used
|
|
|
|
1. **GET /tasks/{task_id}**
|
|
- Fetches complete task details
|
|
- Includes related entity names (project, episode, shot, asset, assigned user)
|
|
|
|
2. **PUT /tasks/{task_id}/status**
|
|
- Updates task status
|
|
- Validates user permissions
|
|
|
|
3. **PUT /tasks/{task_id}/assign**
|
|
- Assigns task to a user
|
|
- Validates project membership and department roles
|
|
- Sends notification to assigned user
|
|
|
|
4. **GET /projects/{project_id}/members**
|
|
- Fetches all project members for assignment dialog
|
|
- Includes user details and department roles
|
|
|
|
5. **GET /tasks/{task_id}/notes**
|
|
- Fetches threaded production notes
|
|
|
|
6. **GET /tasks/{task_id}/attachments**
|
|
- Fetches task attachments
|
|
|
|
7. **GET /tasks/{task_id}/submissions**
|
|
- Fetches work submissions with version history
|
|
|
|
## Permission Logic
|
|
|
|
### Quick Actions
|
|
|
|
```typescript
|
|
// Start Task button
|
|
canStartTask = task.assigned_user_id === currentUser.id
|
|
&& task.status === 'not_started'
|
|
|
|
// Submit Work button
|
|
canSubmitWork = task.assigned_user_id === currentUser.id
|
|
&& (task.status === 'in_progress' || task.status === 'retake')
|
|
|
|
// Reassign button
|
|
canReassign = currentUser.is_admin || currentUser.role === 'coordinator'
|
|
```
|
|
|
|
### Status Updates
|
|
|
|
- Artists: Can update status of their own tasks only
|
|
- Coordinators: Can update any task status
|
|
- Admins: Can update any task status
|
|
- Directors: Cannot update task status (review-only role)
|
|
|
|
### Task Assignment
|
|
|
|
- Only coordinators and admins can reassign tasks
|
|
- Assignment validates:
|
|
- User exists
|
|
- User is a project member
|
|
- User has appropriate department role (warning, not blocking)
|
|
|
|
## UI/UX Design
|
|
|
|
### Layout
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ Task Details [X] │
|
|
├─────────────────────────────────────┤
|
|
│ Task Name │
|
|
│ Description │
|
|
│ │
|
|
│ [Start Task] [Submit] [Reassign] │
|
|
│ Status: [Dropdown ▼] │
|
|
│ │
|
|
│ Type: [Badge] Status: [Badge] │
|
|
│ 📅 Deadline 👤 Assigned To │
|
|
│ │
|
|
│ ───────────────────────────────── │
|
|
│ │
|
|
│ Context: │
|
|
│ Project: Project Name │
|
|
│ Episode: Episode Name │
|
|
│ Shot: Shot Name │
|
|
│ │
|
|
│ ───────────────────────────────── │
|
|
│ │
|
|
│ [Notes (3)] [Attachments (2)] [Sub]│
|
|
│ │
|
|
│ Tab Content Area │
|
|
│ │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
### Color Coding
|
|
|
|
- **Deadline Colors**:
|
|
- Overdue: `text-destructive` (red)
|
|
- Due in 3 days: `text-orange-600`
|
|
- Due in 7 days: `text-yellow-600`
|
|
- Normal: `text-foreground`
|
|
|
|
- **Status Badges**: Defined in TaskStatusBadge component
|
|
- Not Started: Gray
|
|
- In Progress: Blue
|
|
- Submitted: Purple
|
|
- Approved: Green
|
|
- Retake: Red
|
|
|
|
### Icons
|
|
|
|
- Close: `X` (lucide-vue-next)
|
|
- Start Task: `Play`
|
|
- Submit Work: `Upload`
|
|
- Reassign: `UserPlus`
|
|
- Calendar: `Calendar`
|
|
- User: `User`
|
|
|
|
## Integration with TasksView
|
|
|
|
The TaskDetailPanel is integrated into the TasksView as a conditional right panel:
|
|
|
|
```vue
|
|
<template>
|
|
<div class="h-full flex">
|
|
<!-- Main Content -->
|
|
<div :class="selectedTask ? 'flex-1' : 'w-full'">
|
|
<!-- Task list and filters -->
|
|
</div>
|
|
|
|
<!-- Task Detail Panel -->
|
|
<TaskDetailPanel
|
|
v-if="selectedTask"
|
|
:task-id="selectedTask.id"
|
|
@close="handleClosePanel"
|
|
@task-updated="handleTaskUpdated"
|
|
/>
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
## Child Components
|
|
|
|
The TaskDetailPanel uses several child components:
|
|
|
|
1. **TaskStatusBadge**: Displays color-coded status badge
|
|
2. **TaskNotes**: Threaded notes interface with add/edit/delete
|
|
3. **TaskAttachments**: File attachment gallery with upload
|
|
4. **TaskSubmissions**: Work submission list with version history
|
|
|
|
## State Management
|
|
|
|
### Local State
|
|
|
|
- `task`: Current task details
|
|
- `loading`: Loading state for initial fetch
|
|
- `localStatus`: Local copy of status for dropdown
|
|
- `notes`: Array of production notes
|
|
- `attachments`: Array of task attachments
|
|
- `submissions`: Array of work submissions
|
|
- `showAssignmentDialog`: Boolean for assignment dialog visibility
|
|
- `projectMembers`: Array of project members for assignment
|
|
- `selectedUserId`: Selected user ID for assignment
|
|
- `assignmentLoading`: Loading state for assignment operation
|
|
|
|
### Computed Properties
|
|
|
|
- `canStartTask`: Whether user can start the task
|
|
- `canSubmitWork`: Whether user can submit work
|
|
- `canReassign`: Whether user can reassign the task
|
|
|
|
## Error Handling
|
|
|
|
- Toast notifications for all operations (success and error)
|
|
- Graceful error handling with user-friendly messages
|
|
- Status revert on failed updates
|
|
- Loading states during async operations
|
|
|
|
## Testing
|
|
|
|
### Manual Testing
|
|
|
|
Use the test file: `frontend/test-task-detail-panel.html`
|
|
|
|
### Test Scenarios
|
|
|
|
1. **Quick Actions**:
|
|
- Verify "Start Task" appears for not started tasks
|
|
- Verify "Submit Work" appears for in progress tasks
|
|
- Verify "Reassign" appears for coordinators/admins
|
|
|
|
2. **Status Updates**:
|
|
- Test status changes as artist (own tasks only)
|
|
- Test status changes as coordinator (any task)
|
|
- Verify toast notifications
|
|
|
|
3. **Task Assignment**:
|
|
- Open assignment dialog
|
|
- Search for members
|
|
- Assign task to different user
|
|
- Verify assignment success
|
|
|
|
4. **Metadata Display**:
|
|
- Verify all metadata fields display correctly
|
|
- Check deadline color coding
|
|
- Verify context information
|
|
|
|
5. **Tabs**:
|
|
- Switch between tabs
|
|
- Verify badge counts
|
|
- Test child component functionality
|
|
|
|
## Future Enhancements
|
|
|
|
1. **Inline Editing**: Edit task name and description directly in panel
|
|
2. **Deadline Picker**: Quick deadline update control
|
|
3. **Activity Timeline**: Chronological activity feed
|
|
4. **Keyboard Shortcuts**: Quick actions via keyboard
|
|
5. **Drag and Drop**: File upload via drag and drop
|
|
6. **Real-time Updates**: WebSocket integration for live updates
|
|
7. **Task Dependencies**: Display and manage task dependencies
|
|
8. **Time Tracking**: Log time spent on tasks
|
|
9. **Custom Fields**: Display project-specific custom fields
|
|
10. **Quick Notes**: Add notes without switching to Notes tab
|
|
|
|
## Requirements Satisfied
|
|
|
|
This implementation satisfies the following requirements from the spec:
|
|
|
|
- **Requirement 3.1**: Task status display and updates
|
|
- **Requirement 3.3**: Task information display with assignment details
|
|
- **Requirement 3.4**: Task assignment and status update controls
|
|
|
|
## Related Documentation
|
|
|
|
- [Task List Implementation](./task-list-implementation.md)
|
|
- [Task Management API](../../backend/docs/task_management.md)
|
|
- [ftrack-style UI Patterns](./ftrack-ui-patterns.md)
|