9.8 KiB

Raw Blame History

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

interface Props {
  taskId: number  // ID of the task to display
}

Component Events

interface Emits {
  close: []         // Emitted when user closes the panel
  taskUpdated: []   // Emitted when task is updated (status, assignment, etc.)
}

API Integration

Endpoints Used

GET /tasks/{task_id}
- Fetches complete task details
- Includes related entity names (project, episode, shot, asset, assigned user)
PUT /tasks/{task_id}/status
- Updates task status
- Validates user permissions
PUT /tasks/{task_id}/assign
- Assigns task to a user
- Validates project membership and department roles
- Sends notification to assigned user
GET /projects/{project_id}/members
- Fetches all project members for assignment dialog
- Includes user details and department roles
GET /tasks/{task_id}/notes
- Fetches threaded production notes
GET /tasks/{task_id}/attachments
- Fetches task attachments
GET /tasks/{task_id}/submissions
- Fetches work submissions with version history

Permission Logic

Quick Actions

// 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:

<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:

TaskStatusBadge: Displays color-coded status badge
TaskNotes: Threaded notes interface with add/edit/delete
TaskAttachments: File attachment gallery with upload
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

Quick Actions:
- Verify "Start Task" appears for not started tasks
- Verify "Submit Work" appears for in progress tasks
- Verify "Reassign" appears for coordinators/admins
Status Updates:
- Test status changes as artist (own tasks only)
- Test status changes as coordinator (any task)
- Verify toast notifications
Task Assignment:
- Open assignment dialog
- Search for members
- Assign task to different user
- Verify assignment success
Metadata Display:
- Verify all metadata fields display correctly
- Check deadline color coding
- Verify context information
Tabs:
- Switch between tabs
- Verify badge counts
- Test child component functionality

Future Enhancements

Inline Editing: Edit task name and description directly in panel
Deadline Picker: Quick deadline update control
Activity Timeline: Chronological activity feed
Keyboard Shortcuts: Quick actions via keyboard
Drag and Drop: File upload via drag and drop
Real-time Updates: WebSocket integration for live updates
Task Dependencies: Display and manage task dependencies
Time Tracking: Log time spent on tasks
Custom Fields: Display project-specific custom fields
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

9.8 KiB Raw Blame History