73 lines
3.0 KiB
HTML
73 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TaskBulkActionsMenu Component Test</title>
|
|
</head>
|
|
<body>
|
|
<h1>TaskBulkActionsMenu Component Test</h1>
|
|
|
|
<h2>Component Created Successfully ✓</h2>
|
|
|
|
<h3>Features Implemented:</h3>
|
|
<ul>
|
|
<li>✓ Created component at <code>frontend/src/components/task/TaskBulkActionsMenu.vue</code></li>
|
|
<li>✓ Uses DropdownMenu from shadcn-vue for base structure</li>
|
|
<li>✓ Implements absolute positioning based on cursor coordinates</li>
|
|
<li>✓ Adds viewport boundary detection for menu positioning</li>
|
|
<li>✓ Creates "Set Status" menu item with status submenu</li>
|
|
<li>✓ Creates "Assign To" menu item with user list submenu</li>
|
|
<li>✓ Emits events for status-selected and assignee-selected</li>
|
|
</ul>
|
|
|
|
<h3>Props:</h3>
|
|
<ul>
|
|
<li><strong>open</strong>: boolean - Controls menu visibility</li>
|
|
<li><strong>position</strong>: { x: number, y: number } - Cursor position for menu placement</li>
|
|
<li><strong>selectedCount</strong>: number - Number of selected tasks</li>
|
|
<li><strong>projectMembers</strong>: ProjectMember[] - List of project members for assignment</li>
|
|
<li><strong>isProcessing</strong>: boolean (optional) - Disables menu during bulk operations</li>
|
|
</ul>
|
|
|
|
<h3>Emits:</h3>
|
|
<ul>
|
|
<li><strong>update:open</strong>: Emitted when menu open state changes</li>
|
|
<li><strong>status-selected</strong>: Emitted when a status is selected (TaskStatus)</li>
|
|
<li><strong>assignee-selected</strong>: Emitted when an assignee is selected (userId: number)</li>
|
|
</ul>
|
|
|
|
<h3>Key Features:</h3>
|
|
<ul>
|
|
<li><strong>Viewport Boundary Detection</strong>: Menu automatically adjusts position to stay within viewport</li>
|
|
<li><strong>Status Options</strong>: All 5 task statuses with color-coded labels</li>
|
|
<li><strong>Project Members</strong>: Scrollable list of members with full names</li>
|
|
<li><strong>Selection Count Display</strong>: Shows number of selected tasks in header</li>
|
|
<li><strong>Processing State</strong>: Disables menu items during bulk operations</li>
|
|
<li><strong>Click Outside</strong>: Closes menu when clicking outside</li>
|
|
</ul>
|
|
|
|
<h3>Status Colors:</h3>
|
|
<ul>
|
|
<li>Not Started: Gray</li>
|
|
<li>In Progress: Blue</li>
|
|
<li>Submitted: Purple</li>
|
|
<li>Approved: Green</li>
|
|
<li>Retake: Orange</li>
|
|
</ul>
|
|
|
|
<h3>Requirements Validated:</h3>
|
|
<ul>
|
|
<li>✓ Requirement 3.1: Context menu displays at cursor position</li>
|
|
<li>✓ Requirement 3.3: Context menu closes on outside click</li>
|
|
<li>✓ Requirement 4.1: "Set Status" option with status submenu</li>
|
|
<li>✓ Requirement 5.1: "Assign To" option with user list submenu</li>
|
|
<li>✓ Requirement 5.2: Displays all project members</li>
|
|
</ul>
|
|
|
|
<h3>Next Steps:</h3>
|
|
<p>The component is ready to be integrated into TaskBrowser.vue in the next task.</p>
|
|
<p>Task 8 will implement the context menu trigger and wire up the event handlers.</p>
|
|
</body>
|
|
</html>
|