Added ability to add new rows

lib/resources/collection/dashboard/data.html

@@ -38,6 +38,9 @@
             <tr><td class="margin">&nbsp;</td></tr>
           </tfoot>
         </table>
+        <div id="margin-footer" data-bind="if: propertiesLoaded">
+          <a href="#" title="Save Row" data-bind="visible: newRow._isValid, click: newRow._save"><i class="icon-ok icon-white"></i></a>
+        </div>
       </div>
 
 
@@ -97,7 +100,7 @@
           </tfoot>
         </table>
       </div>
-      <div id="new-row-container" data-bind="style: {bottom: view.dimensions().bottomRelative + view.scrollWidth() + 'px', left: view.dimensions().left + 'px', width: view.dimensions().width - view.scrollWidth() + 'px'}">
+      <div id="new-row-container" data-bind="style: {bottom: view.dimensions().bottomRelative + view.scrollWidth() + 'px', left: view.dimensions().left + 'px', width: view.dimensions().width - view.scrollWidth() + 'px'}, if: propertiesLoaded">
         <table id="new-row" class="table table-bordered" data-bind="style: {left: -view.scrollX() + 'px'}, element: view.$newRow">
             <tr data-bind="with: newRow">
               <td class="margin">&nbsp;</td>
@@ -106,7 +109,12 @@
               </td>
               <!-- ko foreach: $parent.properties -->
                 <td data-bind="css: {highlight: $root.selectedRow() === $parent && $root.selectedProp() === $data}, click: $parent._selectCell, event: {dblclick: $parent._editProp}">
-                  <div class="hint value" data-bind="text: name"></div>
+                  <!-- ko if: $parent[name]() -->
+                    <div class="value" data-bind="text: $parent._textFor($data)"></div>
+                  <!-- /ko -->
+                  <!-- ko if: !$parent[name]() -->
+                    <div class="hint value" data-bind="text: name"></div>
+                  <!-- /ko -->
                 </td>
               <!-- /ko -->
             </tr>

lib/resources/collection/dashboard/js/data.js

@@ -150,6 +150,11 @@
     return result;
   }).extend({throttle: 1});
 
