Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added a change field event so we can detect when the model has been c…
…hanged and update the underlying DOM tree when things change for #228
  • Loading branch information
jstrachan committed Apr 9, 2013
1 parent d1209ef commit 3f82aac
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 41 deletions.
23 changes: 23 additions & 0 deletions hawtio-web/src/main/webapp/app/camel/js/helpers.ts
Expand Up @@ -80,6 +80,29 @@ module Camel {
return answer;
}

export function setRouteNodeJSON(routeXmlNode, newData) {
if (routeXmlNode) {
angular.forEach(newData, (value, key) => {
if (angular.isObject(value)) {
// TODO deal with nested objects...
var nested = $(routeXmlNode).children(key);
if (nested && nested.length) {
setRouteNodeJSON(nested[0], value);
} else {
console.log("No nested element called " + key + " inside " + routeXmlNode);
}
} else {
if (value) {
var text = value.toString();
routeXmlNode.setAttribute(key, text);
} else {
routeXmlNode.removeAttribute(key);
}
}
});
}
}

export function getRouteNodeIcon(nodeSettings) {
var imageName = nodeSettings["icon"] || "generic24.png";
return url("/app/camel/img/" + imageName);
Expand Down
69 changes: 29 additions & 40 deletions hawtio-web/src/main/webapp/app/forms/js/baseDirectives.ts
Expand Up @@ -19,9 +19,11 @@ module Forms {
public labelclass = 'control-label';
public showtypes = 'false';

// the name of the attribute in the scope which is the data to be editted
/** the name of the attribute in the scope which is the data to be edited */
public entity = 'entity';

/** the model expression to bind to. If ommited this defaults to entity + "." + name **/
public model = undefined;

public getEntity() {
return this.entity || "entity";
Expand Down Expand Up @@ -63,22 +65,31 @@ module Forms {
config.scope = scope;
config.schemaName = attrs["schema"] || "schema";

var group = Forms.getControlGroup(config, config, config.name);
group.append(Forms.getLabel(config, config, attrs["title"] || config.name));
var id = config.name;
var group = Forms.getControlGroup(config, config, id);

var modelName = config.model;
if (!angular.isDefined(modelName)) {
// TODO always use 2 way binding?
modelName = config.getEntity() + "." + id;
}
group.append(Forms.getLabel(config, config, attrs["title"] || id));
var controlDiv = Forms.getControlDiv(config);
controlDiv.append(this.getInput(config, config, config.name));
controlDiv.append(Forms.getHelpSpan(config, config, config.name));
controlDiv.append(this.getInput(config, config, id, modelName));
controlDiv.append(Forms.getHelpSpan(config, config, id));
group.append(controlDiv);
$(element).append(this.$compile(group)(scope));

if (scope && modelName) {
scope.$watch(modelName, onModelChange);
}
function onModelChange(newValue) {
scope.$emit("hawtio.form.modelChange", modelName, newValue);
}
}

public getInput(config, arg, id) {
public getInput(config, arg, id, modelName) {
var rc = $('<span class="form-data"></span>');
var modelName = arg.model;
if (!angular.isDefined(arg.model)) {
// TODO always use 2 way binding?
modelName = config.getEntity() + "." + id;
}
if (modelName) {
rc.attr('ng-model', modelName);
rc.append('{{' + modelName + '}}')
Expand All @@ -96,18 +107,12 @@ module Forms {
super(workspace, $compile);
}

public getInput(config, arg, id) {
public getInput(config, arg, id, modelName) {
if (config.isReadOnly()) {
return super.getInput(config, arg, id);
return super.getInput(config, arg, id, modelName);
}
var rc = $('<input type="' + this.type + '">');
rc.attr('name', id);

var modelName = arg.model;
if (!angular.isDefined(arg.model)) {
// TODO always use 2 way binding?
modelName = config.getEntity() + "." + id;
}
if (modelName) {
rc.attr('ng-model', modelName);
}
Expand All @@ -125,9 +130,9 @@ module Forms {
super(workspace, $compile);
}

public getInput(config, arg, id) {
public getInput(config, arg, id, modelName) {
if (config.isReadOnly()) {
return super.getInput(config, arg, id);
return super.getInput(config, arg, id, modelName);
}
// TODO calculate from input attributes...
var required = true;
Expand Down Expand Up @@ -159,11 +164,6 @@ module Forms {
scope["$selectValues"] = values;
rc.attr("ng-options", "value for value in $selectValues");
}
var modelName = arg.model;
if (!angular.isDefined(arg.model)) {
// TODO always use 2 way binding?
modelName = config.getEntity() + "." + id;
}
if (modelName) {
rc.attr('ng-model', modelName);
}
Expand All @@ -182,9 +182,9 @@ module Forms {
super(workspace, $compile);
}

public getInput(config, arg, id) {
public getInput(config, arg, id, modelName) {
if (config.isReadOnly()) {
return super.getInput(config, arg, id);
return super.getInput(config, arg, id, modelName);
}
var rc = $('<input type="number">');
rc.attr('name', id);
Expand All @@ -201,11 +201,6 @@ module Forms {
rc.attr('max', arg.maximum);
}

var modelName = arg.model;
if (!angular.isDefined(arg.model)) {
// TODO always use 2 way binding?
modelName = config.getEntity() + "." + id;
}
if (modelName) {
rc.attr('ng-model', modelName);
}
Expand Down Expand Up @@ -295,20 +290,14 @@ module Forms {
super(workspace, $compile);
}

public getInput(config, arg, id) {
public getInput(config, arg, id, modelName) {

var rc = $('<input class="hawtio-checkbox" type="checkbox">');
rc.attr('name', id);

if (config.isReadOnly()) {
rc.attr('disabled', 'true');
}

var modelName = arg.model;
if (!angular.isDefined(arg.model)) {
// TODO always use 2 way binding?
modelName = config.getEntity() + "." + id;
}
if (modelName) {
rc.attr('ng-model', modelName);
}
Expand Down
Expand Up @@ -78,6 +78,7 @@ module Forms {
var fullSchema = fullSchemaName ? scope[fullSchemaName] : null;

var compiledNode = null;
var childScope = null;
var tabs = null;
var fieldset = null;
var schema = null;
Expand Down Expand Up @@ -179,7 +180,11 @@ module Forms {
if (compiledNode) {
$(compiledNode).remove();
}
compiledNode = simple.$compile(form)(scope);
if (childScope) {
childScope.$destroy();
}
childScope = scope.$new(false);
compiledNode = simple.$compile(form)(childScope);
$(element).append(compiledNode);
}

Expand Down
28 changes: 28 additions & 0 deletions hawtio-web/src/main/webapp/app/wiki/js/camel.ts
Expand Up @@ -32,9 +32,12 @@ module Wiki {

$scope.onNodeSelect = (treeNode) => {
$scope.propertiesTemplate = null;
$scope.nodeXmlNode = null;
var routeXmlNode = treeNode["routeXmlNode"];
if (routeXmlNode) {
$scope.nodeXmlNode = routeXmlNode;
$scope.nodeData = Camel.getRouteNodeJSON(routeXmlNode);
$scope.nodeDataChangedFields = {};
var nodeName = routeXmlNode.nodeName;
$scope.nodeModel = Camel.getCamelSchema(nodeName);
if ($scope.nodeModel) {
Expand All @@ -44,8 +47,33 @@ module Wiki {
}
};

$scope.$on("hawtio.form.modelChange", onModelChangeEvent);

updateView();

function onModelChangeEvent(event, name) {
// lets filter out events due to the node changing causing the
// forms to be recreated
if ($scope.nodeData) {
var fieldMap = $scope.nodeDataChangedFields;
if (fieldMap) {
if (fieldMap[name]) {
onNodeDataChanged();
} else {
// the selection has just changed so we get the initial event
// we can ignore this :)
fieldMap[name] = true;
}
}
}
}

function onNodeDataChanged() {
if ($scope.nodeXmlNode) {
Camel.setRouteNodeJSON($scope.nodeXmlNode, $scope.nodeData);
}
}

function onResults(response) {
var text = response.text;
if (text) {
Expand Down

0 comments on commit 3f82aac

Please sign in to comment.