From cfb638e8e177ea1d1fa36448c5c88e987b7ecede Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Wed, 26 Jun 2013 12:03:10 -0400 Subject: [PATCH] Added awRequiredWhen directive. Make fields required only when an expression evaluates to true. Used on Permissions detail page to toggle Project required attribute based on permission type. --- awx/ui/static/css/ansible-ui.css | 6 ++- awx/ui/static/js/controllers/Jobs.js | 2 +- awx/ui/static/js/controllers/Permissions.js | 25 ++++++++++- awx/ui/static/js/forms/Permissions.js | 6 +-- awx/ui/static/js/lists/Permissions.js | 2 +- awx/ui/static/lib/ansible/directives.js | 42 +++++++++++++++++++ awx/ui/static/lib/ansible/form-generator.js | 11 +++-- .../static/lib/ansible/generator-helpers.js | 3 -- 8 files changed, 83 insertions(+), 14 deletions(-) diff --git a/awx/ui/static/css/ansible-ui.css b/awx/ui/static/css/ansible-ui.css index 8552a7d1bc..5fb806c749 100644 --- a/awx/ui/static/css/ansible-ui.css +++ b/awx/ui/static/css/ansible-ui.css @@ -520,6 +520,10 @@ text-rendering: optimizeLegibility; } -#form-modal-body, #password-body { +.modal-body { padding-top: 30px; } + +#prompt-modal .modal-body { + padding-bottom: 30px; +} diff --git a/awx/ui/static/js/controllers/Jobs.js b/awx/ui/static/js/controllers/Jobs.js index 7336d4f345..163da6c3d1 100644 --- a/awx/ui/static/js/controllers/Jobs.js +++ b/awx/ui/static/js/controllers/Jobs.js @@ -41,7 +41,7 @@ function JobsListCtrl ($scope, $rootScope, $location, $log, $routeParams, Rest, if ($routeParams['inventory__int']) { scope[list.iterator + 'SearchField'] = 'inventory'; scope[list.iterator + 'SearchValue'] = $routeParams['inventory__int']; - scope[list.iterator + 'SearchFieldLabel'] = 'Inventory'; + scope[list.iterator + 'SearchFieldLabel'] = 'Inventory ID'; } scope.search(list.iterator); diff --git a/awx/ui/static/js/controllers/Permissions.js b/awx/ui/static/js/controllers/Permissions.js index 35334c7da5..ac6069e0a3 100644 --- a/awx/ui/static/js/controllers/Permissions.js +++ b/awx/ui/static/js/controllers/Permissions.js @@ -78,8 +78,12 @@ function PermissionsAdd ($scope, $rootScope, $compile, $location, $log, $routePa generator.reset(); LoadBreadCrumbs(); + scope['inventoryrequired'] = true; + scope['projectrequired'] = false; scope.category = 'Inventory'; master.category = 'Inventory'; + master.inventoryrequired = true; + master.projectrequired = false LookUpInit({ scope: scope, @@ -122,7 +126,16 @@ function PermissionsAdd ($scope, $rootScope, $compile, $location, $log, $routePa for (var fld in master) { scope[fld] = master[fld]; } - }; + }; + + scope.selectCategory = function() { + if (scope.category == 'Inventory') { + scope.projectrequired = false; + } + else { + scope.projectrequired = true; + } + } } PermissionsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'PermissionsForm', @@ -225,6 +238,16 @@ function PermissionsEdit ($scope, $rootScope, $compile, $location, $log, $routeP } }; + + scope.selectCategory = function() { + if (scope.category == 'Inventory') { + scope.projectrequired = false; + } + else { + scope.projectrequired = true; + } + } + } PermissionsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'PermissionsForm', diff --git a/awx/ui/static/js/forms/Permissions.js b/awx/ui/static/js/forms/Permissions.js index 2b31507baa..11fc817cc8 100644 --- a/awx/ui/static/js/forms/Permissions.js +++ b/awx/ui/static/js/forms/Permissions.js @@ -51,8 +51,7 @@ angular.module('PermissionFormDefinition', []) sourceField: 'name', ngShow: "category == 'Deploy'", ngClick: 'lookUpProject()', - addRequired: false, - editRequired: false + awRequiredWhen: { variable: "projectrequired", init: "false" } }, inventory: { label: 'Inventory', @@ -60,8 +59,7 @@ angular.module('PermissionFormDefinition', []) sourceModel: 'inventory', sourceField: 'name', ngClick: 'lookUpInventory()', - addRequired: false, - editRequired: false + awRequiredWhen: {variable: "inventoryrequired", init: "true" } }, permission_type: { label: 'Permission', diff --git a/awx/ui/static/js/lists/Permissions.js b/awx/ui/static/js/lists/Permissions.js index 86ff18cd0c..fbb0df7afa 100644 --- a/awx/ui/static/js/lists/Permissions.js +++ b/awx/ui/static/js/lists/Permissions.js @@ -46,7 +46,7 @@ angular.module('PermissionListDefinition', []) icon: 'icon-plus', label: 'Add', mode: 'all', // One of: edit, select, all - ngClick: 'createPermission()', + ngClick: 'addPermission()', "class": 'btn-success btn-small', awToolTip: 'Add a new permission' } diff --git a/awx/ui/static/lib/ansible/directives.js b/awx/ui/static/lib/ansible/directives.js index a8bff15baa..4565f7f588 100644 --- a/awx/ui/static/lib/ansible/directives.js +++ b/awx/ui/static/lib/ansible/directives.js @@ -93,6 +93,48 @@ angular.module('AWDirectives', ['RestServices']) } } }) + + // + // awRequiredWhen: { variable: "", init:"true|false" } + // + // Make a field required conditionally using a scope variable. If the scope variable is true, the + // field will be required. Otherwise, the required attribute will be removed. + // + .directive('awRequiredWhen', function() { + return { + require: 'ngModel', + link: function(scope, elm, attrs, ctrl) { + + function checkIt () { + var viewValue = elm.val(); + validity = true; + if ( scope[attrs.awRequiredWhen] && (elm.attr('required') == null || elm.attr('required') == undefined) ) { + $(elm).attr('required','required'); + } + else if (!scope[attrs.awRequiredWhen]) { + elm.removeAttr('required'); + } + if (scope[attrs.awRequiredWhen] && (viewValue == undefined || viewValue == null || viewValue == '')) { + validity = false; + } + ctrl.$setValidity('required', validity); + } + + scope[attrs.awRequiredWhen] = attrs.awrequiredInit; + checkIt(); + + scope.$watch(attrs.awRequiredWhen, function() { + // watch for the aw-required-when expression to change value + checkIt(); + }); + + scope.$watch($(elm).attr('name'), function() { + // watch for the field to change value + checkIt(); + }); + } + } + }) // lookup Validate lookup value against API // diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js index 000ff53cd6..6ca3e6b11c 100644 --- a/awx/ui/static/lib/ansible/form-generator.js +++ b/awx/ui/static/lib/ansible/form-generator.js @@ -173,6 +173,8 @@ angular.module('FormGenerator', ['GeneratorHelpers']) html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : ""; html += (field.capitalize) ? "capitalize " : ""; html += (field.ask) ? "ng-disabled=\"" + fld + "_ask\" " : ""; + html += (field.awRequiredWhen) ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" aw-required-when=\"" + + field.awRequiredWhen.variable + "\" " : ""; html += (field.associated && this.form.fields[field.associated].ask) ? "ng-disabled=\"" + field.associated + "_ask\" " : ""; html += "/>"; if (field.clear) { @@ -193,7 +195,8 @@ angular.module('FormGenerator', ['GeneratorHelpers']) } html += "
\n"; // Add error messages - if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) { + if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) || + field.awRequiredWhen ) { html += "A value is required!\n"; } @@ -435,11 +438,13 @@ angular.module('FormGenerator', ['GeneratorHelpers']) html += (field.id) ? this.attr(field,'id') : ""; html += (field.placeholder) ? this.attr(field,'placeholder') : ""; html += (options.mode == 'edit' && field.editRequired) ? "required " : ""; - html += (options.mode == 'add' && field.addRequired) ? "required " : ""; + html += (field.awRequiredWhen) ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" aw-required-when=\"" + + field.awRequiredWhen.variable + "\" " : ""; html += " awlookup />\n"; html += "
\n"; // Add error messages - if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) { + if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) || + field.awRequiredWhen ) { html += "