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

feat: Phase 2.5 - Variant Collections Spreadsheet Editor

Browse Source 
Replaces JSON textarea with professional Excel-like spreadsheet interface for managing product variant properties.

Features:
- Handsontable 14.6.1 spreadsheet component
- Property presets (Size, Color, Material, Storage, Custom)
- Inline cell editing with Tab/Enter navigation
- Context menu for add/remove rows and columns
- Keyboard shortcuts (Ctrl+D delete, Ctrl+Enter save, Ctrl+Z undo)
- Mobile touch gestures (swipe to delete rows)
- Automatic JSON serialization on form submit
- Form validation before saving
- Comprehensive user guide documentation

Files Changed:
- LittleShop/package.json: NPM package management setup
- LittleShop/wwwroot/js/variant-editor.js: 400-line spreadsheet editor module
- LittleShop/wwwroot/lib/handsontable/: Handsontable library (Community Edition)
- LittleShop/wwwroot/lib/hammerjs/: Hammer.js touch gesture library
- LittleShop/Areas/Admin/Views/VariantCollections/Edit.cshtml: Spreadsheet UI integration
- VARIANT_COLLECTIONS_USER_GUIDE.md: Complete user guide (18+ pages)

Technical Details:
- Excel-like editing experience (no more manual JSON editing)
- Mobile-first responsive design
- Browser compatibility: Chrome 90+, Firefox 88+, Edge 90+, Safari 14+
- Touch-optimized for mobile administration
- Automatic data validation and error handling
This commit is contained in:
sysadmin
2025-11-13 19:40:06 +00:00
parent a272373246
commit 76efba55bd
125 changed files with 273259 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
LittleShop/wwwroot/lib/hammerjs/tests/unit/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tests</title>
<link rel="stylesheet" href="assets/qunit.css">
<script src="assets/jquery.min.js"></script>
<script src="assets/lodash.compat.js"></script>
<script src="assets/qunit.js"></script>
<!--[if !IE]> --><script src="assets/blanket.js"></script><!-- <![endif]-->
<script src="assets/utils.js"></script>
<script src="../../node_modules/hammer-simulator/index.js"></script>
<script>
Simulator.setType('touch');
Simulator.events.touch.fakeSupport();
</script>
<script src="../build.js" data-cover></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="test_utils.js"></script>
<script src="test_enable.js"></script>
<script src="test_hammer.js"></script>
<script src="test_events.js"></script>
<script src="test_nested_gesture_recognizers.js"></script>
<script src="test_simultaneous_recognition.js"></script>
<script src="test_propagation_bubble.js"></script>
<script src="test_gestures.js"></script>
<script src="test_multiple_taps.js"></script>
<script src="test_require_failure.js"></script>
<script src="test_jquery_plugin.js"></script>
<script src="gestures/test_pan.js"></script>
<script src="gestures/test_pinch.js"></script>
<script src="gestures/test_swipe.js"></script>
</body>
</html>