added a more DRY way to create dialogs from JavaScript/TypeScript whi…

…ch removes lots of noise from the controllers (especially if you have a few dialogs)
hawtio · Apr 26, 2013 · 30c9c0c · 30c9c0c
1 parent 0463c06
commit 30c9c0c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 27 deletions.
diff --git a/hawtio-web/src/main/webapp/app/activemq/html/browseQueue.html b/hawtio-web/src/main/webapp/app/activemq/html/browseQueue.html
@@ -12,7 +12,7 @@
             <i class="icon-move"></i> Move
           </button>
           <button type="submit" class="btn" ng-disabled="!selectedItems.length"
-                  ng-click="openDeleteDialog()"
+                  ng-click="deleteDialog.open()"
                   title="Delete the selected messages">
             <i class="icon-remove"></i> Delete
           </button>
@@ -28,8 +28,8 @@
     -->
   </div>
 
-  <div modal="showMessageDialog" close="closeMessageDialog()" options="messageDialogOptions">
-    <form class="form-horizontal no-bottom-margin" ng-submit="closeMessageDialog()">
+  <div modal="messageDialog.show" close="messageDialog.close()" options="messageDialog.options">
+    <form class="form-horizontal no-bottom-margin" ng-submit="messageDialog.close()">
       <div class="modal-header"><h4>Message {{row.JMSMessageID}}</h4></div>
       <div class="modal-body">
         <div class="expandable closed">
@@ -62,20 +62,20 @@
         </div>
       </div>
       <div class="modal-footer">
-        <input class="btn btn-primary" type="submit" ng-click="closeMessageDialog()" value="Close">
+        <input class="btn btn-primary" type="submit" ng-click="messageDialog.close()" value="Close">
       </div>
     </form>
   </div>
 
-  <div modal="showDeleteDialog" close="closeDeleteDialog()" options="messageDialogOptions">
-    <form class="form-horizontal no-bottom-margin" ng-submit="closeDeleteDialog()">
+  <div modal="deleteDialog.show" close="deleteDialog.close()" options="deleteDialog.options">
+    <form class="form-horizontal no-bottom-margin" ng-submit="deleteDialog.close()">
       <div class="modal-header"><h4>Are you sure?</h4></div>
       <div class="modal-body">
         <p>You are about to delete {{selectedItems.length}} messages!</p>
       </div>
       <div class="modal-footer">
         <input class="btn btn-danger" type="submit" ng-click="deleteMessagesAndCloseDeleteDialog()" value="Delete">
-        <input class="btn btn-primary" ng-click="closeDeleteDialog()" value="Cancel">
+        <input class="btn btn-primary" ng-click="deleteDialog.close()" value="Cancel">
       </div>
     </form>
   </div>

diff --git a/hawtio-web/src/main/webapp/app/activemq/js/browse.ts b/hawtio-web/src/main/webapp/app/activemq/js/browse.ts
@@ -4,11 +4,8 @@ module ActiveMQ {
     $scope.selectedItems = [];
     $scope.headers = {};
 
-    $scope.showMessageDialog = false;
-    $scope.messageDialogOptions = {
-      backdropFade: true,
-      dialogFade: true
-    };
+    $scope.deleteDialog = new Core.Dialog();
+    $scope.messageDialog = new Core.Dialog();
 
     $scope.gridOptions = {
       selectedItems: $scope.selectedItems,
@@ -72,22 +69,14 @@ module ActiveMQ {
     $scope.openMessageDialog = (message) => {
       $scope.row = Core.pathGet(message, ["entity"]);
       if ($scope.row) {
-        $scope.showMessageDialog = true;
+        $scope.messageDialog.open();
       }
     };
 
-    $scope.closeMessageDialog = () => {
-      $scope.showMessageDialog = false;
-    };
-
     $scope.move = () => {
       console.log("moving selected items " + $scope.selectedItems.length + " to another destination!");
     };
 
-    $scope.openDeleteDialog = () => {
-      $scope.showDeleteDialog = true;
-    };
-
     $scope.deleteMessagesAndCloseDeleteDialog = () => {
       var jolokia = workspace.jolokia;
       var selection = workspace.selection;
@@ -103,11 +92,7 @@ module ActiveMQ {
           }
         });
       }
-      $scope.closeDeleteDialog();
-    };
-
-    $scope.closeDeleteDialog = () => {
-      $scope.showDeleteDialog = false;
+      $scope.deleteDialog.close();
     };
 
     function populateTable(response) {

diff --git a/hawtio-web/src/main/webapp/app/core/js/dialog.ts b/hawtio-web/src/main/webapp/app/core/js/dialog.ts
@@ -0,0 +1,20 @@
+module Core {
+
+  export class Dialog {
+    public show = false;
+
+    public options = {
+      backdropFade: true,
+      dialogFade: true
+    };
+
+
+    public open() {
+      this.show = true;
+    }
+
+    public close() {
+      this.show = false;
+    }
+  }
+}
diff --git a/hawtio-web/src/main/webapp/app/core/js/helpers.ts b/hawtio-web/src/main/webapp/app/core/js/helpers.ts
@@ -702,5 +702,4 @@ module Core {
     }
     return null;
   }
-
 }