GUACAMOLE-394: List users in a table displaying last active time.

guacamole/src/main/webapp/app/settings/directives/guacSettingsUsers.js

@@ -36,9 +36,11 @@ angular.module('settings').directive('guacSettingsUsers', [function guacSettings
             // Required types
             var ManageableUser  = $injector.get('ManageableUser');
             var PermissionSet   = $injector.get('PermissionSet');
+            var SortOrder       = $injector.get('SortOrder');
 
             // Required services
             var $location              = $injector.get('$location');
+            var $translate             = $injector.get('$translate');
             var authenticationService  = $injector.get('authenticationService');
             var dataSourceService      = $injector.get('dataSourceService');
             var guacNotification       = $injector.get('guacNotification');
@@ -98,9 +100,37 @@ angular.module('settings').directive('guacSettingsUsers', [function guacSettings
              * @type String[]
              */
             $scope.filteredUserProperties = [
+                'user.lastActive',
                 'user.username'
             ];
 
+            /**
+             * The date format for use for the last active date.
+             *
+             * @type String
+             */
+            $scope.dateFormat = null;
+
+            /**
+             * SortOrder instance which stores the sort order of the listed
+             * users.
+             *
+             * @type SortOrder
+             */
+            $scope.order = new SortOrder([
+                'user.username',
+                '-user.lastActive'
+            ]);
+
+            // Get session date format
+            $translate('SETTINGS_USERS.FORMAT_DATE')
+            .then(function dateFormatReceived(retrievedDateFormat) {
+
+                // Store received date format
+                $scope.dateFormat = retrievedDateFormat;
+
+            });
+
             /**
              * Returns whether critical data has completed being loaded.
              *
@@ -110,7 +140,8 @@ angular.module('settings').directive('guacSettingsUsers', [function guacSettings
              */
             $scope.isLoaded = function isLoaded() {
 
-                return $scope.manageableUsers !== null
+                return $scope.dateFormat      !== null
+                    && $scope.manageableUsers !== null
                     && $scope.permissions     !== null;
 
             };

guacamole/src/main/webapp/app/settings/styles/user-list.css

@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.settings.users table.user-list {
+    width: 100%;
+}
+
+.settings.users table.user-list th.last-active,
+.settings.users table.user-list td.last-active {
+    white-space: nowrap;
+    width: 0;
+}
+
+.settings.users table.user-list th.username,
+.settings.users table.user-list td.username {
+    width: 100%;
+}
+
+.settings.users table.user-list tr.user td.username a[href] {
+    display: block;
+    padding: .5em 1em;
+}
+
+.settings.users table.user-list tr.user td.username {
+    padding: 0;
+}

guacamole/src/main/webapp/app/settings/templates/settingsUsers.html

@@ -21,19 +21,32 @@
     </div>
 
     <!-- List of users this user has access to -->
-    <div class="user-list">
-        <div ng-repeat="manageableUser in manageableUserPage" class="user list-item">
-            <a ng-href="#/manage/{{manageableUser.dataSource}}/users/{{manageableUser.user.username}}">
-                <div class="caption">
-                    <div class="icon user"></div>
-                    <span class="name">{{manageableUser.user.username}}</span>
-                </div>
-            </a>
-        </div>
-    </div>
+    <table class="sorted user-list">
+        <thead>
+            <tr>
+                <th guac-sort-order="order" guac-sort-property="'user.username'" class="username">
+                    {{'SETTINGS_USERS.TABLE_HEADER_USERNAME' | translate}}
+                </th>
+                <th guac-sort-order="order" guac-sort-property="'user.lastActive'" class="last-active">
+                    {{'SETTINGS_USERS.TABLE_HEADER_LAST_ACTIVE' | translate}}
+                </th>
+            </tr>
+        </thead>
+        <tbody ng-class="{loading: !isLoaded()}">
+            <tr ng-repeat="manageableUser in manageableUserPage" class="user">
+                <td class="username">
+                    <a ng-href="#/manage/{{manageableUser.dataSource}}/users/{{manageableUser.user.username}}">
+                        <div class="icon user"></div>
+                        <span class="name">{{manageableUser.user.username}}</span>
+                    </a>
+                </td>
+                <td class="last-active">{{manageableUser.user.lastActive | date : dateFormat}}</td>
+            </tr>
+        </tbody>
+    </table>
 
     <!-- Pager controls for user list -->
     <guac-pager page="manageableUserPage" page-size="25"
-                items="filteredManageableUsers | orderBy : 'user.username'"></guac-pager>
+                items="filteredManageableUsers | orderBy : order.predicate"></guac-pager>
 
 </div>