From f3d925b5096a158169d71f7eb9cb647443100d4b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 22 May 2017 11:31:54 +0200
Subject: [PATCH] wire up getPaged getPagedResults for users

---
 .../src/less/components/users/umb-users.less  | 64 +++++++++++--
 .../users/views/users/users.controller.js     | 58 ++++++++----
 .../src/views/users/views/users/users.html    | 94 ++++++++++---------
 3 files changed, 150 insertions(+), 66 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
index 9e0e2c65f0..0178cc6d67 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
@@ -6,25 +6,74 @@
 }
 
 .umb-user {
-    flex: 1 1 200px;
+    padding: 10px;
+    box-sizing: border-box;
+    flex: 0 0 100%;
+    max-width: 100%;
+    display: flex;
+}
+
+@media (min-width: 768px) {
+    .umb-user {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .umb-user {
+        flex: 0 0 33.33%;
+        max-width: 33.33%;
+    }
+}
+
+@media (min-width: 1400px) {
+    .umb-user {
+        flex: 0 0 25%;
+        max-width: 25%;
+    }
+}
+
+@media (min-width: 1700px) {
+    .umb-user {
+        flex: 0 0 20%;
+        max-width: 20%;
+    }
+}
+
+
+@media (min-width: 1900px) {
+    .umb-user {
+        flex: 0 0 16.66%;
+        max-width: 16.66%;
+    }
+}
+
+@media (min-width: 2200px) {
+    .umb-user {
+        flex: 0 0 14.28%;
+        max-width: 14.28%;
+    }
+}
+
+.umb-user__content {
+    position: relative;
+    padding: 15px;
+    flex: 1 1 auto;
     background-color: @gray-10;
     border: 1px solid @gray-9;
     border-radius: 3px;
-    padding: 15px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    margin: 10px;
     cursor: pointer;
-    position: relative;
-    align-items: center;
 }
 
-.umb-user--selected {
+.umb-user__content--selected {
     border-color: @turquoise;
 }
 
-.umb-user:hover {
+.umb-user__content:hover {
     border-color: @turquoise;
 }
 
@@ -63,4 +112,5 @@
 .umb-user__last-login {
     font-size: 13px;
     text-align: center;
+    margin-top: auto;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
index d1dfb2792e..99f96b5ad4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
@@ -10,6 +10,7 @@
         vm.userStates = [];
         vm.selection = [];
         vm.newUser = {};
+        vm.usersOptions = {};
         vm.newUser.userGroups = [];
         vm.usersViewState = 'overview';
         
@@ -17,11 +18,6 @@
         vm.allowEnableUser = true;
         vm.allowSetUserRole = true;
         
-        vm.usersPagination = {
-            "pageNumber": 1,
-            "totalPages": 5
-        }
-        
         vm.layouts = [
             {
                 "icon": "icon-thumbnails-small",
@@ -68,28 +64,21 @@
         vm.removeSelectedUserGroup = removeSelectedUserGroup;
         vm.selectAll = selectAll;
         vm.areAllSelected = areAllSelected;
+        vm.searchUsers = searchUsers;
+        vm.setOrderByFilter = setOrderByFilter;
 
         function init() {
 
-            vm.loading = true;
+            vm.usersOptions.orderBy = "Name";
 
             // Get users
-            usersResource.getUsers().then(function (users) {
-                vm.users = users;
-                vm.userStates = getUserStates(vm.users);
-                formatDates(vm.users);
-            });
+            getUsers();
 
             // Get user groups
             usersResource.getUserGroups().then(function (userGroups) {
                 vm.userGroups = userGroups;
             });
 
-            // fake loading
-            $timeout(function () {
-                vm.loading = false;
-            }, 500);
-
         }
 
         function setUsersViewState(state) {
@@ -199,7 +188,44 @@
             }
         }
 
+        var search = _.debounce(function () {
+            $scope.$apply(function () {
+                getUsers();
+            });
+        }, 500);
+
+        function searchUsers() {
+            search();
+        }
+
+        function setOrderByFilter(value) {
+            vm.usersOptions.orderBy = value;
+            getUsers();
+        }
+
         // helpers
+        function getUsers() {
+
+            vm.loading = true;
+
+            // Get users
+            usersResource.getPagedResults(vm.usersOptions).then(function (users) {
+                
+                vm.users = users.items;
+
+                vm.usersOptions.pageNumber = users.pageNumber;
+                vm.usersOptions.pageSize = users.pageSize;
+                vm.usersOptions.totalItems = users.totalItems;
+                vm.usersOptions.totalPages = users.totalPages;
+
+                vm.userStates = getUserStates(vm.users);
+                formatDates(vm.users);
+
+                vm.loading = false;
+                
+            });
+        }
+
         function getUserStates(users) {
             var userStates = [];
             
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
index ae4f917145..1f96b9ba68 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -26,21 +26,20 @@
                     </umb-layout-selector>
                 </umb-editor-sub-header-section>
                 <umb-editor-sub-header-section>
-                    <ng-form class="form-search -no-margin-bottom pull-right" novalidate>
+                    <div class="form-search -no-margin-bottom pull-right">
                         <div class="inner-addon left-addon">
-                            <i class="icon icon-search" ng-click="enterSearch($event)"></i>
+                            <i class="icon icon-search"></i>
                             <input
                                 class="form-control search-input"
                                 type="text"
                                 localize="placeholder"
                                 placeholder="@general_typeToSearch"
-                                ng-model="options.filter"
-                                ng-change="enterSearch()"
-                                ng-keydown="forceSearch($event)"
+                                ng-model="vm.usersOptions.filter"
+                                ng-change="vm.searchUsers()"
                                 prevent-enter-submit
                                 no-dirty-check>
                         </div>
-                    </ng-form>
+                    </div>
                 </umb-editor-sub-header-section>
             </umb-editor-sub-header-content-right>
 
@@ -98,7 +97,7 @@
         <div style="margin-bottom: 20px;" class="flex items-center">
 
             <div style="font-size: 16px;">
-                <span class="bold">Users</span> <span>({{vm.users.length}})</span>
+                <span class="bold">Users</span> <span>({{vm.usersOptions.totalItems}})</span>
             </div>
 
             <div class="flex" style="margin-left: auto;">
@@ -135,50 +134,59 @@
                 <div class="dropdown pull-right">
                     <a style="text-decoration: none;" class="btn btn-link dropdown-toggle" href="" data-toggle="dropdown">
                         Order by:
-                        <span class="bold" style="margin-left: 2px;">Last login</span>
+                        <span class="bold" style="margin-left: 2px;">{{ vm.usersOptions.orderBy }} </span>
                         <span class="caret"></span>
                     </a>
                     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                        <li><a tabindex="-1" href="#" prevent-default>Last login</a></li>
-                        <li><a tabindex="-1" href="#" prevent-default>Name</a></li>
+                        <li><a tabindex="-1" href="#" ng-click="vm.setOrderByFilter('lastLogin')" prevent-default>Last login</a></li>
+                        <li><a tabindex="-1" href="#" ng-click="vm.setOrderByFilter('Name')" prevent-default>Name</a></li>
                     </ul>
                 </div>
 
             </div>
 
         </div>
+
+        <!-- Empty states -->
+        <umb-empty-state
+            ng-if="!vm.users && vm.usersOptions.filter.length > 0"
+            position="center">
+            <localize key="general_searchNoResult"></localize>
+        </umb-empty-state>
         
         <!-- Layout: Cards -->
-        <div class="umb-users" ng-if="vm.activeLayout.path === '1'">
-            <div class="umb-user" ng-repeat="user in vm.users" ng-class="{'umb-user--selected': user.selected}" ng-click="vm.selectUser(user, vm.selection)">
-                <umb-badge
-                    class="umb-user__badge"
-                    size="xs"
-                    ng-if="user.state !== 'active'"
-                    color="{{vm.getUserStateType(user.state)}}">
-                    {{ user.state }}
-                </umb-badge>
-                <div class="umb-user__avatar">
-                    <umb-avatar
-                        size="l"
-                        color="secondary"
-                        name="{{user.name}}"
-                        img-src="{{user.avatar}}">
-                    </umb-avatar>
-                </div>
-                <div class="umb-user__checkmark" ng-if="user.selected"><umb-checkmark checked="user.selected" size="s"></umb-checkmark></div>
-                <a class="umb-user__name" href="" ng-click="vm.goToUser(user)">{{user.name}}</a>
-                <div class="umb-user__group">
-                    <span ng-repeat="group in user.userGroups">{{ group.name }}<span ng-if="!$last">, </span></span>
-                </div>
-                <div class="umb-user__last-login">
-                    <div ng-if="user.formattedLastLogin">
-                        <div>Last login on</div>
-                        {{ user.formattedLastLogin }}
+        <div class="umb-users" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
+            <div class="umb-user" ng-repeat="user in vm.users" ng-click="vm.selectUser(user, vm.selection)">
+                <div class="umb-user__content" ng-class="{'umb-user__content--selected': user.selected}">
+                    <umb-badge
+                        class="umb-user__badge"
+                        size="xs"
+                        ng-if="user.state !== 'active'"
+                        color="{{vm.getUserStateType(user.state)}}">
+                        {{ user.state }}
+                    </umb-badge>
+                    <div class="umb-user__avatar">
+                        <umb-avatar
+                            size="l"
+                            color="secondary"
+                            name="{{user.name}}"
+                            img-src="{{user.avatar}}">
+                        </umb-avatar>
                     </div>
-                    <div ng-if="!user.formattedLastLogin">
-                        <div>{{ user.name | umbWordLimit:1 }} has</div> 
-                        not logged in yet
+                    <div class="umb-user__checkmark" ng-if="user.selected"><umb-checkmark checked="user.selected" size="s"></umb-checkmark></div>
+                    <a class="umb-user__name" href="" ng-click="vm.goToUser(user)">{{user.name}}</a>
+                    <div class="umb-user__group">
+                        <span ng-repeat="(key,value) in user.userGroups">{{ value }}<span ng-if="!$last">, </span></span>
+                    </div>
+                    <div class="umb-user__last-login">
+                        <div ng-if="user.formattedLastLogin">
+                            <div>Last login on</div>
+                            {{ user.formattedLastLogin }}
+                        </div>
+                        <div ng-if="!user.formattedLastLogin">
+                            <div>{{ user.name | umbWordLimit:1 }} has</div> 
+                            not logged in yet
+                        </div>
                     </div>
                 </div>
             </div>
@@ -217,7 +225,7 @@
                             </umb-avatar>
                         </td>
                         <td class="bold"><a href="" ng-click="vm.goToUser(user)">{{user.name}}</a></td>
-                        <td><span ng-repeat="group in user.userGroups">{{group.name}}<span ng-if="!$last">, </span></span></td>
+                        <td><span ng-repeat="(key,value) in user.userGroups">{{ value }}<span ng-if="!$last">, </span></span></td>
                         <td>{{ user.formattedLastLogin }}</td>
                         <td style="text-transform: capitalize;">
                             <umb-badge
@@ -236,9 +244,9 @@
         <!-- Pagination -->
         <div class="flex justify-center">
             <umb-pagination
-                ng-if="vm.usersPagination.totalPages"
-                page-number="vm.usersPagination.pageNumber"
-                total-pages="vm.usersPagination.totalPages">
+                ng-if="vm.usersOptions.totalPages"
+                page-number="vm.usersOptions.pageNumber"
+                total-pages="vm.usersOptions.totalPages">
             </umb-pagination>
         </div>