client/paging: avoid redrawing header navigation

1 files changed, 30 insertions, 10 deletions

diff --git a/client/js/controllers/user_list_controller.js b/client/js/controllers/user_list_controller.js
index 9cdd0a1..6e44ce8 100644
--- a/client/js/controllers/user_list_controller.js
+++ b/client/js/controllers/user_list_controller.js
@@ -20,18 +20,42 @@ class UserListController {
         topNavigation.activate('users');
         topNavigation.setTitle('Listing users');
 
-        this._pageController = new PageController({
+        this._ctx = ctx;
+        this._pageController = new PageController();
+
+        this._headerView = new UsersHeaderView({
+            hostNode: this._pageController.view.pageHeaderHolderNode,
             parameters: ctx.parameters,
+        });
+        this._headerView.addEventListener(
+            'navigate', e => this._evtNavigate(e));
+
+        this._syncPageController();
+    }
+
+    showSuccess(message) {
+        this._pageController.showSuccess(message);
+    }
+
+    _evtNavigate(e) {
+        history.pushState(
+            null,
+            window.title,
+            '/users/' + misc.formatUrlParameters(e.detail.parameters));
+        Object.assign(this._ctx.parameters, e.detail.parameters);
+        this._syncPageController();
+    }
+
+    _syncPageController() {
+        this._pageController.run({
+            parameters: this._ctx.parameters,
             getClientUrlForPage: page => {
                 const parameters = Object.assign(
-                    {}, ctx.parameters, {page: page});
+                    {}, this._ctx.parameters, {page: page});
                 return '/users/' + misc.formatUrlParameters(parameters);
             },
             requestPage: page => {
-                return UserList.search(ctx.parameters.query, page);
-            },
-            headerRenderer: headerCtx => {
-                return new UsersHeaderView(headerCtx);
+                return UserList.search(this._ctx.parameters.query, page);
             },
             pageRenderer: pageCtx => {
                 Object.assign(pageCtx, {
@@ -41,10 +65,6 @@ class UserListController {
             },
         });
     }
-
-    showSuccess(message) {
-        this._pageController.showSuccess(message);
-    }
 }
 
 module.exports = router => {