+  vm.inlineEdit.isEditable = function() {
+    var type = vm.selectedProp().type;
+    return type === 'string' || type === 'number' || type === 'boolean';
+  };
+
   vm.inlineEdit.dismiss = function() {
     setTimeout(function() {
       vm.inlineEdit.editing(false);
@@ -172,10 +177,26 @@
 
   vm.inlineEdit.onKeyDown = function(e) {
     if (e.which == 27) { // escape
-      vm.inlineEdit.editing(false); //cancel directly, don't apply changes
+      vm.inlineEdit.editing(false); // cancel directly, don't apply changes
       return false;
-    } else if (e.which == 13) { //enter
+    } else if (e.which == 13) { // enter
       vm.inlineEdit.dismiss();
+    } else if (e.which == 9) { // tab
+      var props = vm.properties();
+      var index = props.indexOf(vm.selectedProp());
+      if (e.shiftKey) index -= 1;
+      else index += 1;
+
+      if (props[index]) {
+        vm.inlineEdit.dismiss();
+        setTimeout(function() {
+          vm.selectedProp(props[index]);
+          if (vm.inlineEdit.isEditable()) {
+            vm.inlineEdit.start();  
+          }
+        }, 2);  
+      }
+      return false;
     }
 
     return true;
@@ -192,7 +213,6 @@
     var rowVm = {};
 
     rowVm.id = ko.observable(data.id);
-    rowVm._newRow = data._newRow;
 
     vm.properties().forEach(function(p) {
       var name = p.name;
@@ -228,7 +248,6 @@
       vm.selectedRow(rowVm);
     };
 
-
     if (rowVm.id()) {
       vm.properties().forEach(function(p) {
         var name = p.name;
@@ -244,6 +263,46 @@
     return rowVm;
   }
 
+  function createNewRow() {
+    var rowVm = createRow({});
+    rowVm._newRow = true;
+
+    rowVm._isValid = ko.computed(function() {
+      var props = vm.properties();
+      for (var i = 0; i < props.length; i++) {
+        var prop = props[i];
+        var val = rowVm[prop.name]();
+        if (!(val === null || typeof val === 'undefined' || val === false || val === '')) {
+          return true;
+        }
+      }
+      return false;
+    });
+
+    rowVm._save = function() {
+      var data = {};
+      var props = vm.properties();
+      props.forEach(function(p) {
+        data[p.name] = rowVm[p.name]();
+      });
+      dpd(resource).post(data, function(res, err) {
+        if (err) throw err;
+        var row = createRow(res);
+        vm.data.push(row);
+
+        setTimeout(function() {
+          vm.view.scrollToRow(row);
+          props.forEach(function(p) {
+            rowVm[p.name](null);
+          });
+          if (vm.selectedRow() === rowVm) vm.selectedProp(props[0]);
+        }, 1);
+      });
+    };
+
+    return rowVm;
+  }
+
   var rowMapping = {
     'data': {
       create: function(options) {
@@ -259,6 +318,7 @@
       var val;
       var which = e.which;
 
+      
       if (vm.inlineEdit.editing()) {
         return vm.inlineEdit.onKeyDown(e);
       }
@@ -274,11 +334,16 @@
         case 39: 
         case 36: // home/end
         case 35:
+        case 9:
           selectionHorizontal(e);
           return false;
 
         case 13: //enter
-          vm.selectedRow()._editProp(vm.selectedProp());
+          if (vm.selectedRow() === vm.newRow && e.ctrlKey) {
+            if (vm.newRow && vm.newRow._isValid()) vm.newRow._save();
+          } else {
+            vm.selectedRow()._editProp(vm.selectedProp());  
+          }
           return false;
       }
 
@@ -352,11 +417,11 @@
       if (e.which == 36 || (e.which == 37 && e.ctrlKey)) { // home or ctrl-left
         index = 0;
         if (e.which == 36) vm.view.scrollX(0);  
-      } else if (e.which == 37) index -= 1;
+      } else if (e.which == 37 || (e.which == 9 && e.shiftKey)) index -= 1;
 
       if (e.which == 35 || (e.which == 39 && e.ctrlKey)) { // end or ctrl-right
         index = props.length - 1;
-      } else if (e.which == 39) index += 1;    
+      } else if (e.which == 39 || (e.which == 9 && !e.shiftKey)) index += 1;    
 
       if (index <= 0 && props.indexOf(vm.selectedProp()) === 0) {
         vm.view.scrollX(0);  
@@ -384,13 +449,15 @@
       }
 
       vm.properties(props);
-      vm.propertiesLoaded(true);
+      
 
       vm.selectedProp(props[0]);
 
       if (typeof fn === 'function') {
         fn(props);
       }
+
+      vm.propertiesLoaded(true);
     });
   }
 
@@ -407,15 +474,15 @@
     });
   }
 
-  vm.newRow = createRow({_newRow: true});
-  vm.selectedRow(vm.newRow);
-
   ko.applyBindings(vm);
 
 
   window.vm = vm; // TODO: Remove after dev
 
   loadProperties(function() {
+    vm.newRow = createNewRow();
+    vm.selectedRow(vm.newRow);
+
     loadPage(null, function() {
       setTimeout(function() {
         vm.view.scrollY(ROW_HEIGHT * (vm.data().length + 2));  

lib/resources/collection/dashboard/style.css

@@ -99,6 +99,13 @@
   min-width: 200px;
   height: 22px;
 }
+#table-container table td .value,
+#table-container table th .value {
+  max-height: 22px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 #table-container table tr td.highlight {
   background: rgba(255, 255, 247, 0.1);
 }
@@ -119,8 +126,7 @@
   overflow: hidden;
   z-index: 10;
 }
-#table-container #margin-container:before,
-#table-container #margin-container:after {
+#table-container #margin-container:before {
   content: '';
   z-index: 11;
   position: absolute;
@@ -130,9 +136,6 @@
   background: url('../../img/outlets.png');
   border: #363535 1px solid;
 }
-#table-container #margin-container:after {
-  bottom: 0;
-}
 #table-container #margin-container #margin {
   background: url('../../img/outlets.png');
   position: absolute;
@@ -146,6 +149,20 @@
 #table-container #margin-container #margin .delete-btn:hover {
   opacity: 1;
 }
+#table-container #margin-container #margin-footer {
+  z-index: 11;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 40px;
+  background: url('../../img/outlets.png');
+  border: #363535 1px solid;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  padding: 8px;
+}
 #table-container #headers-container {
   position: fixed;
   top: 0px;

lib/resources/collection/dashboard/style.less

@@ -90,6 +90,13 @@
     max-width: 200px;
     min-width: 200px;
     height: @cellHeight - 16px;
+   
+    .value {
+      max-height: @cellHeight - 16px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   table tr td.highlight {
@@ -116,7 +123,7 @@
     overflow: hidden;
     z-index: 10;
 
-    &:before, &:after {
+    &:before {
       content: '';
       z-index: 11;
       position: absolute;
@@ -127,10 +134,6 @@
       border: #363535 1px solid;
     }
 
-    &:after {
-      bottom: 0;
-    }
-
     #margin {
       background: @background;
       position: absolute;
@@ -146,6 +149,19 @@
         }
       }
     }
+
+    #margin-footer {
+      z-index: 11;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: @cellHeight + 2;
+      background: @background;
+      border: #363535 1px solid;
+      .box-sizing(border-box);
+      padding: 8px;
+    }
   }
 
   #headers-container {