fixes: U4-10060 Make UI for user groups overview

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.get(
-          umbRequestHelper.getApiUrl(
-            "userGroupsApiBaseUrl",
-            "GetUserGroup",
-            { id: id })),
-        "Failed to retrieve data for user group " + id);
-
-    }
+            return umbRequestHelper.resourcePromise(
+                $http.post(
+                    umbRequestHelper.getApiUrl(
+                        "userGroupsApiBaseUrl",
+                        "PostSaveUserGroup"),
+                    formattedSaveData),
+                "Failed to save user group");
+        }
 
-    function getUserGroups() {
-      return umbRequestHelper.resourcePromise(
-        $http.get(
-          umbRequestHelper.getApiUrl(
-            "userGroupsApiBaseUrl",
-            "GetUserGroups")),
-        "Failed to retrieve user groups");
-    }
+        function getUserGroup(id) {
+
+            return umbRequestHelper.resourcePromise(
+                $http.get(
+                    umbRequestHelper.getApiUrl(
+                        "userGroupsApiBaseUrl",
+                        "GetUserGroup",
+                        { id: id })),
+                "Failed to retrieve data for user group " + id);
 
-    var resource = {
-      saveUserGroup: saveUserGroup,
-      getUserGroup: getUserGroup,
-      getUserGroups: getUserGroups,
-      getUserGroupScaffold: getUserGroupScaffold
-    };
+        }
 
-    return resource;
+        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

@@ -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

@@ -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

@@ -34,4 +34,4 @@
 
 .test-group-content {
     padding: 20px;
-}
+}

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,26 +32,40 @@
             $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;
             } else {
                 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

@@ -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>