Merge pull request #212 from tellform/fix_rendered_form_bugs

Fix rendered form bugs

app/views/form.server.view.html

@@ -106,9 +106,10 @@
 <!--Socket.io Client Dependency-->
 <script src="/static/lib/socket.io-client/dist/socket.io.min.js" async></script>
 <script src="/static/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>
+<script src="/static/lib/jquery-ui/jquery-ui.js" type="text/javascript"></script>
 
 <script src="/static/dist/vendor.min.js"></script>
-
+ <script src="/static/lib/angular-ui-date/src/date.js" type="text/javascript"></script>
 <!--Application JavaScript Files-->
 {% for jsFile in formJSFiles %}
 <script type="text/javascript" src="{{jsFile}}"></script>

bower.json

@@ -50,7 +50,9 @@
     "angular-ui-select": "compiled",
     "jspdf": "~1.0.178",
     "angular-sanitize": "1.4.14",
-    "angular-ui-sortable": "^0.17.1"
+    "angular-ui-sortable": "^0.17.1",
+    "angular-ui-date": "~0.0.11",
+    "angular-input-stars-directive": "master"
   },
   "overrides": {
     "BOWER-PACKAGE": {

public/dist/vendor.min.js

@@ -855,10 +855,10 @@ var m=!1,n=g();if(e){var t=n.onSelect||a.noop;n.onSelect=function(a,b){h.$apply(
 a)});e.$render=function(){c.datepicker("setDate",e.$modelValue)}}c.data("datepicker")?(c.datepicker("option",n),c.datepicker("refresh")):(c.datepicker(n),c.on("$destroy",function(){c.datepicker("hide");c.datepicker("destroy")}));e&&e.$render()},!0)}}}]).directive("uiDateFormat",["uiDateConverter",function(a){return{require:"ngModel",link:function(f,h,c,b){var e=c.uiDateFormat;b.$formatters.unshift(function(b){return a.stringToDate(e,b)});b.$parsers.push(function(b){return a.dateToString(e,b)})}}}])})(angular);
 angular.module("angular-input-stars",[]).service("FontAwesomeIcons",["$http","$q",function(a,f){this.get=function(){var k=f.defer();return a.get("https://raw.githubusercontent.com/FortAwesome/Font-Awesome/gh-pages/icons.yml").then(function(a){var c={iconMap:{},iconList:[],iconCategoryList:[]};a=jsyaml.load(a.data).icons;for(var b=0;b<a.length;b++){c.iconMap[a[b].name]=a[b].id;c.iconList.push(a[b].name);for(var e=0;e<a[b].categories.length;e++)c.iconCategoryList[a[b].categories[e]]||(c.iconCategoryList[a[b].categories[e]]=
 []),c.iconCategoryList[a[b].categories[e]].push(a[b].name)}k.resolve(c)},function(a){var c="Could not fetch FontAwesome Github Repo";a||(c=a.data||a);k.reject(c)}),k.promise}}]).filter("toFaIcon",["FontAwesomeIcons","$timeout",function(a,f){return function(a,f,c){var b={full:"",empty:""};a=0<=__indexOf.call(c.iconList,a)?(b.full="fa-"+c.iconMap[a],b.empty="fa-"+c.iconMap[a]+"-o","thumbs-up"==a||"thumbs-down"==a?b.empty="fa-"+c.iconMap[a].split("-")[0]+"-o-"+c.iconMap[a].split("-")[1]:"Smile Outlined"==
-a&&(b.empty="fa-frown-o"),b):(console.error("Error no shape of type: "+a+" for rating input"),b);return f?a.empty:a.full}}]).directive("inputStars",["$rootScope","$filter","FontAwesomeIcons","$q",function(a,f,k,h){return{restrict:"EA",replace:!0,template:'<ul ng-class="listClass"><li ng-touch="paintStars($index)" ng-mouseenter="paintStars($index, true)" ng-mouseleave="unpaintStars($index, false)" ng-repeat="item in items track by $index"><i  ng-class="getClass($index)" ng-click="setValue($index, $event)"></i></li></ul>',
+a&&(b.empty="fa-frown-o"),b):(console.error("Error no shape of type: "+a+" for rating input"),b);return f?a.empty:a.full}}]).directive("inputStars",["$rootScope","$filter","FontAwesomeIcons","$q",function(a,f,k,h){return{restrict:"EA",replace:!0,template:'<ul ng-class="listClass"><li ng-init="paintStars(last_value)" ng-touch="paintStars($index)" ng-mouseenter="paintStars($index, true)" ng-mouseleave="unpaintStars($index, false)" ng-repeat="item in items track by $index"><i  ng-class="getClass($index)" ng-click="setValue($index, $event)"></i></li></ul>',
 require:"ngModel",scope:!0,link:function(a,b,e,g){var c,m,n,t;(function(){var a=h.defer();return k.get().then(function(b){a.resolve(b)},function(b){a.reject(Error("toShapeIcon Error: "+b))}),a.promise})().then(function(h){a.items=Array(+e.max);c=f("toFaIcon")(e.iconEmpty,!0,h)||e.iconEmpty||"fa-stars-o";m=e.iconHover||"angular-input-stars-hover";n=f("toFaIcon")(e.iconFull,!1,h)||e.iconEmpty||"fa-stars";t=e.iconBase||"fa fa-fw";a.listClass=e.listClass||"angular-input-stars";a.readonly=void 0!==e.readonly;
-!0;e.$observe("max",function(b){a.items=Array(+b)});e.$observe("iconEmpty",function(a){c=f("toFaIcon")(a,!0,h)||a||"fa-stars-o"});e.$observe("iconFull",function(a){n=f("toFaIcon")(a,!1,h)||a||"fa-stars"});g.$render=function(){a.last_value=g.$viewValue||0};a.getClass=function(b){return b>=a.last_value?t+" "+c:t+" "+n+" active "};a.unpaintStars=function(b,c){a.paintStars(a.last_value-1,c)};a.paintStars=function(e,f){if(!a.readonly){for(var g=b.find("li").find("i"),h=0;h<g.length;h++){var k=angular.element(g[h]);
+!0;e.$observe("max",function(b){a.items=Array(+b)});e.$observe("iconEmpty",function(a){c=f("toFaIcon")(a,!0,h)||a||"fa-stars-o"});e.$observe("iconFull",function(a){n=f("toFaIcon")(a,!1,h)||a||"fa-stars"});g.$render=function(){a.last_value=g.$viewValue||0};a.getClass=function(b){return b>=a.last_value?t+" "+c:t+" "+n+" active "};a.unpaintStars=function(b,c){0!==a.last_value&&a.paintStars(a.last_value-1,c)};a.paintStars=function(e,f){if(!a.readonly){for(var g=b.find("li").find("i"),h=0;h<g.length;h++){var k=
-e>=h?(k.removeClass(c),k.addClass(n),k.addClass("active"),k.addClass(m)):(k.removeClass(n),k.removeClass("active"),k.removeClass(m),k.addClass(c))}!f&&g.removeClass(m)}};a.setValue=function(b,c){a.readonly||(c.target.getBoundingClientRect(),a.last_value=b+1,g.$setViewValue(a.last_value),e.onShapeClick&&a.$eval(e.onStarClick))}},function(a){console.error("angular-input-stars.js | "+a.message||a)})}}}]);
+angular.element(g[h]);e>=h?(k.removeClass(c),k.addClass(n),k.addClass("active"),k.addClass(m)):(k.removeClass(n),k.removeClass("active"),k.removeClass(m),k.addClass(c))}!f&&g.removeClass(m)}};a.setValue=function(b,c){a.readonly||(c.target.getBoundingClientRect(),a.last_value=b+1,g.$setViewValue(a.last_value),e.onShapeClick&&a.$eval(e.onStarClick))}},function(a){console.error("angular-input-stars.js | "+a.message||a)})}}}]);
 !function(a){var f=function(a,b){var c=Error(a+" at character "+b);throw c.index=b,c.description=a,c;},k={"-":!0,"!":!0,"~":!0,"+":!0},h={"||":1,"&&":2,"|":3,"^":4,"&":5,"==":6,"!=":6,"===":6,"!==":6,"<":7,">":7,"<=":7,">=":7,"<<":8,">>":8,">>>":8,"+":9,"-":9,"*":10,"/":10,"%":10},c=function(a){var b,c=0,e;for(e in a)(b=e.length)>c&&a.hasOwnProperty(e)&&(c=b);return c},b=c(k),e=c(h),g={"true":!0,"false":!1,"null":null},r=function(a,b,c){return{type:"||"===a||"&&"===a?"LogicalExpression":"BinaryExpression",
 operator:a,left:b,right:c}},m=function(a){return 48<=a&&57>=a},n=function(a){return 36===a||95===a||65<=a&&90>=a||97<=a&&122>=a||128<=a&&!h[String.fromCharCode(a)]},t=function(a){for(var c,q,t=0,x=a.charAt,F=a.charCodeAt,p=function(b){return x.call(a,b)},u=function(b){return F.call(a,b)},I=a.length,J=function(){for(var a=u(t);32===a||9===a;)a=u(++t)},E=function(){var a,b,c;var e,g,k,m,n;if(e=N(),g=G(),g){m={value:g,prec:h[g]||0};(n=N())||f("Expected expression after "+g,t);for(c=[e,m,n];(g=G())&&
 (k=h[g]||0,0!==k);){for(m={value:g,prec:k};2<c.length&&k<=c[c.length-2].prec;)n=c.pop(),g=c.pop().value,e=c.pop(),e=r(g,e,n),c.push(e);(e=N())||f("Expected expression after "+g,t);c.push(m,e)}g=c.length-1;for(e=c[g];1<g;)e=r(c[g-1].value,c[g-2],e),g-=2}c=e;return J(),63!==u(t)?c:(t++,a=E(),a||f("Expected expression",t),J(),58===u(t)?(t++,b=E(),b||f("Expected expression",t),{type:"ConditionalExpression",test:c,consequent:a,alternate:b}):void f("Expected :",t))},G=function(){J();for(var b=a.substr(t,

public/dist/vendor_forms_uglified.js

@@ -15517,7 +15517,7 @@ function(a) {
             }, a.getClass = function(b) {
                 return b >= a.last_value ? h.iconBase + " " + h.emptyIcon : h.iconBase + " " + h.fullIcon + " active ";
             }, a.unpaintStars = function(b, c) {
-                a.paintStars(a.last_value - 1, c);
+                0 !== a.last_value && a.paintStars(a.last_value - 1, c);
             }, a.paintStars = function(b, c) {
                 if (!a.readonly) {
                     for (var d = e.find("li").find("i"), f = 0; f < d.length; f++) {
@@ -15542,7 +15542,7 @@ function(a) {
     var f = {
         restrict: "EA",
         replace: !0,
-        template: '<ul ng-class="listClass"><li ng-touch="paintStars($index)" ng-mouseenter="paintStars($index, true)" ng-mouseleave="unpaintStars($index, false)" ng-repeat="item in items track by $index"><i  ng-class="getClass($index)" ng-click="setValue($index, $event)"></i></li></ul>',
+        template: '<ul ng-class="listClass"><li ng-init="paintStars(last_value)" ng-touch="paintStars($index)" ng-mouseenter="paintStars($index, true)" ng-mouseleave="unpaintStars($index, false)" ng-repeat="item in items track by $index"><i  ng-class="getClass($index)" ng-click="setValue($index, $event)"></i></li></ul>',
         require: "ngModel",
         scope: !0,
         link: e

public/form_modules/forms/base/directives/field.client.directive.js

@@ -64,7 +64,7 @@ angular.module('view-form').directive('fieldDirective', ['$http', '$compile', '$
 						$rootScope.nextField();
 					}
 				};
-
+                scope.nextField = $rootScope.nextField;
 				scope.setActiveField = $rootScope.setActiveField;
 
 				//Set format only if field is a date

public/form_modules/forms/base/views/directiveViews/field/date.html

@@ -24,7 +24,6 @@
 				   ng-required="field.required"
 				   ng-disabled="field.disabled"
 				   placeholder="MM/DD/YYYY"
-				   ng-focus="setActiveField(field._id, index, true)"
 				   on-tab-key="nextField()"
 				   on-tab-and-shift-key="prevField()"
 				   ng-change="$root.nextField()">

public/form_modules/forms/base/views/directiveViews/field/file.html

@@ -1,38 +0,0 @@
-<div class="field row" ng-if="form.autofillPDFs" ng-click="setActiveField(field._id, index, true)">
-	<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
-		<h3>
-			<small class="field-number">
-				{{index+1}}
-				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
-			</small>
-			{{field.title}}
-			<span class="required-error" ng-show="!field.required">{{ 'OPTIONAL' | translate }}</span>
-		</h3>
-	</div>
-    <div class="col-sm-8 field-input">
-        <div class="input-group ">
-            <div tabindex="-1" class="form-control file-caption">
-                <span class="file-caption-ellipsis" ng-if="!form.pdf">…</span>
-                <div class="file-caption-name" ng-if="form.pdf">
-                    {{field.file.originalname}}
-                </div>
-            </div>
-            <div class="input-group-btn">
-                <button type="button"  ng-if="field.file" ng-click="removeFile(field);" title="Clear selected files" class="btn btn-danger fileinput-remove fileinput-remove-button">
-                    <i class="glyphicon glyphicon-trash"  ></i>
-                    {{ 'DELETE' | translate }}
-                </button>
-
-                <button type="button" ng-if="field.fileLoading" title="Abort ongoing upload" class="btn btn-default" ng-click="cancelFileUpload(field)">
-                    <i class="glyphicon glyphicon-ban-circle"></i>
-                    {{ 'CANCEL' | translate }}
-                </button>
-
-                <div class="btn btn-success btn-file" ngf-select ngf-change="uploadPDF($files)" ng-if="!field.file">
-                    <i class="glyphicon glyphicon-upload"></i>
-                    {{ UPLOAD_FILE | translate }}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

public/form_modules/forms/base/views/directiveViews/field/legal.html

@@ -1,6 +1,7 @@
 <div class="field row radio legal"
 	 on-enter-or-tab-key="nextField()"
-	 key-to-truthy key-char-truthy="y" key-char-falsey="n" field="field">
+     on-tab-and-shift-key="prevField()"
+	 key-to-truthy key-char-truthy="y" key-char-falsey="n" field="field" on-valid-key="nextField()">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
     	<h3>
 			<small class="field-number">
@@ -14,20 +15,17 @@
     	<p class="col-xs-12">{{field.description}}</p>
     </div>
     <div class="col-xs-12 field-input container">
-		<div class="row-fluid"
+		<div class="row-fluid">
-			 on-enter-or-tab-key="nextField()"
-			 on-tab-and-shift-key="prevField()">
             <label class="btn col-md-5 col-xs-12"
 				   ng-class="{activeBtn: field.fieldValue == 'true'}">
                 <input class="focusOn"
-				    ng-focus="setActiveField(field._id, index, true)"
                     ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
                     type="radio" value="true"
                     ng-model="field.fieldValue"
                     ng-model-options="{ debounce: 250 }"
                     ng-required="field.required"
                     ng-disabled="field.disabled"
-					ng-change="$root.nextField()"/>
+					ng-change="nextField()"/>
 				<div class="letter" style="float:left">
 					Y
 				</div>
@@ -42,7 +40,7 @@
                     ng-model-options="{ debounce: 250 }"
                     ng-required="field.required"
                     ng-disabled="field.disabled"
-					ng-change="$root.nextField()"/>
+					ng-change="nextField()"/>
 				<div class="letter" style="float:left">
 					N
 				</div>

public/form_modules/forms/base/views/directiveViews/field/radio.html

@@ -26,7 +26,6 @@
 				</div>
 				<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
                     type="radio" class="focusOn"
-				    ng-focus="setActiveField(field._id, index, true)"
 				    value="{{option.option_value}}"
                     ng-model="field.fieldValue"
                     ng-model-options="{ debounce: 250 }"

public/form_modules/forms/base/views/directiveViews/field/rating.html

@@ -17,7 +17,8 @@
 
 		<input-stars max="{{field.ratingOptions.steps}}"
 					 ng-init="field.fieldValue = 1"
-					 on-star-click="$root.nextField()"
+                     on-shape-click="true"
+                     on-star-click="nextField()"
 					 icon-full="{{field.ratingOptions.shape}}"
 					 icon-base="fa fa-3x"
 					 icon-empty="{{field.ratingOptions.shape}}"
@@ -27,7 +28,6 @@
 					 ng-disabled="field.disabled"
 					 on-enter-or-tab-key="nextField()"
 					 on-tab-and-shift-key="prevField()"
-					 ng-focus="setActiveField(field._id, index, true)"
 					 class="angular-input-stars focusOn">
 		</input-stars>
     </div>

public/form_modules/forms/base/views/directiveViews/field/statement.html

@@ -1,7 +1,6 @@
 <div class="statement field row"
 	 on-enter-or-tab-key="nextField()"
-	 on-tab-and-shift-key="prevField()"
+	 on-tab-and-shift-key="prevField()">
-	 ng-focus="setActiveField(field._id, index, true)">
     <div class="row field-title field-title">
     	<div class="col-xs-1"><i class="fa fa-quote-left fa-1"></i></div>
     	<h2 class="text-left col-xs-9">{{field.title}}</h2>
@@ -13,10 +12,9 @@
     	<p class="col-xs-12" ng-if="field.description.length">{{field.description}} </p>
     	<br>
 	<div class="col-xs-offset-1 col-xs-11">
-        	<button class="btn focusOn"
+        	<button class="btn focusOn">
 			    ng-style="{'font-size': '1.3em', 'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
-                ng-focused="setActiveField(field._id, index, true)"
+                ng-click="nextField()">
-                ng-click="$root.nextField()">
             		{{ 'CONTINUE' | translate }} 
         	</button>
 	</div>

public/form_modules/forms/base/views/directiveViews/field/textarea.html

@@ -22,7 +22,6 @@
 			value="{{field.fieldValue}}"
 			ng-required="field.required"
 			ng-disabled="field.disabled"
-		    ng-focus="setActiveField(field._id, index, true)"
 		    on-enter-or-tab-key="nextField()"
 		    on-tab-and-shift-key="prevField()"
 			style="border: none; border-left: lightgrey dashed 2px;">

public/form_modules/forms/base/views/directiveViews/field/textfield.html

@@ -29,7 +29,6 @@
 			ng-model="field.fieldValue"
 			ng-model-options="{ debounce: 250 }"
 			value="field.fieldValue"
-		    ng-focus="setActiveField(field._id, index, true)"
 		   	on-enter-or-tab-key="nextField()"
 		   	on-tab-and-shift-key="prevField()"
 			ng-required="field.required"
@@ -41,7 +40,7 @@
             <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
             <span class="sr-only">Error:</span>
 			<span ng-if="field.fieldType == 'email'"> {{ 'ERROR_EMAIL_INVALID' | translate }} </span>
-			<span ng-if="field.validateRegex"> {{ 'ERROR_NOT_A_NUMBER' | translate }} </span>
+			<span ng-if="field.fieldType == 'number'"> {{ 'ERROR_NOT_A_NUMBER' | translate }} </span>
 			<span ng-if="field.fieldType == 'link'"> {{ 'ERROR_URL_INVALID' | translate }} </span>
         </div>
     </div>
@@ -49,7 +48,7 @@
 <div>
 	<div class="btn btn-lg btn-default col-xs-12 col-sm-4 hidden-xs"
 	 	style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
-			<button ng-disabled="!field.fieldValue || forms.myForm.{{field.fieldType}}{{$index}}.$invalid"
+			<button ng-disabled="!field.fieldValue || field.$invalid"
 				ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
                 ng-click="nextField()"
 				class="btn col-sm-5 col-xs-5">

public/form_modules/forms/base/views/directiveViews/field/yes_no.html

@@ -1,7 +1,9 @@
 <div class="field row radio"
 	 	ng-click="setActiveField(field._id, index, true)"
 	 	on-tab-and-shift-key="prevField()"
-	 	key-to-truthy key-char-truthy="y" key-char-falsey="n" field="field">
+	 	key-to-truthy key-char-truthy="y" key-char-falsey="n" field="field"
+        on-valid-key="nextField()"
+        ng-show="!field.disabled">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
         <h3 class="row">
 			<small class="field-number">
@@ -26,11 +28,9 @@
 					class="focusOn"
                     style="opacity: 0; margin-left: 0px;"
 					ng-model="field.fieldValue"
-				    ng-focus="setActiveField(field._id, index, true)"
 					ng-model-options="{ debounce: 250 }"
 					ng-required="field.required"
-					ng-change="$root.nextField()"
+                    ng-change="nextField()"/>
-                    ng-disabled="field.disabled" />
 				<div class="letter">
 					{{ 'Y' | translate }}
 				</div>
@@ -48,9 +48,7 @@
 			        ng-model="field.fieldValue"
 			        ng-model-options="{ debounce: 250 }"
 			        ng-required="field.required"
-			        ng-change="$root.nextField()"
+			        ng-change="nextField()"/>
-                    ng-disabled="field.disabled"/>
-
 			    <div class="letter">
 				    {{ 'N' | translate }}
 			    </div>

public/form_modules/forms/directives/key-to-truthy.client.directive.js

@@ -4,23 +4,30 @@ angular.module('view-form').directive('keyToTruthy', ['$rootScope', function($ro
 	return {
 		restrict: 'A',
 		scope: {
-			field: '='
+			field: '=',
+            nextField: '&'
 		},
 		link: function($scope, $element, $attrs) {
 			$element.bind('keydown keypress', function(event) {
 				var keyCode = event.which || event.keyCode;
 				var truthyKeyCode = $attrs.keyCharTruthy.charCodeAt(0) - 32;
 				var falseyKeyCode = $attrs.keyCharFalsey.charCodeAt(0) - 32;
-
+				console.log($scope);
                 if(keyCode === truthyKeyCode ) {
 					event.preventDefault();
 					$scope.$apply(function() {
 						$scope.field.fieldValue = 'true';
+                        if($attrs.onValidKey){
+                            $scope.$root.$eval($attrs.onValidKey);
+                        }
 					});
 				}else if(keyCode === falseyKeyCode){
 					event.preventDefault();
 					$scope.$apply(function() {
 						$scope.field.fieldValue = 'false';
+					    if($attrs.onValidKey){
+                            $scope.$root.$eval($attrs.onValidKey);
+                        }   
                     });
 				}
 			});

public/modules/forms/admin/directives/edit-form.client.directive.js

@@ -23,13 +23,9 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
 					forceHelperSize: true,
 					forcePlaceholderSize: true,
 					update: function(e, ui) {
-                        console.log(ui.item.sortable.model);
                         $scope.update(false, $scope.myform, false, false, function(err){
 						});
 					},
-					start: function(e, ui) {
-					    console.log(ui)
-                    }
 				};
 
 				/*
@@ -295,10 +291,10 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
 
 					if(fieldType === 'rating'){
 						newField.ratingOptions = {
-							steps: 1,
+							steps: 5,
 							shape: 'Heart'
 						};
-						newField.fieldValue = '0';
+						newField.fieldValue = 0;
 					}
 
 					if($scope.showAddOptions(newField)){