From c53f965e3eeb7102da10f45680da1f6f4bcaa1f8 Mon Sep 17 00:00:00 2001
From: Amir Nissim <amirnissim@gmail.com>
Date: Thu, 3 Apr 2014 16:24:03 +0300
Subject: [PATCH] [#16] reload dashboard list when renaming dashboard

---
 rd_ui/app/scripts/controllers/controllers.js  | 28 +++++++++-------
 .../directives/dashboard_directives.js        |  5 +--
 rd_ui/app/scripts/services/services.js        |  7 ++++
 rd_ui/app/views/edit_dashboard.html           | 32 ++++++++++---------
 4 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/rd_ui/app/scripts/controllers/controllers.js b/rd_ui/app/scripts/controllers/controllers.js
index d68dfe92cd..6b9b60a4e5 100644
--- a/rd_ui/app/scripts/controllers/controllers.js
+++ b/rd_ui/app/scripts/controllers/controllers.js
@@ -106,9 +106,15 @@
         });
     }
 
-    var MainCtrl = function ($scope, Dashboard, notifications) {
+    var MainCtrl = function ($scope, Dashboard, notifications, Events) {
         $scope.dashboards = [];
-        $scope.reloadDashboards = function() {
+        $scope.currentUser = currentUser;
+        $scope.newDashboard = {
+            'name': null,
+            'layout': null
+        }
+
+        function reloadDashboards() {
             Dashboard.query(function (dashboards) {
                 $scope.dashboards = _.sortBy(dashboards, "name");
                 $scope.allDashboards = _.groupBy($scope.dashboards, function(d) {
@@ -123,26 +129,24 @@
             });
         }
 
-        $scope.reloadDashboards();
+        reloadDashboards();
 
-        $scope.currentUser = currentUser;
-        $scope.newDashboard = {
-            'name': null,
-            'layout': null
-        }
+        $scope.$on(Events.dashboardchange, function() {
+            reloadDashboards();
+        });
 
         $(window).click(function () {
             notifications.getPermissions();
         });
     }
 
-    var IndexCtrl = function($scope, Dashboard) {
+    var IndexCtrl = function($scope, Dashboard, Events) {
         $scope.$parent.pageTitle = "Home";
 
         $scope.archiveDashboard = function(dashboard) {
             if (confirm('Are you sure you want to delete "' + dashboard.name + '" dashboard?')) {
                 dashboard.$delete(function() {
-                    $scope.$parent.reloadDashboards();
+                    $scope.$emit(Events.dashboardchange);
                 });
             }
         }
@@ -150,6 +154,6 @@
 
     angular.module('redash.controllers', [])
         .controller('QueriesCtrl', ['$scope', '$http', '$location', '$filter', 'Query', QueriesCtrl])
-        .controller('IndexCtrl', ['$scope', 'Dashboard', IndexCtrl])
-        .controller('MainCtrl', ['$scope', 'Dashboard', 'notifications', MainCtrl]);
+        .controller('IndexCtrl', ['$scope', 'Dashboard', 'Events', IndexCtrl])
+        .controller('MainCtrl', ['$scope', 'Dashboard', 'notifications', 'Events', MainCtrl]);
 })();
diff --git a/rd_ui/app/scripts/directives/dashboard_directives.js b/rd_ui/app/scripts/directives/dashboard_directives.js
index d39ae2c37f..07e7188026 100644
--- a/rd_ui/app/scripts/directives/dashboard_directives.js
+++ b/rd_ui/app/scripts/directives/dashboard_directives.js
@@ -3,8 +3,8 @@
 
   var directives = angular.module('redash.directives');
 
-  directives.directive('editDashboardForm', ['$http', '$location', '$timeout', 'Dashboard',
-    function($http, $location, $timeout, Dashboard) {
+  directives.directive('editDashboardForm', ['$http', '$location', '$timeout', 'Dashboard', 'Events',
+    function($http, $location, $timeout, Dashboard, Events) {
       return {
         restrict: 'E',
         scope: {
@@ -89,6 +89,7 @@
                 $scope.dashboard = new Dashboard(response);
                 $scope.saveInProgress = false;
                 $(element).modal('hide');
+                $scope.$emit(Events.dashboardchange);
               })
             } else {
               $http.post('/api/dashboards', {
diff --git a/rd_ui/app/scripts/services/services.js b/rd_ui/app/scripts/services/services.js
index feb2189df5..86925c0cfb 100644
--- a/rd_ui/app/scripts/services/services.js
+++ b/rd_ui/app/scripts/services/services.js
@@ -1,6 +1,12 @@
 (function() {
   'use strict'
 
+  function Events() {
+    return {
+      dashboardchange: 'dashboardchange'
+    }
+  }
+
   function KeyboardShortcuts() {
     this.bind = function bind(keymap) {
       _.forEach(keymap, function(fn, key) {
@@ -20,5 +26,6 @@
   }
 
   angular.module('redash.services', [])
+    .service('Events', [Events])
     .service('KeyboardShortcuts', [KeyboardShortcuts])
 })();
\ No newline at end of file
diff --git a/rd_ui/app/views/edit_dashboard.html b/rd_ui/app/views/edit_dashboard.html
index 77020d99c6..6b26e4325d 100644
--- a/rd_ui/app/views/edit_dashboard.html
+++ b/rd_ui/app/views/edit_dashboard.html
@@ -1,23 +1,25 @@
 <div class="modal fade">
     <div class="modal-dialog">
         <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" ng-disabled="saveInProgress" aria-hidden="true">&times;</button>
-                <h4 class="modal-title">Edit: {{dashboard.name}}</h4>
-            </div>
-            <div class="modal-body">
-                <p>
-                    <input type="text" class="form-control" placeholder="Dashboard Name" ng-model="dashboard.name">
-                </p>
+            <form ng-submit="saveDashboard()">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" ng-disabled="saveInProgress" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title">Edit: {{dashboard.name}}</h4>
+                </div>
+                <div class="modal-body">
+                    <p>
+                        <input type="text" class="form-control" placeholder="Dashboard Name" ng-model="dashboard.name">
+                    </p>
 
-                <div class="gridster">
-                    <ul></ul>
+                    <div class="gridster">
+                        <ul></ul>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" ng-disabled="saveInProgress" data-dismiss="modal">Close</button>
+                    <button type="submit" class="btn btn-primary" ng-disabled="saveInProgress">Save</button>
                 </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" ng-disabled="saveInProgress" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary" ng-disabled="saveInProgress" ng-click="saveDashboard()">Save</button>
-            </div>
+            </form>
         </div>
         <!-- /.modal-content -->
     </div>