From 4f2ade31ad0071511911b8a2575ee63235d9bce1 Mon Sep 17 00:00:00 2001
From: Kaarle Ritvanen <kaarle.ritvanen@datakunkku.fi>
Date: Fri, 27 Sep 2013 11:03:40 +0300
Subject: resolve reference choices on client side

---
 web/client.js | 113 +++++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 72 insertions(+), 41 deletions(-)

(limited to 'web')

diff --git a/web/client.js b/web/client.js
index 1c1bc89..a0449c9 100644
--- a/web/client.js
+++ b/web/client.js
@@ -383,7 +383,13 @@ $(function() {
 			return el;
 		    }
 
-		    this.el = this.render(value, meta);
+		    this.makeEl();
+
+		    var self = this;
+		    this.requestData(value, meta).done(function(value, meta) {
+			self.render(value, meta);
+			self.setStatus(status);
+		    });
 
 		    var el = this.wrap();
 
@@ -399,8 +405,6 @@ $(function() {
 			el.append(link);
 		    }
 
-		    this.setStatus(status);
-
 		    return el;
 		},
 
@@ -408,6 +412,12 @@ $(function() {
 		    el.prop("class", status);
 		},
 
+		makeEl: function() { this.el = this.createEl();	},
+
+		requestData: function(value, meta) {
+		    return $.Deferred().resolve(value, meta);
+		},
+
 		wrap: function() { return this.el; },
 
 		setStatus: function(status) {
@@ -426,8 +436,6 @@ $(function() {
 		);
 
 		if (editable) {
-		    if (!this.field) this.field = this.el;
-
 		    var self = this;
 
 		    function change() {
@@ -473,8 +481,15 @@ $(function() {
 		return $("<div>").text(value);
 	    };
 
+	    Field.makeEl = function() {
+		_.bind(Widget.makeEl, this)();
+		if (!this.field) this.field = this.el;
+	    };
+
+	    Field.createEl = function() { return $("<input>"); };
+
 	    Field.render = function(value, meta) {
-		return $("<input>").attr({type: "text", value: value});
+		this.field.attr({type: "text", value: value});
 	    };
 
 	    Field.wrap = function() {
@@ -490,8 +505,10 @@ $(function() {
 
 	    var ComboBox = Object.create(Field);
 
+	    ComboBox.createEl = function() { return $("<select>"); };
+
 	    ComboBox.render = function(value, meta) {
-		var el = $("<select>");
+		var el = this.field;
 
 		function opt(value, ui_value, selected) {
 		    el.append($("<option>").attr(
@@ -508,8 +525,6 @@ $(function() {
 			opt(choice[0], choice[1], value == choice[0]);
 		    }
 		);
-
-		return el;
 	    }
 
 	    var CheckBox = Object.create(Field);
@@ -522,16 +537,16 @@ $(function() {
 	    };
 
 	    CheckBox.render = function(value, meta) {
-		return $("<input>").attr({type: "checkbox", checked: value});
+		this.field.attr({type: "checkbox", checked: value});
 	    };
 
-	    CheckBox.get = function() { return this.el.is(":checked"); };
+	    CheckBox.get = function() { return this.field.is(":checked"); };
 
 
 	    var Link = Object.create(Widget);
 
-	    Link.staticRender = function(value) {
-		var el = href();
+	    Link.staticRender = function(value, el) {
+		el = el || href();
 		if (value) {
 		    el.click(function() {
 			$.bbq.pushState("#" + value);
@@ -540,8 +555,10 @@ $(function() {
 		return el;
 	    };
 
+	    Link.createEl = function() { return href(); };
+
 	    Link.render = function(value, meta) {
-		return this.staticRender(value);
+		this.staticRender(value, this.el)
 	    };
 
 	    Link.wrap = function() { return $("<td>").html(this.el); };
@@ -554,7 +571,7 @@ $(function() {
 	    Inline.init = function(
 		data, name, meta, level, editable, removable
 	    ) {
-		var el = _.bind(Widget.init, this)(
+		return _.bind(Link.init, this)(
 		    data,
 		    name,
 		    meta,
@@ -562,20 +579,19 @@ $(function() {
 		    editable,
 		    removable
 		);
-		this.requestData(data.get(name));
-		return el;
-	    }
+	    };
 
 	    Inline.setStatus = function(status) {};
 
-	    Inline.requestData = function(path) {
-		var self = this;
-		return txnMgr.query(path).done(function(data) {
-		    self.renderObject(data);
+	    Inline.requestData = function(value, meta) {
+		var def = $.Deferred();
+		txnMgr.query(value).done(function(data) {
+		    def.resolve(data, meta);
 		});
+		return def;
 	    };
 
-	    Inline.renderObject = function(data) {
+	    Inline.render = function(data, meta) {
 		this.data = data;
 		var self = this;
 
@@ -630,9 +646,11 @@ $(function() {
 
 	    var Horizontal = Object.create(Inline);
 
-	    Horizontal.staticRender = function(value) {
+	    Horizontal.createEl = function() {
 		this.previous = null;
-		return $("<tr>").html($("<td>").prop("class", "placeholder"));
+		return $("<tr>").html($("<td>").prop(
+		    "class", "placeholder"
+		));
 	    };
 
 	    Horizontal.appendWidget = function(el, label) {
@@ -671,11 +689,11 @@ $(function() {
 
 	    var Vertical = Object.create(Inline);
 
-	    Vertical.staticRender = function(value) { return $("<div>"); };
+	    Vertical.createEl = function() { return $("<div>"); };
 
 	    Vertical.wrap = function() { return $("<div>").html(this.el); };
 
-	    Vertical.renderObject = function(data) {
+	    Vertical.render = function(data, meta) {
 		this.el.append(
 		    $("<h" + this.level + ">").text(data.meta["ui-name"])
 		);
@@ -686,7 +704,7 @@ $(function() {
 		this.div = $("<div>");
 		this.el.append(this.div);
 
-		_.bind(Inline.renderObject, this)(data);
+		_.bind(Inline.render, this)(data, meta);
 
 		var self = this;
 		
@@ -778,7 +796,7 @@ $(function() {
 	    Reference.init = function(
 		data, name, meta, level, editable, removable
 	    ) {
-		this.field = ComboBox.render(data.get(name), meta);
+		this.field = ComboBox.createEl();
 		return _.bind(ComboBox.init, this)(
 		    data, name, meta, level, editable, removable
 		);
@@ -792,20 +810,34 @@ $(function() {
 		ComboBox.setElStatus(el.find("select"), status);
 	    };
 
+	    Reference.createEl = function() { return $("<div>"); };
+
+	    Reference.requestData = function(value, meta) {
+		var def = $.Deferred();
+		txnMgr.query(meta.scope).done(function(data) {
+		    meta.choice = _.values(data.data);
+		    meta["ui-choice"] = _.map(meta.choice, function(path) {
+			return split(path).pop();
+		    });
+		    def.resolve(value, meta);
+		});
+		return def;
+	    };
+
 	    Reference.render = function(value, meta) {
-		var el = $("<div>").html(this.field);
-		el.append(" ");
+		_.bind(ComboBox.render, this)(value, meta);
+
+		this.el.html(this.field);
+		this.el.append(" ");
 
 		var link = $("<div>");
 		var update = _.bind(function() {
 		    link.html(Link.staticRender(this.get()));
 		}, this);		
-		el.append(link);
+		this.el.append(link);
 
 		this.field.change(update);
 		update();
-
-		return el;
 	    };
 
 
@@ -821,9 +853,9 @@ $(function() {
 
 	    var Tabular = Object.create(Vertical);
 
-	    Tabular.renderObject = function(data) {
+	    Tabular.render = function(data, meta) {
 		this.header = true;
-		_.bind(Vertical.renderObject, this)(data);
+		_.bind(Vertical.render, this)(data, meta);
 	    };
 
 	    Tabular.widget = function(meta) {
@@ -853,13 +885,12 @@ $(function() {
 		    var layout = data.meta.widget;
 		    var form = Object.create(layout ? layouts[layout] : Vertical);
 
-		    form.staticRender = function(value) {
-			return $("#content");
+		    form.createEl = function() {
+			return $("#content").empty();
 		    };
 		    form.wrap = function() { return this.el; };
-		    form.requestData = function(path) {
-			this.el.empty();
-			this.renderObject(data);
+		    form.requestData = function(value, meta) {
+			return $.Deferred().resolve(data, meta);
 		    };
 
 		    var name = split(path).pop();
-- 
cgit v1.2.3