GUAC-1138: Move filtering logic into own directive.

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

@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+
+/**
+ * A directive which provides a filtering text input field which automatically
+ * produces a filtered subset of the elements of some given array.
+ */
+angular.module('list').directive('guacFilter', [function guacFilter() {
+
+    return {
+        restrict: 'E',
+        replace: true,
+        scope: {
+
+            /**
+             * The property to which a subset of the provided array will be
+             * assigned.
+             *
+             * @type Array
+             */
+            filteredItems : '=',
+
+            /**
+             * The placeholder text to display within the filter input field
+             * when no filter has been provided.
+             * 
+             * @type String
+             */
+            placeholder : '&',
+
+            /**
+             * An array objects to filter. A subset of this array will be
+             * exposed as filteredItems.
+             *
+             * @type Array
+             */
+            items : '&'
+
+        },
+
+        templateUrl: 'app/list/templates/guacFilter.html',
+        controller: ['$scope', '$injector', function guacFilterController($scope, $injector) {
+
+            // Required types
+            var FilterPattern = $injector.get('FilterPattern');
+
+            /**
+             * The pattern object to use when filtering items.
+             *
+             * @type FilterPattern
+             */
+            var filterPattern = new FilterPattern();
+
+            /**
+             * The filter search string to use to restrict the displayed items.
+             *
+             * @type String
+             */
+            $scope.searchString = null;
+
+            /**
+             * Applies the current filter predicate, filtering all provided
+             * items and storing the result in filteredItems.
+             */
+            var updateFilteredItems = function updateFilteredItems() {
+
+                var items = $scope.items();
+                if (items)
+                    $scope.filteredItems = items.filter(filterPattern.predicate);
+                else
+                    $scope.filteredItems = [];
+
+            };
+
+            // Recompile and refilter when pattern is changed
+            $scope.$watch('searchString', function searchStringChanged(searchString) {
+                filterPattern.compile(searchString);
+                updateFilteredItems();
+            });
+
+            // Refilter when items change
+            $scope.$watchCollection($scope.items, function itemsChanged() {
+                updateFilteredItems();
+            });
+
+        }]
+
+    };
+}]);

guacamole/src/main/webapp/app/list/styles/filter.css

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+.filter {
+    margin: 0.5em 0;
+}
+
+.filter .search-string {
+    background-image: url('images/magnifier.png');
+    background-repeat: no-repeat;
+    background-size: 1.75em;
+    background-position: 0.25em center;
+    padding: 0.5em;
+    padding-left: 2.25em;
+    width: 100%;
+    max-width: none;
+}

guacamole/src/main/webapp/app/list/templates/guacFilter.html

@@ -0,0 +1,27 @@
+<div class="filter">
+    <!--
+       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.
+    -->
+
+    <!-- Filter string -->
+    <input class="search-string" placeholder="{{placeholder()}}" type="text" ng-model="searchString"/>
+
+</div>

guacamole/src/main/webapp/app/manage/controllers/manageSessionsController.js

@@ -29,7 +29,6 @@ angular.module('manage').controller('manageSessionsController', ['$scope', '$inj
     // Required types
     var ActiveConnectionWrapper = $injector.get('ActiveConnectionWrapper');
     var ConnectionGroup         = $injector.get('ConnectionGroup');
-    var FilterPattern           = $injector.get('FilterPattern');
     var StableSort              = $injector.get('StableSort');
 
     // Required services
@@ -55,20 +54,6 @@ angular.module('manage').controller('manageSessionsController', ['$scope', '$inj
      */
     $scope.wrappers = null;
 
-    /**
-     * The filter search string to use to restrict the displayed active sessions
-     *
-     * @type String
-     */
-    $scope.filterSearchString = null;
-
-    /**
-     * The pattern object to use when filtering active sessions.
-     *
-     * @type FilterPattern
-     */
-    $scope.filterPattern = new FilterPattern();
-
     /**
      * StableSort instance which maintains the sort order of the visible
      * connection wrappers.
@@ -361,9 +346,4 @@ angular.module('manage').controller('manageSessionsController', ['$scope', '$inj
 
     };
     
-    // Recompile the filter pattern when changed
-    $scope.$watch('filterSearchString', function recompilePredicate(searchString) {
-        $scope.filterPattern.compile(searchString);
-    });
-
 }]);

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

@@ -76,18 +76,3 @@
 .manage table.session-list th.sort-primary.sort-descending:after {
     background-image: url('images/arrows/up.png');
 }
-
-.manage .sessions .filter {
-    margin: 0.5em 0;
-}
-
-.manage .sessions .filter-string {
-    background-image: url('images/magnifier.png');
-    background-repeat: no-repeat;
-    background-size: 1.75em;
-    background-position: 0.25em center;
-    padding: 0.5em;
-    padding-left: 2.25em;
-    width: 100%;
-    max-width: none;
-}

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

@@ -35,10 +35,10 @@ THE SOFTWARE.
         <div class="action-buttons">
             <button class="delete-sessions danger" ng-disabled="!canDeleteSessions()" ng-click="deleteSessions()">{{'MANAGE_SESSION.ACTION_DELETE' | translate}}</button>
         </div>
-        
+
-        <div class="filter">
+        <!-- Session filter -->
-            <input class="filter-string" placeholder="{{'MANAGE_SESSION.FIELD_PLACEHOLDER_FILTER' | translate}}" type="text" ng-model="filterSearchString"/>
+        <guac-filter filtered-items="filteredWrappers" items="wrappers"
-        </div>
+                     placeholder="'MANAGE_SESSION.FIELD_PLACEHOLDER_FILTER' | translate"></guac-filter>
 
         <!-- List of current user sessions -->
         <table class="session-list">
@@ -83,7 +83,7 @@ THE SOFTWARE.
 
         <!-- Pager for session list -->
         <guac-pager page="wrapperPage" page-size="25"
-                    items="wrappers | filter : filterPattern.predicate | orderBy : wrapperOrder.predicate"></guac-pager>
+                    items="filteredWrappers | orderBy : wrapperOrder.predicate"></guac-pager>
     </div>
 
 </div>