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">
+    <table class="sorted user-list">
-        <div ng-repeat="manageableUser in manageableUserPage" class="user list-item">
+        <thead>
-            <a ng-href="#/manage/{{manageableUser.dataSource}}/users/{{manageableUser.user.username}}">
+            <tr>
-                <div class="caption">
+                <th guac-sort-order="order" guac-sort-property="'user.username'" class="username">
-                    <div class="icon user"></div>
+                    {{'SETTINGS_USERS.TABLE_HEADER_USERNAME' | translate}}
-                    <span class="name">{{manageableUser.user.username}}</span>
+                </th>
-                </div>
+                <th guac-sort-order="order" guac-sort-property="'user.lastActive'" class="last-active">
-            </a>
+                    {{'SETTINGS_USERS.TABLE_HEADER_LAST_ACTIVE' | translate}}
-        </div>
+                </th>
-    </div>
+            </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>

guacamole/src/main/webapp/translations/de.json

@@ -598,9 +598,13 @@
 
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",
 
+        "FORMAT_DATE" : "@:APP.FORMAT_DATE_TIME_PRECISE",
+
         "HELP_USERS" : "Klicke oder Tippe auf einen Benutzer um diesen zu verwalten. Abhänig von Ihrer Zugriffsebene können Benutzer hinzugefügt, gelöscht bzw. dessen Passwort geändert werden.",
 
-        "SECTION_HEADER_USERS"       : "Benutzer"
+        "SECTION_HEADER_USERS"       : "Benutzer",
+
+        "TABLE_HEADER_USERNAME" : "Benutzername"
 
     },
     

guacamole/src/main/webapp/translations/en.json

@@ -675,9 +675,14 @@
 
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",
 
+        "FORMAT_DATE" : "@:APP.FORMAT_DATE_TIME_PRECISE",
+
         "HELP_USERS" : "Click or tap on a user below to manage that user. Depending on your access level, users can be added and deleted, and their passwords can be changed.",
 
-        "SECTION_HEADER_USERS"       : "Users"
+        "SECTION_HEADER_USERS"       : "Users",
+
+        "TABLE_HEADER_LAST_ACTIVE" : "Last active",
+        "TABLE_HEADER_USERNAME"    : "Username"
 
     },
     

guacamole/src/main/webapp/translations/fr.json

@@ -601,9 +601,13 @@
 
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",
 
+        "FORMAT_DATE" : "@:APP.FORMAT_DATE_TIME_PRECISE",
+
         "HELP_USERS" : "Cliquer ou appuyer sur un utilisateur en dessous pour le gérer. Selon vos permissions, les utilisateurs peuvent être ajoutés, supprimés, leur mot de passe changé.",
 
-        "SECTION_HEADER_USERS"       : "Utilisateur"
+        "SECTION_HEADER_USERS"       : "Utilisateur",
+
+        "TABLE_HEADER_USERNAME" : "Identifiant"
 
     },
     

guacamole/src/main/webapp/translations/it.json

@@ -543,9 +543,13 @@
 
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",
 
+        "FORMAT_DATE" : "@:APP.FORMAT_DATE_TIME_PRECISE",
+
         "HELP_USERS" : "Click or tap on a user below to manage that user. Depending on your access level, users can be added and deleted, and their passwords can be changed.",
 
-        "SECTION_HEADER_USERS"       : "Utenti"
+        "SECTION_HEADER_USERS"       : "Utenti",
+
+        "TABLE_HEADER_USERNAME" : "Username"
 
     },
     

guacamole/src/main/webapp/translations/nl.json

@@ -631,9 +631,13 @@
 
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",
 
+        "FORMAT_DATE" : "@:APP.FORMAT_DATE_TIME_PRECISE",
+
         "HELP_USERS" : "Klik of tik op een van de onderstaande gebruikers om die te beheren. Afhankelijk van uw toegangsniveau kunnen gebruikers worden toegevoegd, verwijderd en hun wachtwoorden gewijzigd.",
 
-        "SECTION_HEADER_USERS"       : "Gebruikers"
+        "SECTION_HEADER_USERS"       : "Gebruikers",
+
+        "TABLE_HEADER_USERNAME" : "Gebruikersnaam"
 
     },
 

guacamole/src/main/webapp/translations/no.json

@@ -612,9 +612,13 @@
 
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",
 
+        "FORMAT_DATE" : "@:APP.FORMAT_DATE_TIME_PRECISE",
+
         "HELP_USERS" : "Klikk på en bruker under for å administrere den brukeren. Avhengig av din tilgang kan brukere legges til, slettes og passordet kan endres.",
 
-        "SECTION_HEADER_USERS"       : "Brukere"
+        "SECTION_HEADER_USERS"       : "Brukere",
+
+        "TABLE_HEADER_USERNAME" : "Brukernavn"
 
     },
     

guacamole/src/main/webapp/translations/ru.json

@@ -524,9 +524,13 @@
 
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",
 
+        "FORMAT_DATE" : "@:APP.FORMAT_DATE_TIME_PRECISE",
+
         "HELP_USERS" : "Нажмите на пользователя, чтобы управлять им. В зависимости от прав доступа возможно добавление и удаление пользователей, а также изменение паролей.",
 
-        "SECTION_HEADER_USERS"       : "Пользователи"
+        "SECTION_HEADER_USERS"       : "Пользователи",
+
+        "TABLE_HEADER_USERNAME" : "Имя пользователя"
 
     },