Skip to content

search and sorting for roles and groups #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 18, 2017
Merged

search and sorting for roles and groups #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69fe712
challenge #30058339 - 48H ADMIN APP - SEARCH AND SORTING ON ROLES AND…
maxceem Jul 17, 2017
def52ba
Merge pull request #10 from maxceem/search-sorting
huangqun Jul 17, 2017
aae8074
Merge pull request #11 from huangqun/search-sorting
huangqun Jul 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
370 changes: 363 additions & 7 deletions src/app/groupmembers/groupmembers.list.controller.js
View file
Open in desktop

Large diffs are not rendered by default.

190 changes: 132 additions & 58 deletions src/app/groupmembers/groupmembers.list.html
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 18 additions & 4 deletions src/app/groups/groups.list.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
var module = angular.module('supportAdminApp');

module.controller('permissionmanagement.GroupsListController', [
'$scope', '$rootScope', 'GroupService', 'UserService', 'IdResolverService', 'Alert',
function ($scope, $rootScope, GroupService, UserService, IdResolverService, $alert) {
'$scope', '$rootScope', 'GroupService', 'UserService', 'IdResolverService', 'Alert', '$timeout',
function ($scope, $rootScope, GroupService, UserService, IdResolverService, $alert, $timeout) {

// true data is loading
$scope.isLoading = false;
Expand All @@ -27,14 +27,28 @@ module.controller('permissionmanagement.GroupsListController', [
$scope.groups.forEach(function(group) {
loadUser(group.createdBy);
loadUser(group.modifiedBy);
})
});
if ($scope.groups.length) {
// make sure changes to scope are applied
// and redraw footable table with current group list
$timeout(function() {
$('.footable').trigger('footable_redraw');
$scope.isLoading = false;
});
} else {
$scope.isLoading = false;
}
}).catch(function (error) {
$alert.error(error.error, $rootScope);
}).finally(function() {
$scope.isLoading = false;
});
};

// init footable plugin
angular.element(document).ready(function() {
$('.footable').footable();
});

// load the groups on controller init
$scope.fetch();
}
Expand Down
16 changes: 12 additions & 4 deletions src/app/groups/groups.list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<img src="assets/images/loading.gif" />
</div>
<div ng-show="!isLoading">
<table class="table table-stripped" ng-show="groups.length">
<table class="footable table table-stripped toggle-arrow-tiny" ng-show="groups.length" data-page-size="50">
<thead>
<tr>
<th>Group ID</th>
<th data-type="numeric">Group ID</th>
<th>Name</th>
<th>Description</th>
<th>Created by</th>
Expand All @@ -33,15 +33,23 @@
<span ng-if="users[group.createdBy]">{{users[group.createdBy]}}</span>
<span class="text-info" ng-if="group.createdBy && !users[group.createdBy]">loading...</span>
</td>
<td>{{group.createdAt | date:'MMM dd, yyyy'}}</td>
<td>{{group.createdAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{group.createdAt ? 'EDT' : ''}}</td>
<td>
<span ng-if="users[group.modifiedBy]">{{users[group.modifiedBy]}}</span>
<span class="text-info" ng-if="group.modifiedBy && !users[group.modifiedBy]">loading...</span>
</td>
<td>{{group.modifiedAt | date:'MMM dd, yyyy'}}</td>
<td>{{group.modifiedAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{group.modifiedAt ? 'EDT' : ''}}</td>
</tr>
</tbody>

<tfoot>
<tr>
<td colspan="7">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>

</table>
<div ng-show="!groups.length">No records found</div>
</div>
Expand Down
104 changes: 102 additions & 2 deletions src/app/rolemembers/rolemembers.list.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
var module = angular.module('supportAdminApp');

module.controller('permissionmanagement.RoleMembersListController', [
'$scope', '$rootScope', 'RoleService', 'IdResolverService', '$stateParams', '$state', '$q', 'Alert', '$timeout',
function ($scope, $rootScope, RoleService, IdResolverService, $stateParams, $state, $q, $alert, $timeout) {
'$scope', '$rootScope', 'RoleService', 'IdResolverService', 'UserService', '$animate', '$stateParams', '$state', '$q', 'Alert', '$timeout',
function ($scope, $rootScope, RoleService, IdResolverService, UserService, $animate, $stateParams, $state, $q, $alert, $timeout) {

// true if role is loading
$scope.isLoading = false;
Expand All @@ -31,6 +31,15 @@ module.controller('permissionmanagement.RoleMembersListController', [
$scope.users = {};
var loadUser = IdResolverService.getUserResolverFunction($scope.users);

// keep list of all members for client side filtering
var allMembers = [];

// criteria to filter members
$scope.filterCriteria = {
userId: '',
userHandle: ''
};

/**
* Return members which are selected in the table by checkboxes
*
Expand Down Expand Up @@ -58,6 +67,8 @@ module.controller('permissionmanagement.RoleMembersListController', [
id: memberId
}
});
// save all members list for filtering
allMembers = _.clone($scope.members);
// if have some members we will redraw table using footable plugin
if ($scope.members.length) {
// make sure changes to scope are applied
Expand Down Expand Up @@ -102,6 +113,7 @@ module.controller('permissionmanagement.RoleMembersListController', [
member.isRemoving = true;
return RoleService.unassignRole($stateParams.roleId, member.id).then(function() {
_.remove($scope.members, { id: member.id });
_.remove(allMembers, { id: member.id });
// we remove row of deleted member from footable table
// which will also triggers footable table redraw
// we don't worry to call it after $scope.members is updated so we don't use $timeout here
Expand Down Expand Up @@ -140,6 +152,93 @@ module.controller('permissionmanagement.RoleMembersListController', [
});
}

/**
* Helper function which redraws table with new member list
* and properly takes care about updating footable plugin
*
* The essential problem this function is solving is that after we
* update $scope.members, rows from the table are not being deleted immediately
* because we are using animations for rows.
* That's why if we try to force update footable plugin it still find old rows which are in
* process of animation and still in DOM tree.
* As a workaround in this function we disable animations for rows before updating them,
* thus footable plugin can see changes immediately after scope is updated.
*
* @param {Array} members new array of members which has to displayed
* @param {Function} callback optional callback after table is fully redrawn
*
* @return {Promise} resolved after table was completely updated
*/
function redrawTableWithMembers(members) {
var $footable = $('.footable');

// disable animations for rows, so old rows will be removed immediately
// from the DOM tree and footable can see changes
$footable.find('tr').each(function(index, el) {
$animate.enabled(el, false);
});

// update members list in scope
$scope.members = members;

// make sure that changes are applied to the scope
return $timeout(function() {
// force footable plugin to redraw
$footable.trigger('footable_redraw');
// enable animation for table rows again
$footable.find('tr').each(function(index, el) {
$animate.enabled(el, true);
});
});
}

/**
* Applies filter to the member list
*/
$scope.applyFilter = function() {
var filteredMembers = _.clone(allMembers);

// filter by ids first, it works immediately as we know all the data
// so we don't need to show loader for this
if ($scope.filterCriteria.userId) {
filteredMembers = _.filter(filteredMembers, { id: $scope.filterCriteria.userId });
}

// if handle filter is defined and we still have some rows to filter
if ($scope.filterCriteria.userHandle && filteredMembers.length > 0) {
// we show loader as we need to make request to the server
$scope.isLoading = true;

// As there is no server API to filter role members and we don't have
// user handles to filter, we first have to find user ids by it's handle
// and after we can filter users by id
UserService.find({
fields: 'id',
filter: 'handle=*' + $scope.filterCriteria.userHandle + '*&like=true',
limit: 1000000 // set big limit to make sure server returns all records
}).then(function(users) {
var foundIds = _.map(users, 'id');

filteredMembers = _.filter(filteredMembers, function(member) {
return _.includes(foundIds, member.id);
});

redrawTableWithMembers(filteredMembers).then(function() {
$scope.isLoading = false;
});
}).catch(function(error) {
// is any error occurs show it and leave table untouched
$scope.isLoading = false;
$alert.error(error.error, $rootScope);
});

// if we don't filter by handle which makes server request
// redraw table immediately
} else {
redrawTableWithMembers(filteredMembers);
}
}

/**
* Uncheck all checkboxes
*/
Expand Down Expand Up @@ -174,6 +273,7 @@ module.controller('permissionmanagement.RoleMembersListController', [
}
}

// init footable plugin
angular.element(document).ready(function() {
$('.footable').on({
// we watch footable jquery plugin footable_page_filled event
Expand Down
33 changes: 29 additions & 4 deletions src/app/rolemembers/rolemembers.list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,35 @@
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h2>
<span ng-if="role">{{role.roleName}}</span>
<span class="text-info" ng-if="!role">loading...</span>
</h2>
<div class="row">
<div class="col col-md-12 col-lg-12">
<h2>
<span ng-if="role">{{role.roleName}}</span>
<span class="text-info" ng-if="!role">loading...</span>
</h2>
</div>
</div>
<div class="row" style="border-top: 1px solid #e7eaec; padding-top: 15px; padding-bottom: 8px; margin-top: 7px;">
<div class="col col-md-12 col-lg-12">
<form role="form" name="filterForm" novalidate="novalidate">
<div class="row">
<div class="form-group col-md-6">
<label for="userId">User Id</label>
<input id="userId" type="text" class="form-control" ng-model="filterCriteria.userId" name="userId" ng-disabled="isLoading">
</div>
<div class="form-group col-md-6">
<label for="userHandle">User Handle</label>
<input id="userHandle" type="text" class="form-control" ng-model="filterCriteria.userHandle" name="userHandle" ng-disabled="isLoading">
</div>
</div>
<div class="row">
<div class="col col-md-12 col-lg-12">
<button class="btn btn-primary btn-sm pull-right" ng-click="applyFilter();" ng-disabled="isLoading">Filter</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="ibox-content">
<div class="text-center" ng-show="isLoading">
Expand Down
4 changes: 2 additions & 2 deletions src/app/roles/roles.list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
ng-if="role.createdBy && !ctrl.users[role.createdBy]"
>loading...</span>
</td>
<td>{{role.createdAt | date : 'MM dd yyyy HH:mm' : 'EDT'}} {{role.createdAt ? 'EDT' : ''}}</td>
<td>{{role.createdAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{role.createdAt ? 'EDT' : ''}}</td>
<td>
<span ng-if="ctrl.users[role.modifiedBy]">
{{ctrl.users[role.modifiedBy]}}
Expand All @@ -104,7 +104,7 @@
ng-if="role.modifiedBy && !ctrl.users[role.modifiedBy]"
>loading...</span>
</td>
<td>{{role.modifiedAt | date : 'MM dd yyyy HH:mm' : 'EDT'}} {{role.modifiedAt ? 'EDT' : ''}}</td>
<td>{{role.modifiedAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{role.modifiedAt ? 'EDT' : ''}}</td>
</tr>
</tbody>

Expand Down
8 changes: 5 additions & 3 deletions src/app/users/users.service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,14 @@ angular.module('supportAdminApp')
var query = "";
angular.forEach({
"fields": opts.fields || "id,handle,email,active,emailActive,status,credential,firstName,lastName,createdAt,modifiedAt",
"filter": opts.filter
//"limit" : null,
"filter": opts.filter,
"limit" : opts.limit,
//"offset": null,
//"orderBy": null,
}, function(value, key) {
query += ('&' + key + '=' + encodeURIComponent(value));
if (value) {
query += ('&' + key + '=' + encodeURIComponent(value));
}
});

var request = $http({
Expand Down