# Context Menu Test - Task Browser

# 🖱️ Context Menu Implementation Test

## Implementation Summary

Task 8: Implement context menu trigger in TaskBrowser

✅ Implementation Complete

### Changes Made:

- Added `@contextmenu` event handler to table rows
- Implemented `handleContextMenu` method with position tracking
- Added automatic selection of right-clicked unselected rows
- Added context menu state management (showContextMenu, contextMenuPosition)
- Integrated TaskBulkActionsMenu component
- Added fetchProjectMembers to load assignee options
- Implemented closeContextMenu handler

## Requirements Coverage

### Requirement 3.1: Right-click on selected task

Requirement: WHEN a user right-clicks on a selected task row THEN the system SHALL display a context menu at the cursor position

Implementation:

@contextmenu="handleContextMenu($event, index)" const handleContextMenu = (event: MouseEvent, rowIndex: number) => { event.preventDefault() contextMenuPosition.value = { x: event.clientX, y: event.clientY } showContextMenu.value = true }

✅ Implemented - Context menu appears at cursor position

### Requirement 3.2: Right-click on unselected task

Requirement: WHEN a user right-clicks on an unselected task row THEN the system SHALL select that task and display the context menu

Implementation:

// Ensure right-clicked unselected row gets selected before menu shows if (!rowSelection.value[rowIndex]) { rowSelection.value = { [rowIndex]: true } }

✅ Implemented - Unselected rows are automatically selected on right-click

### Requirement 3.3: Click outside closes menu

Requirement: WHEN the context menu is open and the user clicks outside THEN the system SHALL close the context menu

Implementation:

// TaskBulkActionsMenu handles this via DropdownMenuContent's @interact-outside // The menu component emits 'update:open' with false value v-model:open="showContextMenu"

✅ Implemented - Menu closes via v-model binding and interact-outside handler

### Requirement 3.4: No menu on empty space

Requirement: WHEN no tasks are selected and the user right-clicks empty space THEN the system SHALL not display the context menu

Implementation:

// Prevent context menu on empty table areas if (filteredTasks.value.length === 0) { return } // Context menu only attached to TableRow elements, not empty space @contextmenu="handleContextMenu($event, index)"

✅ Implemented - Menu only appears when right-clicking actual rows

## Testing Instructions

### Manual Testing Steps:

1. Start the application:
   cd frontend && npm run dev
2. Navigate to a project's Tasks view
3. Test Requirement 3.1:
   - Click checkbox to select a task
   - Right-click on the selected task row
   - Verify context menu appears at cursor position
   - Verify menu shows "X tasks selected" header
4. Test Requirement 3.2:
   - Clear all selections (if any)
   - Right-click on an unselected task row
   - Verify the row becomes selected (highlighted)
   - Verify context menu appears
   - Verify menu shows "1 task selected"
5. Test Requirement 3.3:
   - Open context menu by right-clicking a task
   - Click anywhere outside the menu
   - Verify menu closes
6. Test Requirement 3.4:
   - Apply filters to show no tasks (empty table)
   - Right-click in the empty table area
   - Verify no context menu appears
   - Right-click on the "No tasks found" message
   - Verify no context menu appears

## Integration Points

### Components Integrated:

- TaskBulkActionsMenu: Context menu component with status and assignee submenus
- Project Service: Fetches project members for assignee list
- TanStack Table: Row selection state management

### State Management:

- `showContextMenu`: Controls menu visibility
- `contextMenuPosition`: Tracks cursor position for menu placement
- `rowSelection`: TanStack Table selection state
- `projectMembers`: List of users for assignment submenu

## Next Steps

The following tasks will implement the actual bulk action handlers:

- Task 9: Implement bulk status update action
- Task 10: Implement bulk assignment action
- Task 11: Implement keyboard shortcuts

Currently, the context menu appears correctly but the action handlers are placeholder functions that will be implemented in subsequent tasks.

## Code Quality

- ✅ TypeScript compilation: No errors
- ✅ Vue diagnostics: No issues
- ✅ Event handlers properly typed
- ✅ Requirements documented in code comments
- ✅ Follows existing code patterns