From 01e393cf8c5b821f7f025c44eb676fa3404c8262 Mon Sep 17 00:00:00 2001
From: Amir Nissim <amirnissim@gmail.com>
Date: Thu, 16 Jan 2014 13:44:13 +0200
Subject: [PATCH] use ngForm in queryFiddle page for detecting pristine and
 dirty states

---
 rd_ui/app/scripts/controllers.js | 15 ++----
 rd_ui/app/views/queryfiddle.html | 90 ++++++++++++++++----------------
 2 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/rd_ui/app/scripts/controllers.js b/rd_ui/app/scripts/controllers.js
index 87e05b3f..923b6fb8 100644
--- a/rd_ui/app/scripts/controllers.js
+++ b/rd_ui/app/scripts/controllers.js
@@ -35,10 +35,9 @@
 
     var QueryFiddleCtrl = function ($scope, $window, $routeParams, $http, $location, growl, notifications, Query) {
         var leavingPageText = "You will lose your changes if you leave";
-        var pristineQuery = null;
 
         $window.onbeforeunload = function(){
-            if (currentUser.canEdit($scope.query) && $scope.queryChanged) {
+            if (currentUser.canEdit($scope.query) && $scope.queryForm.$dirty) {
                 return leavingPageText;
             }
         }
@@ -60,7 +59,7 @@
                 return;
             }
 
-            if($scope.queryChanged &&
+            if($scope.queryForm.$dirty &&
                 !confirm(leavingPageText + "\n\nAre you sure you want to leave this page?")) {
                 event.preventDefault();
             } else {
@@ -92,8 +91,7 @@
             }
             delete $scope.query.latest_query_data;
             $scope.query.$save(function (q) {
-                pristineQuery = q.query;
-                $scope.queryChanged = false;
+                $scope.queryForm.$setPristine();
 
                 if (duplicate) {
                     growl.addInfoMessage("Query duplicated.", {ttl: 2000});
@@ -186,7 +184,7 @@
 
         if ($routeParams.queryId != undefined) {
             $scope.query = Query.get({id: $routeParams.queryId}, function(q) {
-                pristineQuery = q.query;
+                $scope.queryForm.$setPristine();
                 $scope.queryResult = $scope.query.getQueryResult();
             });
         } else {
@@ -197,11 +195,6 @@
         $scope.$watch('query.name', function() {
             $scope.$parent.pageTitle = $scope.query.name;
         });
-        $scope.$watch('query.query', function(q) {
-            if (q) {
-                $scope.queryChanged = (q != pristineQuery);
-            }
-        });
 
         $scope.executeQuery = function() {
             $scope.queryResult = $scope.query.getQueryResult(0);
diff --git a/rd_ui/app/views/queryfiddle.html b/rd_ui/app/views/queryfiddle.html
index 7ab0b32d..37a5aeaa 100644
--- a/rd_ui/app/views/queryfiddle.html
+++ b/rd_ui/app/views/queryfiddle.html
@@ -1,53 +1,55 @@
 <div class="container">
     <div class="row">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">
+        <form name="queryForm">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">
+                        <p>
+                         <edit-in-place editable="currentUser.canEdit(query)" ignore-blanks='true' value="query.name"></edit-in-place>
+                     </p>
+                    </h3>
                     <p>
-                     <edit-in-place editable="currentUser.canEdit(query)" ignore-blanks='true' value="query.name"></edit-in-place>
-                 </p>
-                </h3>
-                <p>
-                    <edit-in-place editable="currentUser.canEdit(query)" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description" class="text-muted"></edit-in-place>
-                </p>
-            </div>
-            <div class="panel-body">
-                <textarea ui-codemirror="editorOptions" ng-model="query.query"></textarea>
-
-                <div>
-                    <a class="btn btn-default" ng-disabled="queryExecuting || !queryResult.getData()" ng-href="{{dataUri}}" download="{{dataFilename}}" target="_self">
-                        <span class="glyphicon glyphicon-floppy-disk"></span> Download Data Set
-                    </a>
-                    <button type="button" class="btn btn-default center-x" ng-click="formatQuery()"><span class="glyphicon glyphicon-ok"></span> Format SQL</button>
-
-                    <div class="btn-group pull-right">
-                        <button type="button" class="btn btn-default" ng-click="duplicateQuery()">Duplicate</button>
-                        <button type="button" class="btn btn-default" ng-disabled="!currentUser.canEdit(query)" ng-click="saveQuery()">Save
-                            <span ng-show="queryChanged">&#42;</span>
-                        </button>
-                        <button type="button" class="btn btn-primary" ng-disabled="queryExecuting" ng-click="executeQuery()">Execute</button>
-                    </div>
+                        <edit-in-place editable="currentUser.canEdit(query)" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description" class="text-muted"></edit-in-place>
+                    </p>
                 </div>
+                <div class="panel-body">
+                    <textarea ui-codemirror="editorOptions" ng-model="query.query"></textarea>
 
-            </div>
-            <div class="panel-footer">
-                <span ng-show="queryResult.getRuntime()>=0">Query runtime: {{queryResult.getRuntime() | durationHumanize}} | </span>
-                <span ng-show="queryResult.query_result.retrieved_at">Last update time: <span am-time-ago="queryResult.query_result.retrieved_at"></span> | </span>
-                <span ng-show="queryResult.getStatus() == 'done'">Rows: {{queryResult.getData().length}} | </span>
-                Created by: {{query.user}}
-                <div class="pull-right">Refresh query: <select ng-model="query.ttl" ng-options="c.value as c.name for c in refreshOptions"></select><br></div>
-            </div>
-        </div>
+                    <div>
+                        <a class="btn btn-default" ng-disabled="queryExecuting || !queryResult.getData()" ng-href="{{dataUri}}" download="{{dataFilename}}" target="_self">
+                            <span class="glyphicon glyphicon-floppy-disk"></span> Download Data Set
+                        </a>
+                        <button type="button" class="btn btn-default center-x" ng-click="formatQuery()"><span class="glyphicon glyphicon-ok"></span> Format SQL</button>
 
-        <div class="alert alert-info" ng-show="queryResult.getStatus() == 'processing'">
-            Executing query... <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-info" ng-show="queryResult.getStatus() == 'waiting'">
-            Query in queue... <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>
+                        <div class="btn-group pull-right">
+                            <button type="button" class="btn btn-default" ng-click="duplicateQuery()">Duplicate</button>
+                            <button type="button" class="btn btn-default" ng-disabled="!currentUser.canEdit(query)" ng-click="saveQuery()">Save
+                                <span ng-show="queryForm.$dirty">&#42;</span>
+                            </button>
+                            <button type="button" class="btn btn-primary" ng-disabled="queryExecuting" ng-click="executeQuery()">Execute</button>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="panel-footer">
+                    <span ng-show="queryResult.getRuntime()>=0">Query runtime: {{queryResult.getRuntime() | durationHumanize}} | </span>
+                    <span ng-show="queryResult.query_result.retrieved_at">Last update time: <span am-time-ago="queryResult.query_result.retrieved_at"></span> | </span>
+                    <span ng-show="queryResult.getStatus() == 'done'">Rows: {{queryResult.getData().length}} | </span>
+                    Created by: {{query.user}}
+                    <div class="pull-right">Refresh query: <select ng-model="query.ttl" ng-options="c.value as c.name for c in refreshOptions"></select><br></div>
+                </div>
+            </div>
+
+            <div class="alert alert-info" ng-show="queryResult.getStatus() == 'processing'">
+                Executing query... <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-info" ng-show="queryResult.getStatus() == 'waiting'">
+                Query in queue... <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>
+        </form>
     </div>
 
     <div class="row" ng-show="queryResult.getStatus() == 'done'">