From 8d2a9d1d8185aa369cd6cea01fcb7d804965daa6 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 30 Jun 2017 13:33:59 +0200 Subject: [PATCH] fixes: U4-10060 Make UI for user groups overview --- .../common/resources/usergroups.resource.js | 112 +++++++++--------- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../src/less/components/umb-list.less | 25 ++++ .../src/less/components/users/umb-user.less | 2 +- .../users/views/groups/groups.controller.js | 26 +++- .../src/views/users/views/groups/groups.html | 27 +++-- 6 files changed, 122 insertions(+), 71 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-list.less diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/usergroups.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/usergroups.resource.js index f5b9e3e6d7..fad2820f56 100644 --- a/src/Umbraco.Web.UI.Client/src/common/resources/usergroups.resource.js +++ b/src/Umbraco.Web.UI.Client/src/common/resources/usergroups.resource.js @@ -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); })(); diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 45afc9a3f6..fe5ab704da 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -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"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-list.less new file mode 100644 index 0000000000..be63bb3a9c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-list.less @@ -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; +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less index 351414b0d7..22ca2498d3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less @@ -34,4 +34,4 @@ .test-group-content { padding: 20px; -} +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js index 7a647b9e27..862393968b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js @@ -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(); diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html index 4aef5a2458..9c3c84d520 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html @@ -17,10 +17,9 @@ + size="xs"> @@ -31,19 +30,31 @@ + action="vm.deleteUserGroup()" + size="xs"> -
- -
{{userGroup.name}}
- Edit +
+ +
+
+ +
+
+ + +
\ No newline at end of file