Merge pull request #5462 from janeewheatley/5446-duplicate_item_entries_multiple_barcodes

5446 Duplicate Item Entries Related to Multiple Barcodes

Author: awwaiid

app/assets/stylesheets/modal-dialog.scss

@@ -31,3 +31,54 @@
     width: 700px;
   }
 }
+
+/* DUPLICATE ITEMS MODAL */
+.duplicate-container {
+  margin-bottom: 20px;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.duplicate-entry {
+  padding: 8px;
+  margin: 4px 0;
+  background-color: #fff3cd;
+  border-left: 3px solid #ffc107;
+}
+
+.duplicate-barcode {
+  font-size: 0.85em;
+  color: #666;
+  margin-top: 2px;
+}
+
+.duplicate-merged {
+  padding: 10px;
+  margin: 10px 0 0 0;
+  background-color: #d4edda;
+  border: 2px solid #28a745;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.duplicate-modal-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.duplicate-modal-text {
+  margin: 0;
+  font-size: 0.9em;
+  margin-right: 20px;
+}
+
+.duplicate-modal-buttons {
+  margin-left: auto;
+}
+
+.duplicate-items-list {
+  margin-bottom: 20px;
+}

app/javascript/controllers/audit_duplicates_controller.js

@@ -0,0 +1,136 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.boundHandleSubmit = this.handleSubmit.bind(this)
+    this.element.addEventListener("submit", this.boundHandleSubmit)
+  }
+
+  handleSubmit(event) {
+    const submitter = event.submitter
+
+    if (!submitter?.name) return
+    if (!submitter.name.includes('save_progress') && 
+        !submitter.name.includes('confirm_audit')) {
+      return
+    }
+
+    event.preventDefault()
+    
+    const duplicates = this.findDuplicates()
+    
+    if (duplicates.length > 0) {
+      this.showModal(duplicates, submitter.name)
+    } else {
+      this.submitForm(submitter.name)
+    }
+  }
+
+  findDuplicates() {
+    const itemCounts = {}
+    const itemData = {}
+
+    this.element.querySelectorAll('select[name*="[item_id]"]').forEach(select => {
+      const itemId = select.value
+      const itemText = select.options[select.selectedIndex]?.text
+      const section = select.closest('.line_item_section')
+      const quantityInput = section?.querySelector('input[name*="[quantity]"]')
+      const quantity = parseInt(quantityInput?.value) || 0
+      const barcodeValue = section?.querySelector('.__barcode_item_lookup')?.value || ''
+
+      if (!itemId || itemText === "Choose an item" || quantity === 0) return
+
+      itemCounts[itemId] = (itemCounts[itemId] || 0) + 1
+      if (!itemData[itemId]) {
+        itemData[itemId] = { name: itemText, entries: [] }
+      }
+      itemData[itemId].entries.push({ quantity, section, barcode: barcodeValue })
+    })
+
+    return Object.keys(itemCounts)
+      .filter(id => itemCounts[id] > 1)
+      .map(id => itemData[id])
+  }
+
+  showModal(duplicates, buttonName) {
+    const itemRows = duplicates.map(item => {
+      const entries = item.entries
+      const total = entries.reduce((sum, entry) => sum + entry.quantity, 0)
+      const rows = entries.map(entry => {
+        const barcodeLine = entry.barcode ? `<div class="duplicate-barcode">Barcode: ${entry.barcode}</div>` : ''
+        return `<div class="duplicate-entry">❐ ${item.name} : ${entry.quantity}${barcodeLine}</div>`
+      }).join('')
+      return `<div class="duplicate-container">${rows}<div class="duplicate-merged">→ Merged Result: ${item.name} : ${total}</div></div>`
+    }).join('')
+
+    const modalHtml = `
+      <div class="modal fade" id="duplicateItemsModal" tabindex="-1">
+        <div class="modal-dialog modal-dialog-scrollable">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Multiple Item Entries Detected</h5>
+              <button type="button" class="close" data-bs-dismiss="modal">
+                <span>&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p><strong>The following items have multiple entries:</strong></p>
+              <div class="duplicate-items-list">${itemRows}</div>
+            </div>
+            <div class="modal-footer duplicate-modal-footer">
+              <p class="duplicate-modal-text">
+                Choose <strong>Merge Items</strong> to combine quantities and continue, or <strong>Make Changes</strong> to go back and edit.
+              </p>
+              <div class="duplicate-modal-buttons">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Make Changes</button>
+                <button type="button" class="btn btn-success" id="confirmMerge">Merge Items</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+
+    document.getElementById('duplicateItemsModal')?.remove()
+    document.body.insertAdjacentHTML('beforeend', modalHtml)
+    
+    const modal = new bootstrap.Modal(document.getElementById('duplicateItemsModal'))
+    modal.show()
+    
+    document.getElementById('confirmMerge').addEventListener('click', () => {
+      this.mergeAndSubmit(duplicates, buttonName)
+    })
+  }
+
+  mergeAndSubmit(duplicates, buttonName) {
+    duplicates.forEach(item => {
+      const total = item.entries.reduce((sum, entry) => sum + entry.quantity, 0)
+
+      // Separate the first entry from remaining entries
+      const [firstEntry, ...remainingEntries] = item.entries
+      
+      // Update the first entry with the merged total
+      firstEntry.section.querySelector('input[name*="[quantity]"]').value = total
+      
+      // Remove all duplicate entries from the form submission
+      remainingEntries.forEach(entry => entry.section.remove())
+    })
+
+    const modal = new bootstrap.Modal(document.getElementById('duplicateItemsModal'))
+    modal.hide()
+    
+    this.submitForm(buttonName)
+  }
+
+  submitForm(buttonName) {
+    this.element.removeEventListener('submit', this.boundHandleSubmit)
+    
+    const input = document.createElement('input')
+    input.type = 'hidden'
+    input.name = buttonName
+    input.value = '1'
+    this.element.appendChild(input)
+    
+    this.element.submit()
+  }
+}

app/views/audits/_form.html.erb

@@ -13,7 +13,7 @@
               <div class="box-header with-border">
               </div>
               <div class="box-body">
-                <%= simple_form_for @audit, data: { controller: "form-input" }, html: {class: "storage-location-required"} do |f| %>
+                <%= simple_form_for @audit, data: { controller: "form-input audit-duplicates" }, html: {class: "storage-location-required"} do |f| %>
                   <%= render partial: "storage_locations/source", object: f, locals: { label: "Storage location", error: "What storage location are you auditing?", include_omitted_items: true } %>
                   <fieldset style="margin-bottom: 2rem;">
                     <legend>Items in this audit</legend>

spec/system/audit_system_spec.rb

@@ -195,6 +195,55 @@
         expect(page).to have_content("Delete Audit")
         expect(page).to have_content("Finalize Audit")
       end
+
+      it "detects duplicate items and shows modal", js: true do
+        # Disable server-side validation to test JS modal
+        allow_any_instance_of(Audit).to receive(:line_items_unique_by_item_id)
+        visit subject
+        click_link "New Audit"
+
+        await_select2("#audit_line_items_attributes_0_item_id") do
+          select storage_location.name, from: "Storage location"
+        end
+
+        # Add first entry for the item
+        select item.name, from: "audit_line_items_attributes_0_item_id"
+        fill_in "audit_line_items_attributes_0_quantity", with: "10"
+
+        # Add a new line item row
+        find("[data-form-input-target='addButton']").click
+
+        # Add second entry for the same item
+        within all('.line_item_section').last do
+          item_select = find('select[name*="[item_id]"]')
+          select item.name, from: item_select[:id]
+          quantity_input = find('input[name*="[quantity]"]')
+          fill_in quantity_input[:id], with: "15"
+        end
+
+        # Try to save - should trigger duplicate detection modal
+        click_button "Save Progress"
+
+        # JavaScript modal should appear
+        expect(page).to have_css("#duplicateItemsModal", visible: true)
+        expect(page).to have_content("Multiple Item Entries Detected")
+        expect(page).to have_content("Merge Items")
+        expect(page).to have_content("Make Changes")
+
+        # Test merge functionality
+        audit_id = nil
+        expect {
+          click_button "Merge Items"
+          expect(page).to have_content("Audit's progress was successfully saved.")
+          audit_id = Audit.maximum(:id)
+        }.to change { Audit.count }.by(1)
+
+        # Verify only one line item with merged quantity (10 + 15 = 25)
+        created_audit = Audit.find(audit_id)
+        line_item = created_audit.line_items.find_by(item_id: item.id)
+        expect(created_audit.line_items.count).to eq(1)
+        expect(line_item.quantity).to eq(25)
+      end
     end
 
     context "with an existing audit" do