Merge pull request #5123 from mabashian/4546-multiselect

Fixed permissions multi-select issues
This commit is contained in:
Michael Abashian 2017-02-08 14:16:17 -05:00 committed by GitHub
commit 0567542588
16 changed files with 142 additions and 147 deletions

View File

@ -62,13 +62,13 @@ export default ['$rootScope', '$scope', 'GetBasePath', 'Rest', '$q', 'Wait', 'Pr
user.username;
}
if (item.isSelected) {
if (value.isSelected) {
if (item.type === 'user') {
item.name = buildName(item);
}
scope.allSelected.push(item);
} else {
scope.allSelected = _.remove(scope.allSelected, { id: item.id });
_.remove(scope.allSelected, { id: item.id });
}
});

View File

@ -44,10 +44,10 @@
</div>
</div>
<div id="AddPermissions-users" class="AddPermissions-list" ng-if="usersSelected">
<div id="AddPermissions-users" class="AddPermissions-list" ng-show="usersSelected">
<rbac-multiselect-list view="Users" all-selected="allSelected" dataset="usersDataset"></rbac-multiselect-list>
</div>
<div id="AddPermissions-teams" class="AddPermissions-list" ng-if="teamsSelected">
<div id="AddPermissions-teams" class="AddPermissions-list" ng-show="teamsSelected">
<rbac-multiselect-list view="Teams" all-selected="allSelected" dataset="teamsDataset"></rbac-multiselect-list>
</div>

View File

