V8: #7209 fixes filter in User Management not keeping state (#7216)

* Saved and restored user view filter and sort when viewing user details and returning to list.

* Reworked state retention when navigating to and from the users list and user details pages to use querystring values.

* Fixed issue with culture parameter on navigating between user list and details screen.
Ensured when opening users list with querystring that user states filter is correctly populated.

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

@@ -1,13 +1,12 @@
 (function () {
     "use strict";
 
-    function UsersController($scope, $timeout, $location, $routeParams, usersResource, 
-        userGroupsResource, userService, localizationService, contentEditingHelper, 
-        usersHelper, formHelper, notificationsService, dateHelper, editorService, 
+    function UsersController($scope, $timeout, $location, $routeParams, usersResource,
+        userGroupsResource, userService, localizationService,
+        usersHelper, formHelper, dateHelper, editorService,
         listViewHelper) {
 
         var vm = this;
-        var localizeSaving = localizationService.localize("general_saving");
 
         vm.page = {};
         vm.users = [];
@@ -128,8 +127,7 @@
 
         function init() {
 
-            vm.usersOptions.orderBy = "Name";
-            vm.usersOptions.orderDirection = "Ascending";
+            initViewOptions();
 
             if ($routeParams.create) {
                 setUsersViewState("createUser");
@@ -144,10 +142,56 @@
             // Get user groups
             userGroupsResource.getUserGroups({ onlyCurrentUserGroups: false }).then(function (userGroups) {
                 vm.userGroups = userGroups;
+                initUserGroupSelections();
             });
 
         }
 
+        function initViewOptions() {
+
+            // Start with default view options.
+            vm.usersOptions.orderBy = "Name";
+            vm.usersOptions.orderDirection = "Ascending";
+
+            // Update from querystring if available.
+            initViewOptionFromQueryString("orderBy");
+            initViewOptionFromQueryString("orderDirection");
+            initViewOptionFromQueryString("pageNumber");
+            initViewOptionFromQueryString("userStates", true);
+            initViewOptionFromQueryString("userGroups", true);
+        }
+
+        function initViewOptionFromQueryString(key, isCollection) {
+            var value = $location.search()[key];
+            if (value) {
+                if (isCollection) {
+                    value = value.split(",");
+                }
+
+                vm.usersOptions[key] = value;
+            }
+        }
+
+        function initUserStateSelections() {
+            initUsersOptionsFilterSelections(vm.userStatesFilter, vm.usersOptions.userStates, "key");
+        }
+
+        function initUserGroupSelections() {
+            initUsersOptionsFilterSelections(vm.userGroups, vm.usersOptions.userGroups, "alias");
+        }
+
+        function initUsersOptionsFilterSelections(filterCollection, selectedCollection, keyField) {
+            if (selectedCollection && selectedCollection.length > 0 && filterCollection && filterCollection.length > 0) {
+                for (var i = 0; i < selectedCollection.length; i++) {
+                    for (var j = 0; j < filterCollection.length; j++) {
+                        if (filterCollection[j][keyField] === selectedCollection[i]) {
+                            filterCollection[j].selected = true;
+                        }
+                    }
+                }
+            }
+        }
+
         function getSortLabel(sortKey, sortDirection) {
             var found = _.find(vm.userSortData,
                 function (i) {
@@ -467,6 +511,7 @@
                 vm.usersOptions.userStates.splice(index, 1);
             }
 
+            updateLocation("userStates", vm.usersOptions.userStates.join(","));
             getUsers();
         }
 
@@ -483,20 +528,28 @@
                 vm.usersOptions.userGroups.splice(index, 1);
             }
 
+            updateLocation("userGroups", vm.usersOptions.userGroups.join(","));
             getUsers();
         }
 
         function setOrderByFilter(value, direction) {
             vm.usersOptions.orderBy = value;
             vm.usersOptions.orderDirection = direction;
+            updateLocation("orderBy", value);
+            updateLocation("orderDirection", direction);
             getUsers();
         }
 
         function changePageNumber(pageNumber) {
             vm.usersOptions.pageNumber = pageNumber;
+            updateLocation("pageNumber", pageNumber);
             getUsers();
         }
 
+        function updateLocation(key, value) {
+            $location.search(key, value);
+        }
+
         function createUser(addUserForm) {
 
             if (formHelper.submitForm({ formCtrl: addUserForm, scope: $scope })) {
@@ -575,17 +628,53 @@
         }
 
         function goToUser(user) {
-            $location.path(pathToUser(user)).search("create", null).search("invite", null);
+            $location.path(pathToUser(user))
+                .search("orderBy", vm.usersOptions.orderBy)
+                .search("orderDirection", vm.usersOptions.orderDirection)
+                .search("pageNumber", vm.usersOptions.pageNumber)
+                .search("userStates", getUsersOptionsFilterCollectionAsDelimitedStringOrNull(vm.usersOptions.userStates))
+                .search("userGroups", getUsersOptionsFilterCollectionAsDelimitedStringOrNull(vm.usersOptions.userGroups))
+                .search("create", null)
+                .search("invite", null);
+        }
+
+        function getUsersOptionsFilterCollectionAsDelimitedStringOrNull(collection) {
+            if (collection && collection.length > 0) {
+                return collection.join(",");
+            }
+
+            return null;
         }
         
         function getEditPath(user) {
-            return pathToUser(user) + "?mculture=" + $location.search().mculture;
+            return pathToUser(user) + usersOptionsAsQueryString();
         }
-        
+
         function pathToUser(user) {
             return "/users/users/user/" + user.id;
         }
 
+        function usersOptionsAsQueryString() {
+            var qs = "?orderBy=" + vm.usersOptions.orderBy +
+                "&orderDirection=" + vm.usersOptions.orderDirection +
+                "&pageNumber=" + vm.usersOptions.pageNumber;
+
+            qs += addUsersOptionsFilterCollectionToQueryString("userStates", vm.usersOptions.userStates);
+            qs += addUsersOptionsFilterCollectionToQueryString("userGroups", vm.usersOptions.userGroups);
+
+            qs += "&mculture=" + $location.search().mculture;
+
+            return qs;
+        }
+
+        function addUsersOptionsFilterCollectionToQueryString(name, collection) {
+            if (collection && collection.length > 0) {
+                return "&" + name + "=" + collection.join(",");
+            }
+
+            return "";
+        }
+
         // helpers
         function getUsers() {
 
@@ -604,6 +693,7 @@
                 formatDates(vm.users);
                 setUserDisplayState(vm.users);
                 vm.userStatesFilter = usersHelper.getUserStatesFilter(data.userStates);
+                initUserStateSelections();
 
                 vm.loading = false;