fix validation for management job forms

This commit is contained in:
John Mitchell
2015-07-30 00:31:08 -04:00
parent 6d4c6e2303
commit 992e0a7ae2
3 changed files with 87 additions and 89 deletions

View File

@@ -22,7 +22,7 @@ export default
parent_scope = scope, parent_scope = scope,
defaultUrl = GetBasePath('system_job_templates'), defaultUrl = GetBasePath('system_job_templates'),
list = managementJobsListObject, list = managementJobsListObject,
view = GenerateList, e; view = GenerateList;
scope.cleanupJob = true; scope.cleanupJob = true;
@@ -82,65 +82,48 @@ export default
minWidth: 200, minWidth: 200,
callback: 'PromptForDaysFacts', callback: 'PromptForDaysFacts',
onOpen: function(){ onOpen: function(){
scope.keep_unit_choices = [{ scope.$watch('prompt_for_days_facts_form.$invalid', function(invalid) {
"label" : "Days", if (invalid === true) {
"value" : "d" $('#prompt-for-days-facts-launch').prop("disabled", true);
}, } else {
{ $('#prompt-for-days-facts-launch').prop("disabled", false);
"label": "Weeks", }
"value" : "w" });
},
{
"label" : "Years",
"value" : "y"
}];
scope.granularity_keep_unit_choices = [{
"label" : "Days",
"value" : "d"
},
{
"label": "Weeks",
"value" : "w"
},
{
"label" : "Years",
"value" : "y"
}];
e = angular.element(document.getElementById('prompt_for_days_facts_form'));
scope.prompt_for_days_facts_form.keep_amount.$setViewValue(30);
scope.prompt_for_days_facts_form.granularity_keep_amount.$setViewValue(1);
$compile(e)(scope);
scope.keep_unit = scope.keep_unit_choices[0];
scope.granularity_keep_unit = scope.granularity_keep_unit_choices[1];
// this is a work-around for getting awMax to work (without var fieldScope = scope.$parent;
// clearing out the form)
scope.$watch('keep_amount', function(newVal) { // set these form elements up on the scope where the form
if (!newVal && newVal !== 0) { // is the parent of the current scope
$('#prompt-for-days-facts-launch').prop("disabled", true); fieldScope.keep_unit_choices = [{
} else if (isNaN(newVal)) { "label" : "Days",
$('#prompt-for-days-facts-launch').prop("disabled", true); "value" : "d"
} else if (newVal < 0) { },
$('#prompt-for-days-facts-launch').prop("disabled", true); {
} else if (newVal > 9999) { "label": "Weeks",
$('#prompt-for-days-facts-launch').prop("disabled", true); "value" : "w"
} else { },
$('#prompt-for-days-facts-launch').prop("disabled", false); {
} "label" : "Years",
}); "value" : "y"
scope.$watch('granularity_keep_amount', function(newVal2) { }];
if (!newVal2 && newVal2 !== 0) { fieldScope.granularity_keep_unit_choices = [{
$('#prompt-for-days-facts-launch').prop("disabled", true); "label" : "Days",
} else if (isNaN(newVal2)) { "value" : "d"
$('#prompt-for-days-facts-launch').prop("disabled", true); },
} else if (newVal2 < 0) { {
$('#prompt-for-days-facts-launch').prop("disabled", true); "label": "Weeks",
} else if (newVal2 > 9999) { "value" : "w"
$('#prompt-for-days-facts-launch').prop("disabled", true); },
} else { {
$('#prompt-for-days-facts-launch').prop("disabled", false); "label" : "Years",
} "value" : "y"
}); }];
scope.prompt_for_days_facts_form.$setPristine();
scope.prompt_for_days_facts_form.$invalid = false;
fieldScope.keep_unit = fieldScope.keep_unit_choices[0];
fieldScope.granularity_keep_unit = fieldScope.granularity_keep_unit_choices[1];
fieldScope.keep_amount = 30;
fieldScope.granularity_keep_amount = 1;
}, },
buttons: [{ buttons: [{
"label": "Cancel", "label": "Cancel",
@@ -207,25 +190,18 @@ export default
minWidth: 200, minWidth: 200,
callback: 'PromptForDays', callback: 'PromptForDays',
onOpen: function(){ onOpen: function(){
e = angular.element(document.getElementById('prompt_for_days_form')); scope.$watch('prompt_for_days_form.$invalid', function(invalid) {
scope.prompt_for_days_form.days_to_keep.$setViewValue(30); if (invalid === true) {
$compile(e)(scope);
// this is a work-around for getting awMax to work (without
// clearing out the form)
scope.$watch('days_to_keep', function(newVal) { // oldVal, scope) { // unused params get caught by jshint
if (!newVal && newVal !== 0) {
$('#prompt-for-days-launch').prop("disabled", true);
} else if (isNaN(newVal)) {
$('#prompt-for-days-launch').prop("disabled", true);
} else if (newVal < 0) {
$('#prompt-for-days-launch').prop("disabled", true);
} else if (newVal > 9999) {
$('#prompt-for-days-launch').prop("disabled", true); $('#prompt-for-days-launch').prop("disabled", true);
} else { } else {
$('#prompt-for-days-launch').prop("disabled", false); $('#prompt-for-days-launch').prop("disabled", false);
} }
}); });
var fieldScope = scope.$parent;
fieldScope.days_to_keep = 30;
scope.prompt_for_days_form.$setPristine();
scope.prompt_for_days_form.$invalid = false;
}, },
buttons: [{ buttons: [{
"label": "Cancel", "label": "Cancel",

View File

@@ -202,6 +202,24 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
}; };
}) })
.directive('awNoDash', ['Empty', function (Empty) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attr, ctrl) {
ctrl.$parsers.unshift( function(viewValue) {
if (!Empty(viewValue) && viewValue === "-") {
ctrl.$setValidity('awNoDash', false);
return viewValue;
} else {
ctrl.$setValidity('awNoDash', true);
return viewValue;
}
});
}
};
}])
.directive('awMin', ['Empty', function (Empty) { .directive('awMin', ['Empty', function (Empty) {
return { return {
restrict: 'A', restrict: 'A',

View File

@@ -158,11 +158,12 @@
<div id="prompt-for-days" style="display:none"> <div id="prompt-for-days" style="display:none">
<form name="prompt_for_days_form" id="prompt_for_days_form"> <form name="prompt_for_days_form" id="prompt_for_days_form">
Set how many days of data should be retained. <br> Set how many days of data should be retained. <br>
<input type="number" id="days_to_keep" name="days_to_keep" ng-model="days_to_keep" ng-required="true" class="form-control" aw-min=0 aw-max=9999 style="margin-top:10px;" integer> <input type="integer" id="days_to_keep" name="days_to_keep" ng-model="days_to_keep" ng-required="true" class="form-control" min=0 aw-min=0 max=9999 aw-max=9999 aw-no-dash style="margin-top:10px;" integer>
<div class="error" ng-show="prompt_for_days_form.days_to_keep.$dirty && prompt_for_days_form.days_to_keep.$error.required">Please enter the number of days you would like to keep this data.</div> <div class="error" ng-show="prompt_for_days_form.days_to_keep.$dirty && (prompt_for_days_form.days_to_keep.$error.number || prompt_for_days_form.days_to_keep.$error.integer ||
<div class="error survey_error" ng-show="prompt_for_days_form.days_to_keep.$error.number || prompt_for_days_form.days_to_keep.$error.integer" >Please enter a valid number.</div> prompt_for_days_form.days_to_keep.$error.required ||
<div class="error survey_error" ng-show="prompt_for_days_form.days_to_keep.$error.awMin">Please enter a non-negative number.</div> prompt_for_days_form.days_to_keep.$error.min ||
<div class="error survey_error" ng-show="prompt_for_days_form.days_to_keep.$error.awMax">Please enter a number smaller than 9999.</div> prompt_for_days_form.days_to_keep.$error.awNoDash ||
prompt_for_days_form.days_to_keep.$error.max)">Please enter an integer<span ng-show="prompt_for_days_form.days_to_keep.$dirty && prompt_for_days_form.days_to_keep.$error.min"> that is not negative</span><span ng-show="prompt_for_days_form.days_to_keep.$dirty && prompt_for_days_form.days_to_keep.$error.max"> that is lower than 9999</span>.</div>
</form> </form>
</div> </div>
<div id="prompt-for-days-facts" style="display:none"> <div id="prompt-for-days-facts" style="display:none">
@@ -180,16 +181,17 @@
</label> </label>
<div class="row"> <div class="row">
<div class="col-xs-4"> <div class="col-xs-4">
<input type="number" id="keep_amount" name="keep_amount" ng-model="keep_amount" ng-required="true" class="form-control" aw-min=0 aw-max=9999 style="margin-top:10px;" integer></input> <input type="integer" id="keep_amount" name="keep_amount" ng-model="keep_amount" ng-required="true" class="form-control" min=0 aw-min=0 max=9999 aw-max=9999 aw-no-dash style="margin-top:10px;" integer></input>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<select id="keep_unit" name="keep_unit" ng-model="keep_unit" ng-options="type.label for type in keep_unit_choices track by type.value" ng-required="true" class="form-control" style="margin-top:10px;"></select> <select id="keep_unit" name="keep_unit" ng-model="keep_unit" ng-options="type.label for type in keep_unit_choices track by type.value" ng-required="true" class="form-control" style="margin-top:10px;"></select>
</div> </div>
</div> </div>
<div class="error" ng-show="prompt_for_days_facts_form.keep_amount.$dirty && prompt_for_days_facts_form.keep_amount.$error.required">Please enter the number of days you would like to keep this data.</div> <div class="error" ng-show="prompt_for_days_facts_form.keep_amount.$dirty && (prompt_for_days_facts_form.keep_amount.$error.number || prompt_for_days_facts_form.keep_amount.$error.integer ||
<div class="error survey_error" ng-show="prompt_for_days_facts_form.keep_amount.$error.number || prompt_for_days_facts_form.keep_amount.$error.integer" >Please enter a valid number.</div> prompt_for_days_facts_form.keep_amount.$error.required ||
<div class="error survey_error" ng-show="prompt_for_days_facts_form.keep_amount.$error.awMin">Please enter a non-negative number.</div> prompt_for_days_facts_form.keep_amount.$error.min ||
<div class="error survey_error" ng-show="prompt_for_days_facts_form.keep_amount.$error.awMax">Please enter a number smaller than 9999.</div> prompt_for_days_facts_form.keep_amount.$error.awNoDash ||
prompt_for_days_facts_form.keep_amount.$error.max)">Please enter an integer<span ng-show="prompt_for_days_facts_form.keep_amount.$dirty && prompt_for_days_facts_form.keep_amount.$error.min"> that is not negative</span><span ng-show="prompt_for_days_facts_form.keep_amount.$dirty && prompt_for_days_facts_form.keep_amount.$error.max"> that is lower than 9999</span>.</div>
</div> </div>
<div class="form-group "> <div class="form-group ">
<label for="description"> <label for="description">
@@ -199,16 +201,18 @@
</label> </label>
<div class="row"> <div class="row">
<div class="col-xs-4"> <div class="col-xs-4">
<input type="number" id="granularity_keep_amount" name="granularity_keep_amount" ng-model="granularity_keep_amount" ng-required="true" class="form-control" aw-min=0 aw-max=9999 style="margin-top:10px;" integer></input> <input type="integer" id="granularity_keep_amount" name="granularity_keep_amount" ng-model="granularity_keep_amount" ng-required="true" class="form-control" min=0 aw-min=0 max=9999 aw-max=9999 aw-no-dash style="margin-top:10px;" integer></input>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<select id="granularity_keep_unit" name="granularity_keep_unit" ng-model="granularity_keep_unit" ng-options="type.label for type in granularity_keep_unit_choices track by type.value" ng-required="true" class="form-control" style="margin-top:10px;"></select> <select id="granularity_keep_unit" name="granularity_keep_unit" ng-model="granularity_keep_unit"
ng-options="type.label for type in granularity_keep_unit_choices track by type.value" ng-required="true" class="form-control" style="margin-top:10px;"></select>
</div> </div>
</div> </div>
<div class="error" ng-show="prompt_for_days_facts_form.granularity_keep_amount.$dirty && prompt_for_days_facts_form.granularity_keep_amount.$error.required">Please enter the number of days you would like to keep this data.</div> <div class="error" ng-show="prompt_for_days_facts_form.granularity_keep_amount.$dirty && (prompt_for_days_facts_form.granularity_keep_amount.$error.number || prompt_for_days_facts_form.granularity_keep_amount.$error.integer ||
<div class="error survey_error" ng-show="prompt_for_days_facts_form.granularity_keep_amount.$error.number || prompt_for_days_facts_form.granularity_keep_amount.$error.integer" >Please enter a valid number.</div> prompt_for_days_facts_form.granularity_keep_amount.$error.required ||
<div class="error survey_error" ng-show="prompt_for_days_facts_form.granularity_keep_amount.$error.awMin">Please enter a non-negative number.</div> prompt_for_days_facts_form.granularity_keep_amount.$error.min ||
<div class="error survey_error" ng-show="prompt_for_days_facts_form.granularity_keep_amount.$error.awMax">Please enter a number smaller than 9999.</div> prompt_for_days_facts_form.granularity_keep_amount.$error.awNoDash ||
prompt_for_days_facts_form.granularity_keep_amount.$error.max)">Please enter an integer<span ng-show="prompt_for_days_facts_form.granularity_keep_amount.$dirty && prompt_for_days_facts_form.granularity_keep_amount.$error.min"> that is not negative</span><span ng-show="prompt_for_days_facts_form.granularity_keep_amount.$dirty && prompt_for_days_facts_form.granularity_keep_amount.$error.max"> that is lower than 9999</span>.</div>
</div> </div>
</div> </div>
</form> </form>