153 lines
5.1 KiB
Markdown
153 lines
5.1 KiB
Markdown
# Task List and Filtering Interface Implementation
|
|
|
|
## Overview
|
|
Enhanced task list interface with advanced filtering, status updates, deadline visualization, and task assignment capabilities.
|
|
|
|
## Features Implemented
|
|
|
|
### 1. Enhanced Filtering
|
|
- **Search**: Full-text search across task names, project names, shot names, and asset names
|
|
- **Status Filter**: Filter by task status (Not Started, In Progress, Submitted, Approved, Retake)
|
|
- **Task Type Filter**: Filter by task type (Layout, Animation, Simulation, Lighting, Compositing, Modeling, Surfacing, Rigging)
|
|
- **Department Filter**: (Coordinators/Admins only) Filter tasks by department role
|
|
- **Sort Options**: Sort by deadline, status, name, or last updated
|
|
|
|
### 2. Task Status Updates with Dropdown
|
|
- **Inline Status Updates**: Click on status badge to open dropdown selector
|
|
- **Visual Status Indicators**: Color-coded status badges with consistent width (130px)
|
|
- **Status Options**:
|
|
- Not Started (Gray)
|
|
- In Progress (Blue)
|
|
- Submitted (Purple)
|
|
- Approved (Green)
|
|
- Retake (Red)
|
|
- **Immediate Updates**: Status changes are saved immediately to backend
|
|
- **Toast Notifications**: Success/error feedback for status updates
|
|
|
|
### 3. Deadline Visualization with Urgency Indicators
|
|
- **Color-Coded Deadlines**:
|
|
- **Overdue**: Red background with alert icon
|
|
- **Urgent (≤3 days)**: Orange background with clock icon
|
|
- **Warning (≤7 days)**: Yellow background
|
|
- **Normal**: Default styling
|
|
- **Approved**: Muted styling (deadline no longer critical)
|
|
|
|
- **Enhanced Date Display**:
|
|
- Shows relative time (e.g., "2d overdue", "Tomorrow", "3d")
|
|
- Includes visual icons for overdue and urgent tasks
|
|
- Background highlighting for urgency levels
|
|
|
|
### 4. Task Assignment Interface
|
|
- **Assignment Dialog**: Modal dialog for assigning tasks to team members
|
|
- **Department Role Filtering**: Filter available users by department role
|
|
- **Visual Department Badges**: Shows each user's department specialization
|
|
- **Smart Assignment**: Only shows project members who can be assigned
|
|
- **Coordinator/Admin Only**: Assignment feature restricted to appropriate roles
|
|
|
|
### 5. User Experience Improvements
|
|
- **Clear Filters Button**: Quick reset of all filters
|
|
- **Responsive Layout**: Filters wrap appropriately on smaller screens
|
|
- **Loading States**: Visual feedback during async operations
|
|
- **Error Handling**: Comprehensive error messages with toast notifications
|
|
- **Click-to-View**: Click anywhere on row to view task details
|
|
- **Stop Propagation**: Status and assignment actions don't trigger row click
|
|
|
|
## Components
|
|
|
|
### TaskList.vue
|
|
Main component with filtering, sorting, and task management features.
|
|
|
|
**Props:**
|
|
- `projectId?: number` - Optional project ID to filter tasks
|
|
|
|
**Emits:**
|
|
- `taskSelected: [task: TaskListItem]` - Emitted when user selects a task
|
|
|
|
**Key Features:**
|
|
- Fetches tasks on mount
|
|
- Supports multiple filter combinations
|
|
- Inline status updates
|
|
- Task assignment dialog
|
|
- Department role filtering
|
|
|
|
### TaskStatusBadge.vue
|
|
Reusable status badge component with consistent styling.
|
|
|
|
**Props:**
|
|
- `status: string` - Task status
|
|
- `compact?: boolean` - Use compact width (100px vs 130px)
|
|
|
|
## API Integration
|
|
|
|
### Endpoints Used
|
|
- `GET /tasks` - Fetch tasks with filters
|
|
- `PUT /tasks/{task_id}/status` - Update task status
|
|
- `PUT /tasks/{task_id}/assign` - Assign task to user
|
|
- `GET /projects/{project_id}/members` - Get project members for assignment
|
|
|
|
### Query Parameters
|
|
- `project_id` - Filter by project
|
|
- `assigned_user_id` - Filter by assigned user
|
|
- `status` - Filter by status
|
|
- `task_type` - Filter by task type
|
|
- `department_role` - Filter by department role (coordinators/admins)
|
|
|
|
## Requirements Satisfied
|
|
|
|
### Requirement 3.1
|
|
✅ Artists can view all their assigned tasks with filtering
|
|
|
|
### Requirement 3.2
|
|
✅ Task deadlines displayed with visual urgency indicators
|
|
|
|
### Requirement 3.4
|
|
✅ Task status shown and can be updated via dropdown
|
|
|
|
### Requirement 3.5
|
|
✅ Artists can update task status to "in progress"
|
|
|
|
### Requirement 8.3
|
|
✅ Task assignment interface filters artists by department roles
|
|
|
|
## Usage Example
|
|
|
|
```vue
|
|
<template>
|
|
<TaskList
|
|
:project-id="currentProjectId"
|
|
@task-selected="handleTaskSelected"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import TaskList from '@/components/task/TaskList.vue'
|
|
|
|
function handleTaskSelected(task) {
|
|
// Handle task selection
|
|
console.log('Selected task:', task)
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Filter tasks by status
|
|
- [ ] Filter tasks by task type
|
|
- [ ] Search tasks by name
|
|
- [ ] Sort tasks by deadline
|
|
- [ ] Update task status via dropdown
|
|
- [ ] View deadline urgency indicators
|
|
- [ ] Assign task to user (coordinator/admin)
|
|
- [ ] Filter users by department role in assignment dialog
|
|
- [ ] Clear all filters
|
|
- [ ] View task details by clicking row
|
|
|
|
## Future Enhancements
|
|
|
|
1. **Bulk Operations**: Select multiple tasks for batch status updates
|
|
2. **Saved Filters**: Save and load filter presets
|
|
3. **Calendar View**: Alternative view showing tasks on timeline
|
|
4. **Drag-and-Drop**: Drag tasks to change status
|
|
5. **Real-time Updates**: WebSocket integration for live task updates
|
|
6. **Advanced Search**: Search by date ranges, multiple statuses, etc.
|