GUAC-1099: Paginate guacGroupList directive.

guacamole/src/main/webapp/app/groupList/directives/guacGroupList.js

@@ -21,7 +21,8 @@
  */
 
 /**
- * A directive which displays the contents of a connection group.
+ * A directive which displays the contents of a connection group within an
+ * automatically-paginated view.
  */
 angular.module('groupList').directive('guacGroupList', [function guacGroupList() {
 
@@ -75,7 +76,14 @@ angular.module('groupList').directive('guacGroupList', [function guacGroupList()
              * 
              * @type Boolean
              */
-            showRootGroup : '='
+            showRootGroup : '=',
+
+            /**
+             * The maximum number of connections or groups to show per page.
+             *
+             * @type Number
+             */
+            pageSize : '='
 
         },
 

guacamole/src/main/webapp/app/groupList/groupListModule.js

@@ -24,4 +24,4 @@
  * Module for displaying the contents of a connection group, allowing the user
  * to select individual connections or groups.
  */
-angular.module('groupList', ['rest']);
+angular.module('groupList', ['pager', 'rest']);

guacamole/src/main/webapp/app/groupList/templates/guacGroupList.html

@@ -51,6 +51,13 @@
 
     </script>
 
-    <div class="list-item" ng-repeat="item in rootItem.children | orderBy : 'name'" ng-include="'nestedGroup.html'"></div>
+    <!-- Root-level connections / groups -->
+    <div class="group-list-page">
+        <div class="list-item" ng-repeat="item in childrenPage" ng-include="'nestedGroup.html'"></div>
+    </div>
+
+    <!-- Pager for connections / groups -->
+    <guac-pager page="childrenPage" items="rootItem.children | orderBy : 'name'"
+                page-size="pageSize"></guac-pager>
 
 </div>

guacamole/src/main/webapp/app/home/templates/home.html

@@ -41,7 +41,8 @@
             <guac-group-list
                 connection-group="rootConnectionGroup"
                 connection-template="'app/home/templates/connection.html'"
-                connection-group-template="'app/home/templates/connectionGroup.html'"></guac-group-list>
+                connection-group-template="'app/home/templates/connectionGroup.html'"
+                page-size="20"></guac-group-list>
         </div>
 
     </div>