Update models and components for dynamic input list component

awx/ui/client/lib/components/action/action.directive.js

@@ -17,12 +17,14 @@ function atActionController ($state) {
         form = _form_;
         scope = _scope_;
 
+        scope.config = scope.config || {};
         scope.config.state = scope.config.state || {};
+
         state = scope.config.state;
 
         scope.form = form.use('action', state);
 
-        switch(scope.config.type) {
+        switch(scope.type) {
             case 'cancel':
                 vm.setCancelDefaults();
                 break;
@@ -61,7 +63,7 @@ function atAction (pathService) {
         controllerAs: 'vm',
         link,
         scope: {
-            config: '='
+            type: '@'
         }
     };
 }

awx/ui/client/lib/components/action/action.partial.html

@@ -1,5 +1,5 @@
 <button class="btn at-Button{{ fill }}--{{ color }}"
-        ng-disabled="config.type !== 'cancel' && !form.state.isValid"
+        ng-disabled="type !== 'cancel' && !form.state.isValid"
         ng-class="{ 'at-Button--disabled': form.disabled }" ng-click="action()">
     {{::text}}
 </button>

awx/ui/client/lib/components/input/label.partial.html

@@ -1,5 +1,5 @@
 <label class="at-InputLabel at-u-flat">
-    <span ng-if="config.state.required" class="pull-left at-InputLabel-required">*</span>
-    <span class="pull-left">{{::config.label.text}}</span>
-    <at-popover class="pull-left" config="config.label.popover"></at-popover>
+    <span ng-if="config.options.required" class="pull-left at-InputLabel-required">*</span>
+    <span class="pull-left">{{::config.options.label}}</span>
+    <at-popover class="pull-left" config="config"></at-popover>
 </label>

awx/ui/client/lib/components/input/select.directive.js

@@ -24,6 +24,7 @@ function AtInputSelectController (eventService) {
 
         scope.config.state = scope.config.state || {};
         state = scope.config.state;
+        state.required = scope.config.options.required;
 
         if (scope.tab === 1) {
             select.focus();
@@ -76,6 +77,10 @@ function AtInputSelectController (eventService) {
             state.isValid = isValid;
             form.check();
         }
+
+        if (scope.config.notify) {
+            scope.config.notify(state.value); 
+        }
     };
 }
 

awx/ui/client/lib/components/input/select.partial.html

@@ -3,7 +3,6 @@
         <at-input-label config="config"></at-input-label>
         <div class="at-InputGroup at-InputSelect">
             <input type="text" class="form-control at-Input at-InputSelect-input"
-
                    placeholder="{{ config.placeholder | uppercase }}"
                    ng-model="config.state.value" ng-disabled="form.disabled"
                    ng-change="vm.check()" />

awx/ui/client/lib/components/input/text.directive.js

@@ -21,6 +21,7 @@ function AtInputTextController () {
 
         scope.config.state = scope.config.state || {};
         state = scope.config.state;
+        state.required = scope.config.options.required;
 
         if (scope.tab === '1') {
             input.focus();

awx/ui/client/lib/components/input/text.partial.html

@@ -2,7 +2,8 @@
     <div class="form-group at-u-flat">
         <at-input-label config="config"></at-input-label>
         <input type="text" class="form-control at-Input" ng-model="config.state.value"
-               ng-attr-autofocus="{{tab == 1 || undefined }}"
+               ng-attr-autofocus="{{ tab == 1 || undefined }}"
+               ng-attr-maxlength="{{ config.options.max_length || undefined }}"
                tabindex="{{::tab}}" placeholder="{{::config.placeholder}}"
                ng-change="vm.check()" ng-disabled="form.disabled" />
     </div>

awx/ui/client/lib/components/popover/popover.partial.html

@@ -1,4 +1,4 @@
-<div ng-show="config" class="at-Popover">
+<div ng-show="config.options.help_text" class="at-Popover">
     <span class="at-Popover-icon">
         <i class="fa fa-question-circle"></i>
     </span>
@@ -6,6 +6,6 @@
         <div class="at-Popover-arrow">
             <i class="fa fa-caret-left fa-2x"></i>
         </div>
-        <div class="at-Popover-content">{{::config.text}}</div>
+        <div class="at-Popover-content">{{::config.options.help_text}}</div>
     </div>
 </div>

awx/ui/client/lib/models/Base.js

@@ -1,21 +1,29 @@
 let $resource;
 
 function options () {
-    return this.model.query().$promise
+    let actions = {
+        options: {    
+            method: 'OPTIONS'
+        }
+    };
+
+    return $resource(this.path, null, actions).options().$promise
         .then(response => {
-            this.response = response;
-            this.data = this.response.results;
+            this.model.options = response;
         });
 }
 
 function get () {
     return $resource(this.path).get().$promise
         .then(response => {
-            this.response = response;
-            this.data = this.response.results;
+            this.model.data = response;
         });
 }
 
+function getPostOptions (name) {
+    return this.model.options.actions.POST[name];
+}
+
 function normalizePath (resource) {
     let version = '/api/v2/';
     
@@ -25,9 +33,13 @@ function normalizePath (resource) {
 function Base (_$resource_) {
     $resource = _$resource_;
 
-    this.options = options;
-    this.get = get;
-    this.normalizePath = normalizePath;
+    return () => ({
+        model: {},
+        get,
+        options,
+        getPostOptions,
+        normalizePath
+    });
 }
 
 Base.$inject = ['$resource'];

awx/ui/client/lib/models/Credential.js

@@ -1,5 +1,7 @@
 function Credential (BaseModel) {
-    return Object.assign({}, BaseModel);
+    Object.assign(this, BaseModel());
+
+    this.path = this.normalizePath('credentials');
 }
 
 Credential.$inject = ['BaseModel'];

awx/ui/client/lib/models/CredentialType.js

@@ -1,7 +1,7 @@
 function categorizeByKind () {
     let group = {};
 
-    this.data.forEach(result => {
+    this.model.data.results.forEach(result => {
         group[result.kind] = group[result.kind] || [];
         group[result.kind].push(result);
     });
@@ -12,12 +12,19 @@ function categorizeByKind () {
     }));
 }
 
+function getTypeFromName (name) {
+    let type = this.model.data.results.filter(result => result.name === name);
+
+    return type.length ? type[0] : null;
+}
+
 function CredentialType (BaseModel) {
-    Object.assign(this, BaseModel);
+    Object.assign(this, BaseModel());
 
     this.path = this.normalizePath('credential_types');
 
     this.categorizeByKind = categorizeByKind;
+    this.getTypeFromName = getTypeFromName;
 }
 
 CredentialType.$inject = ['BaseModel'];

awx/ui/client/lib/models/index.js

@@ -1,4 +1,5 @@
 import Base from './Base';
+import Credential from './Credential';
 import CredentialType from './CredentialType';
 
 function config ($resourceProvider) {
@@ -11,5 +12,6 @@ angular
     .module('at.lib.models', [])
     .config(config)
     .service('BaseModel', Base)
-    .service('CredentialType', CredentialType);
+    .service('CredentialModel', Credential)
+    .service('CredentialTypeModel', CredentialType);