ing

@overflow/target/component/list/list.component.html

@@ -1,6 +1,10 @@
 <h1>Targets</h1>
+<div *ngIf="!targetPage; else content">
+  No data
+</div>
 
-<p-table [value]="page.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" >
+<ng-template #content>
+<p-table [value]="targetPage.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" >
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 4em">No.</th>
@@ -26,5 +30,7 @@
     </tr>
   </ng-template>
 </p-table>
-<p-paginator #paginator [rows]="page.size" [totalRecords]="page.totalElements"
+<p-paginator #paginator [rows]="targetPage.size" [totalRecords]="targetPage.totalElements"
              (onPageChange)="onPaginate($event)" ></p-paginator>
+</ng-template>
+

@overflow/target/component/list/list.component.ts

@@ -1,25 +1,45 @@
-import { Component, OnInit, AfterContentInit, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Infra } from '@overflow/commons-typescript/model/infra';
-import { Probe } from '@overflow/commons-typescript/model/probe';
+import {
+  Component,
+  OnInit,
+  Input,
+  EventEmitter,
+  Output,
+  ViewChild,
+  OnChanges,
+  SimpleChanges
+} from '@angular/core';
+
+import {
+  Observable,
+  of
+} from 'rxjs';
+import { Store } from '@ngrx/store';
+import {
+  catchError,
+  map,
+  tap,
+  take
+} from 'rxjs/operators';
+
 import { Target } from '@overflow/commons-typescript/model/target';
-
-import { Observable, of, Subscription } from 'rxjs';
-import { Store, select } from '@ngrx/store';
-import { catchError, map, tap, take } from 'rxjs/operators';
-
 import { TargetService } from '../../service/target.service';
-import { InfraService } from '@overflow/infra/service/infra.service';
 import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
 import { Page } from '@overflow/commons-typescript/model/commons/Page';
+import { Paginator } from 'primeng/primeng';
 
 @Component({
   selector: 'of-target-list',
   templateUrl: './list.component.html',
 })
-export class ListComponent implements OnInit {
+export class ListComponent implements OnInit, OnChanges {
 
-  page: Page<Target>;
+  @Input() probeID;
+  @Input() pageIdx;
+  @Output() pageChange = new EventEmitter<number>();
+
+  @ViewChild('paginator') paginator: Paginator;
+
+  targetPage: Page<Target>;
   pending$: Observable<boolean>;
   error$: Observable<any>;
 
@@ -32,18 +52,39 @@ export class ListComponent implements OnInit {
   ngOnInit() {
     const pageParams: PageParams = {
       pageNo: 0,
-      countPerPage: 5,
+      countPerPage: 2,
       sortCol: 'id',
       sortDirection: 'descending',
     };
 
-    this.targetService.readAllByProbeID(1, pageParams)
+    this.getTargetList(pageParams);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(changes);
+    if (changes['pageIdx'] && this.paginator) {
+
+      const pageParams: PageParams = {
+        pageNo: this.pageIdx - 1,
+        countPerPage: 2,
+        sortCol: 'id',
+        sortDirection: 'descending',
+      };
+      console.log(this.pageIdx);
+      this.paginator.changePage(this.pageIdx);
+      this.getTargetList(pageParams);
+    }
+  }
+
+  private getTargetList(pageParams: PageParams) {
+
+    this.targetService.readAllByProbeID(this.probeID, pageParams)
       .pipe(
         tap(() => {
           this.pending$ = of(true);
         }),
         map((page: Page<Target>) => {
-          this.page = page;
+          this.targetPage = page;
         }),
         catchError(err => {
           console.log(err);
@@ -56,20 +97,6 @@ export class ListComponent implements OnInit {
       ).subscribe();
   }
 
-  getInfras(pageNo) {
-    // const pageParams: PageParams = {
-    //     pageNo: pageNo + '',
-    //     countPerPage: this.pageSize,
-    //     sortCol: 'id',
-    //     sortDirection: 'descending'
-    // };
-    // this.infraListStore.dispatch(
-    //     new InfraListStore.ReadAllByProbe(
-    //         { probe: this.probe, pageParams: pageParams }
-    //     )
-    // );
-  }
-
   onRowSelect(event) {
     // this.router.navigate(['target'], { queryParams: { target: event.data.id } });
     // this.router.navigate(['target', event.data.id, 'info']);
@@ -80,7 +107,7 @@ export class ListComponent implements OnInit {
     // this.sensorSettingDisplay = true;
   }
 
-  onPaginate(event) {
-
+  onPaginate(e) {
+    this.pageChange.emit(e.page);
   }
 }

src/app/pages/targets/target-list-page.component.html

@@ -2,7 +2,7 @@
     <div class="ui-g">
         <div class="ui-g-12">
             <div class="card no-margin">
-              <of-target-list></of-target-list>
+              <of-target-list [probeID]="probeID" [pageIdx]="pageIdx" (pageChange)="onPageChange($event)"></of-target-list>
             </div>
         </div>
     </div>

src/app/pages/targets/target-list-page.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'of-pages-target-list',
@@ -7,13 +7,20 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class TargetListPageComponent implements OnInit {
 
-  // @Input() probeHostID: string;
+  @Input() probeID: number;
+  pageIdx: number;
 
   constructor(
+    private router: Router,
     private route: ActivatedRoute
   ) { }
 
   ngOnInit() {
 
   }
+
+  onPageChange(pageNo: number) {
+    this.pageIdx = pageNo + 1;
+    this.router.navigate(['/probe', this.probeID, 'target'], { queryParams: { page: pageNo + 1 } });
+  }
 }

src/app/pages/targets/target-page.component.html

@@ -3,7 +3,7 @@
         <div class="card no-margin">
           <!--<router-outlet *ngIf="probeID !== undefined" else complete></router-outlet>-->
           <!--<ng-template #complete>-->
-            <of-pages-target-list></of-pages-target-list>
+            <of-pages-target-list [probeID]="probeID" ></of-pages-target-list>
           <!--</ng-template>-->
         </div>
     </div>

src/app/pages/targets/target-page.component.ts

@@ -7,13 +7,13 @@ import {BreadcrumbService} from '../../commons/service/breadcrumb.service';
   templateUrl: './target-page.component.html',
 })
 export class TargetPageComponent implements OnInit {
-  // probeHostID: string;
+  probeID: number;
 
   constructor(
     private router: Router,
     private activatedRoute: ActivatedRoute,
   ) {
-    // this.probeHostID = this.activatedRoute.snapshot.params['id'];
+    this.probeID = this.activatedRoute.snapshot.params['id'];
   }
 
   ngOnInit() {