valitydev/redash
14
0
Fork 0
mirror of https://github.com/valitydev/redash.git synced 2024-11-07 09:28:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

#121: QueryView page edit mode

Browse Source
This commit is contained in:
Amir Nissim 2014-03-05 14:05:53 +02:00
parent f8280552a0
commit 315803dde2
2 changed files with 69 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
rd_ui/app/scripts/controllers/QueryView.js
View File

@ -6,9 +6,13 @@
var pristineHash = null;
var leavingPageText = "You will lose your changes if you leave";
$scope.isEditing = false;
$scope.dirty = undefined;
$scope.newVisualization = undefined;
$scope.queryExecuting = false;
$scope.queryResultStatus = null;
$window.onbeforeunload = function() {
if (currentUser.canEdit($scope.query) && $scope.dirty) {
return leavingPageText;
@ -47,6 +51,10 @@
$scope.selectedTab = hash || DEFAULT_TAB;
});
$scope.toggleEdit = function (state) {
$scope.isEditing = (state !== undefined) ? state : !$scope.isEditing;
};
$scope.lockButton = function(lock) {
$scope.queryExecuting = lock;
};
@ -164,6 +172,8 @@
});
$scope.$watch("queryResult && queryResult.getStatus()", function(status) {
$scope.queryResultStatus = status;
if (!status) {
return;
}

71
rd_ui/app/views/queryview.html
View File

@ -3,10 +3,21 @@
<div class="row">
<div class="col-lg-12">
<h1>
{{ query.name }}
<span class="text-muted" ng-show="isEditing">Editing </span>{{ query.name }}
<span class="pull-right">
<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>
<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="currentUser.canEdit(query)" ng-click="toggleEdit()">
<span class="glyphicon glyphicon-edit"></span>
<span ng-show="isEditing"> Done</span>
<span ng-show="!isEditing"> Edit</span>
</button>
<button type="button" class="btn btn-default" ng-click="duplicateQuery()">
<span class="glyphicon glyphicon-share-alt"></span> Duplicate
</button>
<button class="btn btn-primary" ng-disabled="queryExecuting || !queryResult.getData()" ng-href="{{dataUri}}" download="{{dataFilename}}" target="_self"><span class="glyphicon glyphicon-cloud-download"></span> Download
</button>
</span>
</h1>
</div>
@ -15,14 +26,42 @@
<hr>
<div class="row">
<div class="col-lg-3">
<div ng-class="{'col-lg-6': isEditing, 'col-lg-3': !isEditing}">
<div ng-show="isEditing">
<p>
<button type="button" class="btn btn-primary btn-xs" ng-disabled="queryExecuting" ng-click="executeQuery()">
<span class="glyphicon glyphicon-play"></span> Execute
</button>
<button type="button" class="btn btn-default btn-xs" ng-click="formatQuery()">
<span class="glyphicon glyphicon-indent-left"></span> Format SQL
</button>
</p>
<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>
<p>
<textarea ui-codemirror="editorOptions" ui-refresh="isEditing" ng-model="query.query"></textarea>
<!-- CodeMirror renders here -->
</p>
</div>
<div ng-show="query.description">
<em>{{ query.description }}</em>
<hr>
</div>
<p>
<span class="glyphicon glyphicon-refresh"></span>
<span class="text-muted" ng-show="queryResult.query_result.retrieved_at">Last update </span>
<span class="text-muted">Last update </span>
<strong am-time-ago="queryResult.query_result.retrieved_at"></strong>
</p>
<p>
@ -31,24 +70,26 @@
</p>
<p>
<span class="glyphicon glyphicon-time"></span>
<span class="text-muted" ng-show="queryResult.getRuntime()>=0">Runtime </span>
<strong>{{queryResult.getRuntime() | durationHumanize}}</strong>
<span class="text-muted">Runtime </span>
<strong ng-show="!queryExecuting">{{queryResult.getRuntime() | durationHumanize}}</strong>
<span ng-show="queryExecuting">Running&hellip;</span>
</p>
<p>
<span class="glyphicon glyphicon-align-justify"></span>
<span class="text-muted">Rows </span><strong>{{queryResult.getData().length}}</strong>
</p>
</div>
<div class="col-lg-9">
<div ng-class="{'col-lg-6': isEditing, 'col-lg-9': !isEditing}">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs">
<rd-tab id="table" name="Table"></rd-tab>
<rd-tab id="pivot" name="Pivot Table"></rd-tab>
<!-- hide the table visualization -->
<rd-tab id="{{vis.id}}" name="{{vis.name}}" ng-hide="vis.type=='TABLE'" ng-repeat="vis in query.visualizations"></rd-tab>
<rd-tab id="{{vis.id}}" name="{{vis.name}}" ng-hide="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
<span class="remove" ng-click="deleteVisualization($event, vis)" ng-show="currentUser.canEdit(query)"> &times;</span>
</rd-tab>
<rd-tab id="add" name="&plus; New" removeable="true" ng-show="currentUser.canEdit(query)"></rd-tab>
</ul>
</div>
</div>
@ -57,8 +98,14 @@
<grid-renderer ng-show="selectedTab == 'table'" query-result="queryResult" items-per-page="50"></grid-renderer>
<pivot-table-renderer ng-show="selectedTab == 'pivot'" query-result="queryResult"></pivot-table-renderer>
<div class="col-lg-12" ng-show="selectedTab == vis.id" ng-repeat="vis in query.visualizations">
<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"></edit-visulatization-form>
</div>
<div ng-show="selectedTab == 'add'">
<visualization-renderer visualization="newVisualization" query-result="queryResult"></visualization-renderer>
<edit-visulatization-form visualization="newVisualization" query="query"></edit-visulatization-form>
</div>
</div>
</div>