Upload fix-order-detail-click.js

fix-order-detail-click.js

@@ -0,0 +1,217 @@
+/**
+ * Fix: Clicking saved order opens quote modal instead of order detail modal
+ * This patches the order search modal click handlers to ensure correct behavior
+ */
+(function() {
+    'use strict';
+    
+    console.log('[Fix] Patching order detail click handlers...');
+    
+    // Patch VAI_ORDERS.openSearch to ensure correct click handling
+    if (window.VAI_ORDERS && typeof window.VAI_ORDERS.openSearch === 'function') {
+        var originalOpenSearch = window.VAI_ORDERS.openSearch;
+        window.VAI_ORDERS.openSearch = function() {
+            originalOpenSearch.apply(this, arguments);
+            // After modal is created, patch the click handler
+            setTimeout(patchOrderListClicks, 100);
+        };
+    }
+    
+    // Also patch the fallback in quote-ui.js if it exists
+    if (window.openOrdersFallback) {
+        var originalFallback = window.openOrdersFallback;
+        window.openOrdersFallback = function() {
+            originalFallback.apply(this, arguments);
+            setTimeout(patchOrderListClicks, 100);
+        };
+    }
+    
+    function patchOrderListClicks() {
+        // Find the order search modal (both possible IDs)
+        var modal = document.getElementById('vai-order-search-modal');
+        if (!modal) return;
+        
+        var resultsContainer = modal.querySelector('#vai-os-r, #vai-os-fb-r');
+        if (!resultsContainer) return;
+        
+        // Remove existing click handlers by cloning
+        var newContainer = resultsContainer.cloneNode(true);
+        resultsContainer.parentNode.replaceChild(newContainer, resultsContainer);
+        
+        // Add new click handler with proper event handling
+        newContainer.addEventListener('click', function(e) {
+            // Handle delete button
+            var deleteBtn = e.target.closest('.od, .od-fb');
+            if (deleteBtn) {
+                e.stopPropagation();
+                e.preventDefault();
+                var code = deleteBtn.dataset.c || deleteBtn.dataset.code;
+                if (code && confirm('Xóa đơn ' + code + '?')) {
+                    if (window.VAI_ORDERS && typeof window.VAI_ORDERS.delete === 'function') {
+                        window.VAI_ORDERS.delete(code);
+                    } else {
+                        var orders = JSON.parse(localStorage.getItem('vai_orders') || '[]');
+                        orders = orders.filter(function(o) { return o.code !== code; });
+                        localStorage.setItem('vai_orders', JSON.stringify(orders));
+                    }
+                    // Refresh the list
+                    if (window.VAI_ORDERS && typeof window.VAI_ORDERS.openSearch === 'function') {
+                        window.VAI_ORDERS.openSearch();
+                    } else if (window.openOrdersFallback) {
+                        window.openOrdersFallback();
+                    }
+                }
+                return;
+            }
+            
+            // Handle order item click - open detail
+            var orderItem = e.target.closest('.oi, .oi-fb');
+            if (orderItem) {
+                e.stopPropagation();
+                e.preventDefault();
+                
+                // Close the search modal
+                var searchModal = document.getElementById('vai-order-search-modal');
+                if (searchModal) searchModal.remove();
+                
+                // Ensure quote modal is closed
+                closeQuoteModal();
+                
+                // Get order index
+                var idx = parseInt(orderItem.dataset.i);
+                if (isNaN(idx)) return;
+                
+                // Get orders and open detail
+                var orders = [];
+                try {
+                    orders = JSON.parse(localStorage.getItem('vai_orders') || '[]');
+                } catch (err) {}
+                
+                var order = orders[idx];
+                if (!order) return;
+                
+                // Open order detail using VAI_ORDERS
+                if (window.VAI_ORDERS && typeof window.VAI_ORDERS.openDetail === 'function') {
+                    window.VAI_ORDERS.openDetail(order);
+                } else {
+                    // Fallback: manually open detail
+                    openOrderDetailFallback(order);
+                }
+            }
+        }, true); // Use capture phase to intercept early
+        
+        console.log('[Fix] Order list click handlers patched');
+    }
+    
+    function closeQuoteModal() {
+        var quoteOverlay = document.querySelector('.quote-overlay');
+        if (quoteOverlay) {
+            quoteOverlay.classList.remove('open');
+            quoteOverlay.style.display = 'none';
+        }
+        var quoteModal = document.querySelector('.quote-modal');
+        if (quoteModal) {
+            quoteModal.classList.remove('open');
+            quoteModal.style.display = 'none';
+        }
+    }
+    
+    function openOrderDetailFallback(order) {
+        // Replicate the openOrderDetail logic from order-store.js
+        var ov = document.createElement('div');
+        ov.id = 'vai-order-detail-modal';
+        ov.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto';
+        ov.onclick = function(e) { if (e.target === ov) ov.remove(); };
+        document.body.appendChild(ov);
+        
+        var modal = document.createElement('div');
+        modal.style.cssText = 'background:#fff;border-radius:16px;max-width:750px;width:100%;max-height:92vh;overflow-y:auto';
+        ov.appendChild(modal);
+        
+        // Simple detail view
+        var isC = order.status === 'confirmed';
+        var h = '<div style="padding:12px 18px;background:#003f62;border-radius:16px 16px 0 0;display:flex;justify-content:space-between;align-items:center">'
+            + '<div><b style="color:#fff">' + escapeHtml(order.code || '') + '</b> ' + (isC ? '<span style="background:#dcfce7;color:#16a34a;padding:2px 8px;border-radius:6px;font-size:10px;margin-left:8px">✅ Đã chốt</span>' : '<span style="background:#fef9c3;color:#92400e;padding:2px 8px;border-radius:6px;font-size:10px;margin-left:8px">⏳</span>') + '</div>'
+            + '<button id="xc" style="background:none;border:none;color:#fff;font-size:20px;cursor:pointer">✕</button></div>'
+            + '<div style="padding:14px 18px">';
+        
+        // Customer info
+        h += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px;margin-bottom:10px;padding:10px;background:#f8fafc;border-radius:8px">'
+            + '<div><b>KH:</b> ' + escapeHtml(order.customer || '') + '</div>'
+            + '<div><b>SĐT:</b> ' + escapeHtml(order.phone || '') + '</div>'
+            + '<div style="grid-column:1/-1"><b>ĐC:</b> ' + escapeHtml(order.addr || '') + '</div>'
+            + '</div>';
+        
+        // Items table
+        h += '<table style="width:100%;border-collapse:collapse;font-size:11px;margin-bottom:8px"><thead>'
+            + '<tr style="background:#003f62;color:#fff"><th style="padding:5px">#</th><th style="padding:5px">Ảnh</th><th style="padding:5px;text-align:left">SP</th><th style="padding:5px;text-align:left">Thông tin</th><th style="padding:5px">SL</th><th style="padding:5px;text-align:right">Giá niêm yết</th><th style="padding:5px;text-align:right">Giá CK</th><th style="padding:5px;text-align:right">TT</th></tr></thead><tbody>';
+        
+        function fmt(n) { if (!n || isNaN(n)) return '0đ'; return Number(n).toLocaleString('vi-VN') + 'đ'; }
+        function orderItemInfo(it) {
+            it = it || {};
+            var v = it.info || it.thong_tin || it.dim_info || it.dimension_info || it.specs || it.summary || it.desc || '';
+            if (typeof v === 'string') {
+                var t = v.trim();
+                if (!t || t === '{}' || t === '[]') return '';
+                if ((t[0] === '{' && t[t.length-1] === '}') || (t[0] === '[' && t[t.length-1] === ']')) {
+                    try { return orderItemInfo(JSON.parse(t)); } catch(e) { return t; }
+                }
+                return t;
+            }
+            if (Array.isArray(v)) return v.map(orderItemInfo).filter(Boolean).join('; ');
+            if (typeof v === 'object') {
+                var out = []; Object.keys(v).forEach(function(k) { var val = v[k]; if (val == null || val === '' || (typeof val === 'object' && !Array.isArray(val) && !Object.keys(val).length)) return; out.push(k + ': ' + orderItemInfo(val)); });
+                return out.join('; ');
+            }
+            return String(v);
+        }
+        
+        (order.items || []).forEach(function(it, i) {
+            var ck = it.discPrice && it.price && it.discPrice < it.price;
+            h += '<tr style="border-bottom:1px solid #f1f5f9">'
+                + '<td style="padding:3px;text-align:center">' + (i+1) + '</td>'
+                + '<td style="padding:3px">' + (it.image ? '<img src="' + it.image + '" style="width:40px;height:40px;object-fit:contain;border-radius:4px" referrerpolicy="no-referrer" onerror="this.style.display=\'none\'">' : '') + '</td>'
+                + '<td style="padding:3px"><b style="font-size:10px">' + escapeHtml((it.name || '').substring(0,28)) + '</b><br><span style="font-size:9px;color:#64748b">' + escapeHtml(it.model || '') + '</span></td>'
+                + '<td style="padding:3px;font-size:9px;color:#64748b;max-width:150px">' + escapeHtml(orderItemInfo(it)).substring(0,260) + '</td>'
+                + '<td style="padding:3px;text-align:center">' + (it.qty || 1) + '</td>'
+                + '<td style="padding:3px;text-align:right">' + fmt(it.price) + '</td>'
+                + '<td style="padding:3px;text-align:right;' + (ck ? 'color:#dc3545;font-weight:700' : '') + '">' + fmt(it.discPrice || it.price) + '</td>'
+                + '<td style="padding:3px;text-align:right;font-weight:700">' + fmt(it.total) + '</td>'
+                + '</tr>';
+        });
+        h += '</tbody></table>';
+        
+        // Totals
+        h += '<div style="padding:8px 12px;background:#003f62;border-radius:6px;display:flex;justify-content:space-between;margin-bottom:6px">'
+            + '<span style="color:#fff;font-weight:800">TỔNG</span>'
+            + '<span style="color:#f0b840;font-weight:900;font-size:15px">' + fmt(order.grandTotal) + '</span></div>';
+        
+        if (order.deposit > 0) {
+            h += '<div style="padding:4px 10px;background:#f0fdf4;border-radius:6px;font-size:10px;margin-bottom:6px">'
+                + '<span>Cọc: <b>' + fmt(order.deposit) + '</b></span> | <span>Còn: <b style="color:#dc2626">' + fmt(order.remaining) + '</b></span></div>';
+        }
+        
+        h += '</div>';
+        modal.innerHTML = h;
+        
+        document.getElementById('xc').onclick = function() { ov.remove(); };
+    }
+    
+    function escapeHtml(s) {
+        return (s || '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
+    }
+    
+    // Also patch when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(patchOrderListClicks, 500);
+        });
+    } else {
+        setTimeout(patchOrderListClicks, 500);
+    }
+    
+    // Periodic re-patch in case modals are recreated
+    setInterval(patchOrderListClicks, 5000);
+    
+    console.log('[Fix] Order detail click fix loaded');
+})();