1
0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00

Reorganize awx/ui/client/src/access module structure

addPermissions module => add-rbac-resource module
addPermissionsList module => rbac-multiselect-list module
roleSelect module => rbac-multiselect-role module
roleList module => rbac-role-column module

Use isolate scope in rbac-multiselect-role module
Move shared styles to module root
This commit is contained in:
Leigh Johnson 2016-11-26 16:14:19 -05:00
parent f77949b4b0
commit fed9806313
16 changed files with 133 additions and 92 deletions

View File

@ -0,0 +1,12 @@
/*************************************************
* Copyright (c) 2015 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
import addRbacResourceDirective from './rbac-resource.directive';
import rbacMultiselect from '../rbac-multiselect/main';
export default
angular.module('AddRbacResourceModule', [rbacMultiselect.name])
.directive('addRbacResource', addRbacResourceDirective);

View File

@ -18,16 +18,7 @@ export default ['$rootScope', '$scope', 'GetBasePath', 'Rest', '$q', 'Wait', 'Pr
// the object permissions are being added to
scope.object = scope.resourceData.data;
// array for all possible roles for the object
scope.roles = Object
.keys(scope.object.summary_fields.object_roles)
.map(function(key) {
return {
value: scope.object.summary_fields
.object_roles[key].id,
label: scope.object.summary_fields
.object_roles[key].name
};
});
scope.roles = scope.object.summary_fields.object_roles;
// TODO: get working with api
// array w roles and descriptions for key
@ -44,6 +35,11 @@ export default ['$rootScope', '$scope', 'GetBasePath', 'Rest', '$q', 'Wait', 'Pr
scope.showKeyPane = false;
scope.removeObject = function(obj){
_.remove(scope.allSelected, {id: obj.id});
obj.isSelected = false;
};
scope.toggleKeyPane = function() {
scope.showKeyPane = !scope.showKeyPane;
};

View File

@ -3,7 +3,7 @@
*
* All Rights Reserved
*************************************************/
import addPermissionsController from './addPermissions.controller';
import controller from './rbac-resource.controller';
/* jshint unused: vars */
export default ['templateUrl', '$state',
@ -16,8 +16,8 @@ export default ['templateUrl', '$state',
teamsDataset: '=',
resourceData: '=',
},
controller: addPermissionsController,
templateUrl: templateUrl('access/addPermissions/addPermissions'),
controller: controller,
templateUrl: templateUrl('access/add-rbac-resource/rbac-resource'),
link: function(scope, element, attrs) {
scope.toggleFormTabs('users');
$('#add-permissions-modal').modal('show');

View File

@ -46,10 +46,10 @@
</div>
<div id="AddPermissions-users" class="AddPermissions-list" ng-show="usersSelected">
<add-permissions-list view="Users" all-selected="allSelected" dataset="usersDataset"></add-permissions-list>
<rbac-multiselect-list view="Users" all-selected="allSelected" dataset="usersDataset"></rbac-multiselect-list>
</div>
<div id="AddPermissions-teams" class="AddPermissions-list" ng-show="teamsSelected">
<add-permissions-list view="Teams" all-selected="allSelected" dataset="teamsDataset"></add-permissions-list>
<rbac-multiselect-list view="Teams" all-selected="allSelected" dataset="teamsDataset"></rbac-multiselect-list>
</div>
<div class="AddPermissions-separator"
@ -61,7 +61,7 @@
2
</span>
Please assign roles to the selected users/teams
<div class="AddPermissions-keyToggle"
<div class="AddPermissions-keyToggle btn"
ng-class="{'is-active': showKeyPane}"
ng-click="toggleKeyPane()">
Key
@ -91,8 +91,8 @@
{{ obj.type }}
</span>
</div>
<role-select class="AddPermissions-roleSelect">
</role-select>
<rbac-multiselect-role class="AddPermissions-roleSelect" roles="roles" model="obj.roles">
</rbac-multiselect-role>
<button class="AddPermissions-roleRemove"
ng-click="removeObject(obj)">
<i class="fa fa-times"></i>

View File

@ -1,4 +1,4 @@
@import "../../shared/branding/colors.default.less";
@import "../shared/branding/colors.default.less";
/** @define AddPermissions */
@ -168,13 +168,14 @@
.AddPermissions-keyToggle {
margin-left: auto;
text-transform: uppercase;
padding: 3px 9px;
font-size: 12px;
background-color: @default-bg;
border-radius: 5px;
color: @default-interface-txt;
border: 1px solid @d7grey;
cursor: pointer;
width: 70px;
height: 34px;
line-height: 20px;
}
.AddPermissions-keyToggle:hover {
@ -185,6 +186,9 @@
background-color: @default-link;
border-color: @default-link;
color: @default-bg;
&:hover{
background-color: @default-link-hov;
}
}
.AddPermissions-keyPane {

View File

@ -1,47 +0,0 @@
/*************************************************
* Copyright (c) 2015 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
/* jshint unused: vars */
export default ['addPermissionsTeamsList', 'addPermissionsUsersList', '$compile', 'generateList', 'GetBasePath', 'SelectionInit', function(addPermissionsTeamsList,
addPermissionsUsersList, $compile, generateList,
GetBasePath, SelectionInit) {
return {
restrict: 'E',
scope: {
allSelected: '=',
view: '@',
dataset: '='
},
template: "<div class='addPermissionsList-inner'></div>",
link: function(scope, element, attrs, ctrl) {
let listMap, list, list_html;
listMap = {Teams: addPermissionsTeamsList, Users: addPermissionsUsersList};
list = listMap[scope.view];
list_html = generateList.build({
mode: 'edit',
list: list
});
scope.list = listMap[scope.view];
scope[`${list.iterator}_dataset`] = scope.dataset.data;
scope[`${list.name}`] = scope[`${list.iterator}_dataset`].results;
scope.$watch(list.name, function(){
_.forEach(scope[`${list.name}`], isSelected);
});
function isSelected(item){
if(_.find(scope.allSelected, {id: item.id})){
item.isSelected = true;
}
return item;
}
element.append(list_html);
$compile(element.contents())(scope);
}
};
}];

View File

@ -1,14 +0,0 @@
/*************************************************
* Copyright (c) 2015 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
import addPermissionsDirective from './addPermissions.directive';
import roleSelect from './roleSelect.directive';
import addPermissionsList from './addPermissionsList/main';
export default
angular.module('AddPermissions', [addPermissionsList.name])
.directive('addPermissions', addPermissionsDirective)
.directive('roleSelect', roleSelect);

View File

@ -4,9 +4,13 @@
* All Rights Reserved
*************************************************/
import roleList from './roleList.directive';
import addPermissions from './addPermissions/main';
import roleList from './rbac-role-column/roleList.directive';
import addRbacResource from './add-rbac-resource/main';
import addRbacUserTeam from './add-rbac-user-team/main';
export default
angular.module('access', [addPermissions.name])
angular.module('RbacModule', [
addRbacResource.name,
addRbacUserTeam.name
])
.directive('roleList', roleList);

View File

@ -4,12 +4,14 @@
* All Rights Reserved
*************************************************/
import addPermissionsListDirective from './addPermissionsList.directive';
import rbacMultiselectList from './rbac-multiselect-list.directive';
import rbacMultiselectRole from './rbac-multiselect-role.directive';
import teamsList from './permissionsTeams.list';
import usersList from './permissionsUsers.list';
export default
angular.module('addPermissionsListModule', [])
.directive('addPermissionsList', addPermissionsListDirective)
angular.module('rbacMultiselectModule', [])
.directive('rbacMultiselectList', rbacMultiselectList)
.directive('rbacMultiselectRole', rbacMultiselectRole)
.factory('addPermissionsTeamsList', teamsList)
.factory('addPermissionsUsersList', usersList);

View File

@ -0,0 +1,80 @@
/*************************************************
* Copyright (c) 2015 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
/* jshint unused: vars */
export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateList', 'ProjectList',
'InventoryList', 'CredentialList', '$compile', 'generateList', 'GetBasePath', 'SelectionInit',
function(addPermissionsTeamsList, addPermissionsUsersList, TemplateList, ProjectList,
InventoryList, CredentialList, $compile, generateList, GetBasePath, SelectionInit) {
return {
restrict: 'E',
scope: {
allSelected: '=',
view: '@',
dataset: '='
},
template: "<div class='addPermissionsList-inner'></div>",
link: function(scope, element, attrs, ctrl) {
let listMap, list, list_html;
listMap = {
Teams: addPermissionsTeamsList,
Users: addPermissionsUsersList,
Projects: ProjectList,
Templates: TemplateList,
Inventories: InventoryList,
Credentials: CredentialList
};
list = _.cloneDeep(listMap[scope.view]);
list.multiSelect = true;
list.multiSelectExtended = true;
list.listTitleBadge = false;
delete list.actions;
delete list.fieldActions;
if (scope.view !== 'Users' && scope.view !== 'Teams' && scope.view !=='Projects' && scope.view !== 'Inventories'){
list.fields = {
name: list.fields.name,
description: list.fields.description
};
} else if (scope.view === 'Projects'){
list.fields = {
name: list.fields.name,
scm_type: list.fields.scm_type
};
} else if (scope.view === 'Inventories'){
list.fieds = {
name: list.fields.name,
organization: list.fields.organization
};
}
list_html = generateList.build({
mode: 'edit',
list: list,
related: false,
title: false
});
scope.list = list;
scope[`${list.iterator}_dataset`] = scope.dataset.data;
scope[`${list.name}`] = scope[`${list.iterator}_dataset`].results;
scope.$watch(list.name, function(){
_.forEach(scope[`${list.name}`], isSelected);
});
function isSelected(item){
if(_.find(scope.allSelected, {id: item.id})){
item.isSelected = true;
}
return item;
}
element.append(list_html);
$compile(element.contents())(scope);
}
};
}];

View File

@ -11,8 +11,12 @@ export default
function(CreateSelect2) {
return {
restrict: 'E',
scope: false,
template: '<select ng-cloak class="AddPermissions-selectHide roleSelect2 form-control" ng-model="obj.roles" ng-options="role.label for role in roles | filter:{label: \'!Read\'} track by role.value" multiple required></select>',
scope: {
roles: '=',
model: '='
},
// @issue why is the read-only role ommited from this selection?
template: '<select ng-cloak class="AddPermissions-selectHide roleSelect2 form-control" ng-model="model" ng-options="role.name for role in roles track by role.id" multiple required></select>',
link: function(scope, element, attrs, ctrl) {
CreateSelect2({
element: '.roleSelect2',

View File

@ -1,5 +1,5 @@
/** @define RoleList */
@import "../shared/branding/colors.default.less";
@import "../../shared/branding/colors.default.less";
.RoleList {
display: flex;

View File

@ -5,7 +5,7 @@ export default
return {
restrict: 'E',
scope: true,
templateUrl: templateUrl('access/roleList'),
templateUrl: templateUrl('access/rbac-role-list/roleList'),
link: function(scope, element, attrs) {
// given a list of roles (things like "project
// auditor") which are pulled from two different