rough pass on rbac-selected-list directive

awx/ui/client/src/access/add-rbac-user-team/main.js

@@ -5,8 +5,9 @@
  *************************************************/
 
 import addRbacUserTeamDirective from './rbac-user-team.directive';
-import rbacMultiselect from '../rbac-multiselect/main';
+import rbacSelectedList from './rbac-selected-list.directive';
 
 export default
-    angular.module('AddRbacUserTeamModule', [rbacMultiselect.name])
+    angular.module('AddRbacUserTeamModule', [])
-        .directive('addRbacUserTeam', addRbacUserTeamDirective);
+        .directive('addRbacUserTeam', addRbacUserTeamDirective)
+        .directive('rbacSelectedList', rbacSelectedList);

awx/ui/client/src/access/add-rbac-user-team/rbac-selected-list.directive.js

@@ -0,0 +1,108 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/* jshint unused: vars */
+export default ['$compile','templateUrl', 'i18n', 'generateList', 
+    'ProjectList', 'TemplateList', 'InventoryList', 'CredentialList',
+    function($compile, templateUrl, i18n, generateList,
+    ProjectList, TemplateList, InventoryList, CredentialList) {
+        return {
+            restrict: 'E',
+            scope: {
+                resourceType: "=",
+                collection: "=",
+                selected: "="
+            },
+            link: function(scope, element, attrs) {
+                console.log(scope.resourceType)
+                let listMap, list, list_html;
+
+                listMap = {
+                    projects: ProjectList,
+                    job_templates: TemplateList,
+                    workflow_templates: TemplateList,
+                    inventories: InventoryList,
+                    credentials: CredentialList
+                };
+
+                list = _.cloneDeep(listMap[scope.resourceType])
+
+                list.fieldActions = {
+                    remove: {
+                        ngClick: `removeSelection(${list.iterator}, resourceType)`,
+                        icon: 'fa-remove',
+                        awToolTip: i18n._(`Remove ${list.iterator}`),
+                        label: i18n._('Remove'),
+                        class: 'btn-sm'
+                    }
+                };
+                delete list.actions;
+
+                list.listTitleBadge = false;
+
+                switch(scope.resourceType){
+
+                    case 'projects':
+                        list.fields = {
+                            name: list.fields.name,
+                            scm_type: list.fields.scm_type
+                        };
+                        break;
+
+                    case 'inventories':
+                        list.fields = {
+                            name: list.fields.name,
+                            organization: list.fields.organization
+                        };
+                        break;
+
+                    case 'job_templates':
+                        list.name = 'job_templates';
+                        list.iterator = 'job_template';
+                        list.fields = {
+                            name: list.fields.name,
+                            description: list.fields.description
+                        };
+                        break;
+
+                    case 'workflow_templates':
+                        list.name = 'workflow_templates';
+                        list.iterator = 'workflow_template',
+                        list.basePath = 'workflow_job_templates';
+                        list.fields = {
+                            name: list.fields.name,
+                            description: list.fields.description
+                        };
+                        break;
+
+                    default:
+                        list.fields = {
+                            name: list.fields.name,
+                            description: list.fields.description
+                        };
+                }
+
+                list.fields = _.each(list.fields, (field) => field.nosort = true);
+
+                list_html = generateList.build({
+                    mode: 'edit',
+                    list: list,
+                    related: false,
+                    title: false,
+                    showSearch: false,
+                    paginate: false
+                });
+
+                scope.list = list;
+                scope[`${list.iterator}_dataset`] = scope.collection;
+                scope[list.name] = scope.collection;
+
+                element.append(list_html);
+                $compile(element.contents())(scope);
+            }
+        };
+    }
+];

awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.controller.js

@@ -18,7 +18,7 @@ function(rootScope, scope, $state, GetBasePath, Rest, $q, Wait, ProcessErrors) {
 
     function init(){
 
-        let resources = ['templates', 'projects', 'inventories', 'credentials'];
+        let resources = ['job_templates', 'workflow_templates', 'projects', 'inventories', 'credentials'];
 
         // data model:
         // selected - keyed by type of resource

awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.directive.js

@@ -16,6 +16,7 @@ export default ['templateUrl',
             controller: controller,
             templateUrl: templateUrl('access/add-rbac-user-team/rbac-user-team'),
             link: function(scope, element, attrs) {
+                scope.selectTab('job_templates');
                 $('#add-permissions-modal').modal('show');
                 window.scrollTo(0, 0);
             }

awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.partial.html

@@ -35,7 +35,7 @@
                     <div class="Form-tab"
                         ng-click="selectTab('job_templates')"
                         ng-class="{'is-selected': tab.job_templates }">
-                        Templates
+                        Job Templates
                     </div>
                     <div class="Form-tab"
                         ng-click="selectTab('workflow_templates')"
@@ -95,10 +95,16 @@
                     </div>
                     <div class="Form-tabHolder">
                         <div class="Form-tab"
-                            ng-click="selectTab('templates')"
+                            ng-click="selectTab('job_templates')"
-                            ng-class="{'is-selected': tab.templates }"
+                            ng-class="{'is-selected': tab.job_templates }"
-                            ng-show="showSection2Tab('templates')">
+                            ng-show="showSection2Tab('job_templates')">
-                            Templates
+                            Job Templates
+                        </div>
+                        <div class="Form-tab"
+                            ng-click="selectTab('workflow_templates')"
+                            ng-class="{'is-selected': tab.workflow_templates }"
+                            ng-show="showSection2Tab('workflow_templates')">
+                            Workflow Templates
                         </div>
                         <div class="Form-tab"
                             ng-click="selectTab('projects')"
@@ -134,30 +140,19 @@
                             </div>
                         </div>
                     </div>
-                    <form name="multiselectRoles" novalidate>
+
-                        <!-- type of selected resources -->
+                    <!-- role drop-down -->
-                        <div ng-repeat="(type, list) in selected">
+
-                            <!-- controllerAs: 'rbac' -->
+                    <!-- lists of selected resources -->
-                            <div class="AddPermissions-roleRow"
+                    <!-- (type, collection) => ('resource', {id: {}, ... }) -->
-                                ng-repeat="resource in list"
+                    <div ng-repeat="(type, collection) in selected">
-                                ng-show="tab[type]">
+                        <rbac-selected-list
-                                <div class="AddPermissions-roleName">
+                            resource-type="type"
-                                    <span class="AddPermissions-roleNameVal">
+                            collection="collection"
-                                        {{ resource.name }}
+                            selected="selected">
-                                    </span>
+                        </rbac-selected-list>
-                                    <span class="AddPermissions-roleType">
+                    </div>
-                                        {{ resource.type }}
+
-                                    </span>
-                                </div>
-                                <rbac-multiselect-role class="AddPermissions-roleSelect" roles="resource.summary_fields.object_roles" model="resource.roles">
-                                </rbac-multiselect-role>
-                                <button class="AddPermissions-roleRemove"
-                                    ng-click="removeSelection(resource, type)">
-                                    <i class="fa fa-times"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </form>
                 </div>
                 <!-- end section 2 -->
             </div>

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -443,12 +443,14 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon',
                     html += "</div>\n";
                 }
 
-                html += `<paginate
+                if (options.paginate === undefined || options.paginate === true) {
+                    html += `<paginate
                     base-path="${list.basePath || list.name}"
                     collection="${list.name}"
                     dataset="${list.iterator}_dataset"
                     iterator="${list.iterator}">
                     </paginate></div>`;
+                }
 
                 return html;
             },