Remove default buttons and replace with hawtio-submit directive

hawtio · Apr 2, 2013 · 17fcb57 · 17fcb57
1 parent b8bdaba
commit 17fcb57
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 84 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
@@ -3,6 +3,7 @@
   <h3>Form Testing</h3>
 
   <div>
+    <a class='btn' ng-href="" hawtio-submit='form-with-inline-arguments'><i class="icon-save"></i> Save</a>
     Form with inline arguments
     <div simple-form name='form-with-inline-arguments' action='#/forms/test' method='post' data='setVMOption' entity='cheese' onSubmit="derp()" submitText="Derp"></div>
   </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
@@ -23,6 +23,9 @@ module Forms {
           }).
           directive('hawtioFormObject', function(workspace, $compile) {
             return new Forms.ObjectInput(workspace, $compile);
+          }).
+          directive('hawtioSubmit', function() {
+            return new Forms.SubmitForm();
           });
 
 

diff --git a/hawtio-web/src/main/webapp/app/forms/js/helpers.ts b/hawtio-web/src/main/webapp/app/forms/js/helpers.ts
@@ -79,17 +79,6 @@ module Forms {
     return angular.extend(config, attrs);
   }
 
-  /*
-   export function sanitize(arg) {
-   if (angular.isDefined(arg.formType)) {
-   // user-defined input type
-   return arg;
-   }
-   arg.formType = Forms.normalize(arg.type);
-   return arg;
-   }
-   */
-
   export function getControlGroup(config, arg, id) {
     var rc = $('<div class="' + config.controlgroupclass + '"></div>');
     if (angular.isDefined(arg.description)) {

diff --git a/hawtio-web/src/main/webapp/app/forms/js/simpleFormDirective.ts b/hawtio-web/src/main/webapp/app/forms/js/simpleFormDirective.ts
@@ -31,19 +31,8 @@ module Forms {
 
     public showtypes = 'false';
 
-    public submiticon = 'icon-ok';
-    public reseticon = 'icon-refresh';
-    public cancelicon = 'icon-remove';
-
-    public submittext = 'Submit';
-    public resettext = 'Reset';
-    public canceltext = 'Cancel';
-
-    public oncancel = 'onCancel';
     public onsubmit = 'onSubmit';
 
-    // TODO - add toggles to turn off cancel or reset buttons
-
     public getMode() {
       return this.mode || "edit";
     }
@@ -124,20 +113,6 @@ module Forms {
         fieldset.append(input);
       });
 
-      // TODO, I think these buttons could maybe be implemented differently as
-      // a separate directive...
-      var group = Forms.getControlGroup(config, {}, "");
-      var controlDiv = Forms.getControlDiv(config);
-
-      var cancel = null;
-      var reset = null;
-      var submit = null;
-      if (!config.isReadOnly()) {
-        cancel = this.getCancelButton(config);
-        reset = this.getResetButton(config);
-        submit = this.getSubmitButton(config);
-      }
-
       var findFunction = function(scope, func) {
         if (angular.isDefined(scope[func]) && angular.isFunction(scope[func])) {
           return scope;
@@ -157,23 +132,14 @@ module Forms {
       }
 
       var onSubmitFunc = config.onsubmit.replace('(', '').replace(')', '');
-      var onCancelFunc = config.oncancel.replace('(', '').replace(')', '');
-
       var onSubmit = maybeGet(findFunction(scope, onSubmitFunc), onSubmitFunc);
-      var onCancel = maybeGet(findFunction(scope, onCancelFunc), onCancelFunc);
 
       if (onSubmit === null) {
         onSubmit = function (json, form) {
           notification('error', 'No submit handler defined for form ' + form.get(0).name);
         }
       }
 
-      if (onCancel === null) {
-        onCancel = function(form) {
-          notification('error', 'No cancel handler defined for form ' + form.get(0).name);
-        }
-      }
-
       if (angular.isDefined(onSubmit)) {
         form.submit(() => {
           var entity = scope[entityName];
@@ -182,52 +148,14 @@ module Forms {
         });
       }
 
-      controlDiv.addClass('btn-group');
-      if (cancel) {
-        if (angular.isDefined(onCancel)) {
-          cancel.click((event) => {
-            onCancel(form);
-            return false;
-          });
-        }
-        controlDiv.append(cancel);
-      }
-      if (reset) {
-        reset.click((event) => {
-          form.get(0).reset();
-          return false;
-        });
-        controlDiv.append(reset);
-      }
-      if (submit) {
-        submit.click((event) => {
-          form.submit();
-          return false;
-        });
-        controlDiv.append(submit);
-      }
-
-      group.append(controlDiv);
-      fieldset.append(group);
+      fieldset.append('<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;">');
 
       $(element).append(form);
 
       // compile the template
       this.$compile(form)(scope);
     }
 
-    private getCancelButton(config) {
-      return $('<button type="button" class="btn cancel"><i class="' + config.cancelicon + '"></i> ' + config.canceltext + '</button>');
-    }
-
-    private getResetButton(config) {
-      return $('<button type="button" class="btn reset"><i class="' + config.reseticon + '"></i> ' + config.resettext + '</button>');
-    }
-
-    private getSubmitButton(config) {
-      return $('<button type="submit" class="btn btn-success submit"><i class="' + config.submiticon + '"></i> ' + config.submittext + '</button>');
-    }
-
     private createForm(config) {
       var form = $('<form class="' + config.formclass + '"><fieldset></fieldset></form>');
       form.attr('name', config.name);

diff --git a/hawtio-web/src/main/webapp/app/forms/js/submitDirective.ts b/hawtio-web/src/main/webapp/app/forms/js/submitDirective.ts
@@ -0,0 +1,28 @@
+module Forms {
+
+  export class SubmitForm {
+    public restrict = 'A';
+    public scope = true;
+
+    public link: (scope, element, attrs) => any;
+
+    constructor() {
+      // necessary to ensure 'this' is this object <sigh>
+      this.link = (scope, element, attrs) => {
+        return this.doLink(scope, element, attrs);
+      }
+    }
+
+    private doLink(scope, element, attrs) {
+
+      var el = $(element);
+
+      var target = 'form[name=' + attrs['hawtioSubmit'] + ']';
+
+      el.click(function() {
+        $(target).submit();
+      });
+
+    }
+  }
+}