From a66dd0fc205d58a5e57e7b1c6561768e6fa327ce Mon Sep 17 00:00:00 2001
From: David Baldwynn <david.baldwin@alumni.ubc.ca>
Date: Thu, 12 Nov 2015 12:51:44 -0800
Subject: [PATCH] added submitting form loading indicator

---
 .../forms/config/forms.client.routes.js       | 24 ++++++++++++++++++-
 public/modules/forms/css/form.css             | 16 +++++--------
 .../edit-submissions-form.client.directive.js |  7 +++---
 .../submit-form.client.directive.js           | 15 ++++++------
 .../views/directiveViews/field/checkbox.html  |  5 ++--
 .../views/directiveViews/field/date.html      |  8 ++++++-
 .../views/directiveViews/field/dropdown.html  |  3 ++-
 .../views/directiveViews/field/email.html     |  7 ++++--
 .../views/directiveViews/field/file.html      |  2 +-
 .../views/directiveViews/field/link.html      | 11 ++++++++-
 .../views/directiveViews/field/number.html    | 12 +++++++++-
 .../views/directiveViews/field/statement.html |  2 +-
 .../views/directiveViews/field/textarea.html  |  9 ++++++-
 .../views/directiveViews/field/textfield.html |  1 +
 .../form/submit-form.client.view.html         | 12 ++++------
 .../forms/views/submit-form.client.view.html  |  2 --
 16 files changed, 93 insertions(+), 43 deletions(-)

