Demo ui for refreshed REST API : task pagination cont. + group queries

modules/activiti-webapp-angular/src/main/webapp/app/scripts/app.js

 'use strict';
 
 angular.module('activitiApp', ['ui', 'filters', 'ui.bootstrap'])
+
+    // Temporary until we have a login page: always log in with kermit:kermit
+    .config(['$httpProvider', function ($httpProvider) {
+        $httpProvider.defaults.headers.common['Authorization'] = 'Basic a2VybWl0Omtlcm1pdA==';
+    }])
+
     .config(['$routeProvider', function ($routeProvider) {
         $routeProvider
             .when('/', {

modules/activiti-webapp-angular/src/main/webapp/app/scripts/controllers/task.js

@@ -7,8 +7,12 @@ angular.module('activitiApp')
         $scope.loadingTasks = true;
         $scope.pageSize = 10;
         $scope.currentPage = 1;
+        var noGroupId = '_activiti_invalid_group';
+        var noGroupElement = { 'name' : '', 'id' : noGroupId};
 
-        /* Fetch tasks async when controller instantiates */
+        /*
+         * Fetch tasks async when controller instantiates
+         */
         $http.get('http://localhost:8080/activiti-webapp-rest2/service/runtime/tasks').
             success(function (data, status, headers, config) {
                 showTasks(data);
@@ -18,17 +22,48 @@ angular.module('activitiApp')
                 $scope.loadingTasks = false;
             });
 
-        /* Task searching */
+        // TODO: extract this in separate logic later!
+        // TODO: remove hardcoded kermit dependency
+        /*
+         * Fetch user async when controller instantiates
+         */
+        $http.get('http://localhost:8080/activiti-webapp-rest2/service/user/kermit/groups').
+            success(function (data, status, headers, config) {
+                var groups = [];
+                groups.push(noGroupElement);
+                for (var i=0; i<data.data.length; i++) {
+                    if (data.data[i].type == 'assignment') {
+                        groups.push(data.data[i]);
+                    }
+                }
+
+                if (groups.length > 0) {
+                    $scope.groups = groups;
+                    $scope.candidateGroup = groups[0];
+                }
+
+            }).
+            error(function (data, status, headers, config) {
+                console.log('Couldn\'t fetch user groups : ' + status);
+            });
+
+        /*
+         * Task searching
+         */
         $scope.search = function () {
             executeSearch();
         };
 
-        /* Task pagination */
+        /*
+         * Task pagination
+         */
         $scope.switchPage = function (page) {
             executeSearch(page);
         };
 
-        /** Builds the URL */
+        /**
+         * Builds the URL
+         */
         var createUrl = function (page) {
             var url = encodeURI("http://localhost:8080/activiti-webapp-rest2/service/runtime/tasks?size=" + $scope.pageSize);
 
@@ -44,12 +79,19 @@ angular.module('activitiApp')
                 url = url + "&start=0";
             }
 
+            // Group
+            if ($scope.candidateGroup && $scope.candidateGroup.id != noGroupId) {
+                url = url + "&candidateGroup=" + $scope.candidateGroup.id;
+            }
+
             url = encodeURI(url);
             console.log("Calling URL " + url);
             return url;
         };
 
-        /* Execute the async search */
+        /*
+         * Execute the async search
+         */
         var executeSearch = function (page) {
             $scope.loadingTasks = true;
             $http.get(createUrl(page)).
@@ -60,24 +102,28 @@ angular.module('activitiApp')
                     console.log('Couldn\'t fetch tasks : ' + status);
                     $scope.loadingTasks = false;
                 });
-        }
+        };
 
-        /* Show the results from a rest call on the screen */
+        /*
+         * Show the results from a rest call on the screen
+         */
         var showTasks = function (data) {
 
             // Task data
             $scope.tasks = data.data;
             $scope.loadingTasks = false;
 
-            // Pagination
+
             var total = data.total;
             var pageSize = $scope.pageSize;
+            var realSize = data.size;
             var start = data.start;
 
             console.log("Total = " + total);
             console.log("size = " + pageSize);
             console.log("Start = " + start);
 
+            // Pagination
             if (total > pageSize) {
 
                 $scope.numberOfPages = Math.floor(total / pageSize);
@@ -95,6 +141,15 @@ angular.module('activitiApp')
 
             }
 
+            // Description above tasks
+            if (total > 0) {
+                $scope.indexOfFirstTask = start + 1;
+                $scope.indexOfLastTask = start + realSize;
+                $scope.totalNumberOfTasks = total;
+            } else {
+                $scope.totalNumberOfTasks = 0;
+            }
+
             console.log("Current page is " + $scope.currentPage);
 
         };

modules/activiti-webapp-angular/src/main/webapp/app/styles/main.css

@@ -23,6 +23,13 @@
     height: 40px;
 }
 
