V8: Remember choice of layout in Users section (#4779)

* Support arbitrary identifiers in "last used listview layout"
* Save and use last selected view layout for the users section

src/Umbraco.Web.UI.Client/src/common/services/listviewhelper.service.js

@@ -59,11 +59,11 @@
         * Method for internal use, based on the collection of layouts passed, the method selects either
         * any previous layout from local storage, or picks the first allowed layout
         *
-        * @param {Number} nodeId The id of the current node displayed in the content editor
+        * @param {Any} id The identifier of the current node or application displayed in the content editor
         * @param {Array} availableLayouts Array of all allowed layouts, available from $scope.model.config.layouts
         */
 
-        function getLayout(nodeId, availableLayouts) {
+        function getLayout(id, availableLayouts) {
 
             var storedLayouts = [];
 
@@ -74,8 +74,8 @@
             if (storedLayouts && storedLayouts.length > 0) {
                 for (var i = 0; storedLayouts.length > i; i++) {
                     var layout = storedLayouts[i];
-                    if (layout.nodeId === nodeId) {
-                        return setLayout(nodeId, layout, availableLayouts);
+                    if (isMatchingLayout(id, layout)) {
+                        return setLayout(id, layout, availableLayouts);
                     }
                 }
 
@@ -93,12 +93,12 @@
         * @description
         * Changes the current layout used by the listview to the layout passed in. Stores selection in localstorage
         *
-        * @param {Number} nodeID Id of the current node displayed in the content editor
+        * @param {Any} id The identifier of the current node or application displayed in the content editor
         * @param {Object} selectedLayout Layout selected as the layout to set as the current layout
         * @param {Array} availableLayouts Array of all allowed layouts, available from $scope.model.config.layouts
         */
 
-        function setLayout(nodeId, selectedLayout, availableLayouts) {
+        function setLayout(id, selectedLayout, availableLayouts) {
 
             var activeLayout = {};
             var layoutFound = false;
@@ -118,7 +118,7 @@
                 activeLayout = getFirstAllowedLayout(availableLayouts);
             }
 
-            saveLayoutInLocalStorage(nodeId, activeLayout);
+            saveLayoutInLocalStorage(id, activeLayout);
 
             return activeLayout;
 
@@ -132,11 +132,11 @@
         * @description
         * Stores a given layout as the current default selection in local storage
         *
-        * @param {Number} nodeId Id of the current node displayed in the content editor
+        * @param {Any} id The identifier of the current node or application displayed in the content editor
         * @param {Object} selectedLayout Layout selected as the layout to set as the current layout
         */
 
-        function saveLayoutInLocalStorage(nodeId, selectedLayout) {
+        function saveLayoutInLocalStorage(id, selectedLayout) {
             var layoutFound = false;
             var storedLayouts = [];
 
@@ -147,7 +147,7 @@
             if (storedLayouts.length > 0) {
                 for (var i = 0; storedLayouts.length > i; i++) {
                     var layout = storedLayouts[i];
-                    if (layout.nodeId === nodeId) {
+                    if (isMatchingLayout(id, layout)) {
                         layout.path = selectedLayout.path;
                         layoutFound = true;
                     }
@@ -156,7 +156,7 @@
 
             if (!layoutFound) {
                 var storageObject = {
-                    "nodeId": nodeId,
+                    "id": id,
                     "path": selectedLayout.path
                 };
                 storedLayouts.push(storageObject);
@@ -510,6 +510,12 @@
             };
         }
 
+        
+        function isMatchingLayout(id, layout) {
+            // legacy format uses "nodeId", be sure to look for both
+            return layout.id === id || layout.nodeId === id;
+        }
+
         var service = {
 
           getLayout: getLayout,

src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js

@@ -2,8 +2,9 @@
     "use strict";
 
     function UsersController($scope, $timeout, $location, $routeParams, usersResource, 
-        userGroupsResource, userService, localizationService, usersHelper, formHelper, 
-        dateHelper, editorService, $cookies) {
+        userGroupsResource, userService, localizationService, contentEditingHelper, 
+        usersHelper, formHelper, notificationsService, dateHelper, editorService, 
+        listViewHelper) {
 
         var vm = this;
         var localizeSaving = localizationService.localize("general_saving");
@@ -65,18 +66,10 @@
                 "selected": true
             }
         ];
-        
-        var cookieUmbUserLayout = $cookies.get("umbUserLayout");
-        
-        if (cookieUmbUserLayout) {
-            vm.activeLayout = vm.layouts.find(x => x.path === cookieUmbUserLayout);
-        }
-        if (vm.activeLayout === undefined) {
-            // Set card layout to active by default
-            vm.activeLayout = vm.layouts[0];
-        }
-        
-        
+
+        // Get last selected layout for "users" (defaults to first layout = card layout)
+        vm.activeLayout = listViewHelper.getLayout("users", vm.layouts); 
+
         // Don't show the invite button if no email is configured
         if (Umbraco.Sys.ServerVariables.umbracoSettings.showUserInvite) {
             vm.defaultButton = {
@@ -206,15 +199,8 @@
         }
 
         function selectLayout(selectedLayout) {
-            angular.forEach(vm.layouts, function (layout) {
-                layout.active = false;
-            });
-            selectedLayout.active = true;
-            vm.activeLayout = selectedLayout;
-            
-            var expireDate = new Date();
-            expireDate.setDate(expireDate.getDate() + 365);
-            $cookies.put("umbUserLayout", selectedLayout.path, {path: "/", expires: expireDate});
+            // save the selected layout for "users" so it's applied next time the user visits this section
+            vm.activeLayout = listViewHelper.setLayout("users", selectedLayout, vm.layouts); 
         }
         
         function isSelectable(user) {