Create a confirmation dialog directive for #301

hawtio · Apr 29, 2013 · def25dc · def25dc
1 parent 611515a
commit def25dc
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 1 deletion.
diff --git a/hawtio-web/src/main/webapp/app/core/html/confirmDialog.html b/hawtio-web/src/main/webapp/app/core/html/confirmDialog.html
@@ -0,0 +1,11 @@
+<div modal="show">
+  <form class="form-horizontal no-bottom-margin" ng-submit="submit()">
+    <div class="modal-header"><h4>{{title}}</h4></div>
+    <div class="modal-body">
+    </div>
+    <div class="modal-footer">
+      <input class="btn btn-danger" type="submit" value="{{okButtonText}}">
+      <input class="btn btn-primary" ng-click="cancel()" value="{{cancelButtonText}}">
+    </div>
+  </form>
+</div>
diff --git a/hawtio-web/src/main/webapp/app/core/js/confirmDialogDirective.ts b/hawtio-web/src/main/webapp/app/core/js/confirmDialogDirective.ts
@@ -0,0 +1,74 @@
+module Core {
+
+  export class ConfirmDialog {
+    public restrict = 'EA';
+    public replace = true;
+    public transclude = true;
+    public templateUrl = 'app/core/html/confirmDialog.html';
+
+    public scope = {
+      show: '=hawtioConfirmDialog',
+      title: '@',
+      okButtonText: '@',
+      cancelButtonText: '@',
+      onCancel: '&',
+      onOk: '&',
+      onClose: '&'
+    }
+
+    public controller = ($scope, $element, $attrs) => {
+
+      $attrs.$observe('okButtonText', function(value) {
+        if (!angular.isDefined(value)) {
+          $scope.okButtonText = "Ok";
+        }
+      });
+      $attrs.$observe('cancelButtonText', function(value) {
+        if (!angular.isDefined(value)) {
+          $scope.cancelButtonText = "Cancel";
+        }
+      });
+      $attrs.$observe('title', function(value) {
+        if (!angular.isDefined(value)) {
+          $scope.title = "Are you sure?";
+        }
+      });
+
+      $scope.cancel = () => {
+        $scope.show = false;
+        $scope.$parent.$eval($scope.onCancel);
+      }
+
+      $scope.submit = () => {
+        $scope.show = false;
+        $scope.$parent.$eval($scope.onOk);
+      }
+
+      $scope.close = () => {
+        $scope.$parent.$eval($scope.onClose);
+      }
+
+    }
+
+    // see constructor for why this is here...
+    public compile:(tElement, tAttrs, transclude) => any;
+
+    constructor() {
+      this.compile = (tElement, tAttrs, transclude) => {
+        return this.doCompile(tElement, tAttrs, transclude);
+      }
+
+    }
+
+    private doCompile(tElement, tAttrs, transclude) {
+      return (scope, element, attrs) => {
+        transclude(scope, function(clone) {
+          var modalBody = element.find('.modal-body');
+          modalBody.append(clone);
+        });
+      }
+    }
+
+  }
+
+}
diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -341,7 +341,10 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
             }
           };
           return editableProperty;
-        }]);
+        }]).
+        directive('hawtioConfirmDialog', function() {
+          return new Core.ConfirmDialog();
+        });
 
 // enable bootstrap tooltips
 $(function () {

diff --git a/hawtio-web/src/main/webapp/app/forms/html/test.html b/hawtio-web/src/main/webapp/app/forms/html/test.html
@@ -23,6 +23,34 @@ <h3>Form Testing</h3>
 
   <hr>
 
+  <div>
+    Confirmation Dialog
+    <div class="row-fluid">
+      <button class="btn" ng-click="showDeleteOne = true">Delete Stuff</button>
+      <button class="btn" ng-click="showDeleteTwo = true">Delete Other Stuff</button>
+
+      <div hawtio-confirm-dialog="showDeleteOne"
+           title="Delete Stuff?"
+           ok-button-text="Yes, Delete the Stuff"
+           cancel-button-text="No, Keep the Stuff"
+           on-cancel="onCancelled('One')"
+           on-ok="onOk('One')">
+        Are you sure you want to delete all the stuff?
+      </div>
+      <!-- Use more defaults -->
+      <div hawtio-confirm-dialog="showDeleteTwo"
+           on-cancel="onCancelled('Two')"
+           on-ok="onOk('Two')">
+        Are you sure you want to delete all the other stuff?
+      </div>
+
+    </div>
+
+
+  </div>
+
+
+  <!--
   <div>
     Form with config object
     <div simple-form='config'></div>
@@ -43,4 +71,6 @@ <h3>Form Testing</h3>
        "type": "java.lang.String"
     }'></div>
   </div>
+
+  -->
 </div>
diff --git a/hawtio-web/src/main/webapp/app/forms/js/test.ts b/hawtio-web/src/main/webapp/app/forms/js/test.ts
@@ -4,6 +4,17 @@ module Forms {
 
     $scope.editing = false;
 
+    $scope.showDeleteOne = false;
+    $scope.showDeleteTwo = false;
+
+    $scope.onCancelled = (number) => {
+      notification('info', 'cancelled ' + number);
+    }
+
+    $scope.onOk = (number) => {
+      notification('info', number + ' ok!');
+    }
+
     $scope.toggleEdit = function() {
       $scope.editing = !$scope.editing;
     };