From bd1babec3a29eee0b5286b4874a935930272c942 Mon Sep 17 00:00:00 2001
From: Raymond <raymondtangsc@gmail.com>
Date: Wed, 15 Oct 2014 14:46:55 +0800
Subject: [PATCH] Add query to dashboard based on name not query id, issue #171

---
 rd_ui/app/index.html                          |  2 ++
 rd_ui/app/scripts/app.js                      |  3 +-
 .../directives/dashboard_directives.js        | 20 +++++++++----
 rd_ui/app/views/new_widget_form.html          | 30 +++++++++----------
 rd_ui/bower.json                              |  3 +-
 5 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/rd_ui/app/index.html b/rd_ui/app/index.html
index a0392866..d611acfd 100644
--- a/rd_ui/app/index.html
+++ b/rd_ui/app/index.html
@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="/bower_components/pivottable/dist/pivot.css">
     <link rel="stylesheet" href="/bower_components/cornelius/src/cornelius.css">
     <link rel="stylesheet" href="/bower_components/select2/select2.css">
+    <link rel="stylesheet" href="/bower_components/angular-ui-select/dist/select.min.css">
     <link rel="stylesheet" href="/bower_components/pace/themes/pace-theme-minimal.css">
     <link rel="stylesheet" href="/styles/redash.css">
     <!-- endbuild -->
@@ -116,6 +117,7 @@
 <script src="/bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.js"></script>
 <script src="/bower_components/select2/select2.js"></script>
 <script src="/bower_components/angular-ui-select2/src/select2.js"></script>
+<script src="/bower_components/angular-ui-select/dist/select.min.js"></script>
 <script src="/bower_components/underscore.string/lib/underscore.string.js"></script>
 <script src="/bower_components/marked/lib/marked.js"></script>
 <script src="/scripts/ng_highchart.js"></script>
diff --git a/rd_ui/app/scripts/app.js b/rd_ui/app/scripts/app.js
index 8d9fbbe8..83d9fafa 100644
--- a/rd_ui/app/scripts/app.js
+++ b/rd_ui/app/scripts/app.js
@@ -14,7 +14,8 @@ angular.module('redash', [
     'ui.bootstrap',
     'smartTable.table',
     'ngResource',
-    'ngRoute'
+    'ngRoute',
+    'ui.select'
   ]).config(['$routeProvider', '$locationProvider', '$compileProvider', 'growlProvider',
     function ($routeProvider, $locationProvider, $compileProvider, growlProvider) {
       if (featureFlags.clientSideMetrics) {
diff --git a/rd_ui/app/scripts/directives/dashboard_directives.js b/rd_ui/app/scripts/directives/dashboard_directives.js
index 42d612f2..682a5b8c 100644
--- a/rd_ui/app/scripts/directives/dashboard_directives.js
+++ b/rd_ui/app/scripts/directives/dashboard_directives.js
@@ -147,22 +147,22 @@
           var reset = function() {
             $scope.saveInProgress = false;
             $scope.widgetSize = 1;
-            $scope.queryId = null;
             $scope.selectedVis = null;
-            $scope.query = null;
+            $scope.query = {};
+            $scope.selected_query = undefined;
             $scope.text = "";
           };
 
           reset();
 
           $scope.loadVisualizations = function () {
-            if (!$scope.queryId) {
+            if (!$scope.query.selected) {
               return;
             }
 
-            Query.get({ id: $scope.queryId }, function(query) {
+            Query.get({ id: $scope.query.selected.id }, function(query) {
               if (query) {
-                $scope.query = query;
+                $scope.selected_query = query;
                 if (query.visualizations.length) {
                   $scope.selectedVis = query.visualizations[0];
                 }
@@ -170,6 +170,16 @@
             });
           };
 
+          $scope.searchQueries = function (term) {
+            Query.search({q: term}, function(results) {
+              $scope.queries = results;
+            });
+          };
+
+          $scope.$watch('query', function () {
+            $scope.loadVisualizations();
+          }, true);
+
           $scope.saveWidget = function() {
             $scope.saveInProgress = true;
 
diff --git a/rd_ui/app/views/new_widget_form.html b/rd_ui/app/views/new_widget_form.html
index e9b13c02..f656ee3c 100644
--- a/rd_ui/app/views/new_widget_form.html
+++ b/rd_ui/app/views/new_widget_form.html
@@ -22,22 +22,22 @@
                 </div>
 
                 <div ng-show="isVisualization()">
-                    <p>
-                        <form class="form-inline" role="form" ng-submit="loadVisualizations()">
-                            <div class="form-group">
-                                <input class="form-control" placeholder="Query Id" ng-model="queryId">
-                            </div>
-                            <button type="submit" class="btn btn-primary" ng-disabled="!queryId">
-                                Load visualizations
-                            </button>
-                        </form>
-                    </p>
+                    <div class="form-group">
+                        <ui-select ng-model="query.selected" theme="bootstrap" reset-search-input="false">
+                            <ui-select-match placeholder="Search a query by name">{{$select.selected.name}}</ui-select-match>
+                            <ui-select-choices repeat="q in queries"
+                                               refresh="searchQueries($select.search)"
+                                               refresh-delay="0">
+                                <div ng-bind-html="q.name | highlight: $select.search | markdown"></div>
+                            </ui-select-choices>
+                        </ui-select>
+                    </div>
 
-                    <div ng-show="query">
-                      <div class="form-group">
-                          <label for="">Choose Visualization</label>
-                          <select ng-model="selectedVis" ng-options="vis as vis.name group by vis.type for vis in query.visualizations" class="form-control"></select>
-                      </div>
+                    <div ng-show="query.selected">
+                        <div class="form-group">
+                            <label for="">Choose Visualization</label>
+                            <select ng-model="selectedVis" ng-options="vis as vis.name group by vis.type for vis in selected_query.visualizations" class="form-control"></select>
+                        </div>
                     </div>
                 </div>
 
diff --git a/rd_ui/bower.json b/rd_ui/bower.json
index b1ca8ccd..4a6041ec 100644
--- a/rd_ui/bower.json
+++ b/rd_ui/bower.json
@@ -25,7 +25,8 @@
     "underscore.string": "~2.3.3",
     "marked": "~0.3.2",
     "bucky": "~0.2.6",
-    "pace": "~0.5.1"
+    "pace": "~0.5.1",
+    "angular-ui-select": "~0.8.2"
   },
   "devDependencies": {
     "angular-mocks": "~1.0.7",