diff --git a/lib/resources/collection/dashboard/data.html b/lib/resources/collection/dashboard/data.html index 305180b..9528a6e 100644 --- a/lib/resources/collection/dashboard/data.html +++ b/lib/resources/collection/dashboard/data.html @@ -8,7 +8,16 @@
-
+
+ + + + + + + + +
@@ -71,7 +80,7 @@ -
+
diff --git a/lib/resources/collection/dashboard/js/data.js b/lib/resources/collection/dashboard/js/data.js index 4edee6c..d56283d 100644 --- a/lib/resources/collection/dashboard/js/data.js +++ b/lib/resources/collection/dashboard/js/data.js @@ -139,7 +139,9 @@ , selectedProp: ko.observable() , inlineEdit: { - editing: ko.observable(false) + editing: ko.observable(false) + , editValue: ko.observable() + , editProp: null } , propertiesLoaded: ko.observable(false) @@ -226,6 +228,11 @@ sel.removeAllRanges(); } }; + + vm.view.noOp = function() { + return true; + }; + vm.view.loadSpaceBefore = ko.computed(function() { var totalHeight = 0 , rows = vm.data().length @@ -257,6 +264,7 @@ var $table = vm.view.$table(); if (!$table) return result; $cell = $table.find('.highlight'); + if (!$cell.length) return result; result = $cell.position(); } return result; @@ -264,21 +272,30 @@ vm.inlineEdit.dismiss = function() { vm.inlineEdit.editing(false); + vm.inlineEdit.editProp(vm.inlineEdit.editValue()); }; vm.inlineEdit.start = function() { vm.inlineEdit.editing(true); + vm.inlineEdit.editProp = vm.selectedRow()[vm.selectedProp().name]; + vm.inlineEdit.editValue(vm.inlineEdit.editProp()); }; vm.inlineEdit.onKeyDown = function(e) { if (e.which == 27) { // escape - vm.inlineEdit.editing(false); + vm.inlineEdit.editing(false); //cancel directly, don't apply changes return false; + } else if (e.which == 13) { //enter + vm.inlineEdit.dismiss(); } return true; }; + vm.inlineEdit.focusInput = ko.computed(function() { + return vm.inlineEdit.editing(); + }, vm.inlineEdit).extend({throttle: 100}); + function createRow(data) { var rowVm = {}; @@ -291,8 +308,10 @@ }); rowVm._textFor = function(prop) { - var val = rowVm[prop](); - if (typeof val === 'undefined' || val === null) { + var val = rowVm[prop.name](); + if (prop.type === 'boolean') { + return val ? 'true' : 'false'; + } else if (typeof val === 'undefined' || val === null) { return '...'; } else if (typeof val === 'object') { return JSON.stringify(val); @@ -317,6 +336,21 @@ vm.selectedRow(rowVm); }; + + if (rowVm.id) { + vm.properties().forEach(function(p) { + var name = p.name; + rowVm[name].subscribe(function(newValue) { + var body = {}; + body[name] = newValue; + dpd(resource).put(rowVm.id, body, function() { + console.log("Saved"); + }); + }); + }); + } + + return rowVm; } @@ -324,7 +358,8 @@ 'data': { create: function(options) { return createRow(options.data); - }, id: function(data) { + }, key: function(data) { + console.log("key", ko.utils.unwrapObservable(data.id)); return ko.utils.unwrapObservable(data.id); } } diff --git a/lib/resources/collection/dashboard/style.css b/lib/resources/collection/dashboard/style.css index a4a3ee5..42ef32a 100644 --- a/lib/resources/collection/dashboard/style.css +++ b/lib/resources/collection/dashboard/style.css @@ -32,13 +32,27 @@ position: fixed; } #inline-editor .mini-edit { + padding: 8px; position: absolute; background: url('../../img/outlets-light.png'); - height: 38px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - width: 300px; +} +#inline-editor .mini-edit input { + margin: 0; +} +#inline-editor .mini-edit input[type=text] { + min-width: 200px; + max-width: 300px; +} +#inline-editor .mini-edit label { + min-width: 200px; +} +#inline-editor .mini-edit label input[type=checkbox] { + display: inline-block; + vertical-align: middle; + margin-right: 8px; } #data { display: box; diff --git a/lib/resources/collection/dashboard/style.less b/lib/resources/collection/dashboard/style.less index fbaa434..9365f33 100644 --- a/lib/resources/collection/dashboard/style.less +++ b/lib/resources/collection/dashboard/style.less @@ -37,11 +37,29 @@ } .mini-edit { + padding: 8px; position: absolute; background: @backgroundLight; - height: @cellHeight; .box-sizing(border-box); - width: 300px; + + input { + margin: 0; + } + + input[type=text] { + min-width: 200px; + max-width: 300px; + } + + label { + min-width: 200px; + input[type=checkbox] { + display: inline-block; + vertical-align: middle; + margin-right: 8px; + } + } + } }