From 35ebf58dca40cd94a55825ba4b08a54f66f1f5f8 Mon Sep 17 00:00:00 2001
From: sysadmin <sysadmin@silverlined.dev>
Date: Fri, 14 Nov 2025 00:20:05 +0000
Subject: [PATCH] fix: Column rename persistence and comprehensive logging

Fixed column header renaming by creating new array references.
Added comprehensive console logging for debugging.
---
 .../Views/VariantCollections/Create.cshtml    |  8 +--
 .../Views/VariantCollections/Edit.cshtml      |  8 +--
 LittleShop/wwwroot/js/variant-editor.js       | 57 +++++++++++++++----
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml b/LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml
index c8ee4b4..7b5291a 100644
--- a/LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml
+++ b/LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml
@@ -67,14 +67,14 @@
     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
 
     <!-- Handsontable Spreadsheet Library -->
-    <link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css?v=20251113b" />
-    <script src="~/lib/handsontable/handsontable.full.min.js?v=20251113b"></script>
+    <link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css?v=20251113c" />
+    <script src="~/lib/handsontable/handsontable.full.min.js?v=20251113c"></script>
 
     <!-- Hammer.js for Touch Gestures -->
-    <script src="~/lib/hammerjs/hammer.min.js?v=20251113b"></script>
+    <script src="~/lib/hammerjs/hammer.min.js?v=20251113c"></script>
 
     <!-- Variant Editor Module -->
-    <script src="~/js/variant-editor.js?v=20251113b"></script>
+    <script src="~/js/variant-editor.js?v=20251113c"></script>
 
     <!-- Initialize Variant Editor -->
     <script>
diff --git a/LittleShop/Areas/Admin/Views/VariantCollections/Edit.cshtml b/LittleShop/Areas/Admin/Views/VariantCollections/Edit.cshtml
index eabbfad..6877369 100644
--- a/LittleShop/Areas/Admin/Views/VariantCollections/Edit.cshtml
+++ b/LittleShop/Areas/Admin/Views/VariantCollections/Edit.cshtml
@@ -78,14 +78,14 @@
     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
 
     <!-- Handsontable Spreadsheet Library -->
-    <link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css?v=20251113b" />
-    <script src="~/lib/handsontable/handsontable.full.min.js?v=20251113b"></script>
+    <link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css?v=20251113c" />
+    <script src="~/lib/handsontable/handsontable.full.min.js?v=20251113c"></script>
 
     <!-- Hammer.js for Touch Gestures -->
-    <script src="~/lib/hammerjs/hammer.min.js?v=20251113b"></script>
+    <script src="~/lib/hammerjs/hammer.min.js?v=20251113c"></script>
 
     <!-- Variant Editor Module -->
-    <script src="~/js/variant-editor.js?v=20251113b"></script>
+    <script src="~/js/variant-editor.js?v=20251113c"></script>
 
     <!-- Initialize Variant Editor -->
     <script>
diff --git a/LittleShop/wwwroot/js/variant-editor.js b/LittleShop/wwwroot/js/variant-editor.js
index 426dc97..f617a51 100644
--- a/LittleShop/wwwroot/js/variant-editor.js
+++ b/LittleShop/wwwroot/js/variant-editor.js
@@ -245,11 +245,15 @@ class VariantEditor {
         // Insert new column
         this.hot.alter('insert_col_end', currentColCount, 1);
 
-        // Update column header
-        const headers = this.hot.getColHeaders();
-        headers[currentColCount] = presetName;
+        // Update column header with new array reference
+        const currentHeaders = this.hot.getColHeaders();
+        const newHeaders = Array.isArray(currentHeaders)
+            ? [...currentHeaders]
+            : Array.from({ length: this.hot.countCols() }, (_, i) => this.hot.getColHeader(i));
+
+        newHeaders[currentColCount] = presetName;
         this.hot.updateSettings({
-            colHeaders: headers
+            colHeaders: newHeaders
         });
 
         // Populate with preset values
@@ -260,6 +264,8 @@ class VariantEditor {
                 }
             });
         }
+
+        console.log('Added preset column:', { presetName, columnIndex: currentColCount, valuesCount: presetValues ? presetValues.length : 0 });
     }
 
     /**
@@ -276,12 +282,18 @@ class VariantEditor {
         // Insert new column
         this.hot.alter('insert_col_end', currentColCount, 1);
 
-        // Update column header
-        const headers = this.hot.getColHeaders();
-        headers[currentColCount] = customName.trim();
+        // Update column header with new array reference
+        const currentHeaders = this.hot.getColHeaders();
+        const newHeaders = Array.isArray(currentHeaders)
+            ? [...currentHeaders]
+            : Array.from({ length: this.hot.countCols() }, (_, i) => this.hot.getColHeader(i));
+
+        newHeaders[currentColCount] = customName.trim();
         this.hot.updateSettings({
-            colHeaders: headers
+            colHeaders: newHeaders
         });
+
+        console.log('Added custom column:', { columnName: customName.trim(), columnIndex: currentColCount });
     }
 
     /**
@@ -292,11 +304,24 @@ class VariantEditor {
         const newName = prompt('Rename column:', currentHeader);
 
         if (newName && newName.trim() !== '') {
-            const headers = this.hot.getColHeaders();
-            headers[colIndex] = newName.trim();
+            // Get current headers and create a new array (force immutability)
+            const currentHeaders = this.hot.getColHeaders();
+            const newHeaders = Array.isArray(currentHeaders)
+                ? [...currentHeaders]
+                : Array.from({ length: this.hot.countCols() }, (_, i) => this.hot.getColHeader(i));
+
+            // Update the specific column header
+            newHeaders[colIndex] = newName.trim();
+
+            // Force update with new array reference
             this.hot.updateSettings({
-                colHeaders: headers
+                colHeaders: newHeaders
             });
+
+            // Render to ensure visual update
+            this.hot.render();
+
+            console.log('Column renamed:', { colIndex, oldName: currentHeader, newName: newName.trim() });
         }
     }
 
@@ -364,12 +389,15 @@ class VariantEditor {
         const headers = this.hot.getColHeaders();
         const properties = [];
 
+        console.log('Serializing spreadsheet:', { totalColumns: headers.length, totalRows: data.length });
+
         // Process each column
         for (let col = 0; col < headers.length; col++) {
             const propertyName = headers[col];
 
-            // Skip empty column names
+            // Skip empty column names or default column names
             if (!propertyName || propertyName.trim() === '' || propertyName.startsWith('Property ')) {
+                console.log('Skipping column:', { colIndex: col, name: propertyName, reason: 'empty or default' });
                 continue;
             }
 
@@ -389,14 +417,19 @@ class VariantEditor {
             };
 
             properties.push(property);
+            console.log('Added property:', { name: property.name, valueCount: values.length });
         }
 
         const jsonString = JSON.stringify(properties, null, 2);
+        console.log('Final JSON:', jsonString);
 
         // Update hidden input
         const hiddenInput = document.getElementById('PropertiesJson');
         if (hiddenInput) {
             hiddenInput.value = jsonString;
+            console.log('Updated hidden input PropertiesJson');
+        } else {
+            console.error('Hidden input PropertiesJson not found!');
         }
 
         return jsonString;