+.panel-header-text {
+    color: #7c8280;
+    font-size: smaller;
+    display: inline-block;
+    padding: 2px;
+}
+
 .task-panel {
     border: 1px solid lightgrey;
     border-radius: 10px;
@@ -41,26 +48,61 @@
 #tasks {
     border-bottom: 1px solid lightgrey;
     overflow: auto;
-    max-height: 490px;
-    min-height: 490px;
+    max-height: 460px;
+    min-height: 460px;
 }
 
 .task {
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
     cursor: pointer;
-    height: 20px;
-    line-height: 20px;
+    height: 30px;
+    line-height: 30px;
     padding: 10px;
 }
 
 .task:hover {
-    background-color: #C3D9FF;
+    background-color: #f5f5f5;
+    border-bottom: 1px solid lightgrey;
+    border-top: 1px solid lightgrey;
 }
 
 #task-search {
+    float: left;
     margin-left: 10px;
+    margin-top: 5px;
 }
 
 #task-paging {
-    margin-top: 5px;
+    float:right;
+    height: 24px;
+    margin: 7px 15px 0 0;
     width: 60px;
-}
+}
\ No newline at end of file
+
+.task-counts {
+    background-color: #F0F0F0;
+    border-bottom: 1px solid lightgrey;
+    color: dimgray;
+    font-size: smaller;
+    text-align: center;
+}
+
+#task-pagination li {
+    cursor: pointer;
+}
+
+#panel-header-section-group {
+    background:url('../img/vertical-separator.png') no-repeat center left;
+    display: inline-block;
+    float: right;
+    margin-right: 10px;
+    padding-left: 10px;
+}
+
+#task-group-select {
+    height: 24px;
+    margin-top: 7px;
+    width: 130px;
+}
+

modules/activiti-webapp-angular/src/main/webapp/app/views/tasks.html

@@ -16,8 +16,18 @@
             <option>100</option>
         </select>
 
+        <!-- Group selection -->
+        <div id="panel-header-section-group">
+            <span class="panel-header-text">Group:</span>
+            <select id="task-group-select" ng-model="candidateGroup" ng-options="group.name for group in groups"
+                    ng-change="search()" ng-show="groups != undefined">
+            </select>
+        </div>
+
     </div>
 
+    <div style="clear: both;"></div>
+
     <div id="tasks">
         <img src="img/loading.gif" ng-show="loadingTasks">
 
@@ -27,7 +37,16 @@
 
     </div>
 
-    <div ng-show="numberOfPages && numberOfPages > 0">
+    <div class="task-counts">
+            <span ng-show="totalNumberOfTasks > 0">
+                Showing {{indexOfFirstTask}}-{{indexOfLastTask}} of {{totalNumberOfTasks}} tasks
+            </span>
+            <span ng-show="totalNumberOfTasks == 0">
+                No tasks found
+            </span>
+    </div>
+
+    <div id="task-pagination" ng-show="numberOfPages && numberOfPages > 0">
         <pagination boundary-links="true" num-pages="numberOfPages" current-page="currentPage"
                     max-size="5" class="pagination-centered" on-select-page="switchPage(page)"></pagination>
     </div>