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

fixes: U4-10060 Make UI for user groups overview

Browse Source
This commit is contained in:
Mads Rasmussen
2017-06-30 13:33:59 +02:00
parent 2aaf104856
commit 8d2a9d1d81
6 changed files with 122 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/common/resources/usergroups.resource.js
+56 -56
View File
@@ -7,69 +7,69 @@
* Used by the users section to get users and send requests to create, invite, delete, etc. users.
*/
(function () {
'use strict';
'use strict';
function userGroupsResource($http, umbRequestHelper, $q, umbDataFormatter) {
function getUserGroupScaffold() {
function userGroupsResource($http, umbRequestHelper, $q, umbDataFormatter) {
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"userGroupsApiBaseUrl",
"GetEmptyUserGroup")),
'Failed to get the user group scaffold');
}
function saveUserGroup(userGroup, isNew) {
if (!userGroup) {
throw "userGroup not specified";
}
function getUserGroupScaffold() {
//need to convert the user data into the correctly formatted save data - it is *not* the same and we don't want to over-post
var formattedSaveData = umbDataFormatter.formatUserGroupPostData(userGroup, "save" + (isNew ? "New" : ""));
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"userGroupsApiBaseUrl",
"GetEmptyUserGroup")),
'Failed to get the user group scaffold');
}
return umbRequestHelper.resourcePromise(
$http.post(
umbRequestHelper.getApiUrl(
"userGroupsApiBaseUrl",
"PostSaveUserGroup"),
formattedSaveData),
"Failed to save user group");
}
function saveUserGroup(userGroup, isNew) {
if (!userGroup) {
throw "userGroup not specified";
}
function getUserGroup(id) {
//need to convert the user data into the correctly formatted save data - it is *not* the same and we don't want to over-post
var formattedSaveData = umbDataFormatter.formatUserGroupPostData(userGroup, "save" + (isNew ? "New" : ""));
return umbRequestHelper.resourcePromise(
$http.post(
umbRequestHelper.getApiUrl(
"userGroupsApiBaseUrl",
"PostSaveUserGroup"),
formattedSaveData),
"Failed to save user group");
}
function getUserGroup(id) {
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"userGroupsApiBaseUrl",
"GetUserGroup",
{ id: id })),
"Failed to retrieve data for user group " + id);
}
function getUserGroups() {
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"userGroupsApiBaseUrl",
"GetUserGroups")),
"Failed to retrieve user groups");
}
var resource = {
saveUserGroup: saveUserGroup,
getUserGroup: getUserGroup,
getUserGroups: getUserGroups,
getUserGroupScaffold: getUserGroupScaffold
};
return resource;
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"userGroupsApiBaseUrl",
"GetUserGroup",
{ id: id })),
"Failed to retrieve data for user group " + id);
}
function getUserGroups() {
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"userGroupsApiBaseUrl",
"GetUserGroups")),
"Failed to retrieve user groups");
}
var resource = {
saveUserGroup: saveUserGroup,
getUserGroup: getUserGroup,
getUserGroups: getUserGroups,
getUserGroupScaffold: getUserGroupScaffold
};
return resource;
}
angular.module('umbraco.resources').factory('userGroupsResource', userGroupsResource);
angular.module('umbraco.resources').factory('userGroupsResource', userGroupsResource);
})();
src/Umbraco.Web.UI.Client/src/less/belle.less
+1
View File
@@ -123,6 +123,7 @@
@import "components/umb-badge.less";
@import "components/umb-nested-content.less";
@import "components/umb-checkmark.less";
@import "components/umb-list.less";
@import "components/buttons/umb-button.less";
@import "components/buttons/umb-button-group.less";
src/Umbraco.Web.UI.Client/src/less/components/umb-list.less
+25
View File
@@ -0,0 +1,25 @@
.umb-list-item {
border-bottom: 1px solid @gray-9;
padding-top: 15px;
padding-bottom: 15px;
display: flex;
}
a.umb-list-item:hover,
a.umb-list-item:focus {
text-decoration: none;
}
.umb-list-item:hover .umb-list-checkbox,
.umb-list-item--selected .umb-list-checkbox {
opacity: 1;
}
.umb-list-checkbox {
position: absolute;
opacity: 0;
}
.umb-list-checkbox--visible {
opacity: 1;
}
src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less
+1 -1
View File
@@ -34,4 +34,4 @@
.test-group-content {
padding: 20px;
}
}
src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js
+20 -6
View File
@@ -9,7 +9,7 @@
vm.selection = [];
vm.createUserGroup = createUserGroup;
vm.goToUserGroup = goToUserGroup;
vm.clickUserGroup = clickUserGroup;
vm.clearSelection = clearSelection;
vm.selectUserGroup = selectUserGroup;
@@ -32,8 +32,17 @@
$location.path('users/users/group/-1').search("create", "true");;
}
function selectUserGroup(userGroup, selection) {
if(userGroup.selected) {
function clickUserGroup(userGroup) {
if (vm.selection.length > 0) {
selectUserGroup(userGroup, vm.selection);
} else {
goToUserGroup(userGroup.id);
}
}
function selectUserGroup(userGroup, selection, event) {
if (userGroup.selected) {
var index = selection.indexOf(userGroup.id);
selection.splice(index, 1);
userGroup.selected = false;
@@ -41,17 +50,22 @@
userGroup.selected = true;
vm.selection.push(userGroup.id);
}
if(event){
event.preventDefault();
event.stopPropagation();
}
}
function clearSelection() {
angular.forEach(vm.userGroups, function(userGroup){
angular.forEach(vm.userGroups, function (userGroup) {
userGroup.selected = false;
});
vm.selection = [];
}
function goToUserGroup(userGroup) {
$location.path('users/users/group/' + userGroup.id).search("create", null);
function goToUserGroup(userGroupId) {
$location.path('users/users/group/' + userGroupId).search("create", null);
}
onInit();
src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html
+19 -8
View File
@@ -17,10 +17,9 @@
<umb-editor-sub-header-section>
<umb-button
type="button"
label="Clear selection"
label-key="buttons_clearSelection"
action="vm.clearSelection()"
disabled="actionInProgress">
size="xs">
</umb-button>
</umb-editor-sub-header-section>
<umb-editor-sub-header-section>
@@ -31,19 +30,31 @@
<umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
<umb-button
type="button"
button-style="link"
label="Delete"
icon="icon-trash"
action="vm.deleteUserGroup()">
action="vm.deleteUserGroup()"
size="xs">
</umb-button>
</umb-editor-sub-header-content-right>
</umb-editor-sub-header>
<div ng-repeat="userGroup in vm.userGroups" class="flex items-center" ng-click="vm.selectUserGroup(userGroup, vm.selection)">
<i class="{{userGroup.icon}}"></i>
<div class="bold" style="margin-right: 5px;">{{userGroup.name}}</div>
<a href="" ng-click="vm.goToUserGroup(userGroup)">Edit</a>
<div class="umb-list">
<a class="umb-list-item" ng-click="vm.clickUserGroup(group)" ng-class="{'umb-list-item--selected': group.selected}" href="" ng-repeat="group in vm.userGroups">
<div style="margin-right: 25px;">
<div class="umb-list-checkbox" ng-class="{'umb-list-checkbox--visible': vm.selection.length > 0}" ng-click="vm.selectUserGroup(group, vm.selection, $event)" >
<umb-checkmark checked="group.selected"></umb-checkmark>
</div>
</div>
<umb-user-group-preview
style="border-bottom: none; margin-bottom: 0; padding: 0;"
icon="group.icon"
name="group.name"
sections="group.sections"
content-start-nodes="group.startNodesContent"
media-start-nodes="group.startNodesMedia">
</umb-user-group-preview>
</a>
</div>
</div>