🖱️ Context Menu Implementation Test

Implementation Summary

Task 8: Implement context menu trigger in TaskBrowser

✅ Implementation Complete

Changes Made:

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:

State Management:

Next Steps

The following tasks will implement the actual bulk action handlers:

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

Code Quality