getredash#121: editable query name and description

hailocab · Mar 11, 2014 · 67f4c78 · 67f4c78
1 parent 02cf984
commit 67f4c78
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git a/rd_ui/app/scripts/controllers/query_view.js b/rd_ui/app/scripts/controllers/query_view.js
@@ -6,24 +6,25 @@
     var pristineHash = null;
     var leavingPageText = "You will lose your changes if you leave";
 
-    $scope.showQuery = false;
+    $scope.canEdit = false;
     $scope.isEditing = false;
+    $scope.showQuery = false;
     $scope.dirty = undefined;
     $scope.newVisualization = undefined;
 
     $scope.queryExecuting = false;
     $scope.queryResultStatus = null;
 
     $window.onbeforeunload = function() {
-      if (currentUser.canEdit($scope.query) && $scope.dirty) {
+      if ($scope.canEdit && $scope.dirty) {
         return leavingPageText;
       }
     }
 
     Mousetrap.bindGlobal("meta+s", function(e) {
       e.preventDefault();
 
-      if (currentUser.canEdit($scope.query)) {
+      if ($scope.canEdit) {
         $scope.saveQuery();
       }
     });
@@ -33,7 +34,7 @@
         return;
       }
 
-      if (!currentUser.canEdit($scope.query)) {
+      if (!$scope.canEdit) {
         return;
       }
 
@@ -206,6 +207,7 @@
         pristineHash = q.getHash();
         $scope.dirty = false;
         $scope.queryResult = $scope.query.getQueryResult();
+        $scope.canEdit = currentUser.canEdit(q);
       });
     } else {
       $scope.query = new Query({

diff --git a/rd_ui/app/scripts/directives.js b/rd_ui/app/scripts/directives.js
@@ -223,7 +223,7 @@
                 var placeholder = tAttrs.placeholder || 'Click to edit';
                 return '<span ng-click="editable && edit()" ng-bind="value" ng-class="{editable: editable}"></span>' +
                        '<span ng-click="editable && edit()" ng-show="editable && !value" ng-class="{editable: editable}">' + placeholder + '</span>' +
-                       '<{elType} ng-model="value" class="form-control" rows="2"></{elType}>'.replace('{elType}', elType);
+                       '<{elType} ng-model="value" class="rd-form-control"></{elType}>'.replace('{elType}', elType);
             },
             link: function ($scope, element, attrs) {
                 // Let's get a reference to the input element, as we'll want to reference it.

diff --git a/rd_ui/app/styles/redash.css b/rd_ui/app/styles/redash.css
@@ -215,6 +215,24 @@ to add those CSS styles here. */
     border-radius: 50%;
 }
 
+/* light version of bootstrap's form-control */
+.rd-form-control {
+    display: block;
+    padding: 6px 12px;
+    line-height: 1.428571429;
+    color: #555555;
+    vertical-align: middle;
+    background-color: #ffffff;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+textarea.rd-form-control {
+     width: 100%;
+}
 visualization-renderer > div {
     overflow: scroll;
 }
diff --git a/rd_ui/app/views/queryview.html b/rd_ui/app/views/queryview.html
@@ -3,13 +3,15 @@
     <div class="row">
         <div class="col-lg-12">
             <h1>
-                <span class="text-muted" ng-show="isEditing">Editing </span>{{ query.name }}
+                <span class="text-muted" ng-show="isEditing">Editing </span>
+                <edit-in-place editable="isEditing" ignore-blanks='true' value="query.name"></edit-in-place>
+
                 <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="!currentUser.canEdit(query)" ng-click="toggleShowQuery()">View Query</button>
-                    <button class="btn btn-default" ng-show="currentUser.canEdit(query)" ng-click="toggleEdit()">
+                    <button class="btn btn-default" ng-show="!canEdit" ng-click="toggleShowQuery()">View Query</button>
+                    <button class="btn btn-default" ng-show="canEdit" ng-click="toggleEdit()">
                         <span class="glyphicon glyphicon-edit"></span>
                         <span ng-show="isEditing"> Done</span>
                         <span ng-show="!isEditing"> Edit</span>
@@ -28,10 +30,10 @@ <h1>
 
     <div class="row">
         <div ng-class="{'col-lg-6': isEditing, 'col-lg-3': !isEditing}">
-            <div ng-show="!isEditing && query.description">
-                <em>{{ query.description }}</em>
-                <hr>
-            </div>
+            <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 ng-show="isEditing">
                 <p>
@@ -89,9 +91,9 @@ <h1>
                         <rd-tab id="table" name="Table"></rd-tab>
                         <rd-tab id="pivot" name="Pivot Table"></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>
+                            <span class="remove" ng-click="deleteVisualization($event, vis)" ng-show="canEdit"> &times;</span>
                         </rd-tab>
-                        <rd-tab id="add" name="&plus; New" removeable="true" ng-show="currentUser.canEdit(query) && isEditing"></rd-tab>
+                        <rd-tab id="add" name="&plus; New" removeable="true" ng-show="canEdit && isEditing"></rd-tab>
                     </ul>
                 </div>
             </div>