added a directive so we can manage a list of input fields which are s…

…tring arrays in the hawt-forms
hawtio · Oct 8, 2013 · 0d613ba · 0d613ba
1 parent c08e215
commit 0d613ba
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 5 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/createBroker.ts b/hawtio-web/src/main/webapp/app/fabric/js/createBroker.ts
@@ -85,8 +85,8 @@ module Fabric {
       Core.pathSet(schema.properties, ['networksPassword', 'type'], 'password');
 
       schema['tabs'] = {
-        'Default': ['group', 'brokerName', 'kind', 'profile', 'parentProfile', 'data', 'configUrl', 'replicas', 'minimumInstances'],
-        'Advanced': ['*']
+        'Default': ['group', 'brokerName', 'kind', 'profile', 'parentProfile', 'data', 'configUrl', 'replicas', 'minimumInstances', 'networks'],
+        'Advanced': ['networksUserName', 'networksPassword', '*']
       };
     }
 

diff --git a/hawtio-web/src/main/webapp/app/forms/js/baseDirectives.ts b/hawtio-web/src/main/webapp/app/forms/js/baseDirectives.ts
@@ -311,6 +311,57 @@ module Forms {
   }
 
 
+  /**
+   * Generates a list of strings which can be added / editted / removed
+   */
+  export class StringArrayInput extends InputBase {
+
+    constructor(public workspace, public $compile) {
+      super(workspace, $compile);
+    }
+
+    public getInput(config, arg, id, modelName) {
+      var rowScopeName = "_" + id;
+      var ngRepeat = rowScopeName + ' in ' + modelName;
+
+      var readOnlyWidget = '{{' + rowScopeName + '}}';
+      if (config.isReadOnly()) {
+        return $('<ul><li ng-repeat="' + rowScopeName + ' in ' + modelName + '">' +
+                readOnlyWidget +
+                '</li></ul>');
+      } else {
+        // TODO there should be an easier way to find the property / schema!
+        var scope = config.scope;
+        var schema = scope[config.schemaName] || {};
+        var properties = schema.properties || {};
+        var arrayProperty = properties[id] || {};
+
+        // lets refer to the property of the item, rather than the array
+        var property = arrayProperty["items"] || {};
+        var propTypeName = property.type;
+        var ignorePrefixInLabel = true;
+        var configScopeName = null;
+
+        // lets avoid passing in the config as it tends to use "entity.id" then
+        // whereas we are editing an inscope variable called rowScopeName here:
+        var itemsConfig = {
+          model: rowScopeName
+        };
+        var widget = Forms.createWidget(propTypeName, property, schema, itemsConfig, rowScopeName, ignorePrefixInLabel, configScopeName, false);
+        if (!widget) {
+          widget = $(readOnlyWidget);
+        }
+        // TODO delete button, add button
+        var markup = $('<div ng-repeat="' + rowScopeName + ' in ' + modelName + '"></div>');
+        markup.append(widget);
+        markup.append($('<a ng-click="' + modelName + '.remove(' + rowScopeName + ')" title="Remove this value"><i class="red icon-remove"></i></a>'));
+        markup.after($('<a ng-click="' + modelName + '.push(\'\')" title="Add a new value"><i class="green icon-edit"></i></a>'));
+        return markup;
+      }
+
+    }
+  }
+
   export class ArrayInput extends InputBase {
 
     constructor(public workspace, public $compile) {
@@ -378,7 +429,6 @@ module Forms {
       $(element).append(this.$compile(table)(scope));
 
     }
-
   }
 
 

diff --git a/hawtio-web/src/main/webapp/app/forms/js/formPlugin.ts b/hawtio-web/src/main/webapp/app/forms/js/formPlugin.ts
@@ -33,6 +33,9 @@ module Forms {
           directive('hawtioFormArray', function(workspace, $compile) {
             return new Forms.ArrayInput(workspace, $compile);
           }).
+          directive('hawtioFormStringArray', function(workspace, $compile) {
+            return new Forms.StringArrayInput(workspace, $compile);
+          }).
           directive('hawtioFormCheckbox', function(workspace, $compile) {
             return new Forms.BooleanInput(workspace, $compile);
           }).

diff --git a/hawtio-web/src/main/webapp/app/forms/js/mappingRegistry.ts b/hawtio-web/src/main/webapp/app/forms/js/mappingRegistry.ts
@@ -5,7 +5,7 @@ module Forms {
    *
    * This will include either the standard AngularJS widgets or custom widgets
    */
-  export function createWidget(propTypeName, property, schema, config, id, ignorePrefixInLabel, configScopeName) {
+  export function createWidget(propTypeName, property, schema, config, id, ignorePrefixInLabel, configScopeName, wrapInGroup = true) {
     var input = null;
     var group = null;
 
@@ -72,7 +72,7 @@ module Forms {
         }
       }
       // figure out which things to not wrap in a group and label etc...
-      if (input.attr("type") !== "hidden") {
+      if (input.attr("type") !== "hidden" && wrapInGroup) {
         group = this.getControlGroup(config, config, id);
         var labelElement = Forms.getLabel(config, config, property.title || property.label || humanizeValue(defaultLabel));
         if (title) {
@@ -365,6 +365,13 @@ module Forms {
          case "object":
          case "java.lang.object":
          */
+        var items = property.items;
+        if (items) {
+          var typeName = items.type;
+          if (typeName && typeName === "string") {
+            return "hawtio-form-string-array";
+          }
+        }
         return "hawtio-form-array";
       case "boolean":
       case "bool":