From 30eba3bfaefd04f1409adc735cefdd255a39e8ea Mon Sep 17 00:00:00 2001 From: Amir Nissim Date: Thu, 30 Jan 2014 17:33:02 +0200 Subject: [PATCH] edit and create visualizations --- rd_service/server.py | 2 +- rd_ui/app/scripts/controllers.js | 23 +++---- rd_ui/app/scripts/directives.js | 61 +++++++++++++++---- ...alization.html => edit_visualization.html} | 2 +- rd_ui/app/views/queryfiddle.html | 38 ++++++++---- 5 files changed, 86 insertions(+), 40 deletions(-) rename rd_ui/app/views/{add_visualization.html => edit_visualization.html} (96%) diff --git a/rd_service/server.py b/rd_service/server.py index 75fcbf16b..dbeef29ee 100644 --- a/rd_service/server.py +++ b/rd_service/server.py @@ -269,7 +269,7 @@ class VisualizationHandler(BaseAuthenticatedHandler): vis = data.models.Visualization(**kwargs) vis.save() - self.write_json(vis.to_dict()) + self.write_json(vis.to_dict(with_query=False)) class CsvQueryResultsHandler(BaseAuthenticatedHandler): diff --git a/rd_ui/app/scripts/controllers.js b/rd_ui/app/scripts/controllers.js index 24540519c..725e0bd2a 100644 --- a/rd_ui/app/scripts/controllers.js +++ b/rd_ui/app/scripts/controllers.js @@ -33,12 +33,14 @@ $scope.updateTime = ''; } - var QueryFiddleCtrl = function ($scope, $window, $routeParams, $http, $location, growl, notifications, Query) { + var QueryFiddleCtrl = function ($scope, $window, $location, $routeParams, $http, $location, growl, notifications, Query) { + var DEFAULT_TAB = 'table'; var pristineHash = null; - $scope.dirty = undefined; - var leavingPageText = "You will lose your changes if you leave"; + $scope.dirty = undefined; + $scope.newVisualization = undefined; + $window.onbeforeunload = function(){ if (currentUser.canEdit($scope.query) && $scope.dirty) { return leavingPageText; @@ -72,11 +74,9 @@ $scope.$parent.pageTitle = "Query Fiddle"; - // more tabs added when query loads - $scope.tabs = [{'key': 'table', 'name': 'Table'}, - {'key': 'pivot', 'name': 'Pivot Table'}, - {'key': 'add', 'name': 'New Visualization'}]; - + $scope.$watch(function() {return $location.hash()}, function(hash) { + $scope.selectedTab = hash || DEFAULT_TAB; + }); $scope.lockButton = function (lock) { $scope.queryExecuting = lock; @@ -194,11 +194,6 @@ pristineHash = q.getHash(); $scope.dirty = false; $scope.queryResult = $scope.query.getQueryResult(); - - _.each(q.visualizations, function(vis) { - $scope.tabs.splice(-1, 0, {'key': 'vis' + vis.id, 'name': vis.name}); - }); - }); } else { $scope.query = new Query({query: "", name: "New Query", ttl: -1, user: currentUser.name}); @@ -381,7 +376,7 @@ .controller('DashboardCtrl', ['$scope', '$routeParams', '$http', 'Dashboard', DashboardCtrl]) .controller('WidgetCtrl', ['$scope', '$http', '$location', 'Query', WidgetCtrl]) .controller('QueriesCtrl', ['$scope', '$http', '$location', '$filter', 'Query', QueriesCtrl]) - .controller('QueryFiddleCtrl', ['$scope', '$window', '$routeParams', '$http', '$location', 'growl', 'notifications', 'Query', QueryFiddleCtrl]) + .controller('QueryFiddleCtrl', ['$scope', '$window', '$location', '$routeParams', '$http', '$location', 'growl', 'notifications', 'Query', QueryFiddleCtrl]) .controller('IndexCtrl', ['$scope', 'Dashboard', IndexCtrl]) .controller('MainCtrl', ['$scope', 'Dashboard', 'notifications', MainCtrl]); })(); diff --git a/rd_ui/app/scripts/directives.js b/rd_ui/app/scripts/directives.js index ebe99bdc7..ca0a955ff 100644 --- a/rd_ui/app/scripts/directives.js +++ b/rd_ui/app/scripts/directives.js @@ -3,6 +3,23 @@ var directives = angular.module('redash.directives', []); + directives.directive('rdTab', ['$location', function($location) { + return { + restrict: 'E', + scope: { + 'id': '@', + 'name': '@' + }, + template: '
  • {{name}}
    • ', + replace: true, + link: function(scope) { + scope.$watch(function(){return scope.$parent.selectedTab}, function(tab) { + scope.selectedTab = tab; + }); + } + } + }]); + directives.directive('rdTabs', ['$location', '$rootScope', function($location, $rootScope) { return { restrict: 'E', @@ -28,36 +45,56 @@ } }]); - directives.directive('addVisulatizationForm', ['Visualization', 'growl', function(Visualization, growl) { + directives.directive('editVisulatizationForm', ['Visualization', 'growl', function(Visualization, growl) { return { restrict: 'E', - templateUrl: '/views/add_visualization.html', + templateUrl: '/views/edit_visualization.html', replace: true, scope: { - query: "=" + query: '=', + vis: '=?' }, - link: function(scope) { + link: function(scope, element, attrs) { scope.visTypes = Visualization.prototype.TYPES; scope.visOptions = _.map(Visualization.prototype.TYPES, function (type) { return {type: type, name: Visualization.prototype.NAMES[type]}; }); - scope.vis = { - 'query_id': scope.query.id, - 'type': scope.visTypes.CHART, - 'name': scope.query.name, - 'description': scope.query.description, - 'options': {} - }; + if (!scope.vis) { + // create new visualization + // wait for query to load to populate with defaults + var unwatch = scope.$watch('query', function(q) { + if (q.id) { + unwatch(); + scope.vis = { + 'query_id': q.id, + 'type': scope.visTypes.CHART, + 'name': q.name, + 'description': q.description, + 'options': {} + }; + } + }, true); + } scope.typeChanged = function() { console.log('evme', 'typeChanged'); scope.vis.options = {}; }; - scope.createVis = function() { + scope.submit = function() { Visualization.save(scope.vis, function success(result) { + growl.addSuccessMessage("Visualization saved"); + scope.vis = result; + + var visIds = _.pluck(scope.query.visualizations, 'id'); + var index = visIds.indexOf(result.id); + if (index > -1) { + scope.query.visualizations[index] = result; + } else { + scope.query.visualizations.push(result); + } }, function error() { growl.addErrorMessage("Visualization could not be saved"); }); diff --git a/rd_ui/app/views/add_visualization.html b/rd_ui/app/views/edit_visualization.html similarity index 96% rename from rd_ui/app/views/add_visualization.html rename to rd_ui/app/views/edit_visualization.html index 5c0c27ab9..3c85498df 100644 --- a/rd_ui/app/views/add_visualization.html +++ b/rd_ui/app/views/edit_visualization.html @@ -1,4 +1,4 @@ -
    +
    diff --git a/rd_ui/app/views/queryfiddle.html b/rd_ui/app/views/queryfiddle.html index 6496eaf2f..76dc905e6 100644 --- a/rd_ui/app/views/queryfiddle.html +++ b/rd_ui/app/views/queryfiddle.html @@ -51,30 +51,44 @@
    - +
      + + + + +
    - -
    +
    -
    +
    -
    -

    {{vis}}

    -
    - -
    +

    - +
    +
    + + +
    +

    +
    +
    + +
    +
    +

    - - + +
    +
    + +