# Test: Drag and Drop Status Reordering

# 🎯 Test: Drag and Drop Status Reordering

## 📋 Test Overview

This test verifies that custom task statuses can be reordered using drag-and-drop functionality.

Feature: Task 14 - Frontend drag-and-drop reordering

Requirements: 4.1, 4.2, 4.3, 4.4, 4.5

## 🔧 Setup

1. Start the backend server

From the `backend` directory:

`uvicorn main:app --reload --host 0.0.0.0 --port 8000`
2. Start the frontend development server

From the `frontend` directory:

`npm run dev`
3. Login as admin or coordinator

Navigate to: `http://localhost:5173`

Use credentials with admin or coordinator role

4. Navigate to Project Settings

Go to a project → Settings → Tasks tab

Scroll to the "Custom Task Statuses" section

## ✅ Test Cases

### Test Case 1: Visual Elements

- Verify drag handle (grip icon) is visible on each custom status
- Verify drag handle has hover effect (color change)
- Verify cursor changes to "grab" when hovering over drag handle
- Verify system statuses do NOT have drag handles

### Test Case 2: Basic Drag and Drop

- Create at least 3 custom statuses if not already present
- Click and hold the drag handle on the first status
- Verify cursor changes to "grabbing"
- Drag the status down to the third position
- Verify ghost element appears with opacity during drag
- Release the mouse button
- Verify status moves to new position
- Verify success toast notification appears

### Test Case 3: Reorder Persistence

- Reorder statuses using drag and drop
- Wait for success notification
- Refresh the page
- Verify the new order persists after page reload

### Test Case 4: Multiple Reorders

- Drag a status from position 1 to position 3
- Wait for success notification
- Drag another status from position 2 to position 1
- Wait for success notification
- Verify all statuses are in correct positions

### Test Case 5: Disabled State During Reorder

- Start dragging a status
- Drop it in a new position
- During the API call, verify:
  - All status items have reduced opacity
  - Edit and delete buttons are disabled
  - Drag handles show "not-allowed" cursor
- After API completes, verify UI returns to normal state

### Test Case 6: No Change Detection

- Click and drag a status
- Drop it back in its original position
- Verify no API call is made (check network tab)
- Verify no toast notification appears

### Test Case 7: Error Handling

- Stop the backend server
- Try to reorder a status
- Verify error toast notification appears
- Verify statuses revert to original order
- Restart backend and verify functionality works again

### Test Case 8: Animation and Transitions

- Drag a status and observe smooth animation (200ms)
- Verify other statuses smoothly move to make space
- Verify hover effects work on all interactive elements

### Test Case 9: Default Status Reordering

- Set one status as default (star badge visible)
- Drag the default status to a different position
- Verify it can be reordered like other statuses
- Verify default badge remains visible after reorder

### Test Case 10: Integration with Other Features

- Reorder statuses
- Edit a status (change name or color)
- Verify order is maintained after edit
- Create a new status
- Verify new status appears at the end of the list
- Verify new status can be dragged to any position

## 🔍 Backend Verification

Check API Endpoint

Open browser DevTools → Network tab

When dragging and dropping, verify:

- Request: `PATCH /api/projects/{project_id}/task-statuses/reorder`
- Request body contains: `{"status_ids": ["id1", "id2", "id3", ...]}`
- Response status: `200 OK`
- Response contains updated statuses with new order values

## 📊 Expected Results

- Drag handles are visible and functional on all custom statuses
- Statuses can be reordered by dragging and dropping
- Order changes persist after page reload
- Success/error notifications appear appropriately
- UI is disabled during API calls to prevent conflicts
- Animations are smooth and responsive
- System statuses cannot be reordered
- Error states are handled gracefully

## 🐛 Known Issues / Notes

- Drag and drop requires mouse interaction (touch support may vary)
- The reorder API must be implemented on the backend
- Task counts are currently showing 0 (will be implemented later)

## ✨ Implementation Details

Library: vue-draggable-next

Component: CustomTaskStatusManager.vue

Key Features:

- Drag handle with GripVertical icon
- 200ms animation duration
- Ghost class for visual feedback during drag
- Disabled state during API calls
- Optimistic UI updates with error rollback
- Success/error toast notifications