128 lines
5.4 KiB
Plaintext
128 lines
5.4 KiB
Plaintext
@model LittleShop.DTOs.CreateVariantCollectionDto
|
|
|
|
@{
|
|
ViewData["Title"] = "Create Variant Collection";
|
|
}
|
|
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h1><i class="fas fa-plus"></i> Create Variant Collection</h1>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="@Url.Action("Index")" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Back to Collections
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<form method="post">
|
|
@Html.AntiForgeryToken()
|
|
|
|
<div asp-validation-summary="All" class="alert alert-danger" role="alert"></div>
|
|
|
|
<div class="mb-3">
|
|
<label for="Name" class="form-label">Collection Name *</label>
|
|
<input type="text" class="form-control" id="Name" name="Name" value="@Model.Name" required maxlength="100" placeholder="e.g., Mens Clothes, Jewelry Sizes">
|
|
<span asp-validation-for="Name" class="text-danger"></span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<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>
|
|
|
|
<div class="border-top pt-3">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Create Collection
|
|
</button>
|
|
<a href="@Url.Action("Index")" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@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>
|
|
} |