From b2bf464700f565631f431ad7da48d2642e062c0e Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Wed, 23 Aug 2017 19:39:03 +0900
Subject: [PATCH] history paging

---
 src/ts/@overflow/commons/api/model/Page.ts    | 13 ++++
 .../history/react/components/HistoryList.tsx  | 73 +++++++++++++------
 2 files changed, 65 insertions(+), 21 deletions(-)
 create mode 100644 src/ts/@overflow/commons/api/model/Page.ts

diff --git a/src/ts/@overflow/commons/api/model/Page.ts b/src/ts/@overflow/commons/api/model/Page.ts
new file mode 100644
index 0000000..a62b459
--- /dev/null
+++ b/src/ts/@overflow/commons/api/model/Page.ts
@@ -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;
diff --git a/src/ts/@overflow/history/react/components/HistoryList.tsx b/src/ts/@overflow/history/react/components/HistoryList.tsx
index dbc5df5..710b6b7 100644
--- a/src/ts/@overflow/history/react/components/HistoryList.tsx
+++ b/src/ts/@overflow/history/react/components/HistoryList.tsx
@@ -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>