b15cc93b9d
- Fixed 3 JavaScript syntax errors in fg_scan.html (lines 951, 840-950, 1175-1215) - Restored form field validation with proper null safety checks - Re-enabled auto-advance between form fields - Re-enabled CP code auto-complete with hyphen detection - Updated validation error messages with clear format specifications and examples - Added autocomplete='off' to all input fields - Removed auto-prefix correction feature - Updated warehouse routes and modules for box assignment workflow - Added/improved database initialization scripts - Updated requirements.txt dependencies Format specifications implemented: - Operator Code: OP + 2 digits (example: OP01, OP99) - CP Code: CP + 8 digits + hyphen + 4 digits (example: CP00000000-0001) - OC1/OC2 Codes: OC + 2 digits (example: OC01, OC99) - Defect Code: 3 digits only
489 lines
16 KiB
Markdown
489 lines
16 KiB
Markdown
# FG Scan Modal Workflow - Visual Guide
|
|
|
|
## The Problem: Incomplete Modal Structure
|
|
|
|
### Current New App (Broken) ❌
|
|
|
|
```
|
|
User scans with defect code 000
|
|
↓
|
|
FORM SUBMITS
|
|
↓
|
|
Scan saved to DB
|
|
↓
|
|
MODAL APPEARS
|
|
↓
|
|
┌──────────────────────────┐
|
|
│ Assign to Box [X] │
|
|
├──────────────────────────┤
|
|
│ │
|
|
│ Box Number: ___________ │
|
|
│ Quantity: [1] │
|
|
│ │
|
|
│ [Cancel] [Assign] │
|
|
└──────────────────────────┘
|
|
↓
|
|
❌ PROBLEM: Where's the "Create Box" button?
|
|
Users don't know they CAN create boxes!
|
|
Button is hidden somewhere in form section
|
|
```
|
|
|
|
### Old App (Working) ✅
|
|
|
|
```
|
|
User scans with defect code 000
|
|
↓
|
|
FORM SUBMITS
|
|
↓
|
|
Scan saved to DB
|
|
↓
|
|
MODAL APPEARS
|
|
↓
|
|
┌───────────────────────────────┐
|
|
│ Assign to Box [X] │
|
|
├───────────────────────────────┤
|
|
│ CP Code: CP-123456 │
|
|
│ │
|
|
│ ┌─────────────────────────┐ │
|
|
│ │ 📦 Quick Box Label │ │ ← OPTION 1
|
|
│ │ Creates & prints │ │ CREATE BOX
|
|
│ └─────────────────────────┘ │
|
|
│ │
|
|
│ ━━━━ OR ━━━━ │ ← SEPARATOR
|
|
│ │
|
|
│ Scan Box Number: ________ │ ← OPTION 2
|
|
│ │ SCAN EXISTING
|
|
│ [Skip] [Assign to Box] │ ← OPTION 3
|
|
│ │ SKIP
|
|
└───────────────────────────────┘
|
|
↓
|
|
✅ Users have CLEAR choices
|
|
Create new box OR use existing one
|
|
```
|
|
|
|
---
|
|
|
|
## Workflow Comparison
|
|
|
|
### Option 1: Create New Box
|
|
|
|
#### Old App Flow (Working ✅)
|
|
```
|
|
┌─────────────────────────────────────────────────┐
|
|
│ User fills scan form │
|
|
│ Operator: OP001 │
|
|
│ CP Code: CP-123456 │
|
|
│ OC1: OC01 │
|
|
│ OC2: OC02 │
|
|
│ Defect: 000 (GOOD) │
|
|
│ │
|
|
│ ✓ Enable "Scan to Boxes" checkbox │
|
|
│ ✓ Click Submit │
|
|
└─────────────────────────────────────────────────┘
|
|
↓
|
|
[Scan saved to DB]
|
|
↓
|
|
┌───────────────────────────┐
|
|
│ ASSIGN TO BOX MODAL │
|
|
├───────────────────────────┤
|
|
│ CP Code: CP-123456 │
|
|
│ │
|
|
│ [📦 CREATE BOX] ← CLICK │
|
|
│ │
|
|
│ — OR — │
|
|
│ Scan Box: _______ │
|
|
│ [Skip] [Assign] │
|
|
└───────────────────────────┘
|
|
↓
|
|
✓ POST /warehouse/create_box
|
|
✓ Empty box created in DB
|
|
✓ get box_id (e.g., BOX-12345)
|
|
↓
|
|
✓ POST /generate_box_label_pdf
|
|
✓ PDF label generated
|
|
↓
|
|
✓ Print via QZ Tray
|
|
✓ Label prints on thermal printer
|
|
↓
|
|
┌───────────────────────────┐
|
|
│ INPUT UPDATES │
|
|
│ "Scan printed label now" │
|
|
│ Scan Box: [FOCUS HERE] │
|
|
│ │
|
|
│ — MODAL STAYS OPEN — │
|
|
│ [Skip] [Assign] │
|
|
└───────────────────────────┘
|
|
↓
|
|
User scans newly created box label
|
|
Input gets: BOX-12345
|
|
↓
|
|
✓ Click [Assign to Box]
|
|
✓ POST /warehouse/assign_cp_to_box
|
|
✓ CP linked to box in DB
|
|
↓
|
|
Modal closes
|
|
Page reloads
|
|
✓ Ready for next scan
|
|
```
|
|
|
|
#### New App (Current Problem ⚠️)
|
|
```
|
|
Same as above BUT:
|
|
- "Create Box" button is NOT in modal
|
|
- Users don't see the option
|
|
- They can only enter box number
|
|
- Workflow INCOMPLETE
|
|
```
|
|
|
|
---
|
|
|
|
### Option 2: Scan Existing Box
|
|
|
|
#### Both Apps (Similar) ✅
|
|
```
|
|
┌───────────────────────────────────┐
|
|
│ ASSIGN TO BOX MODAL │
|
|
├───────────────────────────────────┤
|
|
│ CP Code: CP-123456 │
|
|
│ │
|
|
│ — OR — │
|
|
│ │
|
|
│ Scan Box: [FOCUS] │
|
|
│ ↓ User scans existing │
|
|
│ box label │
|
|
│ Gets: BOX-99999 │
|
|
│ │
|
|
│ [Skip] [Assign to Box] ← CLICK │
|
|
└───────────────────────────────────┘
|
|
↓
|
|
✓ POST /warehouse/assign_cp_to_box
|
|
✓ CP linked to existing box
|
|
↓
|
|
Modal closes
|
|
Page reloads
|
|
✓ Ready for next scan
|
|
```
|
|
|
|
---
|
|
|
|
### Option 3: Skip Box Assignment
|
|
|
|
#### Both Apps (Same) ✅
|
|
```
|
|
┌───────────────────────────────────┐
|
|
│ ASSIGN TO BOX MODAL │
|
|
├───────────────────────────────────┤
|
|
│ CP Code: CP-123456 │
|
|
│ │
|
|
│ [Skip] ← CLICK │
|
|
│ [Assign] │
|
|
└───────────────────────────────────┘
|
|
↓
|
|
Modal closes
|
|
Page reloads
|
|
|
|
✓ Scan is in database
|
|
✓ NO box assignment
|
|
✓ Next scan ready
|
|
```
|
|
|
|
---
|
|
|
|
## Code Architecture Comparison
|
|
|
|
### OLD APP: Everything in Modal (Correct ✅)
|
|
|
|
```
|
|
HTML Structure:
|
|
├── Form (outside modal)
|
|
│ ├── Operator Code
|
|
│ ├── CP Code
|
|
│ ├── OC1, OC2
|
|
│ ├── Defect Code
|
|
│ └── [Submit]
|
|
│
|
|
└── Modal (HIDDEN until scan)
|
|
├── CP Code display
|
|
├── [CREATE BOX BUTTON] ← HERE
|
|
├── — OR —
|
|
├── Box Number input
|
|
├── [Skip]
|
|
└── [Assign]
|
|
|
|
JavaScript:
|
|
1. Form submits
|
|
2. POST /scan endpoint
|
|
3. Save to DB
|
|
4. Trigger: showModal()
|
|
5. Click [CREATE] → POST /create_box → Print → Modal stays open
|
|
6. Scan box → Click [ASSIGN] → POST /assign_cp_to_box → Close
|
|
7. OR Click [SKIP] → Close
|
|
```
|
|
|
|
### NEW APP: Button in Wrong Place (Problem ⚠️)
|
|
|
|
```
|
|
HTML Structure:
|
|
├── Form (VISIBLE ALWAYS)
|
|
│ ├── Operator Code
|
|
│ ├── CP Code
|
|
│ ├── OC1, OC2
|
|
│ ├── Defect Code
|
|
│ ├── [Submit]
|
|
│ └── [QUICK BOX BUTTON] ← WRONG: Hidden in form, display: none
|
|
│
|
|
└── Modal (HIDDEN until scan)
|
|
├── NO CP Code display
|
|
├── Box Number input only
|
|
├── Quantity input (unnecessary)
|
|
├── [Cancel]
|
|
└── [Assign]
|
|
|
|
Problem:
|
|
- Create button NOT visible when modal appears
|
|
- Users don't know they can create boxes
|
|
- Modal shows only "Assign" workflow
|
|
- Incomplete feature implementation
|
|
```
|
|
|
|
---
|
|
|
|
## The Fix (3 Steps)
|
|
|
|
### Fix #1: Move Button into Modal HTML
|
|
|
|
```diff
|
|
<!-- Before (WRONG) -->
|
|
<div id="quickBoxSection" style="display: none;">
|
|
<button id="quickBoxLabel">Quick Box Label Creation</button>
|
|
</div>
|
|
|
|
<!-- Modal without button -->
|
|
<div id="boxAssignmentModal">
|
|
<div class="modal-body">
|
|
<input id="boxNumber" placeholder="Enter box number">
|
|
</div>
|
|
</div>
|
|
|
|
────────────────────────────────────
|
|
|
|
<!-- After (CORRECT) -->
|
|
<!-- DELETE quickBoxSection from form -->
|
|
|
|
<!-- Modal WITH button -->
|
|
<div id="boxAssignmentModal">
|
|
<div class="modal-body">
|
|
<p>CP Code: <strong id="modal-cp-code"></strong></p>
|
|
|
|
<div style="background: #f0f8ff; padding: 15px;">
|
|
<button id="quickBoxLabel">📦 Quick Box Label Creation</button>
|
|
</div>
|
|
|
|
<div>━━━━ OR ━━━━</div>
|
|
|
|
<input id="boxNumber" placeholder="Scan or enter box number">
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Fix #2: Update Modal Show Logic
|
|
|
|
```javascript
|
|
// When showing modal, display the CP code
|
|
document.getElementById('modal-cp-code').textContent = currentCpCode;
|
|
|
|
// Clear previous box entry
|
|
document.getElementById('boxNumber').value = '';
|
|
|
|
// Focus to help workflow
|
|
document.getElementById('boxNumber').focus();
|
|
|
|
// Show modal
|
|
document.getElementById('boxAssignmentModal').style.display = 'flex';
|
|
```
|
|
|
|
### Fix #3: Result
|
|
|
|
```
|
|
BEFORE:
|
|
User → Scan 000 → Modal (confusing - no create option visible)
|
|
|
|
AFTER:
|
|
User → Scan 000 → Modal (clear - 3 distinct options shown)
|
|
```
|
|
|
|
---
|
|
|
|
## Database Impact
|
|
|
|
### Tables Involved
|
|
|
|
```
|
|
When CREATE:
|
|
boxes_crates
|
|
├── id (auto-increment)
|
|
├── box_number (generated)
|
|
├── location_id
|
|
├── created_at
|
|
└── updated_at
|
|
↓
|
|
Gets: BOX-12345 (new)
|
|
|
|
When ASSIGN:
|
|
box_contents
|
|
├── id
|
|
├── box_id → boxes_crates.id
|
|
├── cp_code
|
|
├── location_id
|
|
├── created_at
|
|
└── quantity
|
|
↓
|
|
Links: CP-123456 to BOX-12345
|
|
|
|
When SCAN RECORDED:
|
|
scanfg_orders
|
|
├── id
|
|
├── cp_code
|
|
├── box_id → boxes_crates.id (if assigned)
|
|
├── location_id (from assignment)
|
|
├── operator_code
|
|
├── quality_code (000 = good)
|
|
├── date/time
|
|
└── quantities
|
|
↓
|
|
Records: CP-123456 with BOX-12345
|
|
```
|
|
|
|
---
|
|
|
|
## State Machine Diagram
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ SCAN WORKFLOW STATE │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
|
|
┌──────────────────────┐
|
|
│ FORM READY │
|
|
│ (waiting for scan) │
|
|
└──────────────────────┘
|
|
↓
|
|
User enters
|
|
all fields
|
|
↓
|
|
┌──────────────────────┐
|
|
│ VALIDATE │
|
|
│ ✓ Operator = OP* │
|
|
│ ✓ CP = CP* │
|
|
│ ✓ OC1 = OC* │
|
|
│ ✓ OC2 = OC* │
|
|
│ ✓ Defect = 3 digits │
|
|
└──────────────────────┘
|
|
↓
|
|
┌──────────────────────┐
|
|
│ Is defect = 000? │
|
|
│ Is "Scan to Boxes" │
|
|
│ checkbox enabled? │
|
|
└──────────────────────┘
|
|
↙ ↘
|
|
YES NO
|
|
↙ ↘
|
|
┌─────────────┐ ┌────────────────┐
|
|
│ POST /scan │ │ POST /scan │
|
|
│ (AJAX) │ │ (normal form) │
|
|
└─────────────┘ └────────────────┘
|
|
↓ ↓
|
|
┌─────────────┐ Page reloads
|
|
│ Save scan │ ✓ DONE
|
|
│ to DB │
|
|
└─────────────┘
|
|
↓
|
|
┌─────────────────────────────────┐
|
|
│ SHOW MODAL │
|
|
│ ┌─────────────────────────────┐ │
|
|
│ │ 📦 CREATE │ — OR — │ SCAN │ │
|
|
│ └─────────────────────────────┘ │
|
|
└─────────────────────────────────┘
|
|
↓ ↓ ↓
|
|
┌──┴─┴──┐
|
|
↙ ↓ ↘
|
|
CREATE SCAN SKIP
|
|
↓ ↓ ↓
|
|
┌─────┐ ┌─────┐ ┌─────┐
|
|
│ BOX │ │ BOX │ │ NONE│
|
|
│ NEW │ │ OLD │ │ │
|
|
└─────┘ └─────┘ └─────┘
|
|
↓ ↓ ↓
|
|
POST POST CLOSE
|
|
create assign ↓
|
|
↓ ↓ RELOAD
|
|
PDF LINK
|
|
↓ ↓
|
|
PRINT CLOSE
|
|
↓ ↓
|
|
READY RELOAD
|
|
↓ ↓
|
|
(modal stays open for scan input)
|
|
```
|
|
|
|
---
|
|
|
|
## Error Scenarios
|
|
|
|
### If button NOT moved to modal:
|
|
|
|
```
|
|
User flow:
|
|
1. ✓ Scan with 000
|
|
2. ✓ Modal appears
|
|
3. ✗ "Where's the create button?"
|
|
4. ✗ Only sees "Box Number" field
|
|
5. ✗ User confused, tries to enter box number
|
|
6. ✗ Clicks Assign
|
|
7. ✗ Gets error: "Box doesn't exist" or similar
|
|
8. ✗ Frustration: "I want to CREATE a box, not assign to existing!"
|
|
|
|
Result: Feature appears broken even though code is there
|
|
```
|
|
|
|
### After button moved to modal:
|
|
|
|
```
|
|
User flow:
|
|
1. ✓ Scan with 000
|
|
2. ✓ Modal appears with clear options
|
|
3. ✓ "Oh, I can CREATE a box!" (sees green button)
|
|
4. ✓ Click Create
|
|
5. ✓ See box number created
|
|
6. ✓ Label prints
|
|
7. ✓ Scan label
|
|
8. ✓ Click Assign
|
|
9. ✓ Done!
|
|
|
|
Result: Feature works as intended
|
|
```
|
|
|
|
---
|
|
|
|
## Verification Checklist
|
|
|
|
- [ ] `quickBoxSection` div removed from form (lines 53-56)
|
|
- [ ] Modal HTML replaced with new structure (lines 109-129)
|
|
- [ ] Modal includes CP code display element
|
|
- [ ] Modal includes green "CREATE" button
|
|
- [ ] Modal includes "— OR —" separator
|
|
- [ ] Modal includes "Scan Box" input field
|
|
- [ ] Modal show logic updated to display CP code
|
|
- [ ] "quickBoxLabel" button click handler verified (should still work)
|
|
- [ ] Modal closes on Cancel/Skip
|
|
- [ ] Modal stays open after box creation
|
|
- [ ] Create button creates box + generates PDF
|
|
- [ ] Box number auto-fills input after creation
|
|
- [ ] Scan box number input auto-focuses after creation
|
|
- [ ] Assign button links CP to box
|
|
- [ ] Scan to existing box works
|
|
- [ ] Skip option works
|
|
- [ ] Non-000 defect codes skip modal
|
|
- [ ] All three options tested end-to-end
|
|
|