Merge pull request #156 from EverythingMe/90-ui-issues

90 ui issues

rd_ui/app/index.html

@@ -123,7 +123,7 @@
 <script src="/scripts/controllers/dashboard.js"></script>
 <script src="/scripts/controllers/admin_controllers.js"></script>
 <script src="/scripts/controllers/query_view.js"></script>
-<script src="/scripts/controllers/query_edit.js"></script>
+<script src="/scripts/controllers/query_source.js"></script>
 <script src="/scripts/visualizations/base.js"></script>
 <script src="/scripts/visualizations/chart.js"></script>
 <script src="/scripts/visualizations/cohort.js"></script>

rd_ui/app/scripts/app.js

@@ -37,7 +37,7 @@ angular.module('redash', [
         });
         $routeProvider.when('/queries/new', {
             templateUrl: '/views/query.html',
-            controller: 'QueryEditCtrl',
+            controller: 'QuerySourceCtrl',
             reloadOnSearch: false,
             resolve: {
                 'query': ['Query', function newQuery(Query) {
@@ -55,7 +55,7 @@ angular.module('redash', [
         });
         $routeProvider.when('/queries/:queryId/source', {
             templateUrl: '/views/query.html',
-            controller: 'QueryEditCtrl',
+            controller: 'QuerySourceCtrl',
             reloadOnSearch: false,
             resolve: {
                 'query': ['Query', '$route', getQuery]

rd_ui/app/scripts/controllers/query_source.js

@@ -1,13 +1,17 @@
 (function() {
   'use strict';
 
-  function QueryEditCtrl($controller, $scope, $location, growl, Query, Visualization, KeyboardShortcuts) {
+  function QuerySourceCtrl($controller, $scope, $location, growl, Query, Visualization, KeyboardShortcuts) {
     // extends QueryViewCtrl
     $controller('QueryViewCtrl', {$scope: $scope});
 
     var
     isNewQuery = !$scope.query.id,
     queryText = $scope.query.query,
+
+    // ref to QueryViewCtrl.saveQuery
+    saveQuery = $scope.saveQuery,
+
     shortcuts = {
       'meta+s': function() {
           if ($scope.canEdit) {
@@ -24,9 +28,34 @@
 
     KeyboardShortcuts.bind(shortcuts);
 
-    $scope.onQuerySave = function(savedQuery) {
-      queryText = savedQuery.query;
-      $scope.isDirty = $scope.query.query !== queryText;
+    // @override
+    $scope.saveQuery = function(options, data) {
+      var savePromise = saveQuery(options, data);
+
+      savePromise.then(function(savedQuery) {
+        queryText = savedQuery.query;
+        $scope.isDirty = $scope.query.query !== queryText;
+
+        if (isNewQuery) {
+          // redirect to new created query (keep hash)
+          $location.path(savedQuery.getSourceLink()).replace();
+        }
+      });
+
+      return savePromise;
+    };
+
+    $scope.duplicateQuery = function() {
+      $scope.query.id = null;
+      $scope.query.ttl = -1;
+
+      $scope.saveQuery({
+        successMessage: 'Query forked',
+        errorMessage: 'Query could not be forked'
+      }).then(function redirect(savedQuery) {
+        // redirect to forked query (clear hash)
+        $location.url(savedQuery.getSourceLink()).replace()
+      });
     };
 
     $scope.deleteVisualization = function($e, vis) {
@@ -64,8 +93,8 @@
 
   };
 
-  angular.module('redash.controllers').controller('QueryEditCtrl', [
+  angular.module('redash.controllers').controller('QuerySourceCtrl', [
     '$controller', '$scope', '$location', 'growl', 'Query',
-    'Visualization', 'KeyboardShortcuts', QueryEditCtrl
+    'Visualization', 'KeyboardShortcuts', QuerySourceCtrl
     ]);
 })();

rd_ui/app/scripts/controllers/query_view.js

@@ -15,55 +15,38 @@
       $scope.query.data_source_id = $scope.query.data_source_id || dataSources[0].id;
     });
 
-    $scope.onQuerySave = angular.noop;
-
     $scope.lockButton = function(lock) {
       $scope.queryExecuting = lock;
     };
 
-    $scope.saveQuery = function(duplicate, data) {
-      var
-      successMessage = "Query saved",
-      oldId = $scope.query.id;
-
-      if (duplicate) {
-        successMessage = "Query forked";
-        $scope.query.id = null;
-        $scope.query.ttl = -1;
-      }
-
+    $scope.saveQuery = function(options, data) {
       if (data) {
         data.id = $scope.query.id;
       } else {
         data = $scope.query;
       }
 
+      options = _.extend({}, {
+        successMessage: 'Query saved',
+        errorMessage: 'Query could not be saved'
+      }, options);
+
       delete $scope.query.latest_query_data;
 
-      Query.save(data, function(savedQuery) {
-        $scope.onQuerySave(savedQuery);
-
-        if (oldId != savedQuery.id) {
-          // redirect to new/duplicated query page
-          $location.url('/queries/' + savedQuery.id + '/source#' + $location.hash()).replace();
-        }
-
-        growl.addSuccessMessage(successMessage);
+      return Query.save(data, function() {
+        growl.addSuccessMessage(options.successMessage);
       }, function(httpResponse) {
-        growl.addErrorMessage("Query could not be saved");
-      });
-    };
+        growl.addErrorMessage(options.errorMessage);
+      })
+      .$promise;
+    }
 
     $scope.saveDescription = function() {
-      $scope.saveQuery(false, {'description': $scope.query.description});
+      $scope.saveQuery(undefined, {'description': $scope.query.description});
     };
 
     $scope.saveName = function() {
-      $scope.saveQuery(false, {'name': $scope.query.name});
-    };
-
-    $scope.duplicateQuery = function() {
-      $scope.saveQuery(true);
+      $scope.saveQuery(undefined, {'name': $scope.query.name});
     };
 
     $scope.executeQuery = function() {

rd_ui/app/scripts/services/resources.js

@@ -313,6 +313,10 @@
             });
         };
 
+        Query.prototype.getSourceLink = function() {
+            return '/queries/' + this.id + '/source';
+        };
+
         Query.prototype.getQueryResult = function(ttl) {
             if (ttl == undefined) {
                 ttl = this.ttl;

rd_ui/app/styles/redash.css

@@ -37,6 +37,18 @@ a.navbar-brand {
     bottom: -11px;
 }
 
+.details-toggle {
+    cursor: pointer;
+}
+.details-toggle::before {
+    content: '▸';
+    margin-right: 5px;
+}
+.details-toggle.open::before {
+    content: '▾';
+    margin-right: 5px;
+}
+
 .edit-in-place span {
     white-space: pre-line;
 }

rd_ui/app/views/query.html

@@ -166,6 +166,7 @@
 
                         <div ng-show="selectedTab == vis.id" ng-repeat="vis in query.visualizations">
                             <visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer>
+
                             <edit-visulatization-form visualization="vis" query="query" query-result="queryResult" ng-show="canEdit"></edit-visulatization-form>
                         </div>
 

rd_ui/app/views/visualizations/chart_editor.html

@@ -1,7 +1,11 @@
-<div class="form-group">
-    <label class="control-label">Chart Type</label>
-    <select required ng-model="visualization.options.series.type" ng-options="value as key for (key, value) in seriesTypes" class="form-control"></select>
+<div>
+  <div class="form-group">
+      <label class="control-label">Chart Type</label>
+      <select required ng-model="visualization.options.series.type" ng-options="value as key for (key, value) in seriesTypes" class="form-control"></select>
+  </div>
 
-    <label class="control-label">Stacking</label>
-    <select required ng-model="stacking" ng-options="value as key for (key, value) in stackingOptions" class="form-control"></select>
+  <div class="form-group">
+      <label class="control-label">Stacking</label>
+      <select required ng-model="stacking" ng-options="value as key for (key, value) in stackingOptions" class="form-control"></select>
+  </div>
 </div>

rd_ui/app/views/visualizations/edit_visualization.html

@@ -1,23 +1,27 @@
-<form role="form" name="visForm" ng-submit="submit()">
-  <div class="form-group">
-    <label class="control-label">Name</label>
-    <input name="name" type="text" class="form-control" ng-model="visualization.name" placeholder="{{visualization.type | capitalize}}">
-  </div>
+<div>
+  <span ng-click="visEdit=!visEdit" class="details-toggle" ng-class="{open: visEdit}">Edit</span>
 
-  <div class="form-group">
-    <label class="control-label">Visualization Type</label>
-    <select required ng-model="visualization.type" ng-options="value as key for (key, value) in visTypes" class="form-control" ng-change="typeChanged()"></select>
-  </div>
+  <form ng-if="visEdit" role="form" name="visForm" ng-submit="submit()">
+    <div class="form-group">
+      <label class="control-label">Name</label>
+      <input name="name" type="text" class="form-control" ng-model="visualization.name" placeholder="{{visualization.type | capitalize}}">
+    </div>
 
-  <visualization-options-editor></visualization-options-editor>
+    <div class="form-group">
+      <label class="control-label">Visualization Type</label>
+      <select required ng-model="visualization.type" ng-options="value as key for (key, value) in visTypes" class="form-control" ng-change="typeChanged()"></select>
+    </div>
 
-  <div class="form-group" ng-if="editRawOptions">
-    <label class="control-label">Advanced</label>
-    <textarea json-text ng-model="visualization.options" class="form-control" rows="10"></textarea>
-  </div>
+    <visualization-options-editor></visualization-options-editor>
 
-  <div class="form-group">
-    <button type="submit" class="btn btn-primary">Save</button>
-  </div>
+    <div class="form-group" ng-if="editRawOptions">
+      <label class="control-label">Advanced</label>
+      <textarea json-text ng-model="visualization.options" class="form-control" rows="10"></textarea>
+    </div>
 
-</form>
+    <div class="form-group">
+      <button type="submit" class="btn btn-primary">Save</button>
+    </div>
+
+  </form>
+</div>