From 17f6148c8d91128150394dd6c372e9da4b3ca560 Mon Sep 17 00:00:00 2001
From: gconsidine <greg@greg-considine.com>
Date: Tue, 16 May 2017 08:48:06 -0400
Subject: [PATCH] Add dynamic input group

---
 .../credentials/add-credentials.controller.js | 11 ++---
 .../credentials/add-credentials.view.html     | 13 +++---
 .../dynamic/input-group.directive.js          | 40 +++++++++++++++++++
 .../dynamic/input-group.partial.html          |  4 ++
 .../{action => form}/action.directive.js      | 16 ++++----
 .../{action => form}/action.partial.html      |  0
 .../lib/components/form/form.directive.js     |  8 ++--
 awx/ui/client/lib/components/index.js         |  6 ++-
 .../input/dynamic-group.directive.js          |  0
 .../input/dynamic-group.partial.html          |  0
 .../lib/components/input/select.directive.js  |  7 +---
 11 files changed, 72 insertions(+), 33 deletions(-)
 create mode 100644 awx/ui/client/lib/components/dynamic/input-group.directive.js
 create mode 100644 awx/ui/client/lib/components/dynamic/input-group.partial.html
 rename awx/ui/client/lib/components/{action => form}/action.directive.js (79%)
 rename awx/ui/client/lib/components/{action => form}/action.partial.html (100%)
 delete mode 100644 awx/ui/client/lib/components/input/dynamic-group.directive.js
 delete mode 100644 awx/ui/client/lib/components/input/dynamic-group.partial.html

diff --git a/awx/ui/client/features/credentials/add-credentials.controller.js b/awx/ui/client/features/credentials/add-credentials.controller.js
index 22fbc0f025..a1925811ac 100644
--- a/awx/ui/client/features/credentials/add-credentials.controller.js
+++ b/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 = [
diff --git a/awx/ui/client/features/credentials/add-credentials.view.html b/awx/ui/client/features/credentials/add-credentials.view.html
index 65e4bf62ea..056394743e 100644
--- a/awx/ui/client/features/credentials/add-credentials.view.html
+++ b/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>
diff --git a/awx/ui/client/lib/components/dynamic/input-group.directive.js b/awx/ui/client/lib/components/dynamic/input-group.directive.js
new file mode 100644
index 0000000000..014d032dea
--- /dev/null
+++ b/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;
diff --git a/awx/ui/client/lib/components/dynamic/input-group.partial.html b/awx/ui/client/lib/components/dynamic/input-group.partial.html
new file mode 100644
index 0000000000..d9709b4a71
--- /dev/null
+++ b/awx/ui/client/lib/components/dynamic/input-group.partial.html
@@ -0,0 +1,4 @@
+<div>
+  {{ watch.state.value }}
+  {{ watch.data[watch.state.value] }}
+</div>
diff --git a/awx/ui/client/lib/components/action/action.directive.js b/awx/ui/client/lib/components/form/action.directive.js
similarity index 79%
rename from awx/ui/client/lib/components/action/action.directive.js
rename to awx/ui/client/lib/components/form/action.directive.js
index 5dcf6b41ce..0b8cd80f78 100644
--- a/awx/ui/client/lib/components/action/action.directive.js
+++ b/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;
diff --git a/awx/ui/client/lib/components/action/action.partial.html b/awx/ui/client/lib/components/form/action.partial.html
similarity index 100%
rename from awx/ui/client/lib/components/action/action.partial.html
rename to awx/ui/client/lib/components/form/action.partial.html
diff --git a/awx/ui/client/lib/components/form/form.directive.js b/awx/ui/client/lib/components/form/form.directive.js
index f366759e20..634ea910de 100644
--- a/awx/ui/client/lib/components/form/form.directive.js
+++ b/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;
     };
diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js
index 9f89a08615..c983838abb 100644
--- a/awx/ui/client/lib/components/index.js
+++ b/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)
diff --git a/awx/ui/client/lib/components/input/dynamic-group.directive.js b/awx/ui/client/lib/components/input/dynamic-group.directive.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/lib/components/input/dynamic-group.partial.html b/awx/ui/client/lib/components/input/dynamic-group.partial.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/lib/components/input/select.directive.js b/awx/ui/client/lib/components/input/select.directive.js
index 3b8863a33c..766d40c25b 100644
--- a/awx/ui/client/lib/components/input/select.directive.js
+++ b/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); 
-        }
     };
 }