diff --git a/public/modules/forms/config/forms.client.routes.js b/public/modules/forms/config/forms.client.routes.js
index 423b5a60..aa4cf3aa 100644
--- a/public/modules/forms/config/forms.client.routes.js
+++ b/public/modules/forms/config/forms.client.routes.js
@@ -48,7 +48,29 @@ angular.module('forms').config(['$stateProvider',
 			templateUrl: 'modules/forms/views/adminTabs/design.html'
 	    }).state('viewForm.analyze', {
 			url: '/analyze',
-			templateUrl: 'modules/forms/views/adminTabs/analyze.html'
+			templateUrl: 'modules/forms/views/adminTabs/analyze.html',
+			resolve: {
+				mySubmissions: function() {
+					$http.get('/forms/'+$stateParams.formId+'/submissions')
+                        .success(function(data, status, headers){
+
+                            var _tmpSubFormFields,
+                                defaultFormFields = _.cloneDeep($scope.myform.form_fields);
+
+                            //Iterate through form's submissions
+                            for(var i=0; i<data.length; i++){
+                                _tmpSubFormFields = _.merge(defaultFormFields, data[i].form_fields);
+                                data[i].form_fields = _tmpSubFormFields;
+                                data[i].selected = false;
+                            }
+
+                            return data;
+                        })
+                        .error(function(err){
+                            console.error('Could not fetch form submissions.\nError: '+err);
+                        });    
+                    }
+			}
 	    }).state('viewForm.create', {
 			url: '/create',
 			templateUrl: 'modules/forms/views/adminTabs/create.html'
diff --git a/public/modules/forms/css/form.css b/public/modules/forms/css/form.css
index 8abd1c97..3ae5207a 100644
--- a/public/modules/forms/css/form.css
+++ b/public/modules/forms/css/form.css
@@ -13,16 +13,12 @@
    z-index: 1;
 }
 
-.busy-updating-wrapper .message {
-    text-align: center; 
-    font-size: 20px;
-    position: fixed; 
-    bottom: 0; 
-    right: 70px; 
-    background-color: gray; 
-    color: white; 
-    padding: 5px 15px 5px 10px; 
-    z-index: 9999;
+.busy-submitting-wrapper {
+    position: fixed;
+    top: 50%;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
 }
 
 section.public-form {
diff --git a/public/modules/forms/directives/edit-submissions-form.client.directive.js b/public/modules/forms/directives/edit-submissions-form.client.directive.js
index 99942e9b..c6125f28 100644
--- a/public/modules/forms/directives/edit-submissions-form.client.directive.js
+++ b/public/modules/forms/directives/edit-submissions-form.client.directive.js
@@ -1,7 +1,7 @@
 'use strict';
 
-angular.module('forms').directive('editSubmissionsFormDirective', ['$rootScope', '$http', 'Upload', '$timeout', 'TimeCounter', 'Auth', 'FormFields',
-    function ($rootScope, $http, Upload, $timeout, TimeCounter, Auth, FormFields) {
+angular.module('forms').directive('editSubmissionsFormDirective', ['$rootScope', '$http', 'Upload', '$timeout', 'TimeCounter', 'Auth', 'FormFields', 'mySubmissions',
+    function ($rootScope, $http, Upload, $timeout, TimeCounter, Auth, FormFields, mySubmissions) {
         return {
             templateUrl: 'modules/forms/views/directiveViews/form/edit-submissions-form.client.view.html',
             restrict: 'E',
@@ -12,7 +12,7 @@ angular.module('forms').directive('editSubmissionsFormDirective', ['$rootScope',
             controller: function($scope){
                 $scope.table = {
                     masterChecker: false,
-                    rows: []
+                    rows: mySubmissions
                 };
 
                 /*
@@ -64,7 +64,6 @@ angular.module('forms').directive('editSubmissionsFormDirective', ['$rootScope',
                         .error(function(err){
                             console.error('Could not fetch form submissions.\nError: '+err);
                         });            
-    
                 };  
 
                 //Delete selected submissions of Form
diff --git a/public/modules/forms/directives/submit-form.client.directive.js b/public/modules/forms/directives/submit-form.client.directive.js
index dbf6eb5b..4071d25a 100644
--- a/public/modules/forms/directives/submit-form.client.directive.js
+++ b/public/modules/forms/directives/submit-form.client.directive.js
@@ -27,39 +27,38 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
                     /*
                     ** Field Controls
                     */
-                    $scope.setActiveField = function(field_id, field_index) {
+                    $rootScope.setActiveField = function(field_id, field_index) {
                         if($scope.selected === null){
                             $scope.selected = {
                                 _id: '',
                                 index: 0,
                             };
                         }
-                        // console.log('field_id: '+field_id);
-                        // console.log('field_index: '+field_index);
-                        // console.log($scope.selected);
+                        console.log('field_id: '+field_id);
+                        console.log('field_index: '+field_index);
+                        console.log($scope.selected);
 
                         $scope.selected._id = field_id;
                         $scope.selected.index = field_index;
                         setTimeout(function() {
                             $('html, body').animate({
                                 scrollTop: $('.activeField').offset().top
-                            },350);
+                            },200);
                         }, 10);
                     };
 
-                    
                     $scope.nextField = function(){
                         if($scope.selected.index < $scope.myform.form_fields.length-1){
                             $scope.selected.index++;
                             $scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
-                            $scope.setActiveField($scope.selected._id, $scope.selected.index);
+                            $rootScope.setActiveField($scope.selected._id, $scope.selected.index);
                         }
                     };
                     $scope.prevField = function(){
                         if($scope.selected.index > 0){
                             $scope.selected.index = $scope.selected.index - 1;
                             $scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
-                            $scope.setActiveField($scope.selected._id, $scope.selected.index);
+                            $rootScope.setActiveField($scope.selected._id, $scope.selected.index);
                         }
                     };
                     
diff --git a/public/modules/forms/views/directiveViews/field/checkbox.html b/public/modules/forms/views/directiveViews/field/checkbox.html
index 71f0ac8a..31ee9eb2 100755
--- a/public/modules/forms/views/directiveViews/field/checkbox.html
+++ b/public/modules/forms/views/directiveViews/field/checkbox.html
@@ -1,10 +1,11 @@
-<div class="field row" ng-click="setActiveField(field._id, index)" ng-if="field.fieldOptions.length > 0">
+<div class="field row" ng-if="field.fieldOptions.length > 0" ng-click="setActiveField(field._id, index)">
 	<div class="col-xs-12 field-title field-title">{{field.title}}     <span class="required-error" ng-show="field.required && !field.fieldValue">(* required)</span> </div>
 
     <div class="col-xs-12 field-input">
 		<div ng-repeat="option in field.fieldOptions" class="row-fluid">
             <label class="btn btn-info col-xs-3">
-                <input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor}" 
+                <input ng-focus="setActiveField(field._id, index)" 
+                ng-style="{'color': design.colors.answerColor}" 
                 type="checkbox" 
                 value="{{option.option_id}}" 
                 ng-model="field.fieldValue" 
diff --git a/public/modules/forms/views/directiveViews/field/date.html b/public/modules/forms/views/directiveViews/field/date.html
index c1fad01d..d7f81721 100755
--- a/public/modules/forms/views/directiveViews/field/date.html
+++ b/public/modules/forms/views/directiveViews/field/date.html
@@ -8,7 +8,13 @@
     </div>
     <div class="col-xs-12 field-input">
         <div class="control-group input-append">
-            <input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" ui-date="dateOptions" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled">
+            <input ng-focus="setActiveField(field._id, index)" 
+                ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" 
+                ui-date="dateOptions" 
+                ng-model="field.fieldValue" 
+                ng-model-options="{ debounce: 250 }" 
+                ng-required="field.required" 
+                ng-disabled="field.disabled">
         </div>
     </div>
 </div>
diff --git a/public/modules/forms/views/directiveViews/field/dropdown.html b/public/modules/forms/views/directiveViews/field/dropdown.html
index a941c2f9..b6e1f22a 100755
--- a/public/modules/forms/views/directiveViews/field/dropdown.html
+++ b/public/modules/forms/views/directiveViews/field/dropdown.html
@@ -10,7 +10,8 @@
 		<select ng-model="field.fieldValue" 
 				ng-model-options="{ debounce: 250 }"  
 				ng-required="field.required" 
-				ng-disabled="field.disabled">
+				ng-disabled="field.disabled"
+				ng-focus="setActiveField(field._id, index)">
 			<option ng-repeat="option in field.fieldOptions" 
 					ng-selected="option.option_value == field.fieldValue"
 					ng-value="option.option_value">
diff --git a/public/modules/forms/views/directiveViews/field/email.html b/public/modules/forms/views/directiveViews/field/email.html
index 826ea5b6..c5a3d4e2 100755
--- a/public/modules/forms/views/directiveViews/field/email.html
+++ b/public/modules/forms/views/directiveViews/field/email.html
@@ -1,13 +1,16 @@
 <div class="field row" ng-click="setActiveField(field._id, index)">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
     <div class="col-xs-12 field-input">
-        <input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="email" 
+        <input ng-focus="setActiveField(field._id, index)" 
+                ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" 
+                type="email" 
         		class="text-field-input" 
         		placeholder="email@example.com" 
         		value="{{field.fieldValue}}" 
         		ng-model="field.fieldValue" 
         		ng-model-options="{ debounce: 250 }"  
         		ng-required="field.required" 
-        		ng-disabled="field.disabled"/>
+        		ng-disabled="field.disabled"
+                ng-focus="setActiveField(field._id, index)"/>
     </div>
 </div>
diff --git a/public/modules/forms/views/directiveViews/field/file.html b/public/modules/forms/views/directiveViews/field/file.html
index 9b358a70..90f64779 100644
--- a/public/modules/forms/views/directiveViews/field/file.html
+++ b/public/modules/forms/views/directiveViews/field/file.html
@@ -1,4 +1,4 @@
-<div class="field row" ng-if="form.autofillPDFs">
+<div class="field row" ng-if="form.autofillPDFs" ng-click="setActiveField(field._id, index)">
     <div class="col-sm-4 field-title">
         <h5>{{field.title}}     <span class="required-error" ng-show="field.required && field.fieldValue == 0">(* required)</span></h5>
     </div>
diff --git a/public/modules/forms/views/directiveViews/field/link.html b/public/modules/forms/views/directiveViews/field/link.html
index 80459fb7..18ea2eed 100644
--- a/public/modules/forms/views/directiveViews/field/link.html
+++ b/public/modules/forms/views/directiveViews/field/link.html
@@ -1,6 +1,15 @@
 <div class="field row" ng-click="setActiveField(field._id, index)">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
     <div class="col-xs-12 field-input">
-        <input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="url" class="text-field-input" placeholder="https://example.com/something" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  ng-required="field.required" ng-disabled="field.disabled"/>
+        <input ng-focus="setActiveField(field._id, index)" 
+        ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" 
+        type="url" 
+        class="text-field-input" 
+        placeholder="https://example.com/something" 
+        value="{{field.fieldValue}}" 
+        ng-model="field.fieldValue" 
+        ng-model-options="{ debounce: 250 }"  
+        ng-required="field.required" 
+        ng-disabled="field.disabled"/>
     </div>
 </div>
diff --git a/public/modules/forms/views/directiveViews/field/number.html b/public/modules/forms/views/directiveViews/field/number.html
index 5da8ca30..a04285bf 100644
--- a/public/modules/forms/views/directiveViews/field/number.html
+++ b/public/modules/forms/views/directiveViews/field/number.html
@@ -1,6 +1,16 @@
 <div class="field row" ng-click="setActiveField(field._id, index)">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
     <div class="col-xs-12 field-input">
-        <input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="number" class="text-field-input" placeholder="" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  ng-required="field.required" ng-disabled="field.disabled"/>
+        <input ng-focus="setActiveField(field._id, index)" 
+        	ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" 
+        	type="number" 
+        	class="text-field-input" 
+        	placeholder="" 
+        	value="{{field.fieldValue}}" 
+        	ng-model="field.fieldValue" 
+        	ng-model-options="{ debounce: 250 }"  
+        	ng-required="field.required" 
+        	ng-disabled="field.disabled"
+        	ng-focus="setActiveField(field._id, index)"/>
     </div>
 </div>
diff --git a/public/modules/forms/views/directiveViews/field/statement.html b/public/modules/forms/views/directiveViews/field/statement.html
index 07526189..fdc8d5cb 100644
--- a/public/modules/forms/views/directiveViews/field/statement.html
+++ b/public/modules/forms/views/directiveViews/field/statement.html
@@ -7,7 +7,7 @@
     <div class="row field-title field-input">
     	<p class="col-xs-12">{{field.description}} </p>
     	<br>
-        <button class="btn btn-info col-xs-6 col-xs-offset-3" style="font-size: 1.3em;" ng-focus="setActiveField(field._id, index)">
+        <button class="btn btn-info col-xs-6 col-xs-offset-3" style="font-size: 1.3em;" ng-focus="setActiveField(field._id, index)" ng-click="nextField()">
             Continue 
         </button>
     </div>
diff --git a/public/modules/forms/views/directiveViews/field/textarea.html b/public/modules/forms/views/directiveViews/field/textarea.html
index b7586acd..7a1f0167 100755
--- a/public/modules/forms/views/directiveViews/field/textarea.html
+++ b/public/modules/forms/views/directiveViews/field/textarea.html
@@ -1,7 +1,14 @@
 <div class="field row" ng-click="setActiveField(field._id, index)">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
     <div class="col-xs-12 field-input">
-        <textarea class="textarea" type="text" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled"></textarea>
+        <textarea class="textarea" type="text" 
+        	ng-model="field.fieldValue" 
+        	ng-model-options="{ debounce: 250 }"  
+        	value="{{field.fieldValue}}" 
+        	ng-required="field.required" 
+        	ng-disabled="field.disabled"
+        	ng-focus="setActiveField(field._id, index)">
+        </textarea>
        
     </div>
 </div>
diff --git a/public/modules/forms/views/directiveViews/field/textfield.html b/public/modules/forms/views/directiveViews/field/textfield.html
index 171f2f06..4a6a30ba 100755
--- a/public/modules/forms/views/directiveViews/field/textfield.html
+++ b/public/modules/forms/views/directiveViews/field/textfield.html
@@ -9,6 +9,7 @@
     </div>
     <div class="col-xs-12 field-input">
 		<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" 
+            ng-focus="setActiveField(field._id, index)"
 			type="text" 
 			class="text-field-input" 
 			ng-model="field.fieldValue" 
diff --git a/public/modules/forms/views/directiveViews/form/submit-form.client.view.html b/public/modules/forms/views/directiveViews/form/submit-form.client.view.html
index a7da540d..3272ea2b 100755
--- a/public/modules/forms/views/directiveViews/form/submit-form.client.view.html
+++ b/public/modules/forms/views/directiveViews/form/submit-form.client.view.html
@@ -1,6 +1,4 @@
-<div cg-busy="{promise:submitPromise,message:'Submitting form...',backdrop:true}"></div>
-
-<section class="overlay submitform" ng-if="selected.index" ng-click="hideOverlay()"></section>
+<section class="overlay submitform" ng-if="selected._id.length" ng-click="hideOverlay()"></section>
 
 <!-- Start Page View -->
 <div ng-show="!myform.submitted && myform.startPage.showStart" class="form-submitted">
@@ -29,7 +27,7 @@
 </div>
 
 <!-- Form Fields View -->
-<div ng-show="!myform.submitted && !myform.startPage.showStart" data-ng-init="initFocus()">
+<div cg-busy="{promise:submitPromise,message:'Submitting form...',wrapperClass:'busy-submitting-wrapper',backdrop:true}" ng-show="!myform.submitted && !myform.startPage.showStart">
     <div class="field row" style="padding-bottom:5em;">
         <div class="col-sm-10 col-sm-offset-1">
             <h1>{{ myform.title }} <span style="font-size:0.8em; color: #bbb;" ng-if="!myform.isLive">(private preview)</span></h1>
@@ -38,8 +36,8 @@
     </div>
     <div class="row">
         <form name="myForm" class="submission-form col-sm-12 col-md-offset-1 col-md-10">
-                <div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved">
-                    <field-directive field="field" design="myform.design" index="$index" ng-class="{activeField: selected._id == field._id }" class="row field-directive">
+                <div ng-repeat="field in myform.form_fields"  ng-if="!field.deletePreserved" ng-class="{activeField: selected._id == field._id }" class="row field-directive">
+                    <field-directive field="field" design="myform.design" index="$index">
                     </field-directive>
                 </div>
         </form>
@@ -57,7 +55,7 @@
         <div class="container" >
             <div class="row">
                 <div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 text-center col-md-3 col-md-offset-0" ng-show="!myform.submitted">
-                        <p class="lead">{{myform | formValidity}}   out of {{myform.visible_form_fields.length}} answered</p>
+                        <p class="lead">{{myform | formValidity}} out of {{myform.visible_form_fields.length}} answered</p>
                 </div>
                 <div class="hidden-xs hidden-sm col-md-6 col-md-offset-3 row">
                     <div class="col-md-4 col-md-offset-2" ng-if="!authentication.isAuthenticated()">
diff --git a/public/modules/forms/views/submit-form.client.view.html b/public/modules/forms/views/submit-form.client.view.html
index 07fc9574..07ca08fd 100644
--- a/public/modules/forms/views/submit-form.client.view.html
+++ b/public/modules/forms/views/submit-form.client.view.html
@@ -1,6 +1,4 @@
 <section class="public-form" ng-style="{ 'background-color': myform.design.colors.backgroundColor }">
-   
 	<submit-form-directive myform="myform"></submit-form-directive>
-
 </section>