283 lines
10 KiB
Markdown
283 lines
10 KiB
Markdown
# Shot Table View with Task Status Display
|
|
|
|
## Overview
|
|
|
|
Implement a table view for shots similar to the asset browser, displaying shot information with individual task status columns, column visibility controls, and task status filtering. This provides coordinators and directors with a comprehensive overview of shot production progress.
|
|
|
|
## Requirements
|
|
|
|
### User Story 1: Shot Table Display
|
|
**As a** coordinator
|
|
**I want** to view shots in a table format with task status columns
|
|
**So that** I can quickly assess production progress across all shots
|
|
|
|
**Acceptance Criteria:**
|
|
1. WHEN viewing the shots tab, THE System SHALL display shots in a table format with columns for shot name, episode, frame range, status, and individual task status
|
|
2. WHEN a shot has tasks, THE System SHALL display the status of each task type in separate columns
|
|
3. WHEN a shot task is not started, THE System SHALL display "Not Started" badge in the corresponding task column
|
|
4. WHEN displaying task status, THE System SHALL use consistent color-coded badges matching the asset table design
|
|
5. WHEN the table loads, THE System SHALL display all standard shot task types (layout, animation, simulation, lighting, compositing) plus any custom task types
|
|
|
|
### User Story 2: Column Visibility Control
|
|
**As a** user
|
|
**I want** to show/hide specific columns in the shot table
|
|
**So that** I can focus on relevant information for my workflow
|
|
|
|
**Acceptance Criteria:**
|
|
1. WHEN viewing the shot table, THE System SHALL provide a column visibility dropdown control
|
|
2. WHEN the user toggles a column visibility, THE System SHALL immediately show or hide that column
|
|
3. WHEN the user changes column visibility, THE System SHALL persist the preference for the current session
|
|
4. THE System SHALL provide toggles for: Shot Name, Episode, Frame Range, Status, Task Status columns, and Description
|
|
5. WHEN all task status columns are hidden, THE System SHALL still display the shot information columns
|
|
|
|
### User Story 3: Task Status Filtering
|
|
**As a** coordinator
|
|
**I want** to filter shots by task status
|
|
**So that** I can identify shots that need attention or are ready for review
|
|
|
|
**Acceptance Criteria:**
|
|
1. WHEN viewing the shot table, THE System SHALL provide a task status filter dropdown
|
|
2. WHEN a user selects a task status filter, THE System SHALL display only shots matching that status
|
|
3. THE System SHALL support filtering by: All Shots, Not Started, In Progress, Submitted, Approved, Retake
|
|
4. WHEN filtering by task status, THE System SHALL show shots where ANY task matches the selected status
|
|
5. WHEN the filter is cleared, THE System SHALL display all shots
|
|
|
|
### User Story 4: Sortable Columns
|
|
**As a** user
|
|
**I want** to sort the shot table by different columns
|
|
**So that** I can organize shots by priority or progress
|
|
|
|
**Acceptance Criteria:**
|
|
1. WHEN clicking a column header, THE System SHALL sort the table by that column
|
|
2. WHEN clicking the same header again, THE System SHALL reverse the sort order
|
|
3. THE System SHALL support sorting by: Shot Name, Episode, Frame Range, Status, and Task Status columns
|
|
4. WHEN sorting by task status, THE System SHALL order by status priority (Not Started, In Progress, Submitted, Retake, Approved)
|
|
5. WHEN the table is sorted, THE System SHALL display a sort indicator on the active column
|
|
|
|
### User Story 5: Shot Selection and Detail View
|
|
**As a** user
|
|
**I want** to click on a shot row to view details
|
|
**So that** I can access detailed shot information and tasks
|
|
|
|
**Acceptance Criteria:**
|
|
1. WHEN clicking a shot row, THE System SHALL open the shot detail panel
|
|
2. WHEN the detail panel is open, THE System SHALL highlight the selected shot row
|
|
3. WHEN viewing shot details, THE System SHALL display all shot information, tasks, and submissions
|
|
4. WHEN closing the detail panel, THE System SHALL return to the table view
|
|
5. THE System SHALL maintain the table scroll position when opening/closing the detail panel
|
|
|
|
## Design
|
|
|
|
### Data Model
|
|
|
|
#### Shot List Response (Enhanced)
|
|
```typescript
|
|
interface ShotListResponse {
|
|
id: number
|
|
name: string
|
|
description?: string
|
|
episode_id: number
|
|
episode_name: string
|
|
frame_start: number
|
|
frame_end: number
|
|
status: ShotStatus
|
|
created_at: string
|
|
updated_at: string
|
|
task_count: number
|
|
|
|
// Task status information for table display
|
|
task_status: Record<string, TaskStatus | null> // e.g., { "layout": "in_progress", "animation": "not_started" }
|
|
task_details: TaskStatusInfo[] // Detailed task information
|
|
}
|
|
|
|
interface TaskStatusInfo {
|
|
task_type: string
|
|
status: TaskStatus
|
|
task_id?: number
|
|
assigned_user_id?: number
|
|
}
|
|
```
|
|
|
|
### Backend Changes
|
|
|
|
#### Update Shot List Endpoint
|
|
```python
|
|
@router.get("/", response_model=List[ShotListResponse])
|
|
async def list_shots(
|
|
episode_id: int = None,
|
|
task_status_filter: str = None, # New parameter
|
|
skip: int = 0,
|
|
limit: int = 100,
|
|
db: Session = Depends(get_db),
|
|
current_user: User = Depends(get_current_user_with_db)
|
|
):
|
|
"""List shots with task status information"""
|
|
# Query shots with task information
|
|
# Build task_status dict and task_details list
|
|
# Apply task status filtering if specified
|
|
# Return enhanced shot list
|
|
```
|
|
|
|
#### Shot Schema Updates
|
|
```python
|
|
class ShotListResponse(BaseModel):
|
|
# ... existing fields ...
|
|
task_status: Dict[str, Optional[TaskStatus]] = Field(default_factory=dict)
|
|
task_details: List[TaskStatusInfo] = Field(default_factory=list)
|
|
```
|
|
|
|
### Frontend Components
|
|
|
|
#### ShotsTableView Component
|
|
```vue
|
|
<template>
|
|
<div class="shots-table-container">
|
|
<!-- Toolbar -->
|
|
<div class="table-toolbar">
|
|
<ColumnVisibilityControl v-model="visibleColumns" :columns="availableColumns" />
|
|
<TaskStatusFilter v-model="statusFilter" />
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<table class="shots-table">
|
|
<thead>
|
|
<tr>
|
|
<th v-if="visibleColumns.name" @click="sort('name')">Shot Name</th>
|
|
<th v-if="visibleColumns.episode" @click="sort('episode')">Episode</th>
|
|
<th v-if="visibleColumns.frameRange">Frame Range</th>
|
|
<th v-if="visibleColumns.status" @click="sort('status')">Status</th>
|
|
<th v-for="taskType in visibleTaskTypes" :key="taskType" @click="sort(taskType)">
|
|
{{ formatTaskType(taskType) }}
|
|
</th>
|
|
<th v-if="visibleColumns.description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="shot in filteredShots" :key="shot.id" @click="selectShot(shot)">
|
|
<td v-if="visibleColumns.name">{{ shot.name }}</td>
|
|
<td v-if="visibleColumns.episode">{{ shot.episode_name }}</td>
|
|
<td v-if="visibleColumns.frameRange">{{ shot.frame_start }}-{{ shot.frame_end }}</td>
|
|
<td v-if="visibleColumns.status">
|
|
<StatusBadge :status="shot.status" />
|
|
</td>
|
|
<td v-for="taskType in visibleTaskTypes" :key="taskType">
|
|
<TaskStatusBadge :status="shot.task_status[taskType]" />
|
|
</td>
|
|
<td v-if="visibleColumns.description">{{ shot.description }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
#### Column Visibility Control (Reusable)
|
|
- Dropdown menu with checkboxes for each column
|
|
- Separate section for task status columns
|
|
- "Show All" / "Hide All" quick actions
|
|
- Session storage for persistence
|
|
|
|
#### Task Status Filter (Reusable)
|
|
- Dropdown with status options
|
|
- "All Shots" option to clear filter
|
|
- Visual indicator when filter is active
|
|
- Count of filtered results
|
|
|
|
### UI/UX Design
|
|
|
|
#### Table Layout
|
|
- Fixed header with sticky positioning
|
|
- Alternating row colors for readability
|
|
- Hover state on rows
|
|
- Selected row highlight
|
|
- Responsive column widths
|
|
- Horizontal scroll for many task columns
|
|
|
|
#### Task Status Badges
|
|
- Consistent 130px width for alignment
|
|
- Color-coded by status:
|
|
- Not Started: Gray
|
|
- In Progress: Blue
|
|
- Submitted: Yellow
|
|
- Approved: Green
|
|
- Retake: Red
|
|
- Icon + text for clarity
|
|
|
|
#### Column Visibility Dropdown
|
|
- Positioned in toolbar (top-right)
|
|
- Grouped sections: Info Columns, Task Columns
|
|
- Checkboxes with column names
|
|
- Visual separator between groups
|
|
|
|
## Implementation Plan
|
|
|
|
### Phase 1: Backend Enhancement
|
|
1. Update `ShotListResponse` schema with task status fields
|
|
2. Modify `list_shots` endpoint to include task information
|
|
3. Add task status filtering logic
|
|
4. Test endpoint with various filters
|
|
|
|
### Phase 2: Frontend Table Component
|
|
1. Create `ShotsTableView.vue` component
|
|
2. Implement table rendering with all columns
|
|
3. Add row click handler for shot selection
|
|
4. Integrate with existing shot detail panel
|
|
|
|
### Phase 3: Column Controls
|
|
1. Create reusable `ColumnVisibilityControl.vue` (or adapt from assets)
|
|
2. Implement column show/hide logic
|
|
3. Add session storage for preferences
|
|
4. Wire up to shots table
|
|
|
|
### Phase 4: Filtering and Sorting
|
|
1. Implement task status filtering
|
|
2. Add column sorting functionality
|
|
3. Add sort indicators to headers
|
|
4. Test filter and sort combinations
|
|
|
|
### Phase 5: Integration
|
|
1. Update `ProjectShotsView.vue` to use table view
|
|
2. Add view toggle (grid/table) if needed
|
|
3. Ensure episode filtering works with table
|
|
4. Test complete workflow
|
|
|
|
## Testing Strategy
|
|
|
|
### Unit Tests
|
|
- Shot list endpoint returns correct task status data
|
|
- Task status filtering works correctly
|
|
- Column visibility state management
|
|
- Sort logic for different column types
|
|
|
|
### Integration Tests
|
|
- Table displays shots with task status correctly
|
|
- Column visibility persists across page refreshes
|
|
- Task status filter updates table correctly
|
|
- Shot selection opens detail panel
|
|
|
|
### User Acceptance Testing
|
|
- Coordinators can quickly identify shots needing attention
|
|
- Column customization improves workflow efficiency
|
|
- Task status filtering helps prioritize work
|
|
- Table performance is acceptable with 100+ shots
|
|
|
|
## Success Criteria
|
|
|
|
1. Shot table displays all shots with task status columns
|
|
2. Users can show/hide columns to customize view
|
|
3. Task status filtering works accurately
|
|
4. Table sorting works for all columns
|
|
5. Shot selection integrates with existing detail panel
|
|
6. Performance is acceptable (< 1s load time for 100 shots)
|
|
7. UI matches asset table design consistency
|
|
|
|
## Future Enhancements
|
|
|
|
1. **Bulk Actions**: Select multiple shots for batch operations
|
|
2. **Export**: Export table data to CSV/Excel
|
|
3. **Advanced Filters**: Combine multiple filter criteria
|
|
4. **Custom Columns**: User-defined calculated columns
|
|
5. **Column Reordering**: Drag-and-drop column arrangement
|
|
6. **Saved Views**: Save and load custom table configurations
|
|
7. **Real-time Updates**: WebSocket updates for collaborative work
|