Add org Lookup implementation and WIP credential_type

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

@@ -25,13 +25,18 @@ function AddCredentialsController (models, $state) {
     vm.form.organization._resource = 'organization';
     vm.form.organization._route = 'credentials.add.organization';
 
-    vm.form.credential_type._data = credentialType.get('results');
+    vm.form.credential_type._resource = 'credentialType';
-    vm.form.credential_type._placeholder = 'SELECT A TYPE';
+    vm.form.credential_type._route = 'credentials.add.credentialType';
-    vm.form.credential_type._format = 'grouped-object';
-    vm.form.credential_type._display = 'name';
-    vm.form.credential_type._key = 'id';
-    vm.form.credential_type._exp = 'type as type.name group by type.kind for type in state._data';
 
+/*
+ *    vm.form.credential_type._data = credentialType.get('results');
+ *    vm.form.credential_type._placeholder = 'SELECT A TYPE';
+ *    vm.form.credential_type._format = 'grouped-object';
+ *    vm.form.credential_type._display = 'name';
+ *    vm.form.credential_type._key = 'id';
+ *    vm.form.credential_type._exp = 'type as type.name group by type.kind for type in state._data';
+ *
+ */
     vm.form.inputs = {
         _get: credentialType.mergeInputProperties,
         _source: vm.form.credential_type,

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

@@ -1,6 +1,9 @@
 <at-panel ng-if="$state.current.name === 'credentials.add' ||
                  $state.current.name === 'credentials.edit' ||
-                 $state.current.name === 'credentials.add.organization'">
+                 $state.current.name === 'credentials.add.organization' ||
+                 $state.current.name === 'credentials.edit.organization' ||
+                 $state.current.name === 'credentials.add.credentialType' ||
+                 $state.current.name === 'credentials.edit.credentialType'">
     <at-panel-heading>{{ vm.panelTitle }}</at-panel-heading>
 
     <at-tab-group>
@@ -16,9 +19,9 @@
 
             <at-divider></at-divider>
 
-            <at-input-select col="4" tab="4" state="vm.form.credential_type"></at-input-select>
+            <at-input-lookup col="4" tab="4" state="vm.form.credential_type"></at-input-lookup>
 
-            <at-input-group col="4" tab="4" state="vm.form.inputs">
+            <at-input-group col="4" tab="5" state="vm.form.inputs">
                 Type Details
             </at-input-group>
 
@@ -32,7 +35,7 @@
 
 <at-panel ng-if="$state.current.name === 'credentials.edit.permissions' ||
                  $state.current.name === 'credentials.edit.permissions.add'">
-    <at-panel-heading>Credentials Permissions</at-panel-heading>
+    <at-panel-heading>CREDENTIALS PERMISSIONS</at-panel-heading>
 
     <at-tab-group>
         <at-tab state="vm.tab.details">Details</at-tab>

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

@@ -6,7 +6,6 @@ function EditCredentialsController (models, $state, $scope) {
     let me = models.me;
     let credential = models.credential;
     let credentialType = models.credentialType;
-    let organization = models.organization;
 
     vm.tab = {
         details: {  
@@ -21,9 +20,9 @@ function EditCredentialsController (models, $state, $scope) {
     };
 
     $scope.$watch('$state.current.name', (value) => {
-        if (value === 'credentials.edit') {
+        if (/credentials.edit($|\.organization$)/.test(value)) {
             vm.tab.details._active = true;
-            vm.tab.details._permissions = false;
+            vm.tab.permissions._active = false;
         } else {
             vm.tab.permissions._active = true;
             vm.tab.details._active = false;
@@ -39,13 +38,10 @@ function EditCredentialsController (models, $state, $scope) {
         omit: ['user', 'team', 'inputs']
     });
 
-    vm.form.organization._placeholder = DEFAULT_ORGANIZATION_PLACEHOLDER;
+    vm.form.organization._resource = 'organization';
-    vm.form.organization._data = organization.get('results');
+    vm.form.organization._route = 'credentials.edit.organization';
-    vm.form.organization._format = 'objects';
+    vm.form.organization._value = credential.get('summary_fields.organization.id');
-    vm.form.organization._exp = 'org as org.name for org in state._data';
+    vm.form.organization._displayValue = credential.get('summary_fields.organization.name');
-    vm.form.organization._display = 'name';
-    vm.form.organization._key = 'id';
-    vm.form.organization._value = organization.getById(credential.get('organization'));
 
     vm.form.credential_type._data = credentialType.get('results');
     vm.form.credential_type._format = 'grouped-object';

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

@@ -73,6 +73,9 @@ function CredentialsConfig ($stateExtenderProvider, legacyProvider, pathProvider
     stateExtender.addState(legacy.getStateConfiguration('edit-permissions'));
     stateExtender.addState(legacy.getStateConfiguration('add-permissions'));
     stateExtender.addState(legacy.getStateConfiguration('add-organization'));
+    stateExtender.addState(legacy.getStateConfiguration('edit-organization'));
+    stateExtender.addState(legacy.getStateConfiguration('add-credential-type'));
+    stateExtender.addState(legacy.getStateConfiguration('edit-credential-type'));
 }
 
 CredentialsConfig.$inject = [

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

@@ -201,39 +201,39 @@ function LegacyCredentialsService (pathService) {
         }
     };
 
+    this.lookupTemplateProvider = (ListDefinition, generateList) => {
+        let html = generateList.build({
+            mode: 'lookup',
+            list: ListDefinition,
+            input_type: 'radio'
+        });
+
+        return `<lookup-modal>${html}</lookup-modal>`;
+    };
+
     this.organization = {
+        url: '/organization?selected',
+        searchPrefix: 'organization',
         params: {
             organization_search: {
                 value: {
                     page_size: 5,
                     order_by: 'name'
                 },
-                dynamic:true,
+                dynamic: true,
-                squash:''
+                squash: ''
             }
         },
         data: {
             basePath: 'organizations',
-            formChildState:true
+            formChildState: true
         },
         ncyBreadcrumb: {
             skip: true
         },
-        views: {
+        views: {},
-            'organization@credentials.add': {
-                templateProvider: (ListDefinition, generateList) => {
-                    let html = generateList.build({
-                        mode: 'lookup',
-                        list: ListDefinition,
-                        input_type: 'radio'
-                    });
-
-                    return `<lookup-modal>${html}</lookup-modal>`;
-                }
-            }
-        },
         resolve: {
-            ListDefinition: ['OrganizationList', function(list) {
+            ListDefinition: ['OrganizationList', list => {
                 return list;
             }],
             Dataset: ['ListDefinition', 'QuerySet', '$stateParams', 'GetBasePath',
@@ -254,6 +254,49 @@ function LegacyCredentialsService (pathService) {
         }
     };
 
+    this.credentialType = {
+        url: '/credential_type?selected',
+        searchPrefix: 'credential_type',
+        params: {
+            credential_type_search: {
+                value: {
+                    page_size: 5,
+                    order_by: 'name'
+                },
+                dynamic: true,
+                squash: ''
+            }
+        },
+        data: {
+            basePath: 'credential_types',
+            formChildState: true
+        },
+        ncyBreadcrumb: {
+            skip: true
+        },
+        views: {},
+        resolve: {
+            ListDefinition: ['CredentialTypesList', list => {
+                return list;
+            }],
+            Dataset: ['ListDefinition', 'QuerySet', '$stateParams', 'GetBasePath',
+                (list, qs, $stateParams, GetBasePath) => {
+                    return qs.search(
+                        GetBasePath('credential_types'), 
+                        $stateParams[`${list.iterator}_search`]
+                    );
+                }
+            ]
+        },
+        onExit: function($state) {
+            if ($state.transition) {
+                $('#form-modal').modal('hide');
+                $('.modal-backdrop').remove();
+                $('body').removeClass('modal-open');
+            }
+        }
+    };
+
     this.getStateConfiguration = (name) => {
         switch (name) {      
             case 'list':
@@ -264,8 +307,33 @@ function LegacyCredentialsService (pathService) {
                 return this.addPermissions;
             case 'add-organization':
                 this.organization.name = 'credentials.add.organization';
-                this.organization.url = '/organization';
+                this.organization.views['organization@credentials.add'] = {
+                    templateProvider: this.lookupTemplateProvider
+                };
+
                 return this.organization;
+            case 'edit-organization':
+                this.organization.name = 'credentials.edit.organization';
+                this.organization.views['organization@credentials.edit'] = {
+                    templateProvider: this.lookupTemplateProvider
+                };
+
+                return this.organization;
+            case 'add-credential-type':
+                this.credentialType.name = 'credentials.add.credentialType';
+                this.credentialType.views['credentialType@credentials.add'] = {
+                    templateProvider: this.lookupTemplateProvider
+                };
+
+                return this.credentialType;
+            case 'edit-credential-type':
+                this.credentialType.name = 'credentials.edit.credentialType';
+                this.credentialType.views['credentialType@credentials.edit'] = {
+                    templateProvider: this.lookupTemplateProvider
+                };
+
+                return this.credentialType;
+
             default:
                 throw new Error(`Legacy state configuration for ${name} does not exist`);
         };

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

@@ -9,7 +9,7 @@ function atInputLookupLink (scope, element, attrs, controllers) {
     inputController.init(scope, element, formController);
 }
 
-function AtInputLookupController (baseInputController, $state) {
+function AtInputLookupController (baseInputController, $state, $stateParams) {
     let vm = this || {};
 
     let scope;
@@ -36,13 +36,15 @@ function AtInputLookupController (baseInputController, $state) {
             params.selected = scope.state._value;
         }
 
+        console.log(scope.state);
         $state.go(scope.state._route, params);
     };
 }
 
 AtInputLookupController.$inject = [
     'BaseInputController',
-    '$state'
+    '$state',
+    '$stateParams'
 ];
 
 function atInputLookup (pathService) {