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;

73
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> {
private countPerPage: number = 10;
constructor(props: Props, context: State) {
super(props, context);
@ -33,11 +34,11 @@ export class HistoryList extends React.Component<Props, State> {
let probe: Probe = {
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) => {
if(pageNo === this.state.page) {
if (pageNo === this.state.page) {
return;
}
this.setState({
@ -46,7 +47,23 @@ export class HistoryList extends React.Component<Props, State> {
let probe: Probe = {
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[]) => {
@ -56,13 +73,26 @@ export class HistoryList extends React.Component<Props, State> {
let totalPage = pageObj.totalPages;
let currPage = pageObj.number;
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++) {
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 {
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>
{elems}
</Menu>;
@ -84,23 +114,24 @@ export class HistoryList extends React.Component<Props, State> {
</Table.Header>
<Table.Body>
{this.props.histories && this.props.histories.content ? this.props.histories.content.map((history: History, index: number) => (
<Table.Row key={index} >
<Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
<Table.Cell textAlign={'center'}>
{history.type.name}
</Table.Cell>
<Table.Cell>
{history.message}
</Table.Cell>
<Table.Cell>
{history.createDate}
</Table.Cell>
<Table.Cell>
{history.member.name}
</Table.Cell>
</Table.Row>
)) : ''}
{this.props.histories && this.props.histories.content ?
this.props.histories.content.map((history: History, index: number) => (
<Table.Row key={index} >
<Table.Cell textAlign={'center'}>{history.id}</Table.Cell>
<Table.Cell textAlign={'center'}>
{history.type.name}
</Table.Cell>
<Table.Cell>
{history.message}
</Table.Cell>
<Table.Cell>
{history.createDate}
</Table.Cell>
<Table.Cell>
{history.member.name}
</Table.Cell>
</Table.Row>
)) : ''}
</Table.Body>
<Table.Footer>
<Table.Row>