web client: show error message when collection member insertion fails

5 files changed, 31 insertions, 28 deletions

diff --git a/web/dom.js b/web/dom.js
index ba11827..8e0e257 100644
--- a/web/dom.js
+++ b/web/dom.js
@@ -3,12 +3,16 @@
  * See LICENSE file for license details
  */
 
-define(["acf2/navigation", "jquery"], function(navi, $) {
+define(["acf2/navigation", "jquery", "underscore"], function(navi, $, _) {
     function href() {
 	return $("<a>").attr({href: "javascript:void(0);"});
     }
 
     return {
+	setText: function(el, s) {
+	    el.html(_.map(s.split("\n"), _.escape).join("<br/>"));
+	},
+
 	href: href,
 
 	objectRef: function(value, el) {
diff --git a/web/statusbar.js b/web/statusbar.js
index 3488772..28e5ba4 100644
--- a/web/statusbar.js
+++ b/web/statusbar.js
@@ -3,10 +3,10 @@
  * See LICENSE file for license details
  */
 
-define(["jquery"], function($) {
+define(["acf2/dom", "jquery"], function(dom, $) {
     function set(status, msg, mode) {
 	$("#status").prop("class", status);
-	$("#status p").text(msg);
+	dom.setText($("#status p"), msg);
 	$("#logout").prop("class", mode ? "hidden" : null);
 	$("#status div").prop("class", mode == "txn" ? null : "hidden");
 	$("#commit").prop("disabled", status == "invalid");
diff --git a/web/widget/abstract/base.js b/web/widget/abstract/base.js
index dd74cca..df02ee3 100644
--- a/web/widget/abstract/base.js
+++ b/web/widget/abstract/base.js
@@ -121,6 +121,15 @@ define(["acf2/dom", "jquery", "underscore"], function(dom, $, _) {
 		this.wrapped.trigger("setVisible", [this.visible]);
 	},
 
-	validate: function(value) { this.setVisible(); }
+	validate: function(value) { this.setVisible(); },
+
+	formatValidationError: function(xhr) {
+	    if (_.isString(xhr)) return xhr;
+
+	    if (xhr.statusCode().status == 422)
+		return _.values($.parseJSON(xhr.responseText)).join("\n");
+
+	    return formatError("Error", xhr);
+	}
     };
 });
diff --git a/web/widget/field.js b/web/widget/field.js
index 338895a..2df4332 100644
--- a/web/widget/field.js
+++ b/web/widget/field.js
@@ -5,13 +5,14 @@
 
 define(
     [
+	"acf2/dom",
 	"acf2/error",
 	"acf2/statusbar",
 	"acf2/widget/abstract/base",
 	"jquery",
 	"underscore"
     ],
-    function(formatError, statusBar, Base, $, _) {
+    function(dom, formatError, statusBar, Base, $, _) {
 	return Base.extend({
 	    init: function(
 		data, name, meta, level, editable, removable
@@ -78,20 +79,7 @@ define(
 
 		    })
 		    .fail(function(xhr) {
-			if (_.isString(xhr)) self.msg.text(xhr);
-
-			else if (xhr.statusCode().status == 422)
-			    self.msg.html(
-				_.reduce(
-				    _.map(
-					$.parseJSON(xhr.responseText), _.escape
-				    ),
-				    function(a, b) { return a + "<br/>" + b; }
-				)
-			    );
-
-			else self.msg.text(formatError("Error", xhr));
-
+			dom.setText(self.msg, self.formatValidationError(xhr));
 			self.setStatus("invalid");
 			statusBar.validationReady(false);
 		    });
diff --git a/web/widget/inline.js b/web/widget/inline.js
index 4326ba0..8a81854 100644
--- a/web/widget/inline.js
+++ b/web/widget/inline.js
@@ -42,18 +42,18 @@ define(
 
 		    var self = this;
 		    var keys = _.clone(_.keys(data.data));
-		    
+
 		    var button = $("<input>").attr(
 			{type: "submit", value: "Insert"}
 		    ).click(function() {
 			
-			var getter;
+			var getter, row;
 
 			function insert() {
 			    var name = getter();
 
 			    if (_.contains(keys, name)) {
-				button.prop("class", null);
+				statusBar.setError("Already exists: " + name);
 				return;
 			    }
 			    keys.push(name);
@@ -66,8 +66,14 @@ define(
 				meta.removable.push(name);
 
 				self.renderCollectionMember(name, meta);
+				if (row) row.remove();
 				button.prop("class", null);
 				statusBar.validationReady(txnValid);
+			    }).fail(function(xhr) {
+				statusBar.setError(
+				    self.formatValidationError(xhr)
+				);
+				data.delete(name);
 			    });
 			}
 
@@ -75,12 +81,8 @@ define(
 			
 			if (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;
-			    }
+			    row = $("<tr>").html($("<td>").html(field));
+			    getter = function() { return field.val(); }
 			    field.change(insert);
 			    self.appendRow(row);
 			}