web client: insertion to collections and lists

1 files changed, 82 insertions, 15 deletions

diff --git a/web/client.js b/web/client.js
index 61e1e62..5a740f8 100644
--- a/web/client.js
+++ b/web/client.js
@@ -42,6 +42,8 @@ $(function() {
 	    return def;
 	}
 
+	function isTxnValid() { return !(_.size(invalid)); }
+
 
 	function showError(el, msg, xhr) {
 	    msg += " " + xhr.statusCode().status;
@@ -112,6 +114,7 @@ $(function() {
 	Path.init = function(value, meta) {
 	    this.el = this.staticRender(value);
 	};
+	Path.get = function() { return {}; };
 
 	var Reference = Object.create(Path);
 	Reference.staticRender = function(value) {
@@ -240,15 +243,19 @@ $(function() {
 
 		var status = getStatus(path, data);
 		var table = $("<table>");
-		    
-		function renderField(
-		    path, name, value, meta, label, editable
-		) {
+		
+		function join(path, name) {
 		    if (_.isString(name)) {
 			name = name.replace(/([\\\/])/g, "\\$1");
 			if (!isNaN(Number(name))) name = "\\" + name;
 		    }
-		    path += "/" + name;
+		    return path + "/" + name;
+		}
+		
+		function renderField(
+		    path, name, value, meta, label, editable
+		) {
+		    path = join(path, name);
 
 		    var row = $("<tr>");
 		    row.append($("<td>").text(label));
@@ -332,7 +339,7 @@ $(function() {
 					);
 				    
 					delete invalid[path];
-					if (!(_.size(invalid)))
+					if (isTxnValid())
 					    setStatus(
 						"changed",
 						"You have uncommitted changes",
@@ -380,7 +387,18 @@ $(function() {
 		    row.append($("<td>").text(JSON.stringify(meta)));
 		    table.append(row);
 		}
-		    
+		
+		function renderCollectionMember(path, name, value, meta) {
+		    renderField(
+			path,
+			name,
+			value,
+			meta.members,
+			meta["ui-member"] + " " + name,
+			meta.type != "set"
+		    );
+		}
+
 		if (data.meta.type == "model")
 		    _.each(data.meta.fields, function(field) {
 			renderField(
@@ -395,17 +413,66 @@ $(function() {
 		
 		else _.each(data.data, function(value, name) {
 		    name = _.isArray(data.data) ? name + 1 : name;
-		    renderField(
-			path,
-			name,
-			value,
-			data.meta.members,
-			data.meta["ui-member"] + " " + name,
-			data.meta.type != "set"
-		    );
+		    renderCollectionMember(path, name, value, data.meta);
 		});
 		
 		content.append(table);
+
+		if (_.contains(["collection", "list"], data.meta.type)) {
+		    var len = data.data.length;
+
+		    var button = $("<input>").attr(
+			{type: "submit", value: "Insert"}
+		    ).click(function() {
+
+			var getter;
+
+			function insert() {
+
+			    function whenValidated(task) {
+				return $.when.apply(
+				    $, _.pluck(invalid, 1)
+				).always(task);
+			    }
+
+			    if (isTxnValid()) {
+				var name = getter();
+				var jpath = join(path, name);
+
+				invalid[jpath] = [
+				    isTreeNode(data.meta.members) ? jpath : null
+				];
+				renderCollectionMember(
+				    path, name, null, data.meta
+				);
+
+				whenValidated(function() {
+				    button.prop("class", null);
+				});
+			    }
+			    else whenValidated(insert);
+			}
+
+			button.prop("class", "hidden");
+
+			if (data.meta.type == "collection") {
+			    var field = $("<input>").attr({type: "text"});
+			    var row = $("<tr>").html($("<td>").html(field));
+			    getter = function() {
+				var res = field.val();
+				row.remove();
+				return res;
+			    }
+			    field.change(insert);
+			    table.append(row);
+			}
+			else {
+			    getter = function() { return ++len; };
+			    insert();
+			}
+		    });
+		    content.append(button);
+		}
 	    }
 
 	    function renderObj(path) {