#75 basic pagination added on job history component

Author: tareq89

app/job/job-history/job-history.component.html

@@ -51,4 +51,18 @@
             </table>
         </div>
     </widget-body>
+    <widget-footer>
+        <ul class="pagination pagination-sm pull-right" *ngIf="status=='SUCCESSFUL'">
+            <li>
+                <a>&laquo;</a>
+            </li>
+            <li *ngFor="let page of paginationArray">
+                <a (click)="getJobsWithPageNumber(page)">{{page}}</a>
+            </li>
+            <li>
+                <a>&raquo;</a>
+            </li>
+        </ul>
+        <div class=clearfix></div>
+    </widget-footer>
 </div>

app/job/job-history/job-history.component.ts

@@ -31,6 +31,7 @@ export class JobHistoryComponent implements OnInit {
     accessMode: AccessMode = "DEFAULT";
     componentMode: ComponentMode = "WIDGET";
     statusMessage: string;
+    paginationArray: number[];
 
     constructor(private jobService: JobService, private router: Router) {
     }
@@ -48,18 +49,42 @@ export class JobHistoryComponent implements OnInit {
         this.jobs = new Array<Job>();
         this.jobService.getHistory()
             .subscribe((pagedJob) => {
-                this.status = "SUCCESSFUL";
-                this.jobs = pagedJob.data;
-                if (!this.jobs.length) {
-                    this.status = "EMPTY";
-                    this.statusMessage = "It looks lonely here. Why don't you put an order?";
-                }
+                this.manageHistory(pagedJob);
             }, (error) => {
                 this.statusMessage = error.Message || "Failed to fetch data from server";
                 this.status = "FAILED";
             });
     }
 
+
+
+    getJobsWithPageNumber(page: number){
+        this.status = "IN_PROGRESS"
+        this.jobService.getHistoryWithPageNumber(page)
+            .subscribe((pagedJob) => {
+                this.manageHistory(pagedJob)
+            },(error) => {
+                this.statusMessage = error.Message || "Failed to fetch data from server";
+                this.status = "FAILED";
+            })
+    }
+
+    private manageHistory(pagedJob){
+        this.status = "SUCCESSFUL";
+        this.jobs = pagedJob.data;
+
+        // FIXME: This is an ugly code I confess
+        this.paginationArray = new Array();
+        for (var i = 0; i < pagedJob.pagination.TotalPages; i++) {
+            this.paginationArray.push(i + 1);
+        }
+
+        if (!this.jobs.length) {
+            this.status = "EMPTY";
+            this.statusMessage = "It looks lonely here. Why don't you put an order?";
+        }
+    }
+
     setJobStatusLabelClass(state: string) {
         switch (state) {
             case "COMPLETED":

app/job/shared/job.service.ts

@@ -25,20 +25,35 @@ export class JobService {
     private jobUrl = AppSettings.TASKCAT_API_BASE + 'job';
     private assetLocationUrl = AppSettings.SHADOWCAT_API_BASE + "location/";
 
+    getJobs(jobUrl): Observable<PageEnvelope<Job>> {
+        return this.shttp.secureGet(jobUrl)
+            .map(this._extractData)
+            .catch(error => {
+                let errMsg = error.message || 'Exception when fetching job history';
+                console.error(errMsg); // log to console instead
+                return Observable.throw(errMsg);
+            });
+    }
+
     getHistory(): Observable<PageEnvelope<Job>> {
         let queryString: string = this._queryBuilder.orderBy([
             {
                 propName: "CreateTime",
                 orderDirection: "desc"
             }]).toQueryString();
+        let historyUrl = this.jobUrl + '/odata' + queryString
 
-        return this.shttp.secureGet(this.jobUrl + '/odata' + queryString)
-            .map(this._extractData)
-            .catch(error => {
-                let errMsg = error.message || 'Exception when fetching job history';
-                console.error(errMsg); // log to console instead
-                return Observable.throw(errMsg);
-            });
+        return this.getJobs(historyUrl);
+    }
+
+    getHistoryWithPageNumber(page:number): Observable<PageEnvelope<Job>> {
+        let queryString: string = this._queryBuilder.toQueryString();
+        let historyUrl = this.jobUrl + '/odata' + queryString + "&page=" + page;
+        console.log(this.jobUrl);
+        console.log(queryString);
+        console.log(historyUrl);
+
+        return this.getJobs(historyUrl)
     }
 
 

app/shared/query-builder/query-builder.ts

@@ -20,6 +20,14 @@ export class QueryBuilder {
         return this;
     }
 
+    public page(props: number): QueryBuilder {
+        let querySegment: string = "page";
+        let pageSegment = props.toString();
+        this._querySegments.push(querySegment.concat("=", pageSegment));
+
+        return this;
+    }
+
     public toQueryString(): string {
         return "?".concat(this._querySegments.join("&"));
     }