target detail-sensorlist

src/packages/sensor/model/Sensor.ts

@@ -11,4 +11,5 @@ export interface Sensor {
   crawler?: MetaCrawler;
   crawlerInputItems?: string;
   itemCount?: number;
+  displayName?: string;
 }

src/packages/target/component/detail/detail.component.html

@@ -1,4 +1,3 @@
-<h1>Sensors</h1>
 <div *ngIf="infra">
     <div class="ui-g">
         <div class="ui-g-12">
@@ -41,25 +40,24 @@
             <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
                 <ng-template pTemplate="header">
                     <tr>
-                        <th>No.</th>
-                        <th>Description</th>
+                        <th>Alias</th>
                         <th>Status</th>
                         <th>Crawler</th>
                         <th>Items</th>
                         <th>Created at</th>
                     </tr>
                 </ng-template>
-                <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
+                <ng-template pTemplate="body" let-sensor>
                     <tr [pSelectableRow]="sensor">
-                        <td>{{rowIndex + 1}}</td>
-                        <td>{{sensor.Description}}</td>
+                        <td>{{sensor.displayName}}</td>
                         <td>{{sensor.status.name}}</td>
                         <td>{{sensor.crawler.name}}</td>
-                        <td>???</td>
+                        <td>{{sensor.itemCount}}</td>
                         <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
                     </tr>
                 </ng-template>
             </p-table>
+            <p-paginator [rows]="pageSize" [totalRecords]="sensorsCount" (onPageChange)="onPaging($event)"></p-paginator>
         </div>
     </div>
 </div>

src/packages/target/component/detail/detail.component.ts

@@ -10,6 +10,7 @@ import { RPCClientError } from '@loafer/ng-rpc/protocol';
 
 import { sensorListSelector } from 'packages/sensor/store';
 import * as SensorListStore from 'packages/sensor/store/list';
+import { PageParams, Page } from 'app/commons/model';
 
 
 @Component({
@@ -23,9 +24,16 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
   sensorsSubscription$: Subscription;
   sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
 
+  infraId = null;
   infra: Infra;
+  sensors: Sensor[];
+  sensorsCount = 0;
   sensorSettingDisplay = false;
 
+  pageSize = '10';
+  totalLength = 0;
+  currPage = 0;
+
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -42,15 +50,23 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
         console.log(error.response.message);
       }
     );
+    this.sensorsSubscription$ = this.sensors$.subscribe(
+      (page: Page) => {
+        if (page) {
+          this.sensorsCount = page.totalElements;
+          this.sensors = page.content;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
   }
 
   ngAfterContentInit() {
-    const infraId = this.route.snapshot.paramMap.get('id');
-    this.infraDetailStore.dispatch(
-      new InfraDetailStore.Read(
-        { id: infraId }
-      )
-    );
+    this.infraId = this.route.snapshot.paramMap.get('id');
+    this.getInfra();
+    this.getSensors(this.currPage);
   }
 
   ngOnDestroy() {
@@ -59,6 +75,28 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
     }
   }
 
+  getInfra() {
+    this.infraDetailStore.dispatch(
+      new InfraDetailStore.Read(
+        { id: this.infraId }
+      )
+    );
+  }
+
+  getSensors(pageIndex) {
+    const pageParams: PageParams = {
+      pageNo: pageIndex + '',
+      countPerPage: this.pageSize,
+      sortCol: 'id',
+      sortDirection: 'descending'
+    };
+    this.sensorListStore.dispatch(
+      new SensorListStore.ReadAllByInfra(
+        { id: this.infraId, pageParams: pageParams }
+      )
+    );
+  }
+
   onAddSensor() {
     this.sensorSettingDisplay = true;
   }
@@ -67,4 +105,8 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
     this.sensorSettingDisplay = false;
   }
 
+  onPaging(e) {
+    this.getSensors(e.page);
+}
+
 }