Add a read-only variant of the form, fixes #214

hawtio · Mar 26, 2013 · c44fb14 · c44fb14
1 parent da80e7c
commit c44fb14
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 31 deletions.
diff --git a/hawtio-web/src/main/webapp/app/forms/html/test.html b/hawtio-web/src/main/webapp/app/forms/html/test.html
@@ -9,6 +9,17 @@ <h3>Form Testing</h3>
 
   <hr>
 
+  <div>
+    Read Only Form with config object
+    <div class="row-fluid">
+      <button class="btn" ng-click="toggleEdit()">Edit</button>
+    </div>
+    <div ng-hide="editing" simple-read-only-form='config' entity='cheese'></div>
+    <div ng-show="editing" simple-form='config' entity='cheese'></div>
+  </div>
+
+  <hr>
+
   <div>
     Form with config object
     <div simple-form='config'></div>

diff --git a/hawtio-web/src/main/webapp/app/forms/js/formPlugin.ts b/hawtio-web/src/main/webapp/app/forms/js/formPlugin.ts
@@ -6,7 +6,12 @@ module Forms {
       config(($routeProvider) => {
         $routeProvider.when('/forms/test', {templateUrl: 'app/forms/html/test.html'});
       }).
-      directive('simpleForm', function(workspace, $compile) { return new Forms.SimpleForm(workspace, $compile); });
+      directive('simpleForm', function(workspace, $compile) {
+        return new Forms.SimpleForm(workspace, $compile);
+      }).
+      directive('simpleReadOnlyForm', function(workspace, $compile) {
+        return new Forms.SimpleReadOnlyForm(workspace, $compile);
+      });
 
   hawtioPluginLoader.addModule(pluginName);
 }
diff --git a/hawtio-web/src/main/webapp/app/forms/js/simpleFormDirective.ts b/hawtio-web/src/main/webapp/app/forms/js/simpleFormDirective.ts
@@ -38,8 +38,6 @@ module Forms {
 
     // TODO - add toggles to turn off cancel or reset buttons
 
-    // TODO - do actual two-way databinding
-
     public getMode() {
       return this.mode || "edit";
     }
@@ -60,6 +58,8 @@ module Forms {
     public replace = true;
     public transclude = true;
 
+    private attributeName = 'simpleForm';
+
     // see constructor for why this is here...
     public link: (scope, element, attrs) => any;
 
@@ -73,7 +73,7 @@ module Forms {
 
     }
 
-    private sanitize(arg) {
+    public sanitize(arg) {
       if (angular.isDefined(arg.formType)) {
         // user-defined input type
         return arg;
@@ -97,7 +97,7 @@ module Forms {
     private doLink(scope, element, attrs) {
       var config = new SimpleFormConfig;
 
-      config = this.configure(config, scope[attrs['simpleForm']], attrs);
+      config = this.configure(config, scope[attrs[this.attributeName]], attrs);
 
       var mode = config.getMode();
       var entityName = config.getEntity();
@@ -112,6 +112,9 @@ module Forms {
         config.data = scope[config.data];
       }
 
+      console.log("This: ", this);
+      console.log("Config: ", config);
+
       var form = this.createForm(config);
       var fieldset = form.find('fieldset');
 
@@ -187,7 +190,6 @@ module Forms {
             return false;
           });
         }
-
         controlDiv.append(cancel);
       }
       if (reset) {

diff --git a/hawtio-web/src/main/webapp/app/forms/js/simpleReadOnlyFormDirective.ts b/hawtio-web/src/main/webapp/app/forms/js/simpleReadOnlyFormDirective.ts
@@ -0,0 +1,46 @@
+module Forms {
+
+  export class SimpleReadOnlyForm extends SimpleForm {
+
+    private attributeName = 'simpleReadOnlyForm';
+
+    constructor(private workspace, public $compile) {
+      super(workspace, $compile);
+    }
+
+    private getCancelButton(config) {
+      return '';
+    }
+
+    private getResetButton(config) {
+      return '';
+    }
+
+    private getSubmitButton(config) {
+      return '';
+    }
+
+    private getInput(config, arg) {
+      var a = this.sanitize(arg);
+
+      switch (a.formType) {
+        default:
+          var rc = $('<span class="form-data"></span>');
+          var modelName = a.model;
+          if (!angular.isDefined(a.model)) {
+            // TODO always use 2 way binding?
+            modelName = config.getEntity() + "." + a.name;
+          }
+          if (modelName) {
+            rc.attr('ng-model', modelName);
+            rc.append('{{' + modelName + '}}')
+          }
+
+          return rc;
+      }
+    }
+
+
+  }
+
+}
diff --git a/hawtio-web/src/main/webapp/app/forms/js/test.ts b/hawtio-web/src/main/webapp/app/forms/js/test.ts
@@ -1,31 +1,12 @@
 module Forms {
 
   export function FormTestController($scope, workspace) {
-    $scope.config = {
-      name: 'form-with-config-object',
-      action: "/some/url",
-      method: "post",
-      data: 'setVMOption',
-      showtypes: 'false'
-    };
 
-    $scope.cheese = {
-      key: "keyABC",
-      value: "valueDEF",
-      intArg: 999
-    };
+    $scope.editing = false;
 
-    $scope.onCancel = (form) => {
-      notification('success', 'Cancel clicked on form "' + form.get(0).name + '"');
-    };
-
-    $scope.onSubmit = (json, form) => {
-      notification('success', 'Form "' + form.get(0).name + '" submitted... (well not really), data:' + JSON.stringify(json));
-    };
-
-    $scope.derp = (json, form) => {
-      notification('error', 'derp with json ' + JSON.stringify(json));
-    };
+    $scope.toggleEdit = function() {
+      $scope.editing = !$scope.editing;
+    }
 
     $scope.setVMOption = {
       args: [
@@ -51,12 +32,38 @@ module Forms {
           name: 'intArg',
           type: 'Integer'
         }
-          // TODO - add more types, above is what I remember from jolokia
-        ],
+        // TODO - add more types, above is what I remember from jolokia
+      ],
       desc: 'Show some stuff in a form',
       ret: 'java.lang.String'
     }
 
+    $scope.config = {
+      name: 'form-with-config-object',
+      action: "/some/url",
+      method: "post",
+      data: 'setVMOption',
+      showtypes: 'false'
+    };
+
+    $scope.cheese = {
+      key: "keyABC",
+      value: "valueDEF",
+      intArg: 999
+    };
+
+    $scope.onCancel = (form) => {
+      notification('success', 'Cancel clicked on form "' + form.get(0).name + '"');
+    };
+
+    $scope.onSubmit = (json, form) => {
+      notification('success', 'Form "' + form.get(0).name + '" submitted... (well not really), data:' + JSON.stringify(json));
+    };
+
+    $scope.derp = (json, form) => {
+      notification('error', 'derp with json ' + JSON.stringify(json));
+    };
+
   }
 
 }
diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -892,3 +892,8 @@ div#main div div div div div.logbar div.logbar-container ul.nav.nav-tabs {
 .help-display h6 {
   margin-top: 2em;
 }
+
+.form-data {
+  display: inline-block;
+  margin: 5px;
+}