230 lines
7.3 KiB
Markdown
230 lines
7.3 KiB
Markdown
# Implementation Plan
|
|
|
|
- [x] 1. Create TasksDataTable component with basic structure
|
|
|
|
|
|
|
|
|
|
- Create new file `frontend/src/components/task/TasksDataTable.vue`
|
|
- Define props interface (tasks, columnVisibility, projectId, isLoading)
|
|
- Define emits interface (row-click, row-double-click, context-menu, selection-change, update:column-visibility)
|
|
- Set up basic template structure with Table components
|
|
- _Requirements: 1.1, 1.2_
|
|
|
|
- [x] 2. Implement table rendering and TanStack Table integration
|
|
|
|
|
|
|
|
|
|
|
|
- Move TanStack Table configuration from TaskBrowser to TasksDataTable
|
|
- Import and use createColumns() for column definitions
|
|
- Set up table state (sorting, rowSelection, columnVisibility)
|
|
- Implement table header rendering with select-all checkbox
|
|
- Implement table body rendering with row iteration
|
|
- _Requirements: 1.2, 1.3_
|
|
|
|
- [x] 3. Implement row selection state management
|
|
|
|
|
|
|
|
|
|
|
|
- Create rowSelection ref with RowSelectionState type
|
|
- Create lastClickedIndex ref for shift-click tracking
|
|
- Implement getRowId to use task.id as row identifier
|
|
- Set up watcher to emit selection-change events when rowSelection changes
|
|
- Implement helper function to compute selected tasks from selection state
|
|
- _Requirements: 2.1, 2.3, 2.4_
|
|
|
|
- [x] 4. Implement single-click selection behavior
|
|
|
|
|
|
|
|
|
|
|
|
- Create handleRowClick function
|
|
- Implement logic for click without modifiers (clear all, select one)
|
|
- Implement logic for Ctrl/Cmd+click (toggle selection)
|
|
- Implement logic for Shift+click (range selection)
|
|
- Update lastClickedIndex on each click
|
|
- Emit row-click event after updating selection
|
|
- _Requirements: 3.1, 3.2, 3.3_
|
|
|
|
- [x] 5. Implement select-all checkbox functionality
|
|
|
|
|
|
|
|
|
|
|
|
- Update select column header to use table.getIsAllPageRowsSelected()
|
|
- Implement onUpdate:modelValue handler for select-all checkbox
|
|
- Use table.toggleAllPageRowsSelected() to toggle all rows
|
|
- Handle indeterminate state when some but not all rows selected
|
|
- _Requirements: 3.4, 6.4, 6.5_
|
|
|
|
- [x] 6. Implement double-click and context menu handlers
|
|
|
|
|
|
|
|
|
|
|
|
- Create handleRowDoubleClick function that emits row-double-click event
|
|
- Create handleContextMenu function that prevents default and emits context-menu event
|
|
- Add logic to preserve selection when right-clicking selected row
|
|
- Add logic to add unselected row to selection when right-clicked
|
|
- Pass selected tasks array in context-menu event
|
|
- _Requirements: 3.5, 4.1, 4.2_
|
|
|
|
- [x] 7. Add visual feedback for selection and hover states
|
|
|
|
|
|
|
|
|
|
- Apply conditional classes to TableRow based on selection state
|
|
- Add hover:bg-muted/50 class for hover feedback
|
|
- Add bg-muted/50 class for selected rows
|
|
- Add select-none class to prevent text selection during shift-click
|
|
- Ensure cursor-pointer class is applied to all rows
|
|
- _Requirements: 6.1, 6.2, 6.3_
|
|
|
|
- [x] 8. Update TaskBrowser to use TasksDataTable component
|
|
|
|
|
|
|
|
|
|
|
|
- Import TasksDataTable component
|
|
- Replace existing table template with TasksDataTable component tag
|
|
- Pass filteredTasks as tasks prop
|
|
- Pass columnVisibility as prop
|
|
- Pass projectId as prop
|
|
- Pass isLoading as prop
|
|
- _Requirements: 1.4_
|
|
|
|
- [x] 9. Implement event handlers in TaskBrowser
|
|
|
|
|
|
|
|
|
|
|
|
- Create selectedTaskIds ref as Set<number>
|
|
- Create handleSelectionChange function to update selectedTaskIds
|
|
- Wire up @selection-change event to handleSelectionChange
|
|
- Wire up @row-click event to existing handleRowClick logic (if needed)
|
|
- Wire up @row-double-click event to handleRowDoubleClick
|
|
- Wire up @context-menu event to handleContextMenu
|
|
- Wire up @update:column-visibility event to updateColumnVisibility
|
|
- _Requirements: 2.3, 2.4, 2.5_
|
|
|
|
- [x] 10. Update selection-related computed properties in TaskBrowser
|
|
|
|
|
|
|
|
|
|
- Update selectedTasks computed to filter filteredTasks by selectedTaskIds Set
|
|
- Update selectedCount computed to return selectedTaskIds.size
|
|
- Remove old rowSelection ref from TaskBrowser
|
|
- Remove old table configuration from TaskBrowser
|
|
- _Requirements: 2.5_
|
|
|
|
- [x] 11. Implement selection clearing on filter changes
|
|
|
|
|
|
|
|
|
|
|
|
- Update watch on filter refs to clear selectedTaskIds Set
|
|
- Ensure watch includes statusFilter, typeFilter, episodeFilter, assigneeFilter, contextFilter, searchQuery
|
|
- Test that selection clears when any filter changes
|
|
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_
|
|
|
|
- [x] 12. Update bulk action handlers to preserve selection
|
|
|
|
|
|
|
|
|
|
|
|
- Remove any selection clearing logic from handleBulkStatusUpdate
|
|
- Remove any selection clearing logic from handleBulkAssignment
|
|
- Verify selection is preserved after successful bulk operations
|
|
- Verify selection is preserved after failed bulk operations
|
|
- _Requirements: 4.3, 4.4, 4.5, 7.4, 8.4_
|
|
|
|
- [x] 13. Update context menu handler in TaskBrowser
|
|
|
|
|
|
|
|
|
|
- Modify handleContextMenu to receive event and tasks array from TasksDataTable
|
|
- Remove row index parameter (no longer needed)
|
|
- Remove selection update logic (now handled in TasksDataTable)
|
|
- Keep context menu positioning and display logic
|
|
- _Requirements: 4.1, 4.2, 4.4_
|
|
|
|
- [x] 14. Clean up and remove unused code from TaskBrowser
|
|
|
|
|
|
|
|
|
|
|
|
- Remove table-related imports (FlexRender, table hooks, etc.)
|
|
- Remove columns import (now used in TasksDataTable)
|
|
- Remove sorting ref (now in TasksDataTable)
|
|
- Remove rowSelection ref (replaced by selectedTaskIds)
|
|
- Remove lastClickedIndex ref (now in TasksDataTable)
|
|
- Remove old handleRowClick implementation
|
|
- Remove table template code
|
|
- _Requirements: 1.1_
|
|
|
|
- [x] 15. Test selection behavior
|
|
|
|
|
|
|
|
|
|
|
|
- Test single-click selection (clears others, selects one)
|
|
- Test Ctrl+click toggle selection
|
|
- Test Shift+click range selection
|
|
- Test select-all checkbox (all visible rows)
|
|
- Test double-click opens detail panel without changing selection
|
|
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5_
|
|
|
|
- [ ] 16. Test context menu and bulk operations
|
|
- Test right-click on selected row preserves selection
|
|
- Test right-click on unselected row adds to selection
|
|
- Test bulk status update with multiple selected tasks
|
|
- Test bulk assignment with multiple selected tasks
|
|
- Test selection preserved after bulk operations
|
|
- _Requirements: 4.1, 4.2, 4.3, 7.1, 7.2, 7.3, 8.1, 8.2, 8.3_
|
|
|
|
- [ ] 17. Test filter changes clear selection
|
|
- Test status filter change clears selection
|
|
- Test type filter change clears selection
|
|
- Test episode filter change clears selection
|
|
- Test assignee filter change clears selection
|
|
- Test search query change clears selection
|
|
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_
|
|
|
|
- [ ] 18. Test existing TaskBrowser features still work
|
|
- Test all filters work correctly
|
|
- Test task detail panel opens on double-click (desktop and mobile)
|
|
- Test column visibility controls work
|
|
- Test sorting on all columns works
|
|
- Test task count and selection count display correctly
|
|
- _Requirements: 9.1, 9.2, 9.3, 9.4, 9.5_
|
|
|
|
- [ ] 19. Verify TypeScript types and fix any type errors
|
|
- Run TypeScript compiler to check for type errors
|
|
- Fix any type mismatches in TasksDataTable
|
|
- Fix any type mismatches in TaskBrowser
|
|
- Ensure all props and emits are properly typed
|
|
- _Requirements: 1.1, 1.4_
|
|
|
|
- [ ] 20. Final validation and cleanup
|
|
- Run full application and test all task browser functionality
|
|
- Verify no console errors or warnings
|
|
- Verify performance is acceptable with large task lists
|
|
- Update any related documentation if needed
|
|
- _Requirements: 9.1, 9.2, 9.3, 9.4, 9.5_
|