diff --git a/src/ts/@overflow/sensor/react/SensorDetailItems.tsx b/src/ts/@overflow/sensor/react/SensorDetailItems.tsx index fb245e1..5c3afc1 100644 --- a/src/ts/@overflow/sensor/react/SensorDetailItems.tsx +++ b/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): 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))); }, }; } diff --git a/src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx b/src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx index ae4d0eb..4e061ed 100644 --- a/src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx +++ b/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 { + 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 = new Map(); + colsmap.set('No.', 'id'); + colsmap.set('Type', 'item.itemType.name'); + colsmap.set('Name', 'item.name'); + colsmap.set('Key', 'item.key'); + return ( - +
- + + {/* No. Type Name Key - + */} { - 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 ( {idx} @@ -63,11 +102,23 @@ export class SensorDetailItems extends React.Component { }) : '' } - + + + + + + +
); } + private handleSort = (col: string, direction: string): void => { + console.log(col + ' || direction:' + direction); + this.sortCol = col; + this.sortDirection = direction; + this.getData(); + } } diff --git a/src/ts/@overflow/sensor/redux/reducer/item_read_all_by_sensor.ts b/src/ts/@overflow/sensor/redux/reducer/item_read_all_by_sensor.ts index 6031adf..85fd8b9 100644 --- a/src/ts/@overflow/sensor/redux/reducer/item_read_all_by_sensor.ts +++ b/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): ItemReadAllBySensorState => { - console.log(action); + (state: ItemReadAllBySensorState = itemReadAllBySensorDefaultState, action: Action): ItemReadAllBySensorState => { return { ...state, - SensorItemList:action.payload, + SensorItemList:action.payload, }; }, [ItemReadAllBySensorActionTypes.REQUEST_FAILURE]: diff --git a/src/ts/@overflow/sensor/redux/state/ItemReadAllBySensor.ts b/src/ts/@overflow/sensor/redux/state/ItemReadAllBySensor.ts index fab3b07..bc7074e 100644 --- a/src/ts/@overflow/sensor/redux/state/ItemReadAllBySensor.ts +++ b/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; } diff --git a/src/ts/@overflow/target/react/components/TargetList.tsx b/src/ts/@overflow/target/react/components/TargetList.tsx index 043a184..521b32d 100644 --- a/src/ts/@overflow/target/react/components/TargetList.tsx +++ b/src/ts/@overflow/target/react/components/TargetList.tsx @@ -169,7 +169,7 @@ export class TargetList extends React.Component { - +