indigo
/
LinkDesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
LinkDesk/frontend/docs/task-detail-panel-tabs-refa...

3.2 KiB
Raw Blame History

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