# How to Test the New Action Picker Features

## Prerequisites
✅ API server is running on http://100.81.138.77:8000
✅ All new files are in place

## Steps to See the New Features

### 1. Stop the Running App
If the Flutter app is currently running, stop it completely:
- **VS Code**: Press the stop button (red square) or Shift+F5
- **Android Studio**: Click Stop (red square) in the toolbar

### 2. Rebuild and Run
Start the app fresh to pick up the new code:
- **VS Code**: Press F5 or click Run > Start Debugging
- **Android Studio**: Click Run (green triangle) or Shift+F10

**IMPORTANT:** Hot reload (⚡) won't work for these changes - you need a full restart!

### 3. Navigate to Action Mappings
1. Login with your credentials
2. Open the menu (≡)
3. Click "Action Mappings"
4. Click "Add Action Mapping" or edit an existing one

### 4. Test the New Action Picker

#### Adding an Output Action:
1. In the form, scroll to "Output Actions" section
2. Click the **"Add Output Action"** button
3. You should see a NEW dialog (800x600px) with:
   - **Left side**: Category dropdown + Action list
   - **Right side**: Parameters section

#### Using the Action Picker:
1. Select a category (e.g., "Camera Control")
2. Click an action from the list (e.g., "PanStop")
3. Enable parameters by checking boxes
4. Fill in parameter values
5. Enter a caption
6. Click "Ok"
7. The action should appear in the form with all parameters

#### Editing an Action:
1. Click the edit button (✎) on any output action card
2. The action picker should open with existing values
3. Modify and click "Ok"

#### Reordering Actions:
1. Add 2+ output actions
2. Use the ▲ ▼ buttons to reorder them

### 5. What You Should See

**Before (Old UI):**
- Dropdown with 29 hardcoded actions
- Manual parameter editing dialogs
- No reordering

**After (New UI):**
- "Add Output Action" button
- Action picker dialog with categories
- 45 actions across 10 categories
- Dynamic parameter fields with checkboxes
- Action descriptions shown
- Up/Down buttons to reorder

## Troubleshooting

### Issue: Still seeing the old UI with dropdown

**Solution:** You didn't do a full rebuild
- Stop the app completely
- Close all running processes
- Run from IDE again (not hot reload!)

### Issue: "Failed to load action templates"

**Check:**
1. API server is running: http://100.81.138.77:8000
2. You're logged in
3. Check browser/app logs for errors

**Test the API endpoints manually:**
```bash
# Get token
curl -X POST http://100.81.138.77:8000/api/v1/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"admin123"}'

# Test categories endpoint
curl http://100.81.138.77:8000/api/v1/configuration/action-categories \
  -H "Authorization: Bearer YOUR_TOKEN"

# Test action types endpoint
curl http://100.81.138.77:8000/api/v1/configuration/action-types \
  -H "Authorization: Bearer YOUR_TOKEN"
```

### Issue: Build errors / Red squiggles

**Check these files exist:**
- ✅ `lib/data/models/action_template.dart`
- ✅ `lib/data/services/action_template_service.dart`
- ✅ `lib/presentation/widgets/action_picker_dialog.dart`

**Run in terminal:**
```bash
cd C:\DEV\COPILOT\geutebruck_app
flutter clean
flutter pub get
flutter run
```

### Issue: "ApiConstants.baseUrl not found"

The file exists at `lib/core/constants/api_constants.dart`
Make sure imports are correct in `action_template_service.dart`

## Files Changed

**New Files (3):**
1. `lib/data/models/action_template.dart`
2. `lib/data/services/action_template_service.dart`
3. `lib/presentation/widgets/action_picker_dialog.dart`

**Modified Files (1):**
4. `lib/presentation/screens/action_mappings/action_mapping_form_screen.dart`

## Backend Endpoints

These should all be working:
- ✅ GET `/api/v1/configuration/action-categories`
- ✅ GET `/api/v1/configuration/action-types`
- ✅ GET `/api/v1/configuration/action-types/{name}`

## Expected Behavior

### Creating a New Action Mapping:
1. Fill name, description, input action
2. Click "Add Output Action"
3. **NEW DIALOG APPEARS** ← This is the key change!
4. Select category "Camera Control"
5. Select action "PanStop"
6. Check "GCoreServer" parameter
7. Enter value "gscope-cdu-3"
8. Check "PTZ head" parameter
9. Enter value "101027"
10. Enter caption "Stop Pan Camera 1"
11. Click "Ok"
12. Action appears in form with 2 parameters shown
13. Click "Create Action Mapping"

### Editing Existing Action:
1. Open existing mapping
2. Click edit button (✎) on output action
3. **NEW DIALOG APPEARS** with existing values
4. Modify parameters
5. Click "Ok"
6. Click "Update Action Mapping"

## Still Not Working?

Send me:
1. Screenshot of what you see
2. Any error messages from console/logs
3. What step you're at in the process

The dialog MUST appear when you click "Add Output Action" - if you don't see it, the app hasn't picked up the new code yet.