Basic string editing

lib/resources/collection/dashboard/data.html

@@ -8,7 +8,16 @@
 
       <div id="inline-editor" data-bind="style: {visibility: inlineEdit.editing() ? 'visible' : 'hidden'}, click: inlineEdit.dismiss">
         <div id="inline-editor-table-overlay" data-bind="style: {top: view.dimensions().top + 'px', left: view.dimensions().left + 'px', bottom: view.dimensions().bottomRelative + 'px', right: view.dimensions().rightRelative + 'px' }">
-          <div class="mini-edit" data-bind="style: {top: view.selectedCellPos().top + 'px', left: view.selectedCellPos().left + 'px'}, if: inlineEdit.editing">
+          <div class="mini-edit" data-bind="style: {top: view.selectedCellPos().top + 'px', left: view.selectedCellPos().left + 'px'}, if: inlineEdit.editing, click: view.noOp, clickBubble: false">
+            <!-- ko if: selectedProp().type === 'string' -->
+              <input type="text" data-bind="hasfocus: vm.inlineEdit.focusInput, value: inlineEdit.editValue, valueUpdate: 'afterkeydown'" />
+            <!-- /ko -->
+            <!-- ko if: selectedProp().type === 'number' -->
+              <input type="number" data-bind="hasfocus: vm.inlineEdit.focusInput" />
+            <!-- /ko -->
+            <!-- ko if: selectedProp().type === 'boolean' -->
+              <label><input type="checkbox" data-bind="hasfocus: vm.inlineEdit.focusInput" /><span data-bind="text: selectedProp().name"></span></label>
+            <!-- /ko -->
           </div>
         </div>
         
@@ -71,7 +80,7 @@
                 </td>
                 <!-- ko foreach: $root.properties -->
                   <td data-bind="css: {highlight: $root.selectedRow() === $parent && $root.selectedProp() === $data}, click: $parent._selectCell, event: {dblclick: $parent._editProp}">
-                    <div class="value" data-bind="text: $parent._textFor(name)"></div>
+                    <div class="value" data-bind="text: $parent._textFor($data)"></div>
                   </td>
                 <!-- /ko -->
               </tr>

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);
       }
     }

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;

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;
+      }  
+    }
+    
   }
 }