Skip to content

Commit

Permalink
getredash#121: layout change - query editor on top
Browse files Browse the repository at this point in the history
  • Loading branch information
@amirnissim
amirnissim committed Mar 11, 2014
1 parent 08355ff commit f01d224
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 35 deletions.
14 changes: 8 additions & 6 deletions rd_ui/app/scripts/controllers/query_view.js
View file
Expand Up @@ -6,15 +6,17 @@
var pristineHash = null;
var leavingPageText = "You will lose your changes if you leave";

$scope.dirty = undefined;
$scope.canEdit = false;

$scope.isEditing = false;
$scope.showQuery = false;
$scope.dirty = undefined;
$scope.newVisualization = undefined;
$scope.isQueryVisible = false;

$scope.queryExecuting = false;
$scope.queryResultStatus = null;

$scope.newVisualization = undefined;

$window.onbeforeunload = function() {
if ($scope.canEdit && $scope.dirty) {
return leavingPageText;
Expand Down Expand Up @@ -54,11 +56,11 @@
});

$scope.toggleEdit = function (state) {
$scope.isEditing = $scope.showQuery =
$scope.isEditing = $scope.isQueryVisible =
(state !== undefined) ? state : !$scope.isEditing;
};
$scope.toggleShowQuery = function() {
$scope.showQuery = !$scope.showQuery;
$scope.toggleQueryVisible = function() {
$scope.isQueryVisible = !$scope.isQueryVisible;
};

$scope.lockButton = function(lock) {
Expand Down
67 changes: 38 additions & 29 deletions rd_ui/app/views/queryview.html
View file
Expand Up @@ -2,15 +2,18 @@
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>
<span class="text-muted" ng-show="isEditing">Editing </span>
<h2>
<edit-in-place editable="isEditing" ignore-blanks='true' value="query.name"></edit-in-place>
<span class="label label-warning" ng-show="isEditing">Editing</span>

<span class="pull-right">
<button class="btn btn-success" ng-show="isEditing" ng-click="saveQuery() && toggleEdit(false)">
<span class="glyphicon glyphicon-floppy-disk"> </span> Save<span ng-show="dirty">&#42;</span>
</button>
<button class="btn btn-default" ng-show="!canEdit" ng-click="toggleShowQuery()">View Query</button>
<button class="btn btn-default" ng-show="!canEdit" ng-click="toggleQueryVisible()">
<span ng-show="!isQueryVisible">View Query</span>
<span ng-show="isQueryVisible">Hide Query</span>
</button>
<button class="btn btn-default" ng-show="canEdit" ng-click="toggleEdit()">
<span class="glyphicon glyphicon-edit"></span>
<span ng-show="isEditing"> Done</span>
Expand All @@ -22,19 +25,14 @@ <h1>
<a class="btn btn-primary" ng-disabled="queryExecuting || !queryResult.getData()" ng-href="{{dataUri}}" download="{{dataFilename}}" target="_self"><span class="glyphicon glyphicon-cloud-download"></span> Download
</a>
</span>
</h1>
</h2>
</div>
</div>

<hr>

<div class="row">
<div ng-class="{'col-lg-6': isEditing, 'col-lg-3': !isEditing}">
<em>
<edit-in-place editable="isEditing" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description"></edit-in-place>
</em>
<hr ng-show="isEditing || query.description">

<div class="col-lg-12">
<div ng-show="isEditing">
<p>
<button type="button" class="btn btn-primary btn-xs" ng-disabled="queryExecuting" ng-click="executeQuery()">
Expand All @@ -49,11 +47,37 @@ <h1>
</p>
</div>

<p ng-show="showQuery">
<textarea ui-codemirror="editorOptions" ui-refresh="showQuery" ng-model="query.query"></textarea>
<!-- CodeMirror renders here -->
<!-- alerts -->
<div ng-show="queryExecuting">
<p>
<div class="alert alert-info"
ng-show="queryResultStatus !== 'done' && queryResultStatus !== 'failed'"
ng-switch="queryResultStatus">
<span ng-switch-when="processing">Executing query&hellip;</span>
<span ng-switch-when="waiting">Query in queue&hellip;</span>
<rd-timer timestamp="queryResult.getUpdatedAt()"></rd-timer>
<button type="button" class="btn btn-warning btn-xs pull-right" ng-disabled="cancelling" ng-click="cancelExecution()">Cancel</button>
</div>
<div class="alert alert-danger" ng-show="queryResult.getError()">Error running query: <strong>{{queryResult.getError()}}</strong></div>
</p>
</div>

<!-- code editor -->
<p ng-show="isQueryVisible">
<textarea ui-codemirror="editorOptions" ui-refresh="isQueryVisible" ng-model="query.query"></textarea>
</p>
<hr ng-show="isQueryVisible">
</div>

</div>

<div class="row">
<div class="col-lg-3">
<p>
<em>
<edit-in-place editable="isEditing" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description"></edit-in-place>
</em>
</p>
<p>
<span class="glyphicon glyphicon-refresh"></span>
<span class="text-muted">Last update </span>
Expand All @@ -75,22 +99,7 @@ <h1>
</p>
</div>

<div ng-class="{'col-lg-6': isEditing, 'col-lg-9': !isEditing}">
<!-- alerts -->
<div ng-show="queryExecuting">
<p>
<div class="alert alert-info"
ng-show="queryResultStatus !== 'done' && queryResultStatus !== 'failed'"
ng-switch="queryResultStatus">
<span ng-switch-when="processing">Executing query&hellip;</span>
<span ng-switch-when="waiting">Query in queue&hellip;</span>
<rd-timer timestamp="queryResult.getUpdatedAt()"></rd-timer>
<button type="button" class="btn btn-warning btn-xs pull-right" ng-disabled="cancelling" ng-click="cancelExecution()">Cancel</button>
</div>
<div class="alert alert-danger" ng-show="queryResult.getError()">Error running query: <strong>{{queryResult.getError()}}</strong></div>
</p>
</div>

<div class="col-lg-9">
<!-- tabs and data -->
<div ng-hide="queryExecuting">
<div class="row">
Expand Down

0 comments on commit f01d224

Please sign in to comment.