GraphViewer: New attribtues can now be added in the dialog

html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherUISpec.js

@@ -360,6 +360,53 @@
         
       });
       
+      it('should be possible to add new attributes to nodes', function() {
+        
+        runs(function() {
+          var nested = JSON.stringify(edges[0]._data.nested);
+          helper.simulateMouseEvent("click", id);
+          helper.simulateMouseEvent("click", "1");
+      
+          helper.simulateMouseEvent("click", nodeId + "_new");
+          
+          expect($("#" + nodeId + "_new_1_delete").length).toEqual(1);
+          expect($("#" + nodeId + "_new_1_key").length).toEqual(1);
+          expect($("#" + nodeId + "_new_1_value").length).toEqual(1);
+          
+          helper.simulateMouseEvent("click", nodeId + "_new");
+          
+          expect($("#" + nodeId + "_new_2_delete").length).toEqual(1);
+          expect($("#" + nodeId + "_new_2_key").length).toEqual(1);
+          expect($("#" + nodeId + "_new_2_value").length).toEqual(1);
+          
+          helper.simulateMouseEvent("click", nodeId + "_new_2_delete");
+          
+          expect($("#" + nodeId + "_new_2_delete").length).toEqual(0);
+          expect($("#" + nodeId + "_new_2_key").length).toEqual(0);
+          expect($("#" + nodeId + "_new_2_value").length).toEqual(0);
+          
+          $("#" + nodeId + "_new_1_key").val("newKey");
+          $("#" + nodeId + "_new_1_value").val("newVal");
+          
+          helper.simulateMouseEvent("click", nodeId + "_submit");
+
+          expect(adapter.patchNode).toHaveBeenCalledWith(
+            nodes[0],
+            {
+              name: "Alice",
+              newKey: "newVal"
+            },
+            jasmine.any(Function)
+          );
+          
+        });
+        
+        waitsFor(function() {
+          return $("#" + nodeId + "_modal").length === 0;
+        }, 2000, "The modal dialog should disappear.");
+        
+      });
+      
       it('should be possible to delete values from nodes', function() {
         
         runs(function() {
@@ -439,6 +486,53 @@
         
       });
       
+      it('should be possible to add new attributes to edges', function() {
+        
+        runs(function() {
+          var nested = JSON.stringify(edges[0]._data.nested);
+          helper.simulateMouseEvent("click", id);
+          helper.simulateMouseEvent("click", "1-2");
+      
+          helper.simulateMouseEvent("click", edgeId + "_new");
+          
+          expect($("#" + edgeId + "_new_1_delete").length).toEqual(1);
+          expect($("#" + edgeId + "_new_1_key").length).toEqual(1);
+          expect($("#" + edgeId + "_new_1_value").length).toEqual(1);
+          
+          helper.simulateMouseEvent("click", edgeId + "_new");
+          
+          expect($("#" + edgeId + "_new_2_delete").length).toEqual(1);
+          expect($("#" + edgeId + "_new_2_key").length).toEqual(1);
+          expect($("#" + edgeId + "_new_2_value").length).toEqual(1);
+          
+          helper.simulateMouseEvent("click", edgeId + "_new_2_delete");
+          
+          expect($("#" + edgeId + "_new_2_delete").length).toEqual(0);
+          expect($("#" + edgeId + "_new_2_key").length).toEqual(0);
+          expect($("#" + edgeId + "_new_2_value").length).toEqual(0);
+          
+          $("#" + edgeId + "_new_1_key").val("newKey");
+          $("#" + edgeId + "_new_1_value").val("newVal");
+          
+          helper.simulateMouseEvent("click", edgeId + "_submit");
+
+          expect(adapter.patchEdge).toHaveBeenCalledWith(
+            edges[0],
+            {
+              label: "oldLabel",
+              nested: nested,
+              newKey: "newVal"
+            },
+            jasmine.any(Function)
+          );
+        });
+        
+        waitsFor(function() {
+          return $("#" + edgeId + "_modal").length === 0;
+        }, 2000, "The modal dialog should disappear.");
+        
+      });
+      
       it('should be possible to remove attributes from edges', function() {
         
         runs(function() {

html/admin/js/graphViewer/ui/modalDialogHelper.js

@@ -38,18 +38,41 @@ var modalDialogHelper = modalDialogHelper || {};
       callbackCapsule = function() {
         callback(tableToJSON);
       },
-      table = modalDialogHelper.modalDivTemplate(title, buttonTitle, idprefix, callbackCapsule);
+      table = modalDialogHelper.modalDivTemplate(title, buttonTitle, idprefix, callbackCapsule),
+      firstRow = document.createElement("tr"),
+      firstCell = document.createElement("th"),
+      addRow = document.createElement("button"),
+      addImg = document.createElement("img"),
+      newCounter = 1,
+      insertRow;
       
     tableToJSON = function() {
       var result = {};
-      _.each($("#" + idprefix + "table tr"), function(tr) {
+      _.each($("#" + idprefix + "table tr:not(#first_row)"), function(tr) {
         var key = tr.children[1].children[0].value,
           value = tr.children[2].children[0].value;
         result[key] = value;
       });
       return result;
     };
-    _.each(object, function(value, key) {
+    
+    table.appendChild(firstRow);
+    firstRow.className = "collectionTh";
+    firstRow.id = "first_row";
+    firstRow.appendChild(firstCell);
+    firstCell.colSpan = "3";
+    firstCell.appendChild(addRow);
+    
+    addRow.id = idprefix + "new";
+    addRow.className = "enabled";
+    
+    addRow.appendChild(addImg);
+    addImg.className = "plusIcon";
+    addImg.src = "img/plus_icon.png";
+    addImg.width = "16";
+    addImg.height = "16";
+    
+    insertRow = function(value, key) {
       var internalRegex = /^_(id|rev|key|from|to)/,
         tr = document.createElement("tr"),
         actTh = document.createElement("th"),
@@ -59,7 +82,6 @@ var modalDialogHelper = modalDialogHelper || {};
         keyInput,
         valueInput,
         delImg;
-        
       if (internalRegex.test(key)) {
         return;
       }
@@ -96,10 +118,21 @@ var modalDialogHelper = modalDialogHelper || {};
       valueInput = document.createElement("input");
       valueInput.type = "text";
       valueInput.id = idprefix + key + "_value";
+      if ("object" === typeof value) {
         valueInput.value = JSON.stringify(value);
-      valueTh.appendChild(valueInput);
+      } else {
+        valueInput.value = value;
       }
-    );
+      
+      valueTh.appendChild(valueInput);
+    };
+    
+    addRow.onclick = function() {
+      insertRow("", "new_" + newCounter);
+      newCounter++;
+    };
+    
+    _.each(object, insertRow);
     $("#" + idprefix + "modal").modal('show');
   };