fix save and load data

@@ -313,6 +313,7 @@
                     customer_name = this.manualBoxData.customer_name.text;
                     customer_name = this.manualBoxData.customer_name.text;
                     customer_coords = this.manualBoxData.customer_name.coords.join(',');
                     customer_coords = this.manualBoxData.customer_name.coords.join(',');
                     fields =  this.manualBoxData;
                     fields =  this.manualBoxData;
+                    console.log('Using manualBoxData for customer_name:', customer_name, customer_coords);
                 } else {
                 } else {
                     // Không có → tìm trong ocrData
                     // Không có → tìm trong ocrData
                     const found = this.ocrData.find(item => item.field === 'customer_name');
                     const found = this.ocrData.find(item => item.field === 'customer_name');
@@ -333,11 +334,12 @@
                     });
                     });
                     // // convert to array
                     // // convert to array
                     fields = (fieldsByName);
                     fields = (fieldsByName);
+                    console.log('Using ocrData for customer_name:', customer_name, customer_coords);
                 }
                 }
 
 
-                console.log('fields:', fields);
+               // console.log('fields:', fields);
 
 
-                if (!customer_coords) {
+                if (!customer_coords || !customer_name) {
                     alert("Bạn phải map customer_name (quét/select) trước khi lưu.");
                     alert("Bạn phải map customer_name (quét/select) trước khi lưu.");
                     return;
                     return;
                 }
                 }
