sensor paging sorting

src/ts/@overflow/history/react/components/HistoryList.tsx

@@ -116,7 +116,7 @@ export class HistoryList extends React.Component<Props, State> {
     return metaType;
   }
 
-  public handlePaging = (pageNo: number) => {
+  private handlePaging = (pageNo: number) => {
     let probe: Probe = {
       id: Number(1),
     };

src/ts/@overflow/sensor/react/SensorList.tsx

@@ -7,8 +7,6 @@ import {
   DispatchProps as SensorListDispatchProps,
 } from './components/SensorList';
 import State from '../redux/state/ReadAllByTarget';
-
-
 import * as ReadAllByTargetActions from '../redux/action/read_all_by_target';
 import * as ReadAllByProbeActions from '../redux/action/read_all_by_probe';
 import * as ReadAllByDomainActions from '../redux/action/read_all_by_domain';
@@ -18,30 +16,30 @@ import Sensor from '@overflow/sensor/api/model/Sensor';
 import Probe from '@overflow/probe/api/model/Probe';
 import Domain from '@overflow/domain/api/model/Domain';
 import Infra from '@overflow/infra/api/model/Infra';
+import PageParams from '@overflow/commons/api/model/PageParams';
 
 import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
 
 export function mapStateToProps(state: any, props: any): SensorListStateProps {
   return {
-    sensorList:state.SensorList,
+    sensorList: state.SensorList,
     infraId: props.params.id,
   };
 }
 
 export function mapDispatchToProps(dispatch: Dispatch<any>): SensorListDispatchProps {
   return {
-    onReadAllByTarget: (target: Target) => {
+    onReadAllByInfra: (infraId: number, pageParams: PageParams) => {
-      dispatch(asyncRequestActions.request('SensorService', 'readAllByTarget', ReadAllByTargetActions.REQUEST, JSON.stringify(target)));
+      dispatch(asyncRequestActions.request('SensorService', 'readAllByInfra',
+                                           ReadAllByInfraActions.REQUEST, infraId, JSON.stringify(pageParams)));
     },
-    onReadAllByInfra: (infraId: number) => {
+    onReadAllByDomain: (domain: Domain, pageParams: PageParams) => {
-      dispatch(asyncRequestActions.request('SensorService', 'readAllByInfra', ReadAllByInfraActions.REQUEST, infraId));
+      dispatch(asyncRequestActions.request('SensorService', 'readAllByDomain',
+                                           ReadAllByDomainActions.REQUEST, JSON.stringify(domain), JSON.stringify(pageParams)));
     },
     onReadAllByProbe: (probe: Probe) => {
       dispatch(ReadAllByProbeActions.request(probe));
     },
-    onReadAllByDomain: (domain: Domain) => {
-       dispatch(asyncRequestActions.request('SensorService', 'readAllByDomain', ReadAllByDomainActions.REQUEST, JSON.stringify(domain)));
-    },
     onSelectSensor: (id: number) => {
       dispatch(routerPush('/sensor/' + String(id)));
     },

src/ts/@overflow/sensor/react/components/SensorList.tsx

@@ -7,21 +7,25 @@ import Sensor from '@overflow/sensor/api/model/Sensor';
 import Target from '@overflow/target/api/model/Target';
 import Domain from '@overflow/domain/api/model/Domain';
 import Infra from '@overflow/infra/api/model/Infra';
+import PageParams from '@overflow/commons/api/model/PageParams';
+import Page from '@overflow/commons/api/model/Page';
+import { Pager } from '@overflow/commons/react/component/Pager';
+import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
+
 
 export interface StateProps {
   probe?: Probe;
   target?: Target;
-  sensorList?: Sensor[];
+  sensorList?: Page;
   infraId?: number;
 }
 
 export interface DispatchProps {
-  onReadAllByTarget?(target: Target): void;
+  onReadAllByDomain?(domain: Domain, pageParams: PageParams): void;
+  onReadAllByInfra?(infraId: number, pageParams: PageParams): void;
   onReadAllByProbe?(probe: Probe): void;
-  onReadAllByDomain?(domain: Domain): void;
   onSelectSensor?(id: number): void;
   onAddSensor?(infraId: string): void;
-  onReadAllByInfra?(infraId: number): void;
 }
 
 export type SensorListProps = StateProps & DispatchProps;
@@ -33,7 +37,10 @@ export interface SensorListState {
 
 export class SensorList extends React.Component<SensorListProps, SensorListState> {
 
-  // private data: any;
+  private countPerPage: number = 10;
+  private sortCol: string = 'id';
+  private sortDirection: string = 'descending';
+  private pageNo: number = 0;
 
   constructor(props: SensorListProps, context: SensorListState) {
     super(props, context);
@@ -43,16 +50,24 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
   }
 
   public componentWillMount(): void {
-    // super.componentWillMount();
+    this.getData();
+  }
+
+  public getData(): void {
+    const pageParams: PageParams = {
+      pageNo: String(this.pageNo),
+      countPerPage: String(this.countPerPage),
+      sortCol: this.sortCol,
+      sortDirection: this.sortDirection,
+    };
     if (this.props.infraId === undefined) {
       let domain: Domain = {
         id: 1,
       };
-      this.props.onReadAllByDomain(domain);
+      this.props.onReadAllByDomain(domain, pageParams);
     } else {
-      this.props.onReadAllByInfra(this.props.infraId);
+      this.props.onReadAllByInfra(this.props.infraId, pageParams);
     }
-
   }
 
   public handleSelect(selectedSensor: Sensor): void {
@@ -87,21 +102,29 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
 
   public render(): JSX.Element {
 
+    let colsmap: Map<string, string> = new Map();
+    colsmap.set('No.', 'id');
+    colsmap.set('Status', 'status.name');
+    colsmap.set('Crawler', 'crawler.name');
+    colsmap.set('Description', 'description');
+    colsmap.set('Item count', 'itemCount');
+
     let sensorList: JSX.Element = (
       <Container fluid>
-        <Table celled selectable striped>
+        <Table celled selectable striped sortable>
           <Table.Header>
-            <Table.Row>
+            <SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
+            {/* <Table.Row>
               <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Crawler</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Item count</Table.HeaderCell>
-            </Table.Row>
+            </Table.Row> */}
           </Table.Header>
 
           <Table.Body>
-            {this.props.sensorList ? this.props.sensorList.map((sensor: Sensor, index: number) => (
+            {this.props.sensorList ? this.props.sensorList.content.map((sensor: Sensor, index: number) => (
               <Table.Row key={index} onClick={this.handleSelect.bind(this, sensor)}>
                 <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
                 <Table.Cell negative={this.checkCellStatus(sensor.status)} textAlign={'center'}>
@@ -114,6 +137,13 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
               </Table.Row>
             )) : ''}
           </Table.Body>
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan='6' textAlign='center'>
+                <Pager page={this.props.sensorList} onPageChange={this.handlePaging} />
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
         </Table>
         <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
 
@@ -126,7 +156,18 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
         data={this.props.sensorList}
       />
     );
+  }
 
+  private handlePaging = (pageNo: number) => {
+    this.pageNo = pageNo;
+    this.getData();
+  }
+
+  private handleSort = (col: string, direction: string): void => {
+    console.log(col + ' || direction:' + direction);
+    this.sortCol = col;
+    this.sortDirection = direction;
+    this.getData();
   }
 
 }

src/ts/@overflow/sensor/redux/reducer/read_all_by_domain.ts

@@ -4,14 +4,15 @@ import Sensor from '@overflow/sensor/api/model/Sensor';
 
 import * as ReadAllByDomainActionTypes from '../action/read_all_by_domain';
 import ReadAllByDomain, { defaultState as readAllByDomainDefaultState } from '../state/ReadAllByDomain';
+import Page from '@overflow/commons/api/model/Page';
 
 const reducer: ReducersMapObject = {
   [ReadAllByDomainActionTypes.REQUEST_SUCCESS]:
-  (state: ReadAllByDomain = readAllByDomainDefaultState, action: Action<Sensor[]>):
+  (state: ReadAllByDomain = readAllByDomainDefaultState, action: Action<Page>):
   ReadAllByDomain => {
      return {
       ...state,
-      SensorList:<Sensor[]>action.payload,
+      SensorList:<Page>action.payload,
     };
   },
   [ReadAllByDomainActionTypes.REQUEST_FAILURE]:

src/ts/@overflow/sensor/redux/reducer/read_all_by_infra.ts

@@ -6,14 +6,14 @@ import Sensor from '@overflow/sensor/api/model/Sensor';
 
 import * as ReadAllByInfraActionTypes from '../action/read_all_by_infra';
 import ReadAllByInfraState, { defaultState as readAllByInfraDefaultState } from '../state/ReadAllByInfra';
+import Page from '@overflow/commons/api/model/Page';
 
 const reducer: ReducersMapObject = {
   [ReadAllByInfraActionTypes.REQUEST_SUCCESS]:
-  (state: ReadAllByInfraState = readAllByInfraDefaultState, action: Action<Sensor[]>): ReadAllByInfraState => {
+  (state: ReadAllByInfraState = readAllByInfraDefaultState, action: Action<Page>): ReadAllByInfraState => {
-    console.log(action);
     return {
       ...state,
-      SensorList:<Sensor[]>action.payload,
+      SensorList:<Page>action.payload,
     };
   },
   [ReadAllByInfraActionTypes.REQUEST_FAILURE]:

src/ts/@overflow/sensor/redux/state/ReadAllByDomain.ts

@@ -1,7 +1,7 @@
-import Sensor from '../../api/model/Sensor';
+import Page from '@overflow/commons/api/model/Page';
 
 export interface State {
-  readonly SensorList: Sensor[];
+  readonly SensorList: Page;
   readonly error?: Error;
 }
 

src/ts/@overflow/sensor/redux/state/ReadAllByInfra.ts

@@ -1,7 +1,7 @@
-import Sensor from '../../api/model/Sensor';
+import Page from '@overflow/commons/api/model/Page';
 
 export interface State {
-  readonly SensorList: Sensor[];
+  readonly SensorList: Page;
   readonly error?: Error;
 }