From e35a5179bb16d1a47367da12b03c489f11cd6700 Mon Sep 17 00:00:00 2001
From: kernal053 <uwankar8@gmail.com>
Date: Fri, 23 Aug 2024 15:44:42 +0530
Subject: [PATCH] Fix broken column after cloning product

---
 .../column_preferences_controller.js          | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/controllers/column_preferences_controller.js b/app/webpacker/controllers/column_preferences_controller.js
index 9b55a961dc..65202920f4 100644
--- a/app/webpacker/controllers/column_preferences_controller.js
+++ b/app/webpacker/controllers/column_preferences_controller.js
@@ -6,7 +6,7 @@ export default class ColumnPreferencesController extends Controller {
   connect() {
     this.table = document.querySelector('table[data-column-preferences-target="table"]');
     this.cols = Array.from(this.table.querySelectorAll('col'));
-    this.colSpanCells = this.table.querySelectorAll('th[colspan],td[colspan]');
+    this.colSpanCells = Array.from(this.table.querySelectorAll('th[colspan],td[colspan]'));
     // Initialise data-default-col-span
     this.colSpanCells.forEach((cell)=> {
       cell.dataset.defaultColSpan ||= cell.colSpan;
@@ -19,6 +19,8 @@ export default class ColumnPreferencesController extends Controller {
       // On checkbox changed
       element.addEventListener("change", this.#showHideColumn.bind(this));
     }
+
+    this.#observeProductsTableRows();
   }
 
   // private
@@ -30,14 +32,39 @@ export default class ColumnPreferencesController extends Controller {
     this.table.classList.toggle(`hide-${name}`, !element.checked);
 
     // Reset cell colspans
-    const hiddenColCount = this.checkboxes.filter((checkbox)=> !checkbox.checked).length;
     for(const cell of this.colSpanCells) {
-      const span = parseInt(cell.dataset.defaultColSpan, 10) - hiddenColCount;
-      cell.colSpan = span;
+      this.#updateColSpanCell(cell);
     };
   }
 
   #showHideElement(element, show) {
     element.style.display = show ? "" : "none";
   }
+
+  #observeProductsTableRows(){
+    this.productsTableObserver = new MutationObserver((mutations, _observer) => {
+      const mutationRecord = mutations[0];
+
+      if(mutationRecord){
+        const productRowElement = mutationRecord.addedNodes[0];
+
+        if(productRowElement){
+          const newColSpanCell = productRowElement.querySelector('td[colspan]');
+          newColSpanCell.dataset.defaultColSpan ||= newColSpanCell.colSpan;
+          this.#updateColSpanCell(newColSpanCell);
+          this.colSpanCells.push(newColSpanCell);
+        }
+      }
+    });
+
+    this.productsTableObserver.observe(this.table, { childList: true });
+  }
+
+  #hiddenColCount(){
+    return this.checkboxes.filter((checkbox)=> !checkbox.checked).length;
+  }
+
+  #updateColSpanCell(cell){
+    cell.colSpan = parseInt(cell.dataset.defaultColSpan, 10) - this.#hiddenColCount();
+  }
 }