@ -127,7 +127,7 @@ function(rootScope, scope, $state, i18n, CreateSelect2, GetBasePath, Rest, $q, W
let resourceType = scope.currentTab(),
item = value.value;
if (item.isSelected) {
if (value.isSelected) {
scope.selected[resourceType][item.id] = item;
scope.selected[resourceType][item.id].roles = [];
aggregateKey(item, resourceType);

View File

@ -9,12 +9,6 @@
return {
name: 'users',
iterator: 'user',
defaultSearchParams: function(term){
return {or__username__icontains: term,
or__first_name__icontains: term,
or__last_name__icontains: term
};
},
title: false,
listTitleBadge: false,
multiSelect: true,

View File

@ -122,7 +122,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
});
function isSelected(item){
if(_.find(scope.allSelected, {id: item.id})){
if(_.find(scope.allSelected, {id: item.id, type: item.type})){
item.isSelected = true;
}
return item;

View File

@ -15,12 +15,6 @@ export default
search: {
order_by: 'username'
},
defaultSearchParams: function(term){
return {or__username__icontains: term,
or__first_name__icontains: term,
or__last_name__icontains: term
};
},
iterator: 'user',
selectTitle: i18n._('Add Users'),
editTitle: i18n._('Users'),

View File

@ -11,10 +11,10 @@
* Controller for handling permissions adding
*/
export default ['$scope', '$rootScope', 'ProcessErrors', 'GetBasePath',
'SelectionInit', 'templateUrl', '$state', 'Rest', '$q', 'Wait', '$window',
function($scope, $rootScope, ProcessErrors, GetBasePath,
SelectionInit, templateUrl, $state, Rest, $q, Wait, $window) {
export default ['$scope', '$rootScope', 'ProcessErrors', 'GetBasePath', 'generateList',
'SelectionInit', 'templateUrl', '$state', 'Rest', '$q', 'Wait', '$window', 'QuerySet', 'UserList',
function($scope, $rootScope, ProcessErrors, GetBasePath, generateList,
SelectionInit, templateUrl, $state, Rest, $q, Wait, $window, qs, UserList) {
$scope.$on("linkLists", function() {
if ($state.current.name.split(".")[1] === "users") {
@ -26,16 +26,59 @@ function($scope, $rootScope, ProcessErrors, GetBasePath,
init();
function init(){
// search init
$scope.list = $scope.$parent.add_user_list;
$scope.add_user_dataset = $scope.$parent.add_user_dataset;
$scope.add_users = $scope.$parent.add_user_dataset.results;
$scope.add_user_default_params = {
order_by: 'username',
page_size: 5
};
$scope.add_user_queryset = {
order_by: 'username',
page_size: 5
};
let list = _.cloneDeep(UserList);
list.basePath = 'users';
list.iterator = 'add_user';
list.name = 'add_users';
list.multiSelect = true;
list.fields.username.ngClick = 'linkoutUser(add_user.id)';
delete list.actions;
delete list.fieldActions;
// Fire off the initial search
qs.search(GetBasePath('users'), $scope.add_user_default_params)
.then(function(res) {
$scope.add_user_dataset = res.data;
$scope.add_users = $scope.add_user_dataset.results;
let html = generateList.build({
list: list,
mode: 'edit',
title: false
});
$scope.list = list;
$scope.compileList(html);
$scope.$watchCollection('add_users', function () {
if($scope.selectedItems) {
// Loop across the users and see if any of them should be "checked"
$scope.add_users.forEach(function(row, i) {
if (_.includes($scope.selectedItems, row.id)) {
$scope.add_users[i].isSelected = true;
}
});
}
});
});
$scope.selectedItems = [];
$scope.$on('selectedOrDeselected', function(e, value) {
let item = value.value;
if (item.isSelected) {
if (value.isSelected) {
$scope.selectedItems.push(item.id);
}
else {

View File

@ -7,7 +7,7 @@
/* jshint unused: vars */
import addUsers from './addUsers.controller';
export default
['Wait', 'templateUrl', '$state', '$view', function(Wait, templateUrl, $state, $view) {
['Wait', 'templateUrl', '$state', '$view', '$compile', function(Wait, templateUrl, $state, $view, $compile) {
return {
restrict: 'E',
scope: {
@ -48,6 +48,10 @@ export default
scope.closeModal();
});
scope.compileList = function(html) {
$('#add-users-list').append($compile(html)(scope));
};
Wait('stop');
window.scrollTo(0,0);

View File

@ -15,8 +15,7 @@
</div>
</div>
</div>
<div ui-view="modalBody" class="AddUsers-body">
</div>
<div id="add-users-list" class="AddUsers-body"></div>
<div class="AddUsers-footer">
<div class="buttons Form-buttons AddUsers-buttons">
<button type="button"

View File

@ -5,11 +5,11 @@
*************************************************/
export default ['$stateParams', '$scope', 'UserList', 'Rest', '$state',
'generateList', '$compile', 'Wait', 'OrgAdminList', 'AddAdminList',
'OrgAdminsDataset', 'AddAdminsDataset',
'generateList', '$compile', 'Wait', 'OrgAdminList',
'OrgAdminsDataset',
'Prompt', 'ProcessErrors', 'GetBasePath', '$filter',
function($stateParams, $scope, UserList, Rest, $state, GenerateList,
$compile, Wait, OrgAdminList, AddAdminList, OrgAdminsDataset, AddAdminsDataset, Prompt, ProcessErrors,
$compile, Wait, OrgAdminList, OrgAdminsDataset, Prompt, ProcessErrors,
GetBasePath, $filter) {
var orgBase = GetBasePath('organizations');
@ -19,11 +19,8 @@ export default ['$stateParams', '$scope', 'UserList', 'Rest', '$state',
function init() {
// search init
$scope.list = OrgAdminList;
$scope.add_user_list = AddAdminList;
$scope.user_dataset = OrgAdminsDataset.data;
$scope.users = $scope.user_dataset.results;
$scope.add_user_dataset = AddAdminsDataset.data;
$scope.add_users = $scope.add_user_dataset.results;
Rest.setUrl(orgBase + $stateParams.organization_id);
Rest.get()

View File

@ -4,11 +4,11 @@
* All Rights Reserved
*************************************************/
export default ['$stateParams', '$scope', 'OrgUserList', 'AddUserList','Rest', '$state',
'generateList', '$compile', 'Wait', 'OrgUsersDataset', 'AddUsersDataset',
export default ['$stateParams', '$scope', 'OrgUserList','Rest', '$state',
'generateList', '$compile', 'Wait', 'OrgUsersDataset',
'Prompt', 'ProcessErrors', 'GetBasePath', '$filter',
function($stateParams, $scope, OrgUserList, AddUserList, Rest, $state, GenerateList,
$compile, Wait, OrgUsersDataset, AddUsersDataset, Prompt, ProcessErrors,
function($stateParams, $scope, OrgUserList, Rest, $state, GenerateList,
$compile, Wait, OrgUsersDataset, Prompt, ProcessErrors,
GetBasePath, $filter) {
var orgBase = GetBasePath('organizations');
@ -18,12 +18,8 @@ export default ['$stateParams', '$scope', 'OrgUserList', 'AddUserList','Rest', '
function init() {
// search init
$scope.list = OrgUserList;
$scope.add_user_list = AddUserList;
$scope.user_dataset = OrgUsersDataset.data;
$scope.users = $scope.user_dataset.results;
$scope.add_user_dataset = AddUsersDataset.data;
$scope.add_users = $scope.add_user_dataset.results;
Rest.setUrl(orgBase + $stateParams.organization_id);
Rest.get()

View File

@ -27,16 +27,6 @@ export default [{
});
return generateList.wrapPanel(html);
},
},
'modalBody@': {
templateProvider: function(AddUserList, generateList) {
let html = generateList.build({
list: AddUserList,
mode: 'edit',
listTitle: false
});
return html;
},
}
},
params: {
@ -44,14 +34,6 @@ export default [{
value: {
order_by: 'username'
}
},
add_user_search: {
value: {
order_by: 'username',
page_size: '5',
},
dynamic: true,
squash: true
}
},
ncyBreadcrumb: {
@ -73,12 +55,6 @@ export default [{
return qs.search(path, $stateParams.user_search);
}
],
AddUsersDataset: ['AddUserList', 'QuerySet', '$stateParams', 'GetBasePath',
function(list, qs, $stateParams, GetBasePath) {
let path = GetBasePath(list.basePath) || list.basePath;
return qs.search(path, $stateParams.add_user_search);
}
],
OrgUserList: ['UserList', 'GetBasePath', '$stateParams', function(UserList, GetBasePath, $stateParams) {
let list = _.cloneDeep(UserList);
delete list.actions.add;
@ -93,17 +69,6 @@ export default [{
};
list.searchSize = "col-lg-12 col-md-12 col-sm-12 col-xs-12";
return list;
}],
AddUserList: ['UserList', function(UserList) {
let list = _.cloneDeep(UserList);
list.basePath = 'users';
list.iterator = 'add_user';
list.name = 'add_users';
list.multiSelect = true;
list.fields.username.ngClick = 'linkoutUser(add_user.id)';
delete list.actions;
delete list.fieldActions;
return list;
}]
}
}, {
@ -349,16 +314,6 @@ export default [{
});
return generateList.wrapPanel(html);
},
},
'modalBody@': {
templateProvider: function(AddAdminList, generateList) {
let html = generateList.build({
list: AddAdminList,
mode: 'edit',
listTitle: false
});
return html;
},
}
},
data: {
@ -379,12 +334,6 @@ export default [{
return qs.search(path, $stateParams[`user_search`]);
}
],
AddAdminsDataset: ['AddAdminList', 'QuerySet', '$stateParams', 'GetBasePath',
function(list, qs, $stateParams, GetBasePath) {
let path = GetBasePath(list.basePath) || list.basePath;
return qs.search(path, $stateParams[`add_user_search`]);
}
],
OrgAdminList: ['UserList', 'GetBasePath', '$stateParams', function(UserList, GetBasePath, $stateParams) {
let list = _.cloneDeep(UserList);
delete list.actions.add;
@ -400,17 +349,6 @@ export default [{
list.searchSize = "col-lg-12 col-md-12 col-sm-12 col-xs-12";
list.listTitle = 'Admins';
return list;
}],
AddAdminList: ['UserList', function(UserList) {
let list = _.cloneDeep(UserList);
list.basePath = 'users';
list.iterator = 'add_user';
list.name = 'add_users';
list.multiSelect = true;
list.fields.username.ngClick = 'linkoutUser(add_user.id)';
delete list.actions;
delete list.fieldActions;
return list;
}]
}
}];

View File

@ -30,7 +30,7 @@ export default
item: '=item'
},
require: '^multiSelectList',
template: '<input type="checkbox" data-multi-select-list-item ng-model="item.isSelected" ng-change="userInteractionSelect()">',
template: '<input type="checkbox" data-multi-select-list-item ng-model="item.isSelected" ng-click="userInteractionSelect()">',
link: function(scope, element, attrs, multiSelectList) {
scope.decoratedItem = multiSelectList.registerItem(scope.item);

View File

@ -7,9 +7,21 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
$scope.pageSize = pageSize;
function init() {
$scope.pageRange = calcPageRange($scope.current(), $scope.last());
$scope.dataRange = calcDataRange();
let updatePaginationVariables = function() {
$scope.current = calcCurrent();
$scope.last = calcLast();
$scope.pageRange = calcPageRange($scope.current, $scope.last);
$scope.dataRange = calcDataRange();
};
updatePaginationVariables();
$scope.$watch('collection', function(){
updatePaginationVariables();
});
}
$scope.dataCount = function() {
return $filter('number')($scope.dataset.count);
};
@ -48,22 +60,22 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
$scope.dataset = res.data;
$scope.collection = res.data.results;
});
$scope.pageRange = calcPageRange($scope.current(), $scope.last());
$scope.pageRange = calcPageRange($scope.current, $scope.last);
$scope.dataRange = calcDataRange();
};
$scope.current = function() {
function calcLast() {
return Math.ceil($scope.dataset.count / pageSize);
}
function calcCurrent() {
if($scope.querySet) {
return parseInt($scope.querySet.page || '1');
}
else {
return parseInt($stateParams[`${$scope.iterator}_search`].page || '1');
}
};
$scope.last = function() {
return Math.ceil($scope.dataset.count / pageSize);
};
}
function calcPageRange(current, last) {
let result = [],
@ -95,12 +107,12 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
}
function calcDataRange() {
if ($scope.current() === 1 && $scope.dataset.count < parseInt(pageSize)) {
if ($scope.current === 1 && $scope.dataset.count < parseInt(pageSize)) {
return `1 - ${$scope.dataset.count}`;
} else if ($scope.current() === 1) {
} else if ($scope.current === 1) {
return `1 - ${pageSize}`;
} else {
let floor = (($scope.current() - 1) * parseInt(pageSize)) + 1;
let floor = (($scope.current - 1) * parseInt(pageSize)) + 1;
let ceil = floor + parseInt(pageSize) < $scope.dataset.count ? floor + parseInt(pageSize) : $scope.dataset.count;
return `${floor} - ${ceil}`;
}

View File

@ -2,37 +2,37 @@
<div class="Paginate-wrapper" ng-hide="dataset.count < pageSize">
<ul class="Paginate-controls pagination">
<!-- first -->
<li class="Paginate-controls--first Paginate-controls--item" ng-hide="pageRange.length < 10 || {{current()}} === 1">
<li class="Paginate-controls--first Paginate-controls--item" ng-hide="pageRange.length < 10 || {{current}} === 1">
<a href ng-click="toPage(1)">
<i class="fa fa-angle-double-left"></i>
</a>
</li>
<!-- previous -->
<li class="Paginate-controls--previous Paginate-controls--item" ng-class="{disabled: current() === 1}">
<a href ng-click="toPage(current() - 1)">
<li class="Paginate-controls--previous Paginate-controls--item" ng-class="{disabled: current === 1}">
<a href ng-click="toPage(current - 1)">
<i class="fa fa-angle-left"></i>
</a>
</li>
<!-- range -->
<li class="Paginate-controls--item" ng-repeat="page in pageRange">
<a href ng-class="{'Paginate-controls--active': page === current()}" ng-click="toPage(page)">{{ page }}</a>
<a href ng-class="{'Paginate-controls--active': page === current}" ng-click="toPage(page)">{{ page }}</a>
</li>
<!-- next -->
<li class="Paginate-controls--next Paginate-controls--item" ng-hide="current() === last()">
<a href ng-click="toPage(current() + 1)">
<li class="Paginate-controls--next Paginate-controls--item" ng-hide="current === last">
<a href ng-click="toPage(current + 1)">
<i class="fa fa-angle-right"></i>
</a>
</li>
<!-- last -->
<li class="Paginate-controls--item Paginate-controls--last" ng-hide="(pageRange.length < 10 || current() === last())">
<a href id="last-page-set" ng-click="toPage(last())">
<li class="Paginate-controls--item Paginate-controls--last" ng-hide="(pageRange.length < 10 || current === last)">
<a href id="last-page-set" ng-click="toPage(last)">
<i class="fa fa-angle-double-right"></i>
</a>
</li>
</ul>
<span class="Paginate-pager--pageof" translate>Page
<span id="current-page">{{current()}}</span> of
<span id="total-pages">{{last()}}</span>
<span id="current-page">{{current}}</span> of
<span id="total-pages">{{last}}</span>
</span>
</div>
<div class="Paginate-total page-label" ng-hide="dataCount === 0">

View File

@ -148,9 +148,25 @@ export default ['$stateParams', '$scope', '$state', 'QuerySet', 'GetBasePath', '
// remove tag, merge new queryset, $state.go
$scope.remove = function(index) {
let tagToRemove = $scope.searchTags.splice(index, 1)[0];
let termParts = SmartSearchService.splitTermIntoParts(tagToRemove);
let removed;
let tagToRemove = $scope.searchTags.splice(index, 1)[0],
termParts = SmartSearchService.splitTermIntoParts(tagToRemove),
removed;
let removeFromQuerySet = function(set) {
_.each(removed, (value, key) => {
if (Array.isArray(set[key])){
_.remove(set[key], (item) => item === value);
// If the array is now empty, remove that key
if(set[key].length === 0) {
delete set[key];
}
}
else {
delete set[key];
}
});
};
if (termParts.length === 1) {
removed = setDefaults(tagToRemove);
}
@ -169,21 +185,16 @@ export default ['$stateParams', '$scope', '$state', 'QuerySet', 'GetBasePath', '
}
removed = qs.encodeParam(encodeParams);
}
_.each(removed, (value, key) => {
if (Array.isArray(queryset[key])){
_.remove(queryset[key], (item) => item === value);
// If the array is now empty, remove that key
if(queryset[key].length === 0) {
delete queryset[key];
}
}
else {
delete queryset[key];
}
});
removeFromQuerySet(queryset);
if(!$scope.querySet) {
$state.go('.', {
[$scope.iterator + '_search']: queryset }, {notify: false});
[$scope.iterator + '_search']: queryset }, {notify: false}).then(function(){
// ISSUE: for some reason deleting a tag from a list in a modal does not
// remove the param from $stateParams. Here we'll manually check to make sure
// that that happened and remove it if it didn't.
removeFromQuerySet($stateParams[`${$scope.iterator}_search`]);
});
}
qs.search(path, queryset).then((res) => {
if($scope.querySet) {
@ -243,7 +254,6 @@ export default ['$stateParams', '$scope', '$state', 'QuerySet', 'GetBasePath', '
}
});
params.page = '1';
queryset = _.merge(queryset, params, (objectValue, sourceValue, key, object) => {
if (object[key] && object[key] !== sourceValue){
if(_.isArray(object[key])) {
@ -262,12 +272,20 @@ export default ['$stateParams', '$scope', '$state', 'QuerySet', 'GetBasePath', '
return undefined;
}
});
// Go back to the first page after a new search
delete queryset.page;
// https://ui-router.github.io/docs/latest/interfaces/params.paramdeclaration.html#dynamic
// This transition will not reload controllers/resolves/views
// but will register new $stateParams[$scope.iterator + '_search'] terms
if(!$scope.querySet) {
$state.go('.', {
[$scope.iterator + '_search']: queryset }, {notify: false});
[$scope.iterator + '_search']: queryset }, {notify: false}).then(function(){
// ISSUE: same as above in $scope.remove. For some reason deleting the page
// from the queryset works for all lists except lists in modals.
delete $stateParams[$scope.iterator + '_search'].page;
});
}
qs.search(path, queryset).then((res) => {
if($scope.querySet) {