Update models and components for dynamic input list component

awx/ui/client/features/credentials/add-credentials.controller.js

@@ -1,50 +1,32 @@
-function AddCredentialsController (credentialType) {
+function AddCredentialsController (models) {
     let vm = this || {};
 
-    vm.name = {
+    let credential = models.credential;
-        state: {
+    let credentialType = models.credentialType;
-            required: true
+    
-        },
-        label: {
-            text: 'Name',
-            popover: {
-                text: 'a, b, c'
-            }
-        }
-    };
-
-    vm.description = {
-        label: {
-            text: 'Description'
-        }
-    };
-
     vm.heading = {
         text: 'Create Credentials'
     };
 
+    vm.name = {
+        options: credential.getPostOptions('name')
+    };
+
+    vm.description = {
+        options: credential.getPostOptions('description')
+    };
+
+    vm.dynamic = {
+        update: type => {
+            this.inputs = type ? type.inputs.fields : null;
+        }
+    };
+
     vm.kind = {
-        state: {
+        options: credential.getPostOptions('credential_type'),
-            required: true,
+        data: credentialType.categorizeByKind(),
-        },
+        notify: vm.dynamic.update,
-        label: {
+        placeholder: 'Select a Type'
-            text: 'Type',
-            popover: {
-                text: 'x, y, z'
-            }
-        },
-        placeholder: 'Select a Type',
-        text: 'kind',
-        value: 'id',
-        data: credentialType.categorizeByKind()
-    };
-
-    vm.save = {
-        type: 'save'
-    };
-
-    vm.cancel = {
-        type: 'cancel'
     };
 }
 

awx/ui/client/features/credentials/add-credentials.view.html

@@ -12,9 +12,11 @@
             <at-input-text tab="2" col="4" config="vm.description"></at-input-text>
             <at-input-select tab="3" col="4" config="vm.kind"></at-input-select>
 
+            <at-dynamic-input-list config="vm.dynamic"></at-dynamic-input-list>
+
             <at-action-group col="12" pos="right">
-                <at-action tab="4" config="vm.cancel"></at-action>
+                <at-action tab="4" type="cancel"></at-action>
-                <at-action tab="5" config="vm.save"></at-action>
+                <at-action tab="5" type="save"></at-action>
             </at-action-group>
         </at-form>
     </at-panel-body>

awx/ui/client/features/credentials/index.js

@@ -40,6 +40,21 @@ function config ($stateExtenderProvider, pathServiceProvider) {
         }
     });
 
+    function credentialTypeResolve ($q, credentialModel, credentialTypeModel) {
+        let promises = [
+            credentialModel.options(),
+            credentialTypeModel.get()
+        ];
+
+        return $q.all(promises)
+            .then(() => ({
+                credential: credentialModel,
+                credentialType: credentialTypeModel
+            }));
+    }
+
+    credentialTypeResolve.$inject = ['$q', 'CredentialModel', 'CredentialTypeModel'];
+
     stateExtender.addState({
         name: 'credentials.add',
         route: '/add',
@@ -54,9 +69,7 @@ function config ($stateExtenderProvider, pathServiceProvider) {
             }
         },
         resolve: {
-            credentialType: ['CredentialType', credentialType => {
+            credentialType: credentialTypeResolve
-                return credentialType.get().then(() => credentialType);
-            }]
         }
     });
 

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 ng-if="config.options.required" class="pull-left at-InputLabel-required">*</span>
-    <span class="pull-left">{{::config.label.text}}</span>
+    <span class="pull-left">{{::config.options.label}}</span>
-    <at-popover class="pull-left" config="config.label.popover"></at-popover>
+    <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.model.options = response;
-            this.data = this.response.results;
         });
 }
 
 function get () {
     return $resource(this.path).get().$promise
         .then(response => {
-            this.response = response;
+            this.model.data = response;
-            this.data = this.response.results;
         });
 }
 
+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;
+    return () => ({
-    this.get = get;
+        model: {},
-    this.normalizePath = normalizePath;
+        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);