SilverLABS/littleshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add spreadsheet editor to Create page

Browse Source 
Extends the variant collection spreadsheet editor to the Create page for consistency.
This commit is contained in:
sysadmin 2025-11-13 23:18:11 +00:00
parent 76efba55bd
commit db27510c7b
1 changed files with 80 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml
View File

@ -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>
}