FG Scan form validation improvements with warehouse module updates
- 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
This commit is contained in:
Quality App Developer
319
documentation/FG_SCAN_MODAL_FIX_GUIDE.md
Normal file
319
documentation/FG_SCAN_MODAL_FIX_GUIDE.md
Normal file
@@ -0,0 +1,319 @@
|
||||
# Fix FG Scan Modal: Implementation Guide
|
||||
|
||||
## Problem Summary
|
||||
The checkbox was enabled but the modal popup workflow is incomplete. The old app has a 3-option workflow (Create/Scan/Skip) that should appear after a good quality scan (defect code 000). The new app's modal is missing the "Create Box" button and has wrong structure.
|
||||
|
||||
## Solution Overview
|
||||
|
||||
### Before (Current Issue):
|
||||
```
|
||||
Checkbox enabled → Scan with 000 → Modal appears →
|
||||
[Modal shows only]
|
||||
Box Number: ___
|
||||
Quantity: ___
|
||||
[Cancel] [Assign]
|
||||
```
|
||||
|
||||
**Problem:** Where is the "Create Box" button? Users can't create new boxes from the modal.
|
||||
|
||||
### After (Fixed):
|
||||
```
|
||||
Checkbox enabled → Scan with 000 → Modal appears →
|
||||
[Modal shows]
|
||||
CP Code: CP-123456
|
||||
|
||||
┌─────────────────────────────┐
|
||||
│ 📦 Quick Box Label Creation │ ← CREATE OPTION
|
||||
└─────────────────────────────┘
|
||||
|
||||
— OR —
|
||||
|
||||
Scan Box Number: ___ ← SCAN OPTION
|
||||
|
||||
[Skip] [Assign to Box] ← Skip or Assign
|
||||
```
|
||||
|
||||
**Fix:** Move "Quick Box Label Creation" button INTO the modal and add visual separation.
|
||||
|
||||
---
|
||||
|
||||
## Implementation Steps
|
||||
|
||||
### Step 1: Remove Quick Box Section from Form
|
||||
|
||||
**File:** `/srv/quality_app-v2/app/templates/modules/quality/fg_scan.html`
|
||||
|
||||
**Find and Delete (Lines 53-56):**
|
||||
```html
|
||||
<div id="quickBoxSection" style="display: none;" class="quick-box-section">
|
||||
<button type="button" class="btn-secondary" id="quickBoxLabel">Quick Box Label Creation</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Why:** This button should be in the modal, not in the form. It's confusing when the user sees it before the modal appears.
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Replace Modal HTML
|
||||
|
||||
**Find (Lines 109-129):**
|
||||
```html
|
||||
<!-- Box Assignment Modal -->
|
||||
<div id="boxAssignmentModal" class="box-modal" style="display: none;">
|
||||
<div class="box-modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Assign to Box</h2>
|
||||
<button type="button" class="modal-close" id="closeModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<label for="boxNumber">Box Number:</label>
|
||||
<input type="text" id="boxNumber" placeholder="Enter box number">
|
||||
<label for="boxQty">Quantity:</label>
|
||||
<input type="number" id="boxQty" placeholder="Enter quantity" min="1">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn-secondary" id="cancelModal">Cancel</button>
|
||||
<button type="button" class="btn-submit" id="assignToBox">Assign</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Replace with:**
|
||||
```html
|
||||
<!-- Box Assignment Modal -->
|
||||
<div id="boxAssignmentModal" class="box-modal" style="display: none;">
|
||||
<div class="box-modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Assign to Box</h2>
|
||||
<button type="button" class="modal-close" id="closeModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Display CP Code -->
|
||||
<p style="margin-bottom: 20px; font-size: 0.95em; font-weight: 500;">
|
||||
CP Code: <strong id="modal-cp-code" style="color: #007bff;">-</strong>
|
||||
</p>
|
||||
|
||||
<!-- OPTION 1: Quick Box Creation -->
|
||||
<div style="margin: 20px 0; padding: 15px; background: #f0f8ff; border: 1px solid #cce7ff; border-radius: 5px;">
|
||||
<button type="button" id="quickBoxLabel" class="btn"
|
||||
style="width: 100%; background: #28a745; color: white; padding: 10px; font-size: 1em; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;">
|
||||
📦 Quick Box Label Creation
|
||||
</button>
|
||||
<p style="font-size: 0.85em; color: #666; margin-top: 8px; text-align: center;">
|
||||
Creates new box and prints label immediately
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- SEPARATOR -->
|
||||
<div style="text-align: center; margin: 20px 0; color: #999; font-size: 0.9em; letter-spacing: 1px;">
|
||||
━━━━━━━ OR ━━━━━━━
|
||||
</div>
|
||||
|
||||
<!-- OPTION 2: Scan Existing Box -->
|
||||
<div style="margin: 20px 0;">
|
||||
<label for="boxNumber" style="font-weight: 600; display: block; margin-bottom: 8px; color: #333;">Scan Box Number:</label>
|
||||
<input type="text" id="boxNumber" placeholder="Scan or enter box number"
|
||||
style="width: 100%; padding: 8px; font-size: 1em; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 1.1em;">
|
||||
<p style="font-size: 0.85em; color: #666; margin-top: 5px;">
|
||||
Scan an existing box label or enter the box number manually
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer" style="padding: 15px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px;">
|
||||
<button type="button" class="btn-secondary" id="cancelModal" style="padding: 8px 16px;">Skip</button>
|
||||
<button type="button" class="btn-submit" id="assignToBox" style="padding: 8px 16px;">Assign to Box</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Why:**
|
||||
- Adds green "Create Box" button with clear description
|
||||
- Adds visual separator ("━━━━━━━ OR ━━━━━━━")
|
||||
- Displays CP code so user knows which product is being assigned
|
||||
- Makes the three options explicit and easy to understand
|
||||
- Improves styling for readability
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Update Modal Show Logic
|
||||
|
||||
**Find (around Line 803-810):**
|
||||
```javascript
|
||||
if (data.success) {
|
||||
showNotification('✅ Scan saved successfully!', 'success');
|
||||
|
||||
// Store CP code for modal
|
||||
currentCpCode = document.getElementById('cp_code').value.trim();
|
||||
|
||||
// Reset form
|
||||
resetForm();
|
||||
|
||||
// Show box assignment modal
|
||||
document.getElementById('boxAssignmentModal').style.display = 'flex';
|
||||
document.getElementById('quickBoxLabel').focus();
|
||||
}
|
||||
```
|
||||
|
||||
**Replace with:**
|
||||
```javascript
|
||||
if (data.success) {
|
||||
showNotification('✅ Scan saved successfully!', 'success');
|
||||
|
||||
// Store CP code for modal
|
||||
currentCpCode = document.getElementById('cp_code').value.trim();
|
||||
|
||||
// Reset form
|
||||
resetForm();
|
||||
|
||||
// Show box assignment modal with CP code
|
||||
document.getElementById('modal-cp-code').textContent = currentCpCode;
|
||||
document.getElementById('boxNumber').value = ''; // Clear previous entry
|
||||
document.getElementById('boxAssignmentModal').style.display = 'flex';
|
||||
|
||||
// Focus on box number input (for scanned boxes)
|
||||
setTimeout(() => {
|
||||
document.getElementById('boxNumber').focus();
|
||||
}, 100);
|
||||
}
|
||||
```
|
||||
|
||||
**Why:**
|
||||
- Displays the CP code in the modal so user knows what's being assigned
|
||||
- Clears the box number field for fresh entry
|
||||
- Sets focus to help user with keyboard workflow
|
||||
|
||||
---
|
||||
|
||||
### Step 4: Verify Quick Box Button Handler
|
||||
|
||||
**Check the existing handler (around Line 835-900):**
|
||||
|
||||
Should already have this structure:
|
||||
```javascript
|
||||
document.getElementById('quickBoxLabel').addEventListener('click', async function() {
|
||||
if (!scanToBoxesEnabled) {
|
||||
showNotification('⚠️ Please enable "Scan to Boxes" first', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.disabled = true;
|
||||
this.textContent = '⏳ Creating...';
|
||||
|
||||
// Step 1: Create box
|
||||
// Step 2: Generate PDF
|
||||
// Step 3: Print label
|
||||
// Step 4: Update input field
|
||||
|
||||
} finally {
|
||||
this.disabled = false;
|
||||
this.textContent = '📦 Quick Box Label Creation';
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**Verify:**
|
||||
- ✅ Handler exists and works
|
||||
- ✅ Button disables during creation
|
||||
- ✅ Modal stays open after creation
|
||||
- ✅ Input field gets focus after creation
|
||||
|
||||
---
|
||||
|
||||
### Step 5: Verify Cancel/Close Behavior
|
||||
|
||||
**Existing code (around Line 976-985) should have:**
|
||||
|
||||
```javascript
|
||||
// Close modal
|
||||
document.getElementById('closeModal').addEventListener('click', function() {
|
||||
document.getElementById('boxAssignmentModal').style.display = 'none';
|
||||
});
|
||||
|
||||
// Cancel button
|
||||
document.getElementById('cancelModal').addEventListener('click', function() {
|
||||
document.getElementById('boxAssignmentModal').style.display = 'none';
|
||||
});
|
||||
```
|
||||
|
||||
**This is correct.** Both X button and Cancel/Skip button close the modal.
|
||||
|
||||
---
|
||||
|
||||
## Summary of Changes
|
||||
|
||||
| Item | Change | Line(s) |
|
||||
|------|--------|---------|
|
||||
| Remove quickBoxSection | Delete | 53-56 |
|
||||
| Replace modal HTML | Full restructure | 109-129 |
|
||||
| Update modal show logic | Add CP display + focus | 803-810 |
|
||||
| **Total changes** | 3 edits | ~40 lines affected |
|
||||
|
||||
---
|
||||
|
||||
## Testing After Changes
|
||||
|
||||
1. **Enable checkbox:**
|
||||
- Check "Scan to Boxes"
|
||||
- Verify checkbox stays checked
|
||||
- See no errors in console
|
||||
|
||||
2. **Scan with 000 (good quality):**
|
||||
- Fill form: Operator, CP, OC1, OC2, Defect=000
|
||||
- Click Submit
|
||||
- Modal should appear with:
|
||||
- CP Code displayed
|
||||
- Green "📦 Quick Box Label Creation" button
|
||||
- "— OR —" separator
|
||||
- Box number input field
|
||||
- "Skip" and "Assign to Box" buttons
|
||||
|
||||
3. **Test Create Option:**
|
||||
- Click green button
|
||||
- Box should be created in database
|
||||
- PDF generated
|
||||
- Label prints (if QZ Tray available)
|
||||
- Input field auto-updates: "Scan the printed label now..."
|
||||
- Modal stays open
|
||||
- Scan the box, click "Assign to Box"
|
||||
|
||||
4. **Test Scan Option:**
|
||||
- Modal appears again
|
||||
- Scan existing box number (or type manually)
|
||||
- Click "Assign to Box"
|
||||
- Should link CP to box
|
||||
- Modal closes, page reloads
|
||||
|
||||
5. **Test Skip Option:**
|
||||
- Click "Skip" button
|
||||
- Modal closes
|
||||
- Scan recorded but not assigned to any box
|
||||
|
||||
6. **Test with non-000 defect code:**
|
||||
- Scan with defect code 001 or higher
|
||||
- Modal should NOT appear
|
||||
- Form submits normally (old behavior)
|
||||
- Page reloads
|
||||
|
||||
---
|
||||
|
||||
## Expected Result
|
||||
|
||||
After implementing these changes:
|
||||
|
||||
✅ Modal appears after good quality scans
|
||||
✅ Users see clear "Create" vs "Scan Existing" options
|
||||
✅ Workflow matches old app
|
||||
✅ Box tracking feature becomes fully functional
|
||||
✅ Users understand their choices
|
||||
✅ No more confusion about where to create boxes
|
||||
|
||||
---
|
||||
|
||||
## Reference Documentation
|
||||
|
||||
- **Complete comparison:** `/srv/quality_app-v2/documentation/BOX_WORKFLOW_COMPARISON_OLD_VS_NEW.md`
|
||||
- **Old app reference:** `/srv/quality_app/py_app/app/templates/fg_scan.html`
|
||||
- **Current file:** `/srv/quality_app-v2/app/templates/modules/quality/fg_scan.html`
|
||||
Reference in New Issue
Block a user