From db27510c7b8a3c106d146ad1dfdb5d92c8ab6523 Mon Sep 17 00:00:00 2001
From: sysadmin <sysadmin@silverlined.dev>
Date: Thu, 13 Nov 2025 23:18:11 +0000
Subject: [PATCH] feat: Add spreadsheet editor to Create page

Extends the variant collection spreadsheet editor to the Create page for consistency.
---
 .../Views/VariantCollections/Create.cshtml    | 86 +++++++++++++++++--
 1 file changed, 80 insertions(+), 6 deletions(-)

diff --git a/LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml b/LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml
index 2b13be9..16698ed 100644
--- a/LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml
+++ b/LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml
@@ -29,12 +29,26 @@
             </div>
 
             <div class="mb-3">
-                <label for="PropertiesJson" class="form-label">Properties (JSON)</label>
-                <textarea class="form-control font-monospace" id="PropertiesJson" name="PropertiesJson" rows="10" placeholder='[{"name":"Size","values":["S","M","L","XL"]},{"name":"Colour","values":null}]'>@Model.PropertiesJson</textarea>
-                <div class="form-text">
-                    Define properties as JSON array. Each property has a "name" and optional "values" array.
-                    <br>If "values" is null, users can enter freeform text. If "values" is an array, users select from dropdown.
-                    <br><strong>Example:</strong> <code>[{"name":"Size","values":["S","M","L"]},{"name":"Colour","values":null}]</code>
+                <label for="variant-spreadsheet-editor" class="form-label">
+                    <i class="fas fa-table"></i> Properties Spreadsheet
+                </label>
+
+                <!-- Spreadsheet Editor Container -->
+                <div id="variant-spreadsheet-editor" style="height: 400px; overflow: auto;" class="border rounded"></div>
+
+                <!-- Hidden input to store JSON data -->
+                <input type="hidden" id="PropertiesJson" name="PropertiesJson" value='@Model.PropertiesJson' />
+
+                <div class="form-text mt-2">
+                    <strong><i class="fas fa-info-circle"></i> How to use:</strong>
+                    <ul class="mb-1">
+                        <li><strong>Click column headers</strong> to select property type (Size, Color, Material, Storage, or Custom)</li>
+                        <li><strong>Click cells</strong> to edit values directly</li>
+                        <li><strong>Right-click</strong> for menu to add/remove rows and columns</li>
+                        <li><strong>Keyboard shortcuts:</strong> Tab to move right, Enter to move down, Ctrl+D to delete, Ctrl+Enter to save</li>
+                        <li><strong>Mobile:</strong> Swipe rows left/right to delete</li>
+                    </ul>
+                    <small class="text-muted">Changes are automatically saved when you click "Create Collection" below.</small>
                 </div>
                 <span asp-validation-for="PropertiesJson" class="text-danger"></span>
             </div>
@@ -51,4 +65,64 @@
 
 @section Scripts {
     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
+
+    <!-- Handsontable Spreadsheet Library -->
+    <link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css" />
+    <script src="~/lib/handsontable/handsontable.full.min.js"></script>
+
+    <!-- Hammer.js for Touch Gestures -->
+    <script src="~/lib/hammerjs/hammer.min.js"></script>
+
+    <!-- Variant Editor Module -->
+    <script src="~/js/variant-editor.js"></script>
+
+    <!-- Initialize Variant Editor -->
+    <script>
+        (function() {
+            // Get initial JSON data from hidden input (empty for create)
+            const propertiesJson = document.getElementById('PropertiesJson').value || '';
+
+            // Initialize the spreadsheet editor
+            const editor = new VariantEditor('variant-spreadsheet-editor', propertiesJson, {
+                minRows: 5,
+                minCols: 2,
+                maxCols: 8
+            });
+
+            // Before form submission, serialize spreadsheet data to JSON
+            const form = document.querySelector('form');
+            form.addEventListener('submit', function(e) {
+                try {
+                    const jsonString = editor.serializeToJSON();
+                    console.log('Serialized variant properties:', jsonString);
+
+                    // Validation: Ensure we have valid JSON
+                    const parsed = JSON.parse(jsonString);
+                    if (!Array.isArray(parsed)) {
+                        e.preventDefault();
+                        alert('Invalid variant properties data. Please check your spreadsheet.');
+                        return false;
+                    }
+
+                    // Check for empty property names
+                    const emptyNames = parsed.filter(p => !p.name || p.name.trim() === '');
+                    if (emptyNames.length > 0) {
+                        e.preventDefault();
+                        alert('All property columns must have names. Please click the column headers to set property types.');
+                        return false;
+                    }
+
+                    return true;
+                } catch (error) {
+                    console.error('Failed to serialize variant properties:', error);
+                    e.preventDefault();
+                    alert('Failed to save variant properties: ' + error.message);
+                    return false;
+                }
+            });
+
+            // Keyboard shortcut hint for users
+            console.log('Variant Editor loaded. Keyboard shortcuts: Ctrl+D (delete), Ctrl+Enter (save)');
+        })();
+    </script>
 }
\ No newline at end of file