yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix user group filter + add UI for user states filter

Browse Source
This commit is contained in:
Mads Rasmussen
2017-06-26 15:00:32 +02:00
parent 493873a8d0
commit f309e3587b
3 changed files with 96 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/Umbraco.Web.UI.Client/src/common/services/usershelper.service.js
View File

@@ -3,23 +3,58 @@
function usersHelperService(localizationService) {
var userStates = [
{ "name": "All", "key": "All"} ,
{ "value": 0, "name": "Active", "key": "Active", "color": "success" },
{ "value": 1, "name": "Disabled", "key": "Disabled", "color": "danger" },
{ "value": 2, "name": "Locked out", "key": "LockedOut", "color": "danger" },
{ "value": 3, "name": "Invited", "key": "Invited", "color": "warning" }
];
function getUserStateFromValue(value) {
switch (value) {
case 0:
return { "name": "Active", "alias": "active", "color": "success" };
case 1:
return { "name": "Disabled", "alias": "disabled", "color": "danger" };
case 2:
return { "name": "Locked out", "alias": "lockedOut", "color": "danger" };
case 3:
return { "name": "Invited", "alias": "invited", "color": "warning" };
var foundUserState;
angular.forEach(userStates, function (userState) {
if(userState.value === value) {
foundUserState = userState;
}
});
return foundUserState;
}
function getUserStateByKey(key) {
var foundUserState;
angular.forEach(userStates, function (userState) {
if(userState.key === key) {
foundUserState = userState;
}
});
return foundUserState;
}
function getUserStatesFilter(userStatesObject) {
var userStatesFilter = [];
for (var key in userStatesObject) {
if (userStatesObject.hasOwnProperty(key)) {
var userState = getUserStateByKey(key);
if(userState) {
userState.count = userStatesObject[key];
userStatesFilter.push(userState);
}
}
}
return userStatesFilter;
}
////////////
var service = {
getUserStateFromValue: getUserStateFromValue
getUserStateFromValue: getUserStateFromValue,
getUserStateByKey: getUserStateByKey,
getUserStatesFilter: getUserStatesFilter
};
return service;

68
src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
View File

@@ -19,6 +19,7 @@
{ label: "Oldest", key: "CreateDate", direction: "Ascending" },
{ label: "Last login", key: "LastLoginDate", direction: "Descending" }
];
vm.userStatesFilter = [];
vm.newUser.userGroups = [];
vm.usersViewState = 'overview';
@@ -76,7 +77,9 @@
vm.selectAll = selectAll;
vm.areAllSelected = areAllSelected;
vm.searchUsers = searchUsers;
vm.getGroupFilterName = getGroupFilterName;
vm.getFilterName = getFilterName;
vm.setUserStatesFilter = setUserStatesFilter;
vm.setUserGroupFilter = setUserGroupFilter;
vm.setOrderByFilter = setOrderByFilter;
vm.changePageNumber = changePageNumber;
vm.createUser = createUser;
@@ -271,29 +274,40 @@
search();
}
function getGroupFilterName() {
var name = "";
function getFilterName(array) {
var name = "All";
var found = false;
angular.forEach(vm.usersOptions.filter, function(value, index){
angular.forEach(vm.userGroups, function(userGroup){
if(value === userGroup.alias) {
if(index === 0) {
name = userGroup.name;
} else {
name = name + ", " + userGroup.name;
}
angular.forEach(array, function (item) {
if (item.selected) {
if(!found) {
name = item.name
found = true;
} else {
name = name + ", " + item.name;
}
});
}
});
return name;
}
if(!found) {
name = "All";
function setUserStatesFilter(value) {
getUsers();
}
function setUserGroupFilter(userGroup) {
if(!vm.usersOptions.userGroups) {
vm.usersOptions.userGroups = [];
}
return name;
if(userGroup.selected) {
vm.usersOptions.userGroups.push(userGroup.alias);
} else {
var index = vm.usersOptions.userGroups.indexOf(userGroup.alias);
vm.usersOptions.userGroups.splice(index, 1);
}
getUsers();
}
function setOrderByFilter(value, direction) {
@@ -363,17 +377,18 @@
vm.loading = true;
// Get users
usersResource.getPagedResults(vm.usersOptions).then(function (users) {
usersResource.getPagedResults(vm.usersOptions).then(function (data) {
vm.users = users.items;
vm.users = data.items;
vm.usersOptions.pageNumber = users.pageNumber;
vm.usersOptions.pageSize = users.pageSize;
vm.usersOptions.totalItems = users.totalItems;
vm.usersOptions.totalPages = users.totalPages;
vm.usersOptions.pageNumber = data.pageNumber;
vm.usersOptions.pageSize = data.pageSize;
vm.usersOptions.totalItems = data.totalItems;
vm.usersOptions.totalPages = data.totalPages;
formatDates(vm.users);
setUserDisplayState(vm.users);
vm.userStatesFilter = usersHelper.getUserStatesFilter(data.userStates);
vm.loading = false;
@@ -411,15 +426,15 @@
return;
}
if(user.userDisplayState.alias === "disabled") {
if(user.userDisplayState.key === "Disabled") {
vm.allowDisableUser = false;
}
if(user.userDisplayState.alias === "active") {
if(user.userDisplayState.key === "Active") {
vm.allowEnableUser = false;
}
if(user.userDisplayState.alias === "invited") {
if(user.userDisplayState.key === "Invited") {
vm.allowEnableUser = false;
}
@@ -436,7 +451,6 @@
vm.page.createButtonState = "init";
}
init();
}

19
src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
View File

@@ -92,6 +92,7 @@
</umb-editor-sub-header>
<!-- Filters -->
<div style="margin-bottom: 20px;" class="flex items-center">
<div style="font-size: 16px;">
@@ -100,17 +101,17 @@
<div class="flex" style="margin-left: auto;">
<!-- Status filter -->
<div class="dropdown pull-right" ng-if="vm.userStates.length > 0">
<!-- State filter -->
<div class="dropdown pull-right" ng-if="vm.userStatesFilter.length > 0">
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.showStatusFilter = !vm.showStatusFilter">
<span>Status:</span>
<span class="bold" style="margin-left: 5px; margin-right: 3px;">All</span>
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
<span class="caret"></span>
</a>
<ul ng-if="vm.showStatusFilter" on-outside-click="vm.showStatusFilter = false;" class="dropdown-menu db" role="menu" aria-labelledby="dropdownMenu">
<li ng-repeat="userState in vm.userStates" style="padding: 5px 10px;">
<li ng-repeat="userState in vm.userStatesFilter" style="padding: 5px 10px;">
<div class="flex items-center">
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" />
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" ng-model="userState.selected" ng-change="vm.setUserStatesFilter(userState.key)" />
{{ userState.name }} ({{userState.count}})
</div>
</li>
@@ -121,13 +122,13 @@
<div class="dropdown pull-right">
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.showGroupFilter = !vm.showGroupFilter">
<span><localize key="general_groups"></localize>:</span>
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getGroupFilterName() }}</span>
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userGroups) }}</span>
<span class="caret"></span>
</a>
<ul ng-if="vm.showGroupFilter" on-outside-click="vm.showGroupFilter = false;" class="dropdown-menu db" role="menu" aria-labelledby="dropdownMenu">
<li ng-repeat="userGroup in vm.userGroups" style="padding: 5px 10px;">
<div class="flex items-center">
<input checklist-model="vm.usersOptions.filter" checklist-value="userGroup.alias" style="margin-right: 7px; margin-top: 2px;" type="checkbox" />
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" ng-model="userGroup.selected" ng-change="vm.setUserGroupFilter(userGroup)" />
{{ userGroup.name }}
</div>
</li>
@@ -164,7 +165,7 @@
<div class="umb-user-card__content" ng-class="{'umb-user-card__content--selected': user.selected}">
<umb-badge class="umb-user-card__badge"
size="xs"
ng-if="user.userDisplayState.alias !== 'active'"
ng-if="user.userDisplayState.key !== 'Active'"
color="{{user.userDisplayState.color}}">
{{ user.userDisplayState.name }}
</umb-badge>
@@ -237,7 +238,7 @@
<td>{{ user.formattedLastLogin }}</td>
<td style="text-transform: capitalize;">
<umb-badge size="xs"
ng-if="user.userDisplayState.alias !== 'active'"
ng-if="user.userDisplayState.key !== 'Active'"
color="{{user.userDisplayState.color}}">
{{ user.userDisplayState.name }}
</umb-badge>