From ae0ff1d0a109db76e8957f494fd4d1d611fdb511 Mon Sep 17 00:00:00 2001
From: patrickdemooij9 <patrickdemooij98@hotmail.com>
Date: Wed, 26 Aug 2020 18:18:15 +0200
Subject: [PATCH] 8274: Make it possible to open user groups in infinite editor
 (#8308)

Co-authored-by: Sebastiaan Janssen <sebastiaan@umbraco.com>
---
 .../src/common/services/editor.service.js     |  18 +++
 .../src/views/users/group.controller.js       |  25 ++--
 .../src/views/users/group.html                | 135 +++++++++---------
 .../src/views/users/user.controller.js        |  31 ++++
 .../src/views/users/views/user/details.html   |   2 +
 5 files changed, 135 insertions(+), 76 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
index 0f4f04c6bf..381d09f62d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
@@ -761,6 +761,23 @@ When building a custom infinite editor view you can use the same components as a
             open(editor);
         }
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#userGroupEditor
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens the user group picker in infinite editing, the submit callback returns the saved user group
+         * @param {Object} editor rendering options
+         * @param {Callback} editor.submit Submits the editor
+         * @param {Callback} editor.close Closes the editor
+         * @returns {Object} editor object
+         */
+        function userGroupEditor(editor) {
+            editor.view = "views/users/group.html";
+            open(editor);
+        }
+
         /**
          * @ngdoc method
          * @name umbraco.services.editorService#templateEditor
@@ -1028,6 +1045,7 @@ When building a custom infinite editor view you can use the same components as a
             nodePermissions: nodePermissions,
             insertCodeSnippet: insertCodeSnippet,
             userGroupPicker: userGroupPicker,
+            userGroupEditor: userGroupEditor,
             templateEditor: templateEditor,
             sectionPicker: sectionPicker,
             insertField: insertField,
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
index 4ca4576755..469c845c45 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
@@ -3,14 +3,20 @@
 
     function UserGroupEditController($scope, $location, $routeParams, userGroupsResource, localizationService, contentEditingHelper, editorService) {
 
+        var infiniteMode = $scope.model && $scope.model.infiniteMode;
+        var id = infiniteMode ? $scope.model.id : $routeParams.id;
+        var create = infiniteMode ? $scope.model.create : $routeParams.create;
+
         var vm = this;
         var contentPickerOpen = false;
 
         vm.page = {};
         vm.page.rootIcon = "icon-folder";
+        vm.page.submitButtonLabelKey = infiniteMode ? "buttons_saveAndClose" : "buttons_save";
+
         vm.userGroup = {};
         vm.labels = {};
-        vm.showBackButton = true;
+        vm.showBackButton = !infiniteMode;
 
         vm.goToPage = goToPage;
         vm.openSectionPicker = openSectionPicker;
@@ -53,7 +59,7 @@
                 vm.labels.noStartNode = name;
             });
 
-            if ($routeParams.create) {
+            if (create) {
                 // get user group scaffold
                 userGroupsResource.getUserGroupScaffold().then(function (userGroup) {
                     vm.userGroup = userGroup;
@@ -63,7 +69,7 @@
                 });
             } else {
                 // get user group
-                userGroupsResource.getUserGroup($routeParams.id).then(function (userGroup) {
+                userGroupsResource.getUserGroup(id).then(function (userGroup) {
                     vm.userGroup = userGroup;
                     formatGranularPermissionSelection();
                     setSectionIcon(vm.userGroup.sections);
@@ -71,7 +77,6 @@
                     vm.loading = false;
                 });
             }
-
         }
 
         function save() {
@@ -85,11 +90,15 @@
             }).then(function (saved) {
 
                 vm.userGroup = saved;
-                formatGranularPermissionSelection();
-                setSectionIcon(vm.userGroup.sections);
-                makeBreadcrumbs();
-                vm.page.saveButtonState = "success";
 
+                if (infiniteMode) {
+                    $scope.model.submit(vm.userGroup);
+                } else {
+                    formatGranularPermissionSelection();
+                    setSectionIcon(vm.userGroup.sections);
+                    makeBreadcrumbs();
+                    vm.page.saveButtonState = "success";
+                }
             }, function (err) {
                 vm.page.saveButtonState = "error";
             });
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/group.html b/src/Umbraco.Web.UI.Client/src/views/users/group.html
index eae6dbd75c..2df7afc066 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.html
@@ -6,14 +6,13 @@
 
         <umb-editor-view ng-if="!vm.loading">
 
-            <umb-editor-header
-                name="vm.userGroup.name"
-                alias="vm.userGroup.alias"
-                alias-locked="vm.userGroup.isSystemUserGroup"
-                icon="vm.userGroup.icon"
-                hide-description="true"
-                on-back="vm.goToPage(vm.breadcrumbs[0])"
-                show-back-button="vm.showBackButton">
+            <umb-editor-header name="vm.userGroup.name"
+                               alias="vm.userGroup.alias"
+                               alias-locked="vm.userGroup.isSystemUserGroup"
+                               icon="vm.userGroup.icon"
+                               hide-description="true"
+                               on-back="vm.goToPage(vm.breadcrumbs[0])"
+                               show-back-button="vm.showBackButton">
             </umb-editor-header>
 
             <umb-editor-container>
@@ -31,13 +30,12 @@
                                 <umb-box-content class="block-form">
 
                                     <umb-control-group style="margin-bottom: 20px;" label="@main_sections" description="@user_sectionsHelp">
-                                        <umb-node-preview
-                                            style="max-width: 100%;"
-                                            ng-repeat="section in vm.userGroup.sections"
-                                            icon="section.icon"
-                                            name="section.name"
-                                            allow-remove="true"
-                                            on-remove="vm.removeSelectedItem($index, vm.userGroup.sections)">
+                                        <umb-node-preview style="max-width: 100%;"
+                                                          ng-repeat="section in vm.userGroup.sections"
+                                                          icon="section.icon"
+                                                          name="section.name"
+                                                          allow-remove="true"
+                                                          on-remove="vm.removeSelectedItem($index, vm.userGroup.sections)">
                                         </umb-node-preview>
 
                                         <button type="button"
@@ -49,15 +47,14 @@
                                     </umb-control-group>
 
                                     <umb-control-group style="margin-bottom: 20px;" label="@user_startnode" description="@user_startnodehelp">
-                                        <umb-node-preview
-                                            ng-if="vm.userGroup.contentStartNode.id"
-                                            style="max-width: 100%;"
-                                            icon="vm.userGroup.contentStartNode.icon"
-                                            name="vm.userGroup.contentStartNode.name"
-                                            allow-edit="true"
-                                            allow-remove="true"
-                                            on-edit="vm.openContentPicker()"
-                                            on-remove="vm.clearStartNode('content')">
+                                        <umb-node-preview ng-if="vm.userGroup.contentStartNode.id"
+                                                          style="max-width: 100%;"
+                                                          icon="vm.userGroup.contentStartNode.icon"
+                                                          name="vm.userGroup.contentStartNode.name"
+                                                          allow-edit="true"
+                                                          allow-remove="true"
+                                                          on-edit="vm.openContentPicker()"
+                                                          on-remove="vm.clearStartNode('content')">
                                         </umb-node-preview>
 
 
@@ -72,16 +69,15 @@
                                     </umb-control-group>
 
                                     <umb-control-group label="@user_mediastartnode" description="@user_mediastartnodehelp">
-                                        
-                                        <umb-node-preview
-                                            ng-if="vm.userGroup.mediaStartNode.id"
-                                            style="max-width: 100%;"
-                                            icon="vm.userGroup.mediaStartNode.icon"
-                                            name="vm.userGroup.mediaStartNode.name"
-                                            allow-edit="true"
-                                            allow-remove="true"
-                                            on-edit="vm.openMediaPicker()"
-                                            on-remove="vm.clearStartNode('media')">
+
+                                        <umb-node-preview ng-if="vm.userGroup.mediaStartNode.id"
+                                                          style="max-width: 100%;"
+                                                          icon="vm.userGroup.mediaStartNode.icon"
+                                                          name="vm.userGroup.mediaStartNode.name"
+                                                          allow-edit="true"
+                                                          allow-remove="true"
+                                                          on-edit="vm.openMediaPicker()"
+                                                          on-remove="vm.clearStartNode('media')">
                                         </umb-node-preview>
 
 
@@ -101,9 +97,8 @@
                             <umb-box>
                                 <umb-box-header title-key="user_permissionsDefault"></umb-box-header>
                                 <umb-box-content class="block-form">
-                                    <umb-control-group
-                                        ng-repeat="(category, permissions) in vm.userGroup.defaultPermissions"
-                                        label="{{ category }}">
+                                    <umb-control-group ng-repeat="(category, permissions) in vm.userGroup.defaultPermissions"
+                                                       label="{{ category }}">
                                         <umb-toggle-group items="permissions"></umb-toggle-group>
                                     </umb-control-group>
                                 </umb-box-content>
@@ -113,17 +108,16 @@
                                 <umb-box-header title-key="user_permissionsGranular"></umb-box-header>
                                 <umb-box-content class="block-form">
                                     <umb-control-group label="Nodes" description="@user_permissionsGranularHelp">
-                                        
-                                        <umb-node-preview
-                                            ng-repeat="node in vm.userGroup.assignedPermissions"
-                                            style="max-width: 100%;"
-                                            icon="node.icon"
-                                            name="node.name"
-                                            permissions="node.allowedPermissions"
-                                            allow-remove="true"
-                                            on-remove="vm.removeSelectedItem($index, vm.userGroup.assignedPermissions)"
-                                            allow-edit="true"
-                                            on-edit="vm.setPermissionsForNode(node)">
+
+                                        <umb-node-preview ng-repeat="node in vm.userGroup.assignedPermissions"
+                                                          style="max-width: 100%;"
+                                                          icon="node.icon"
+                                                          name="node.name"
+                                                          permissions="node.allowedPermissions"
+                                                          allow-remove="true"
+                                                          on-remove="vm.removeSelectedItem($index, vm.userGroup.assignedPermissions)"
+                                                          allow-edit="true"
+                                                          on-edit="vm.setPermissionsForNode(node)">
                                         </umb-node-preview>
 
                                         <button type="button"
@@ -133,7 +127,7 @@
                                             <localize key="general_add">Add</localize>
                                         </button>
                                     </umb-control-group>
-                                    
+
                                 </umb-box-content>
                             </umb-box>
 
@@ -144,13 +138,12 @@
                             <umb-box>
                                 <umb-box-header title-key="sections_users"></umb-box-header>
                                 <umb-box-content>
-                                    
-                                    <umb-user-preview
-                                        ng-repeat="user in vm.userGroup.users"
-                                        name="user.name"
-                                        avatars="user.avatars"
-                                        allow-remove="true"
-                                        on-remove="vm.removeSelectedItem($index, vm.userGroup.users)">
+
+                                    <umb-user-preview ng-repeat="user in vm.userGroup.users"
+                                                      name="user.name"
+                                                      avatars="user.avatars"
+                                                      allow-remove="true"
+                                                      on-remove="vm.removeSelectedItem($index, vm.userGroup.users)">
                                     </umb-user-preview>
 
                                     <button type="button"
@@ -175,24 +168,30 @@
 
                 <umb-editor-footer-content-left>
 
-                    <umb-breadcrumbs
-                        ancestors="vm.breadcrumbs"
-                        allow-on-open="true"
-                        on-open="vm.goToPage(ancestor)">
+                    <umb-breadcrumbs ancestors="vm.breadcrumbs"
+                                     allow-on-open="true"
+                                     on-open="vm.goToPage(ancestor)">
                     </umb-breadcrumbs>
 
                 </umb-editor-footer-content-left>
 
                 <umb-editor-footer-content-right>
 
-                    <umb-button
-                        type="button"
-                        action="vm.save()"
-                        state="vm.page.saveButtonState"
-                        button-style="success"
-                        shortcut="ctrl+s"
-                        label="Save"
-                        label-key="buttons_save">
+                    <umb-button ng-if="model.infiniteMode"
+                                type="button"
+                                button-style="link"
+                                label-key="general_close"
+                                shortcut="esc"
+                                action="model.close(model)">
+                    </umb-button>
+
+                    <umb-button type="button"
+                                action="vm.save()"
+                                state="vm.page.saveButtonState"
+                                button-style="success"
+                                shortcut="ctrl+s"
+                                label="Save"
+                                label-key="{{vm.page.submitButtonLabelKey}}">
                     </umb-button>
 
                 </umb-editor-footer-content-right>
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
index 93eec91590..e423186eda 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
@@ -3,6 +3,8 @@
 
     function UserEditController($scope, eventsService, $q, $location, $routeParams, formHelper, usersResource, userService, contentEditingHelper, localizationService, mediaHelper, Upload, umbRequestHelper, usersHelper, authResource, dateHelper, editorService, overlayService) {
 
+        var currentLoggedInUser = null;
+
         var vm = this;
 
         vm.page = {};
@@ -29,6 +31,7 @@
         vm.openUserGroupPicker = openUserGroupPicker;
         vm.openContentPicker = openContentPicker;
         vm.openMediaPicker = openMediaPicker;
+        vm.editSelectedItem = editSelectedItem;
         vm.removeSelectedItem = removeSelectedItem;
         vm.disableUser = disableUser;
         vm.enableUser = enableUser;
@@ -38,6 +41,7 @@
         vm.changeAvatar = changeAvatar;
         vm.clearAvatar = clearAvatar;
         vm.save = save;
+        vm.allowGroupEdit = allowGroupEdit;
 
         vm.changePassword = changePassword;
         vm.toggleChangePassword = toggleChangePassword;
@@ -345,6 +349,21 @@
             }
         }
 
+        function editSelectedItem(index, selection) {
+            var group = selection[index];
+            const editor = {
+                id: group.id,
+                submit: function (model) {
+                    selection[index] = model;
+                    editorService.close();
+                },
+                close: function () {
+                    editorService.close();
+                }
+            };
+            editorService.userGroupEditor(editor);
+        }
+
         function removeSelectedItem(index, selection) {
             selection.splice(index, 1);
         }
@@ -536,6 +555,8 @@
         function formatDatesToLocal(user) {
             // get current backoffice user and format dates
             userService.getCurrentUser().then(function (currentUser) {
+                currentLoggedInUser = currentUser;
+
                 user.formattedLastLogin = getLocalDate(user.lastLoginDate, currentUser.locale, "LLL");
                 user.formattedLastLockoutDate = getLocalDate(user.lastLockoutDate, currentUser.locale, "LLL");
                 user.formattedCreateDate = getLocalDate(user.createDate, currentUser.locale, "LLL");
@@ -544,6 +565,16 @@
             });
         }
 
+        function allowGroupEdit(group) {
+            if (!currentLoggedInUser) {
+                return false;
+            }
+            if (currentLoggedInUser.userGroups.indexOf(group.alias) === -1 && currentLoggedInUser.userGroups.indexOf("admin") === -1) {
+                return false;
+            }
+            return true;
+        }
+
         init();
     }
     angular.module("umbraco").controller("Umbraco.Editors.Users.UserController", UserEditController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/user/details.html b/src/Umbraco.Web.UI.Client/src/views/users/views/user/details.html
index bb3efaede2..d02973c272 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/user/details.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/user/details.html
@@ -72,6 +72,8 @@
                                             content-start-node="userGroup.contentStartNode"
                                             media-start-node="userGroup.mediaStartNode"
                                             allow-remove="true"
+                                            allow-edit="model.allowGroupEdit(userGroup)"
+                                            on-edit="model.editSelectedItem($index, model.user.userGroups)"
                                             on-remove="model.removeSelectedItem($index, model.user.userGroups)">
                     </umb-user-group-preview>