@@ -434,7 +436,6 @@
             processLoadedData() {
             processLoadedData() {
                 // Tự động map field cho các box OCR dựa trên formData đã load
                 // Tự động map field cho các box OCR dựa trên formData đã load
                 this.autoMapFieldsFromFormData();
                 this.autoMapFieldsFromFormData();
-                // Kiểm tra và sửa lại tọa độ của các box manual
 
 
                 // Force re-render để đảm bảo các box được vẽ
                 // Force re-render để đảm bảo các box được vẽ
                 this.$nextTick(() => {
                 this.$nextTick(() => {
@@ -449,28 +450,44 @@
                 if(this.is_template) {
                 if(this.is_template) {
                     this.formData = {};
                     this.formData = {};
                 }
                 }
+
+                const tolerance = 20; // ngưỡng cho cùng 1 hàng
+
                 Object.keys(this.dataMapping).forEach(fieldName => {
                 Object.keys(this.dataMapping).forEach(fieldName => {
-                    let { text, coords } = this.dataMapping[fieldName];
-                    console.log(`Auto-mapping field "${fieldName}" with coords:`, coords, 'and text:', text);
-                    this.ocrData.forEach(item => {
-                        if (this.isBoxInside(item.bbox, coords) && item.text.trim()) {
-                            const partial = this.getPartialText(item.text, item.bbox, coords);
-                            text = partial; // cập nhật biến text để giá trị mới được truyền qua manualBoxData
+                    let { coords } = this.dataMapping[fieldName];
+                    let foundItems = this.ocrData
+                        .filter(item => this.isBoxInside(item.bbox, coords) && item.text.trim())
+                        .map(item => ({
+                            text: this.getPartialText(item.text, item.bbox, coords),
+                            bbox: item.bbox
+                        }))
+                        .sort((a, b) =>
+                            Math.abs(a.bbox[1] - b.bbox[1]) < tolerance
+                                ? a.bbox[0] - b.bbox[0] // cùng hàng → trái sang phải
+                                : a.bbox[1] - b.bbox[1] // khác hàng → trên xuống dưới
+                        );
+
+
+                    const combinedText = foundItems.map(f => f.text.trim());
+                    const finalText = combinedText.join(" ");
+
+                    // Lưu vào dataMapping
                     this.dataMapping[fieldName] = {
                     this.dataMapping[fieldName] = {
-                                text: partial,
+                        text: finalText,
                         coords: coords
                         coords: coords
                     };
                     };
-                        }
-                    });
-
+                    // Nếu là template thì gán vào formData
                     if (this.is_template) {
                     if (this.is_template) {
-                        this.formData[fieldName] = text || '';
+                        this.formData[fieldName] = finalText || '';
                     }
                     }
-                    this.manualBoxData[fieldName] = { text, coords };
+                    this.manualBoxData[fieldName] = {
+                        text: finalText,
+                        coords: coords
+                    };
                 });
                 });
 
 
-                console.log('dataMapping:', this.dataMapping);
-                console.log('formData:', this.formData);
+                // console.log('dataMapping:', this.dataMapping);
+                // console.log('formData:', this.formData);
 
 
             },
             },
 
 
@@ -812,7 +829,7 @@
                     // Set active index
                     // Set active index
                     this.activeIndex = this.selectingIndex;
                     this.activeIndex = this.selectingIndex;
 
 
-                    console.log(`Updated field "${item.field}" for box OCR at index ${this.selectingIndex} with new coordinates`);
+                  //  console.log(`Updated field "${item.field}" for box OCR at index ${this.selectingIndex} with new coordinates`);
                 }
                 }
 
 
                 this.selectingIndex = null;
                 this.selectingIndex = null;
@@ -823,8 +840,7 @@
 
 
                 const newBbox = this.ocrData[manualIndex].bbox;
                 const newBbox = this.ocrData[manualIndex].bbox;
 
 
-
-                console.log(` manual for field "${this.manualField}" at index ${manualIndex} with bbox:`, newBbox);
+                console.log(`manual for field "${this.manualField}" at index ${manualIndex} with bbox:`, newBbox);
                 this.ocrData.forEach((box, i) => {
                 this.ocrData.forEach((box, i) => {
                     if (i !== manualIndex && box.field === this.ocrData[manualIndex].field) {
                     if (i !== manualIndex && box.field === this.ocrData[manualIndex].field) {
                         box.field = '';
                         box.field = '';
@@ -838,7 +854,7 @@
                 this.ocrData.forEach(item => {
                 this.ocrData.forEach(item => {
                     if (!item.isManual && this.isBoxInside(item.bbox, newBbox) && item.text.trim()) {
                     if (!item.isManual && this.isBoxInside(item.bbox, newBbox) && item.text.trim()) {
                         const partial = this.getPartialText(item.text, item.bbox, newBbox);
                         const partial = this.getPartialText(item.text, item.bbox, newBbox);
-                        // console.log(`Found OCR item for manual mapping: ${partial} at bbox ${item.bbox}`);
+
                         foundItems.push({
                         foundItems.push({
                             text: partial,
                             text: partial,
                             bbox: item.bbox,
                             bbox: item.bbox,
@@ -862,10 +878,10 @@
                 });
                 });
 
 
                 const finalText = combinedText.join(" ");
                 const finalText = combinedText.join(" ");
-                console.log('Combined text:', finalText);
+               // console.log('Combined text:', finalText);
 
 
                 // Gán field và text cho box manual
                 // Gán field và text cho box manual
-                console.log(`Assigning manual field "${this.manualField}" to box at index ${manualIndex} with text: "${finalText}"`);
+              //  console.log(`Assigning manual field "${this.manualField}" to box at index ${manualIndex} with text: "${finalText}"`);
 
 
                 // Gán field trực tiếp cho box manual
                 // Gán field trực tiếp cho box manual
                 this.ocrData[manualIndex].field = this.manualField;
                 this.ocrData[manualIndex].field = this.manualField;
@@ -922,7 +938,6 @@
             getPartialText(text, bbox, selectBbox) {
             getPartialText(text, bbox, selectBbox) {
                 const [x1, y1, x2, y2] = bbox;
                 const [x1, y1, x2, y2] = bbox;
                 const [sx1, sy1, sx2, sy2] = selectBbox;
                 const [sx1, sy1, sx2, sy2] = selectBbox;
-
                 // Chiều rộng box OCR
                 // Chiều rộng box OCR
                 const boxWidth = x2 - x1;
                 const boxWidth = x2 - x1;
                 const boxHeight = y2 - y1;
                 const boxHeight = y2 - y1;