Add dynamic input group

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

@@ -16,18 +16,15 @@ function AddCredentialsController (models) {
         options: credential.getPostOptions('description')
     };
 
-    vm.dynamic = {
-        update: type => {
-            this.inputs = type ? type.inputs.fields : null;
-        }
-    };
-
     vm.kind = {
         options: credential.getPostOptions('credential_type'),
         data: credentialType.categorizeByKind(),
-        notify: vm.dynamic.update,
         placeholder: 'Select a Type'
     };
+
+    vm.dynamic = {
+        model: credential
+    };
 }
 
 AddCredentialsController.$inject = [

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

@@ -8,15 +8,16 @@
 
     <at-panel-body>
         <at-form>
-            <at-input-text tab="1" col="4" config="vm.name"></at-input-text>
-            <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-input-text col="4" config="vm.name"></at-input-text>
+            <at-input-text col="4" config="vm.description"></at-input-text>
+            <at-input-select col="4" config="vm.kind"></at-input-select>
 
-            <at-dynamic-input-list config="vm.dynamic"></at-dynamic-input-list>
+            <at-dynamic-input-group col="4" config="vm.dynamic" watch="vm.kind">
+            </at-dynamic-input-group>
 
             <at-action-group col="12" pos="right">
-                <at-action tab="4" type="cancel"></at-action>
-                <at-action tab="5" type="save"></at-action>
+                <at-form-action type="cancel"></at-form-action>
+                <at-form-action type="save"></at-form-action>
             </at-action-group>
         </at-form>
     </at-panel-body>

awx/ui/client/lib/components/dynamic/input-group.directive.js

@@ -0,0 +1,40 @@
+function link (scope, el, attrs, controllers) {
+    let dynamicController = controllers[0];
+
+    dynamicController.init(scope);
+}
+
+function atDynamicInputGroupController () {
+    let vm = this || {};
+
+    let state;
+    let scope;
+    let input;
+    let form;
+
+    vm.init = (_scope_) => {
+        scope = _scope_;
+        console.log(scope.watch);
+        // scope.form = form.use('input', state);
+    };
+}
+
+function atDynamicInputGroup (pathService) {
+    return {
+        restrict: 'E',
+        replace: true,
+        require: ['atDynamicInputGroup'],
+        templateUrl: pathService.getPartialPath('components/dynamic/input-group'),
+        controller: atDynamicInputGroupController,
+        controllerAs: 'vm',
+        link,
+        scope: {
+            config: '=',
+            watch: '='
+        }
+    };
+}
+
+atDynamicInputGroup.$inject = ['PathService'];
+
+export default atDynamicInputGroup;

awx/ui/client/lib/components/dynamic/input-group.partial.html

@@ -0,0 +1,4 @@
+<div>
+  {{ watch.state.value }}
+  {{ watch.data[watch.state.value] }}
+</div>

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

@@ -5,7 +5,7 @@ function link (scope, el, attrs, controllers) {
     actionController.init(formController, scope);
 }
 
-function atActionController ($state) {
+function atFormActionController ($state) {
     let vm = this || {};
 
     let form;
@@ -50,16 +50,16 @@ function atActionController ($state) {
     };
 }
 
-atActionController.$inject = ['$state'];
+atFormAction.$inject = ['$state'];
 
-function atAction (pathService) {
+function atFormAction (pathService) {
     return {
         restrict: 'E',
         transclude: true,
         replace: true,
-        require: ['^^atForm', 'atAction'],
-        templateUrl: pathService.getPartialPath('components/action/action'),
-        controller: atActionController,
+        require: ['^^atForm', 'atFormAction'],
+        templateUrl: pathService.getPartialPath('components/form/action'),
+        controller: atFormActionController,
         controllerAs: 'vm',
         link,
         scope: {
@@ -68,6 +68,6 @@ function atAction (pathService) {
     };
 }
 
-atAction.$inject = ['PathService'];
+atFormAction.$inject = ['PathService'];
 
-export default atAction;
+export default atFormAction;

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

@@ -24,24 +24,24 @@ function AtFormController () {
        return state;
     };
 
-    vm.trackInput = (component, el) => {
+    vm.trackInput = (input, el) => {
         let form = {
             state: vm.state,
             disabled: false
         };
 
-        vm.inputs.push(component)
+        vm.inputs.push(input)
 
         return form;
     };
 
-    vm.trackAction = component => {
+    vm.trackAction = action => {
         let form = {
             state: vm.state,
             disabled: false
         };
 
-        vm.actions.push(component);
+        vm.actions.push(action);
 
         return form;
     };

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

@@ -1,7 +1,8 @@
-import action from './action/action.directive';
 import actionGroup from './action/action-group.directive';
 import badge from './badge/badge.directive';
+import dynamicInputGroup from './dynamic/input-group.directive';
 import form from './form/form.directive';
+import formAction from './form/action.directive';
 import inputLabel from './input/label.directive';
 import inputSearch from './input/search.directive';
 import inputSelect from './input/select.directive';
@@ -15,10 +16,11 @@ import toggleContent from './toggle/content.directive';
 
 angular
     .module('at.lib.components', [])
-    .directive('atAction', action)
     .directive('atActionGroup', actionGroup)
     .directive('atBadge', badge)
+    .directive('atDynamicInputGroup', dynamicInputGroup)
     .directive('atForm', form)
+    .directive('atFormAction', formAction)
     .directive('atInputLabel', inputLabel)
     .directive('atInputSearch', inputSearch)
     .directive('atInputSelect', inputSelect)

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

@@ -24,7 +24,6 @@ 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();
@@ -32,7 +31,7 @@ function AtInputSelectController (eventService) {
 
         state.isValid = state.isValid || false;
         state.message = state.message || '';
-        state.required = state.required || false;
+        state.required = scope.config.options.required || false;
 
         scope.form = form.use('input', state);
 
@@ -77,10 +76,6 @@ function AtInputSelectController (eventService) {
             state.isValid = isValid;
             form.check();
         }
-
-        if (scope.config.notify) {
-            scope.config.notify(state.value); 
-        }
     };
 }