sensor item paging sorting

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

@@ -5,7 +5,7 @@ import {
   DispatchProps as SensorDetailItemsDispatchProps,
 } from './components/SensorDetailItems';
 import State from '../redux/state/ItemRead';
-
+import PageParams from '@overflow/commons/api/model/PageParams';
 import Sensor from '@overflow/sensor/api/model/Sensor';
 
 import * as ItemReadAllBySensorActions from '../redux/action/item_read_all_by_sensor';
@@ -19,9 +19,9 @@ export function mapStateToProps(state: any, props: any): SensorDetailItemsStateP
 
 export function mapDispatchToProps(dispatch: Dispatch<any>): SensorDetailItemsDispatchProps {
   return {
-    onReadAllBySensor: (sensor: Sensor) => {
+    onReadAllBySensor: (sensor: Sensor, pageParams: PageParams) => {
       dispatch(asyncRequestActions.request('SensorItemService', 'readAllBySensor',
-                                           ItemReadAllBySensorActions.REQUEST, JSON.stringify(sensor)));
+                                           ItemReadAllBySensorActions.REQUEST, JSON.stringify(sensor), JSON.stringify(pageParams)));
     },
   };
 }

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

@@ -3,14 +3,18 @@ import { Table, Button, Header, Container } from 'semantic-ui-react';
 
 import Sensor from '@overflow/sensor/api/model/Sensor';
 import SensorItem from '@overflow/sensor/api/model/SensorItem';
+import Page from '@overflow/commons/api/model/Page';
+import { Pager } from '@overflow/commons/react/component/Pager';
+import PageParams from '@overflow/commons/api/model/PageParams';
+import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
 
 export interface StateProps {
   sensorId?: number;
-  sensorItemList?: SensorItem[];
+  sensorItemList?: Page;
 }
 
 export interface DispatchProps {
-  onReadAllBySensor?(sensor: Sensor): void;
+  onReadAllBySensor?(sensor: Sensor, pageParams: PageParams): void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -22,36 +26,71 @@ export interface State {
 
 export class SensorDetailItems extends React.Component<Props, State> {
 
+  private countPerPage: number = 10;
+  private sortCol: string = 'id';
+  private sortDirection: string = 'descending';
+  private pageNo: number = 0;
+
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
       // sensorItemList: SensorItemJson,
     };
 
-    this.props.onReadAllBySensor({id: this.props.sensorId});
+    this.getData();
+  }
 
+  private getData(): void {
+    const pageParams: PageParams = {
+      pageNo: String(this.pageNo),
+      countPerPage: String(this.countPerPage),
+      sortCol: this.sortCol,
+      sortDirection: this.sortDirection,
+    };
+    this.props.onReadAllBySensor({ id: this.props.sensorId }, pageParams);
   }
 
   public componentWillMount(): void {
     console.log('');
   }
 
+  private handlePaging = (pageNo: number) => {
+    this.pageNo = pageNo;
+    const pageParams: PageParams = {
+      pageNo: String(this.pageNo),
+      countPerPage: String(this.countPerPage),
+      sortCol: this.sortCol,
+      sortDirection: this.sortDirection,
+    };
+    this.props.onReadAllBySensor({ id: this.props.sensorId }, pageParams);
+  }
+
   public render(): JSX.Element {
+    if (this.props.sensorItemList === undefined) {
+      return null;
+    }
+    let colsmap: Map<string, string> = new Map();
+    colsmap.set('No.', 'id');
+    colsmap.set('Type', 'item.itemType.name');
+    colsmap.set('Name', 'item.name');
+    colsmap.set('Key', 'item.key');
+
     return (
       <Container fluid>
-        <Table celled>
+        <Table celled sortable>
           <Table.Header>
-            <Table.Row>
+            <SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
+            {/* <Table.Row>
               <Table.HeaderCell>No.</Table.HeaderCell>
               <Table.HeaderCell>Type</Table.HeaderCell>
               <Table.HeaderCell>Name</Table.HeaderCell>
               <Table.HeaderCell>Key</Table.HeaderCell>
-            </Table.Row>
+            </Table.Row> */}
           </Table.Header>
 
           <Table.Body>
             {
-              this.props.sensorItemList ? this.props.sensorItemList.map((sensorItem: SensorItem, idx: number) => {
+              this.props.sensorItemList.content ? this.props.sensorItemList.content.map((sensorItem: SensorItem, idx: number) => {
                 return (
                   <Table.Row key={idx}>
                     <Table.Cell>{idx}</Table.Cell>
@@ -63,11 +102,23 @@ export class SensorDetailItems extends React.Component<Props, State> {
               }) : ''
             }
           </Table.Body>
-
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan='4'>
+                <Pager page={this.props.sensorItemList} onPageChange={this.handlePaging} />
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
         </Table>
       </Container>
     );
   }
+  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/item_read_all_by_sensor.ts

@@ -5,17 +5,16 @@
 import Action from '@overflow/commons/redux/Action';
 import { ReducersMapObject } from 'redux';
 import SensorItem from '@overflow/sensor/api/model/SensorItem';
-
+import Page from '@overflow/commons/api/model/Page';
 import * as ItemReadAllBySensorActionTypes from '../action/item_read_all_by_sensor';
 import ItemReadAllBySensorState, { defaultState as itemReadAllBySensorDefaultState } from '../state/ItemReadAllBySensor';
 
 const reducer: ReducersMapObject = {
   [ItemReadAllBySensorActionTypes.REQUEST_SUCCESS]:
-  (state: ItemReadAllBySensorState = itemReadAllBySensorDefaultState, action: Action<SensorItem>): ItemReadAllBySensorState => {
-    console.log(action);
+  (state: ItemReadAllBySensorState = itemReadAllBySensorDefaultState, action: Action<Page>): ItemReadAllBySensorState => {
     return {
       ...state,
-      SensorItemList:<SensorItem[]>action.payload,
+      SensorItemList:<Page>action.payload,
     };
   },
   [ItemReadAllBySensorActionTypes.REQUEST_FAILURE]:

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

@@ -1,10 +1,10 @@
 /**
  * Created by geek on 17. 7. 3.
  */
-import SensorItem from '../../api/model/SensorItem';
+import Page from '@overflow/commons/api/model/Page';
 
 export interface State {
-  readonly SensorItemList: SensorItem[];
+  readonly SensorItemList: Page;
   readonly error?: Error;
 }
 

src/ts/@overflow/target/react/components/TargetList.tsx

@@ -169,7 +169,7 @@ export class TargetList extends React.Component<Props, State> {
           </Table.Body>
           <Table.Footer>
             <Table.Row>
-              <Table.HeaderCell colSpan='3'>
+              <Table.HeaderCell colSpan='5'>
                 <Pager page={this.props.infraList} onPageChange={this.handlePaging} />
               </Table.HeaderCell>
             </Table.Row>