From 4cbc306b68219f0932e3922d80477c8b24fc750a Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Wed, 28 Jun 2017 11:49:15 -0400
Subject: [PATCH] Added awRange directive which watches min/max values for
 changes and updates validation accordingly.

---
 awx/ui/client/src/shared/directives.js        | 35 +++++++++++++++++++
 .../shared/question-definition.form.js        | 10 +++---
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index b06d6bfa3d..e817c0d2c4 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -349,6 +349,41 @@ function(ConfigurationUtils, i18n, $rootScope) {
     };
 }])
 
+.directive('awRange', ['Empty', function(Empty) {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function(scope, elem, attr, ctrl) {
+
+            let checkRange = function(viewValue){
+                ctrl.$setValidity('awRangeMin', true);
+                ctrl.$setValidity('awRangeMax', true);
+                var max = (attr.rangeMax) ? scope.$eval(attr.rangeMax) : Infinity;
+                var min = (attr.rangeMin) ? scope.$eval(attr.rangeMin) : -Infinity;
+                if (!Empty(max) && !Empty(viewValue) && Number(viewValue) > max) {
+                    ctrl.$setValidity('awRangeMax', false);
+                }
+                else if(!Empty(min) && !Empty(viewValue) && Number(viewValue) < min) {
+                    ctrl.$setValidity('awRangeMin', false);
+                }
+                return viewValue;
+            };
+
+            scope.$watch(attr.rangeMin, function () {
+                checkRange(scope.$eval(attr.ngModel));
+            });
+
+            scope.$watch(attr.rangeMax, function () {
+                checkRange(scope.$eval(attr.ngModel));
+            });
+
+            ctrl.$parsers.unshift(function(viewValue) {
+                return checkRange(viewValue);
+            });
+        }
+    };
+}])
+
 .directive('smartFloat', function() {
     var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
     return {
diff --git a/awx/ui/client/src/templates/survey-maker/shared/question-definition.form.js b/awx/ui/client/src/templates/survey-maker/shared/question-definition.form.js
index 65a1ce862c..f57a5fe019 100644
--- a/awx/ui/client/src/templates/survey-maker/shared/question-definition.form.js
+++ b/awx/ui/client/src/templates/survey-maker/shared/question-definition.form.js
@@ -232,9 +232,10 @@ export default
             type: 'custom',
             control:  '<div>'+
                 '<label for="default_int"><span class="Form-inputLabel">Default Answer</span></label>'+
-                '<input type="number" ng-model="default_int" name="default_int" aw-min="int_min" aw-max="int_max"  class="form-control Form-textInput" integer />'+
+                '<input type="number" ng-model="default_int" name="default_int" aw-range range-min="int_min" range-max="int_max" class="form-control Form-textInput" integer />'+
                 '<div class="error" ng-show="survey_question_form.default_int.$error.number || survey_question_form.default_int.$error.integer">Please enter a valid integer.</div>'+
-                '<div class="error" ng-show="survey_question_form.default_int.$error.awMin || survey_question_form.default_int.$error.awMax"> Please enter a value in the range of {{int_min}} to {{int_max}}.</div>'+
+                '<div class="error" ng-show="survey_question_form.default_int.$error.awRangeMin"> Please enter a minimum default of {{int_min}}.</div>'+
+                '<div class="error" ng-show="survey_question_form.default_int.$error.awRangeMax"> Please enter a maximum default of {{int_max}}.</div>'+
                 '</div>',
             column: 2,
             ngShow: 'type.type === "integer" ',
@@ -245,9 +246,10 @@ export default
             type: 'custom',
             control: '<div>'+
                 '<label for="default_float"><span class="Form-inputLabel">Default Answer</span></label>'+
-                '<input type="number" ng-model="default_float" name="default_float" aw-min="float_min" aw-max="float_max"  class="form-control Form-textInput"  />'+
+                '<input type="number" ng-model="default_float" name="default_float" aw-range range-min="float_min" range-max="float_max" class="form-control Form-textInput"  />'+
                 '<div class="error" ng-show="survey_question_form.default_float.$error.number || survey_question_form.default_float.$error.float">Please enter a valid float.</div>'+
-                '<div class="error" ng-show="survey_question_form.default_float.$error.awMin || survey_question_form.default_float.$error.awMax"> Please enter a value in the range of {{float_min}} to {{float_max}}!</div>'+
+                '<div class="error" ng-show="survey_question_form.default_float.$error.awRangeMin"> Please enter a minimum default of {{float_min}}.</div>'+
+                '<div class="error" ng-show="survey_question_form.default_float.$error.awRangeMax"> Please enter a maximum default of {{float_max}}.</div>'+
                 '</div>',
             column: 2,
             ngShow: 'type.type=== "float" ',