added submitting form loading indicator
This commit is contained in:
David Baldwynn
parent
aa72e1ac3c
commit
a66dd0fc20
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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()">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue