Skip to content

Commit 7540016

Browse files
ajeftsajefts
authored
Merge pull request #84 from huangqun/dev
search and sorting for roles and groups
2 parents 5906e21 + aae8074 commit 7540016

File tree

8 files changed

+663
-84
lines changed

8 files changed

+663
-84
lines changed

‎src/app/groupmembers/groupmembers.list.controller.js‎

Lines changed: 363 additions & 7 deletions
Large diffs are not rendered by default.

‎src/app/groupmembers/groupmembers.list.html‎

Lines changed: 132 additions & 58 deletions
Large diffs are not rendered by default.

‎src/app/groups/groups.list.controller.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
var module = angular.module('supportAdminApp');
44

55
module.controller('permissionmanagement.GroupsListController', [
6-
'$scope', '$rootScope', 'GroupService', 'UserService', 'IdResolverService', 'Alert',
7-
function ($scope, $rootScope, GroupService, UserService, IdResolverService, $alert) {
6+
'$scope', '$rootScope', 'GroupService', 'UserService', 'IdResolverService', 'Alert', '$timeout',
7+
function ($scope, $rootScope, GroupService, UserService, IdResolverService, $alert, $timeout) {
88

99
// true data is loading
1010
$scope.isLoading = false;
@@ -27,14 +27,28 @@ module.controller('permissionmanagement.GroupsListController', [
2727
$scope.groups.forEach(function(group) {
2828
loadUser(group.createdBy);
2929
loadUser(group.modifiedBy);
30-
})
30+
});
31+
if ($scope.groups.length) {
32+
// make sure changes to scope are applied
33+
// and redraw footable table with current group list
34+
$timeout(function() {
35+
$('.footable').trigger('footable_redraw');
36+
$scope.isLoading = false;
37+
});
38+
} else {
39+
$scope.isLoading = false;
40+
}
3141
}).catch(function (error) {
3242
$alert.error(error.error, $rootScope);
33-
}).finally(function() {
3443
$scope.isLoading = false;
3544
});
3645
};
3746

47+
// init footable plugin
48+
angular.element(document).ready(function() {
49+
$('.footable').footable();
50+
});
51+
3852
// load the groups on controller init
3953
$scope.fetch();
4054
}

‎src/app/groups/groups.list.html‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<img src="assets/images/loading.gif" />
88
</div>
99
<div ng-show="!isLoading">
10-
<table class="table table-stripped" ng-show="groups.length">
10+
<table class="footable table table-stripped toggle-arrow-tiny" ng-show="groups.length" data-page-size="50">
1111
<thead>
1212
<tr>
13-
<th>Group ID</th>
13+
<th data-type="numeric">Group ID</th>
1414
<th>Name</th>
1515
<th>Description</th>
1616
<th>Created by</th>
@@ -33,15 +33,23 @@
3333
<span ng-if="users[group.createdBy]">{{users[group.createdBy]}}</span>
3434
<span class="text-info" ng-if="group.createdBy && !users[group.createdBy]">loading...</span>
3535
</td>
36-
<td>{{group.createdAt | date:'MMM dd, yyyy'}}</td>
36+
<td>{{group.createdAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{group.createdAt ? 'EDT' : ''}}</td>
3737
<td>
3838
<span ng-if="users[group.modifiedBy]">{{users[group.modifiedBy]}}</span>
3939
<span class="text-info" ng-if="group.modifiedBy && !users[group.modifiedBy]">loading...</span>
4040
</td>
41-
<td>{{group.modifiedAt | date:'MMM dd, yyyy'}}</td>
41+
<td>{{group.modifiedAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{group.modifiedAt ? 'EDT' : ''}}</td>
4242
</tr>
4343
</tbody>
4444

45+
<tfoot>
46+
<tr>
47+
<td colspan="7">
48+
<ul class="pagination pull-right"></ul>
49+
</td>
50+
</tr>
51+
</tfoot>
52+
4553
</table>
4654
<div ng-show="!groups.length">No records found</div>
4755
</div>

‎src/app/rolemembers/rolemembers.list.controller.js‎

Lines changed: 102 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
var module = angular.module('supportAdminApp');
44

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

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

34+
// keep list of all members for client side filtering
35+
var allMembers = [];
36+
37+
// criteria to filter members
38+
$scope.filterCriteria = {
39+
userId: '',
40+
userHandle: ''
41+
};
42+
3443
/**
3544
* Return members which are selected in the table by checkboxes
3645
*
@@ -58,6 +67,8 @@ module.controller('permissionmanagement.RoleMembersListController', [
5867
id: memberId
5968
}
6069
});
70+
// save all members list for filtering
71+
allMembers = _.clone($scope.members);
6172
// if have some members we will redraw table using footable plugin
6273
if ($scope.members.length) {
6374
// make sure changes to scope are applied
@@ -102,6 +113,7 @@ module.controller('permissionmanagement.RoleMembersListController', [
102113
member.isRemoving = true;
103114
return RoleService.unassignRole($stateParams.roleId, member.id).then(function() {
104115
_.remove($scope.members, { id: member.id });
116+
_.remove(allMembers, { id: member.id });
105117
// we remove row of deleted member from footable table
106118
// which will also triggers footable table redraw
107119
// we don't worry to call it after $scope.members is updated so we don't use $timeout here
@@ -140,6 +152,93 @@ module.controller('permissionmanagement.RoleMembersListController', [
140152
});
141153
}
142154

155+
/**
156+
* Helper function which redraws table with new member list
157+
* and properly takes care about updating footable plugin
158+
*
159+
* The essential problem this function is solving is that after we
160+
* update $scope.members, rows from the table are not being deleted immediately
161+
* because we are using animations for rows.
162+
* That's why if we try to force update footable plugin it still find old rows which are in
163+
* process of animation and still in DOM tree.
164+
* As a workaround in this function we disable animations for rows before updating them,
165+
* thus footable plugin can see changes immediately after scope is updated.
166+
*
167+
* @param {Array} members new array of members which has to displayed
168+
* @param {Function} callback optional callback after table is fully redrawn
169+
*
170+
* @return {Promise} resolved after table was completely updated
171+
*/
172+
function redrawTableWithMembers(members) {
173+
var $footable = $('.footable');
174+
175+
// disable animations for rows, so old rows will be removed immediately
176+
// from the DOM tree and footable can see changes
177+
$footable.find('tr').each(function(index, el) {
178+
$animate.enabled(el, false);
179+
});
180+
181+
// update members list in scope
182+
$scope.members = members;
183+
184+
// make sure that changes are applied to the scope
185+
return $timeout(function() {
186+
// force footable plugin to redraw
187+
$footable.trigger('footable_redraw');
188+
// enable animation for table rows again
189+
$footable.find('tr').each(function(index, el) {
190+
$animate.enabled(el, true);
191+
});
192+
});
193+
}
194+
195+
/**
196+
* Applies filter to the member list
197+
*/
198+
$scope.applyFilter = function() {
199+
var filteredMembers = _.clone(allMembers);
200+
201+
// filter by ids first, it works immediately as we know all the data
202+
// so we don't need to show loader for this
203+
if ($scope.filterCriteria.userId) {
204+
filteredMembers = _.filter(filteredMembers, { id: $scope.filterCriteria.userId });
205+
}
206+
207+
// if handle filter is defined and we still have some rows to filter
208+
if ($scope.filterCriteria.userHandle && filteredMembers.length > 0) {
209+
// we show loader as we need to make request to the server
210+
$scope.isLoading = true;
211+
212+
// As there is no server API to filter role members and we don't have
213+
// user handles to filter, we first have to find user ids by it's handle
214+
// and after we can filter users by id
215+
UserService.find({
216+
fields: 'id',
217+
filter: 'handle=*' + $scope.filterCriteria.userHandle + '*&like=true',
218+
limit: 1000000 // set big limit to make sure server returns all records
219+
}).then(function(users) {
220+
var foundIds = _.map(users, 'id');
221+
222+
filteredMembers = _.filter(filteredMembers, function(member) {
223+
return _.includes(foundIds, member.id);
224+
});
225+
226+
redrawTableWithMembers(filteredMembers).then(function() {
227+
$scope.isLoading = false;
228+
});
229+
}).catch(function(error) {
230+
// is any error occurs show it and leave table untouched
231+
$scope.isLoading = false;
232+
$alert.error(error.error, $rootScope);
233+
});
234+
235+
// if we don't filter by handle which makes server request
236+
// redraw table immediately
237+
} else {
238+
redrawTableWithMembers(filteredMembers);
239+
}
240+
}
241+
143242
/**
144243
* Uncheck all checkboxes
145244
*/
@@ -174,6 +273,7 @@ module.controller('permissionmanagement.RoleMembersListController', [
174273
}
175274
}
176275

276+
// init footable plugin
177277
angular.element(document).ready(function() {
178278
$('.footable').on({
179279
// we watch footable jquery plugin footable_page_filled event

‎src/app/rolemembers/rolemembers.list.html‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,35 @@
1515
<div class="col-lg-12">
1616
<div class="ibox float-e-margins">
1717
<div class="ibox-title">
18-
<h2>
19-
<span ng-if="role">{{role.roleName}}</span>
20-
<span class="text-info" ng-if="!role">loading...</span>
21-
</h2>
18+
<div class="row">
19+
<div class="col col-md-12 col-lg-12">
20+
<h2>
21+
<span ng-if="role">{{role.roleName}}</span>
22+
<span class="text-info" ng-if="!role">loading...</span>
23+
</h2>
24+
</div>
25+
</div>
26+
<div class="row" style="border-top: 1px solid #e7eaec; padding-top: 15px; padding-bottom: 8px; margin-top: 7px;">
27+
<div class="col col-md-12 col-lg-12">
28+
<form role="form" name="filterForm" novalidate="novalidate">
29+
<div class="row">
30+
<div class="form-group col-md-6">
31+
<label for="userId">User Id</label>
32+
<input id="userId" type="text" class="form-control" ng-model="filterCriteria.userId" name="userId" ng-disabled="isLoading">
33+
</div>
34+
<div class="form-group col-md-6">
35+
<label for="userHandle">User Handle</label>
36+
<input id="userHandle" type="text" class="form-control" ng-model="filterCriteria.userHandle" name="userHandle" ng-disabled="isLoading">
37+
</div>
38+
</div>
39+
<div class="row">
40+
<div class="col col-md-12 col-lg-12">
41+
<button class="btn btn-primary btn-sm pull-right" ng-click="applyFilter();" ng-disabled="isLoading">Filter</button>
42+
</div>
43+
</div>
44+
</form>
45+
</div>
46+
</div>
2247
</div>
2348
<div class="ibox-content">
2449
<div class="text-center" ng-show="isLoading">

‎src/app/roles/roles.list.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
ng-if="role.createdBy && !ctrl.users[role.createdBy]"
9595
>loading...</span>
9696
</td>
97-
<td>{{role.createdAt | date : 'MM dd yyyy HH:mm' : 'EDT'}} {{role.createdAt ? 'EDT' : ''}}</td>
97+
<td>{{role.createdAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{role.createdAt ? 'EDT' : ''}}</td>
9898
<td>
9999
<span ng-if="ctrl.users[role.modifiedBy]">
100100
{{ctrl.users[role.modifiedBy]}}
@@ -104,7 +104,7 @@
104104
ng-if="role.modifiedBy && !ctrl.users[role.modifiedBy]"
105105
>loading...</span>
106106
</td>
107-
<td>{{role.modifiedAt | date : 'MM dd yyyy HH:mm' : 'EDT'}} {{role.modifiedAt ? 'EDT' : ''}}</td>
107+
<td>{{role.modifiedAt | date : 'yyyy-MM-dd HH:mm' : 'EDT'}} {{role.modifiedAt ? 'EDT' : ''}}</td>
108108
</tr>
109109
</tbody>
110110

‎src/app/users/users.service.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,14 @@ angular.module('supportAdminApp')
5454
var query = "";
5555
angular.forEach({
5656
"fields": opts.fields || "id,handle,email,active,emailActive,status,credential,firstName,lastName,createdAt,modifiedAt",
57-
"filter": opts.filter
58-
//"limit" : null,
57+
"filter": opts.filter,
58+
"limit" : opts.limit,
5959
//"offset": null,
6060
//"orderBy": null,
6161
}, function(value, key) {
62-
query += ('&' + key + '=' + encodeURIComponent(value));
62+
if (value) {
63+
query += ('&' + key + '=' + encodeURIComponent(value));
64+
}
6365
});
6466

6567
var request = $http({

0 commit comments

Comments
 (0)