ing

src/packages/sensor/component/list/list.component.html

@@ -17,36 +17,36 @@
       </div>
     </div>
 
-    <!-- target 별 sensor list -->
     <div fxFlex="80%" class="example-container mat-elevation-z8">
       <div fxLayout="row">
-        <div fxFlex="20">aaaaaaaaaaaaaaaaaaa</div>
-
-        <div fxFlex="80">
           <mat-table #table [dataSource]="dataSource" matSort>
 
-            <ng-container matColumnDef="status">
-              <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
-              <mat-cell *matCellDef="let element"> ? </mat-cell>
-            </ng-container>
-
-            <ng-container matColumnDef="type">
-              <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
-              <mat-cell *matCellDef="let element"> {{element.infraType.name}} </mat-cell>
-            </ng-container>
-
-            <ng-container matColumnDef="name">
-              <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+            <ng-container matColumnDef="target">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Target </mat-header-cell>
               <mat-cell *matCellDef="let element"> {{element.target.displayName}} </mat-cell>
             </ng-container>
 
-            <ng-container matColumnDef="sensors">
-              <mat-header-cell *matHeaderCellDef mat-sort-header> Sensors </mat-header-cell>
-              <mat-cell *matCellDef="let element"> ? </mat-cell>
+            <ng-container matColumnDef="crawler">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Crawler </mat-header-cell>
+              <mat-cell *matCellDef="let element"> {{element.crawler.name}} </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="itemCount">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Items </mat-header-cell>
+              <mat-cell *matCellDef="let element"> {{element.itemCount}} </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="status">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
+              <mat-cell *matCellDef="let element"> {{element.status.name}} </mat-cell>
             </ng-container>
 
             <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
           </mat-table>
+
+          <mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">
+          </mat-paginator>
+
         </div>
       </div>
 

src/packages/sensor/component/list/list.component.ts

@@ -9,10 +9,12 @@ import { Store, select } from '@ngrx/store';
 import * as SensorStore from '../../store';
 
 import { RPCError } from 'packages/core/rpc/error';
-import * as ReadAllByDomainStore from '../../store/readallbydomain';
-import { ReadAllByMemberSelector } from '../../store';
+import * as ListStore from '../../store/list';
+import { sensorListSelector } from '../../store';
 import { Domain } from '../../../domain/model';
 import { SettingComponent } from '../setting/setting.component';
