overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

history paging

Browse Source
This commit is contained in:
insanity 2017-08-23 19:39:03 +09:00
parent 2a8bae8a0a
commit b2bf464700
2 changed files with 65 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/ts/@overflow/commons/api/model/Page.ts Normal file
View File

@ -0,0 +1,13 @@
interface Page {
content: any;
first: boolean;
last: boolean;
number: number;
numberOfElements: number;
size: number;
sort: any;
totalElements: number;
totalPages: number;
}
export default Page;

43
src/ts/@overflow/history/react/components/HistoryList.tsx
View File

@ -21,6 +21,7 @@ export interface State {
export class HistoryList extends React.Component<Props, State> { export class HistoryList extends React.Component<Props, State> {
private countPerPage: number = 10;
constructor(props: Props, context: State) { constructor(props: Props, context: State) {
super(props, context); super(props, context);
@ -33,11 +34,11 @@ export class HistoryList extends React.Component<Props, State> {
let probe: Probe = { let probe: Probe = {
id: Number(1), id: Number(1),
}; };
this.props.onReadAllByProbe(probe, String(this.state.page), '10'); this.props.onReadAllByProbe(probe, String(this.state.page), String(this.countPerPage));
} }
public handlePaging = (pageNo: number) => { public handlePaging = (pageNo: number) => {
if(pageNo === this.state.page) { if (pageNo === this.state.page) {
return; return;
} }
this.setState({ this.setState({
@ -46,7 +47,23 @@ export class HistoryList extends React.Component<Props, State> {
let probe: Probe = { let probe: Probe = {
id: Number(1), id: Number(1),
}; };
this.props.onReadAllByProbe(probe, String(pageNo), '10'); this.props.onReadAllByProbe(probe, String(pageNo), String(this.countPerPage));
}
public handlePrevPage = (pn: string) => {
let p = 0;
if (pn === 'P') {
p = this.state.page - 1;
} else if (pn === 'N') {
p = this.state.page + 1;
}
this.setState({
page: p,
});
let probe: Probe = {
id: Number(1),
};
this.props.onReadAllByProbe(probe, String(p), String(this.countPerPage));
} }
public renderPagination = (pageObj: any): (JSX.Element | JSX.Element[]) => { public renderPagination = (pageObj: any): (JSX.Element | JSX.Element[]) => {
@ -56,13 +73,26 @@ export class HistoryList extends React.Component<Props, State> {
let totalPage = pageObj.totalPages; let totalPage = pageObj.totalPages;
let currPage = pageObj.number; let currPage = pageObj.number;
let elems = new Array; let elems = new Array;
let prevIndicator = pageObj.first ?
<Menu.Item as='a' icon disabled><Icon name='left chevron' /></Menu.Item> :
<Menu.Item as='a' icon onClick={this.handlePrevPage.bind(this, 'P')}>
<Icon name='left chevron' />
</Menu.Item>;
elems.push(prevIndicator);
for (let i = 0; i < totalPage; i++) { for (let i = 0; i < totalPage; i++) {
if (i === currPage) { if (i === currPage) {
elems.push(<Menu.Item key={i} active as='a' onClick={this.handlePaging.bind(this, i)}>{i + 1}</Menu.Item>); elems.push(<Menu.Item key={i} active as='a' onClick={this.handlePaging.bind(this, i)}><b>{i + 1}</b></Menu.Item>);
} else { } else {
elems.push(<Menu.Item key={i} as='a' onClick={this.handlePaging.bind(this, i)}>{i + 1}</Menu.Item>); elems.push(<Menu.Item key={i} as='a' onClick={this.handlePaging.bind(this, i)}>{i + 1}</Menu.Item>);
} }
} }
let nextIndicator = pageObj.last ?
<Menu.Item as='a' icon disabled><Icon name='right chevron' /></Menu.Item> :
<Menu.Item as='a' icon onClick={this.handlePrevPage.bind(this, 'N')}>
<Icon name='right chevron' />
</Menu.Item>;
elems.push(nextIndicator);
return <Menu floated='right' pagination> return <Menu floated='right' pagination>
{elems} {elems}
</Menu>; </Menu>;
@ -84,9 +114,10 @@ export class HistoryList extends React.Component<Props, State> {
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{this.props.histories && this.props.histories.content ? this.props.histories.content.map((history: History, index: number) => ( {this.props.histories && this.props.histories.content ?
this.props.histories.content.map((history: History, index: number) => (
<Table.Row key={index} > <Table.Row key={index} >
<Table.Cell textAlign={'center'}>{index + 1}</Table.Cell> <Table.Cell textAlign={'center'}>{history.id}</Table.Cell>
<Table.Cell textAlign={'center'}> <Table.Cell textAlign={'center'}>
{history.type.name} {history.type.name}
</Table.Cell> </Table.Cell>