#75 history component pagination works

NerdCats · Jul 20, 2016 · 07d970e · 07d970e
1 parent 79b429d
commit 07d970e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git a/app/job/job-history/job-history.component.css b/app/job/job-history/job-history.component.css
@@ -0,0 +1,4 @@
+.selected {
+    background-color: #337ab7 !important;
+    color: white;
+}
diff --git a/app/job/job-history/job-history.component.html b/app/job/job-history/job-history.component.html
@@ -53,14 +53,14 @@
     </widget-body>
     <widget-footer>
         <ul class="pagination pagination-sm pull-right" *ngIf="status=='SUCCESSFUL'">
-            <li>
-                <a>&laquo;</a>
+            <li *ngIf="pagination.PrevPage">
+                <a class="pointer" (click)="loadJobWithUrl(pagination.PrevPage)">&laquo;</a>
             </li>
-            <li *ngFor="let page of paginationArray">
-                <a (click)="getJobsWithPageNumber(page)">{{page}}</a>
+            <li  *ngFor="let page of paginationArray">
+                <a class="{{page.isSelected}} pointer" (click)="getJobsWithPageNumber(page.pageNo)">{{page.pageNo + 1}}</a>
             </li>
-            <li>
-                <a>&raquo;</a>
+            <li *ngIf="pagination.NextPage">
+                <a class="pointer" (click)="loadJobWithUrl(pagination.NextPage)">&raquo;</a>
             </li>
         </ul>
         <div class=clearfix></div>

diff --git a/app/job/job-history/job-history.component.ts b/app/job/job-history/job-history.component.ts
@@ -4,6 +4,7 @@ import { Router, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
 
 import {JobService} from '../shared/job.service';
 import {Job} from '../shared/job';
+import {Pagination} from '../../shared/pagination';
 
 import {ComponentServiceStatus} from '../../shared/component-service-status';
 
@@ -18,7 +19,8 @@ export type ComponentMode = "WIDGET" | "FULL";
     selector: 'job-history',
     templateUrl: 'app/job/job-history/job-history.component.html',
     directives: [ProgressBubbleComponent, WidgetHeaderComponent, WidgetBodyComponent],
-    providers: [JobService]
+    providers: [JobService],
+    styleUrls: ['app/job/job-history/job-history.component.css']
 })
 export class JobHistoryComponent implements OnInit {
     @Input()
@@ -31,7 +33,8 @@ export class JobHistoryComponent implements OnInit {
     accessMode: AccessMode = "DEFAULT";
     componentMode: ComponentMode = "WIDGET";
     statusMessage: string;
-    paginationArray: number[];
+    pagination: Pagination;
+    paginationArray: Object[];
 
     constructor(private jobService: JobService, private router: Router) {
     }
@@ -51,39 +54,57 @@ export class JobHistoryComponent implements OnInit {
             .subscribe((pagedJob) => {
                 this.manageHistory(pagedJob);
             }, (error) => {
-                this.statusMessage = error.Message || "Failed to fetch data from server";
-                this.status = "FAILED";
+                this.manageError(error);
             });
     }
 
 
 
     getJobsWithPageNumber(page: number){
-        this.status = "IN_PROGRESS"
+        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";
+                this.manageError(error);
+            })
+    }
+
+
+    loadJobWithUrl(url: string){
+        this.status = "IN_PROGRESS";
+        this.jobService.getJobs(url)
+            .subscribe((pagedJob)=> {
+                this.manageHistory(pagedJob)
+            }, (error) => {
+                this.manageError(error);
             })
     }
 
     private manageHistory(pagedJob){
         this.status = "SUCCESSFUL";
         this.jobs = pagedJob.data;
+        this.pagination = pagedJob.pagination;
 
         // 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);
+            let page = { isSelected: "", pageNo: i }
+            if (pagedJob.pagination.Page == i) {
+                page.isSelected = "selected"
+            }
+            this.paginationArray.push(page);
         }
 
         if (!this.jobs.length) {
             this.status = "EMPTY";
             this.statusMessage = "It looks lonely here. Why don't you put an order?";
         }
     }
+    private manageError(error){
+        this.statusMessage = error.Message || "Failed to fetch data from server";
+        this.status = "FAILED";
+    }
 
     setJobStatusLabelClass(state: string) {
         switch (state) {

diff --git a/app/job/shared/job.service.ts b/app/job/shared/job.service.ts
@@ -48,11 +48,7 @@ export class JobService {
 
     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);
-
+        let historyUrl = this.jobUrl + '/odata' + queryString + "&page=" + page; //FIXME: this url should be constructed by _queryBuilder
         return this.getJobs(historyUrl)
     }