+import { AuthSelector } from 'packages/member/store';
+import { Page, PageParams } from 'app/commons/model';
 
 @Component({
   selector: 'of-sensor-list',
@@ -21,75 +23,58 @@ import { SettingComponent } from '../setting/setting.component';
 })
 export class ListComponent implements OnInit, AfterContentInit {
 
-  sensorList$ = this.store.pipe(select(ReadAllByMemberSelector.select('sensorList')));
+  sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
 
-  displayedColumns = ['crawler', 'type', 'name', 'sensors'];
+  displayedColumns = ['target', 'crawler', 'itemCount', 'status'];
   dataSource: MatTableDataSource<Sensor>;
   @ViewChild(MatSort) sort: MatSort;
+  PAGE_SIZE = '10';
+  totalLength = 0;
 
-  /**
-   * Set the sort after the view init since this component will
-   * be able to query its view for the initialized sort.
-   */
-  ngAfterContentInit() {
-    // temporary data
-    // const data: Sensor[] = new Array();
-    // for (let i = 0; i < 3; i++) {
-    //   const t: Sensor = {
-    //     id: i,
-    //     target: {
-    //       id: 1,
-    //       displayName: '192.168.1.1',
-    //     },
-    //     crawler: {
-    //       id: 1,
-    //       name: 'WMI'
-    //     },
-    //   };
-    //   data.push(t);
-    // }
-
-    this.store.select(ReadAllByMemberSelector.select('domain')).subscribe(
-      (domain: Domain) => {
-        this.store.dispatch(new ReadAllByDomainStore.ReadAllByDomain(domain));
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
-
-    // const domain: Domain = {
-    //   id: 1
-    // };
-
-    // this.store.dispatch(new ReadAllByDomainStore.ReadAllByDomain(domain));
+  constructor(private router: Router,
+    private store: Store<ListStore.State>,
+    private dialog: MatDialog,
+  ) { }
 
+  ngOnInit() {
     this.sensorList$.subscribe(
-      (probes: Sensor[]) => {
-        console.log(probes);
-        this.dataSource = new MatTableDataSource(probes);
+      (page: Page) => {
+        if (page != null) {
+          this.totalLength = page.totalElements;
+          this.dataSource = new MatTableDataSource(page.content);
           this.dataSource.sort = this.sort;
+        }
       },
       (error: RPCError) => {
         console.log(error.response.message);
       }
     );
-
-
-    // this.dataSource = new MatTableDataSource(data);
-    // this.dataSource.sort = this.sort;
   }
 
-  constructor(private router: Router,
-    private store: Store<ReadAllByDomainStore.State>,
-    private dialog: MatDialog,
-  ) { }
+  ngAfterContentInit() {
+    this.getSensors(0);
+  }
 
-  ngOnInit() {
+  getSensors(pageIndex: number) {
+    this.store.select(AuthSelector.select('domain')).subscribe(
+      (domain: Domain) => {
+        const pageParams: PageParams = {
+          pageNo: pageIndex + '',
+          countPerPage: this.PAGE_SIZE,
+          sortCol: 'id',
+          sortDirection: 'descending'
+        };
+
+        this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
   }
 
   handleRowClick(obj: Sensor) {
-    this.router.navigate(['target', obj.id]);
+    // this.router.navigate(['target', obj.id]);
   }
 
   addSensor() {

src/packages/sensor/service/sensor.service.ts

@@ -5,8 +5,8 @@ import 'rxjs/add/operator/map';
 
 import { RPCClient } from 'packages/core/rpc/client/RPCClient';
 
-import { Sensor } from '../model';
 import { Domain } from '../../domain/model';
+import { PageParams, Page } from 'app/commons/model';
 
 
 @Injectable()
@@ -18,8 +18,8 @@ export class SensorService {
 
   }
 
-  public readAllByDomain(domain: Domain): Observable<Sensor[]> {
-    return this.rpcClient.call('SensorService.readAllByDomain', domain);
+  public readAllByDomain(domain: Domain, pageParams: PageParams): Observable<Page> {
+    return this.rpcClient.call('SensorService.readAllByDomain', domain, pageParams);
   }
 
 

src/packages/sensor/store/index.ts

@@ -8,23 +8,23 @@ import {
 
   import { MODULE } from '../sensor.constant';
 
-  import * as ReadAllByDomainStore from './readallbydomain';
+  import * as ReadAllByDomainStore from './list';
 
   export interface State {
-    readallbydomain: ReadAllByDomainStore.State;
+    list: ReadAllByDomainStore.State;
   }
 
   export const REDUCERS = {
-    readallbymember: ReadAllByDomainStore.reducer,
+    list: ReadAllByDomainStore.reducer,
   };
 
   export const EFFECTS = [
     ReadAllByDomainStore.Effects,
   ];
 
-  export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
+  export const selectState = createFeatureSelector<State>(MODULE.name);
 
-  export const ReadAllByMemberSelector = new StateSelector<ReadAllByDomainStore.State>(createSelector(
-    selectNotificationState,
-    (state: State) => state.readallbydomain
+  export const sensorListSelector = new StateSelector<ReadAllByDomainStore.State>(createSelector(
+    selectState,
+    (state: State) => state.list
   ));

src/packages/sensor/store/list/index.ts

@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';

src/packages/sensor/store/list/list.action.ts

@@ -2,8 +2,8 @@ import { Action } from '@ngrx/store';
 
 import { RPCError } from 'packages/core/rpc/error';
 
-import { Sensor } from '../../model';
-import { Domain } from '../../../domain/model';
+import { Domain } from 'packages/domain/model';
+import { PageParams, Page } from 'app/commons/model';
 
 export enum ActionType {
   ReadAllByDomain = '[Sensor.ReadAllByDomain] ReadAllByDomain',
@@ -14,13 +14,13 @@ export enum ActionType {
 export class ReadAllByDomain implements Action {
   readonly type = ActionType.ReadAllByDomain;
 
-  constructor(public payload: Domain) {}
+  constructor(public payload: { domain: Domain, pageParams: PageParams}) {}
 }
 
 export class ReadAllByDomainSuccess implements Action {
   readonly type = ActionType.ReadAllByDomainSuccess;
 
-  constructor(public payload: Sensor[]) {}
+  constructor(public payload: Page) {}
 }
 
 export class ReadAllByDomainFailure implements Action {

src/packages/sensor/store/list/list.effect.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed, inject } from '@angular/core/testing';
 
-import { Effects } from './readallbydomain.effect';
+import { Effects } from './list.effect';
 
 describe('ReadAllByDomain.Effects', () => {
   beforeEach(() => {

src/packages/sensor/store/list/list.effect.ts

@@ -23,26 +23,27 @@ import {
   ReadAllByDomainSuccess,
   ReadAllByDomainFailure,
   ActionType,
-} from './readallbydomain.action';
+} from './list.action';
 
 @Injectable()
 export class Effects {
 
   constructor(
     private actions$: Actions,
-    private sensorService: SensorService,
+    private service: SensorService,
     private router: Router
   ) { }
 
   @Effect()
-  readAllByMember$: Observable<Action> = this.actions$
+  readAllByDomain$: Observable<Action> = this.actions$
     .ofType(ActionType.ReadAllByDomain)
     .map((action: ReadAllByDomain) => action.payload)
-    .exhaustMap(domain =>
-      this.sensorService
-      .readAllByDomain(domain)
-        .map(sensorList => new ReadAllByDomainSuccess(sensorList))
-        .catch(error => of(new ReadAllByDomainFailure(error)))
-    );
+    .switchMap(payload => this.service.readAllByDomain(payload.domain, payload.pageParams))
+    .map(list => {
+      return new ReadAllByDomainSuccess(list);
+    })
+    .catch((error: RPCError) => {
+      return of(new ReadAllByDomainFailure(error));
+    });
 
 }

src/packages/sensor/store/list/list.reducer.ts

@@ -1,12 +1,12 @@
 import {
     Actions,
     ActionType,
-  } from './readallbydomain.action';
+  } from './list.action';
 
   import {
     State,
     initialState,
-  } from './readallbydomain.state';
+  } from './list.state';
 
   import { Sensor } from '../../model';
 
@@ -25,7 +25,7 @@ import {
           ...state,
           error: null,
           pending: false,
-          sensorList: action.payload
+          page: action.payload
         };
       }
 
@@ -34,7 +34,7 @@ import {
           ...state,
           error: action.payload,
           pending: false,
-          sensorList: null,
+          page: null,
         };
       }
 

src/packages/sensor/store/list/list.state.ts

@@ -1,15 +1,15 @@
 import { RPCError } from 'packages/core/rpc/error';
 
-import { Sensor } from '../../model';
+import { Page } from 'app/commons/model';
 
 export interface State {
   error: RPCError | null;
   pending: boolean;
-  sensorList: Sensor[] | null;
+  page: Page | null;
 }
 
 export const initialState: State = {
   error: null,
   pending: false,
-  sensorList: null,
+  page: null,
 };

src/packages/sensor/store/readallbydomain/index.ts

@@ -1,4 +0,0 @@
-export * from './readallbydomain.action';
-export * from './readallbydomain.effect';
-export * from './readallbydomain.reducer';
-export * from './readallbydomain.state';