GUAC-1138: Generalize sorting logic.

guacamole/src/main/webapp/app/index/styles/sorted-tables.css

@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2015 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+table.sorted {
+    border-collapse: collapse;
+}
+
+table.sorted th {
+    background: rgba(0, 0, 0, 0.125);
+    font-weight: normal;
+}
+
+table.sorted th,
+table.sorted td {
+    border: 1px solid #AAA;
+    padding: 0.5em 1em;
+}
+
+table.sorted th.sortable {
+    cursor: pointer;
+}
+
+table.sorted th.sort-primary {
+    font-weight: bold;
+    padding-right: 0;
+}
+
+table.sorted th.sort-primary:after {
+
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    vertical-align: middle;
+    content: ' ';
+
+    background-size: 1em 1em;
+    background-position: right center;
+    background-repeat: no-repeat;
+    background-image: url('images/arrows/down.png');
+
+}
+
+table.sorted th.sort-primary.sort-descending:after {
+    background-image: url('images/arrows/up.png');
+}

guacamole/src/main/webapp/app/list/directives/guacSortOrder.js

@@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2015 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * Updates the priority of the sorting property given by "guac-sort-property"
+ * within the StableSort object given by "guac-sort-order". The CSS classes
+ * "sort-primary" and "sort-descending" will be applied to the associated
+ * element depending on the priority and sort direction of the given property.
+ * 
+ * The associated element will automatically be assigned the "sortable" CSS
+ * class.
+ */
+angular.module('list').directive('guacSortOrder', [function guacFocus() {
+
+    return {
+        restrict: 'A',
+
+        link: function linkGuacSortOrder($scope, $element, $attrs) {
+
+            /**
+             * The object defining the sorting order.
+             *
+             * @type StableSort
+             */
+            var sortOrder = $scope.$eval($attrs.guacSortOrder);
+
+            /**
+             * The name of the property whose priority within the sort order
+             * is controlled by this directive.
+             *
+             * @type String
+             */
+            var sortProperty = $scope.$eval($attrs.guacSortProperty);
+
+            /**
+             * Returns whether the sort property defined via the
+             * "guac-sort-property" attribute is the primary sort property of
+             * the associated sort order.
+             *
+             * @returns {Boolean}
+             *     true if the sort property defined via the
+             *     "guac-sort-property" attribute is the primary sort property,
+             *     false otherwise.
+             */
+            var isPrimary = function isPrimary() {
+                return sortOrder.primary === sortProperty;
+            };
+
+            /**
+             * Returns whether the primary property of the sort order is
+             * sorted in descending order.
+             *
+             * @returns {Boolean}
+             *     true if the primary property of the sort order is sorted in
+             *     descending order, false otherwise.
+             */
+            var isDescending = function isDescending() {
+                return sortOrder.descending;
+            };
+
+            // Assign "sortable" class to associated element
+            $element.addClass('sortable');
+
+            // Add/remove "sort-primary" class depending on sort order
+            $scope.$watch(isPrimary, function primaryChanged(primary) {
+                $element.toggleClass('sort-primary', primary);
+            });
+
+            // Add/remove "sort-descending" class depending on sort order
+            $scope.$watch(isDescending, function descendingChanged(descending) {
+                $element.toggleClass('sort-descending', descending);
+            });
+
+            // Update sort order when clicked
+            $element[0].addEventListener('click', function clicked() {
+                $scope.$evalAsync(function updateSortOrder() {
+                    sortOrder.togglePrimary(sortProperty);
+                });
+            });
+
+        } // end guacSortOrder link function
+
+    };
+
+}]);

guacamole/src/main/webapp/app/manage/styles/sessions.css

@@ -22,57 +22,13 @@
 
 .manage table.session-list {
     width: 100%;
-    border-collapse: collapse;
 }
 
 .manage table.session-list tr.session:hover {
     background: #CDA;
 }
 
-.manage table.session-list th {
-    background: rgba(0, 0, 0, 0.125);
-    font-weight: normal;
-}
-
-.manage table.session-list th,
-.manage table.session-list td {
-    border: 1px solid #AAA;
-    padding: 0.5em 1em;
-}
-
 .manage table.session-list .select-session {
     min-width: 2em;
     text-align: center;
 }
-
-.manage table.session-list th {
-    cursor: pointer;
-}
-
-.manage table.session-list th.select-session {
-    cursor: auto;
-}
-
-.manage table.session-list th.sort-primary {
-    font-weight: bold;
-    padding-right: 0;
-}
-
-.manage table.session-list th.sort-primary:after {
-
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    vertical-align: middle;
-    content: ' ';
-
-    background-size: 1em 1em;
-    background-position: right center;
-    background-repeat: no-repeat;
-    background-image: url('images/arrows/down.png');
-
-}
-
-.manage table.session-list th.sort-primary.sort-descending:after {
-    background-image: url('images/arrows/up.png');
-}

guacamole/src/main/webapp/app/manage/templates/manageSessions.html

@@ -41,24 +41,20 @@ THE SOFTWARE.
                      placeholder="'MANAGE_SESSION.FIELD_PLACEHOLDER_FILTER' | translate"></guac-filter>
 
         <!-- List of current user sessions -->
-        <table class="session-list">
+        <table class="sorted session-list">
             <thead>
                 <tr>
                     <th class="select-session"></th>
-                    <th ng-class="{'sort-primary': wrapperOrder.isSortedBy('activeConnection.username'), 'sort-descending': wrapperOrder.descending}"
+                    <th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.username'">
-                        ng-click="wrapperOrder.toggleSort('activeConnection.username')">
                         {{'MANAGE_SESSION.TABLE_HEADER_SESSION_USERNAME' | translate}}
                     </th>
-                    <th ng-class="{'sort-primary': wrapperOrder.isSortedBy('activeConnection.startDate'), 'sort-descending': wrapperOrder.descending}"
+                    <th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.startDate'">
-                        ng-click="wrapperOrder.toggleSort('activeConnection.startDate')">
                         {{'MANAGE_SESSION.TABLE_HEADER_SESSION_STARTDATE' | translate}}
                     </th>
-                    <th ng-class="{'sort-primary': wrapperOrder.isSortedBy('activeConnection.remoteHost'), 'sort-descending': wrapperOrder.descending}"
+                    <th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.remoteHost'">
-                        ng-click="wrapperOrder.toggleSort('activeConnection.remoteHost')">
                         {{'MANAGE_SESSION.TABLE_HEADER_SESSION_REMOTEHOST' | translate}}
                     </th>
-                    <th ng-class="{'sort-primary': wrapperOrder.isSortedBy('name'), 'sort-descending': wrapperOrder.descending}"
+                    <th guac-sort-order="wrapperOrder" guac-sort-property="'name'">
-                        ng-click="wrapperOrder.toggleSort('name')">
                         {{'MANAGE_SESSION.TABLE_HEADER_SESSION_CONNECTION_NAME' | translate}}
                     </th>
                 </tr>