Merge remote-tracking branch 'origin/master'

src/components/common/schema/Schema.jsx

@@ -1,12 +1,15 @@
 import React, {Component} from 'react';
 
-import {Row, Col, Input, Icon, Button, Spin} from 'antd';
+import {Button, Col, Icon, Modal, Pagination, Row, Spin, Input} from 'antd';
 import './index.css';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
-import {SHOW_SCHEMA, DELETE_SCHEMA, SHOW_TABLE, UPDATE_SCHEMA} from '../../gql'
+import {DELETE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE, UPDATE_SCHEMA} from '../../gql'
 import Table from "./Table";
 
+const confirm = Modal.confirm;
+const Search = Input.Search;
+
 class Schema extends Component {
     constructor(props) {
         super(props);
@@ -15,6 +18,10 @@ class Schema extends Component {
             // default schemaID and schemaName
             schemaID: props.schemaID || props.location.state.schemaID,
             schemaName: props.schemaName || props.location.state.schemaName,
+            editSchemaName: '',
+            data: '',
+            page: '',
+            pageSize: ''
         };
     }
 
@@ -34,11 +41,29 @@ class Schema extends Component {
         })
     };
 
+    showTablePagination = (page, pageSize, data) => {
+        // console.log(page);
+        // console.log(pageSize);
+        // console.log(data);
+        // 这个之所以这么麻烦，是因为 'apollo 不能存数据' 而 '分页又得用数据展示'，
+        // 所以展示 table 的时候分了两个，
+        // 首先进入展示 15个 , 这前 15 个没有任何问题。
+        // 如果数据多于 15个，在按下第二页的时候 将数据通过 antd 的分页组件的回调函数传入 state，之后 table 的展示由 this.state.data 来接管
+        // 但是这又引起一个问题，通过 this.state.data 的展示如果进行删除，是不会通过 apollo 的，这也意味着数据库被删除了，而页面还存在
+        // 于是，在使用 this.state.data 的页面的 deleteTableButton 组件内调用该函数，重新刷新 this.state.data
+        this.setState({
+            page,
+            pageSize,
+            data: data.slice((page-1)*pageSize, page*pageSize)
+        })
+    };
+
     componentWillReceiveProps(next) {
         this.setState({
             currentTable: next.location.state === undefined ? '' : next.location.state.create ? 'add' : '',
             schemaID: next.schemaID,
-            schemaName: next.schemaName
+            schemaName: next.schemaName,
+            data: ''
         });
     }
 
@@ -61,51 +86,151 @@ class Schema extends Component {
                         if (data.schema_by_id === null) data = [];
                         else data = JSON.parse(data.schema_by_id.schemaData);
 
-
                         return (
                             <div>
                                 {
                                     this.state.currentTable === '' ?
                                         <div>
-                                            <div onClick={() => {
-                                                this.setState({
-                                                    currentTable: ''
-                                                })
-                                            }}>
-                                                {this.state.schemaName}
-                                            </div>
-                                            <div>
+                                            {
+                                                this.state.editSchemaName?
+                                                    <div className={'schema'}>
+                                                        <Search
+                                                            value={this.state.editSchemaName}
+                                                            enterButton="Confirm"
+                                                            style={{width: 500}}
+                                                            size="large"
+                                                            onChange={e => this.setState({
+                                                                editSchemaName: e.target.value
+                                                            })}
+                                                            onSearch={value => {
+                                                                this.setState({
+                                                                   editSchemaName: ''
+                                                                });
+                                                                console.log('我还没做 value = ', value)
+                                                            }}
+                                                        />
+                                                    </div>
+                                                    :
+                                                    <div className={'schema'}>
+                                                        <span className={'schema-name'}>{this.state.schemaName}</span>
+                                                        <Icon style={{marginLeft: 15}} type="edit" theme="twoTone" onClick={()=>{this.setState({editSchemaName:this.state.schemaName})}
+                                                        }/>
+                                                    </div>
+                                            }
+
+                                            <div className={'schema-table-list-title'}>
                                                 <Row>
-                                                    <Col span={8}><span>Name</span></Col>
-                                                    <Col span={8}><span>Remark</span></Col>
-                                                    <Col span={8}>
-                                                        <span onClick={() => {
-                                                            this.setState({
-                                                                currentTable: 'add'
-                                                            })
-                                                        }}>
+                                                    <Col span={10}><span
+                                                        className={'schema-table-title'}>Name</span></Col>
+                                                    <Col span={10}><span
+                                                        className={'schema-table-title'}>Remark</span></Col>
+                                                    <Col span={2} offset={2}>
+                                                        <span
+                                                            className={'schema-table-title'}
+                                                            onClick={() => {
+                                                                this.setState({
+                                                                    currentTable: 'add'
+                                                                })
+                                                            }}>
                                                             <Icon type="plus"/>
                                                         </span>
                                                     </Col>
                                                 </Row>
                                             </div>
-                                            {
-                                                data.map(table => (
-                                                    <Row key={table.name} className='show'>
-                                                        <Col span={8}
-                                                             onClick={() => this.switchTable(table.name)}><span>{table.name}</span></Col>
-                                                        <Col span={8}><span>{table.remark}</span></Col>
-                                                        <Col span={8}>
-                                                            <DeleteTableButton
-                                                                currentTable={table.name}
-                                                                currentTableIndex={data.findIndex(obj => obj.name === table.name)}
-                                                                schemaID={this.state.schemaID}
+                                            <div>
+                                                {
+                                                    this.state.data ?
+                                                        this.state.data.map(table => (
+                                                            <div key={table.name}
+                                                                 className={'schema-table-list-content'}>
+                                                                <Row>
+                                                                    <Col
+                                                                        span={10}
+                                                                        onClick={() => this.switchTable(table.name)}
+                                                                    >
+                                                                <span
+                                                                    className={'schema-table-content name'}>{table.name}</span>
+                                                                    </Col>
+                                                                    <Col span={10}>
+                                                                <span
+                                                                    className={'schema-table-content'}>{table.remark}</span>
+                                                                    </Col>
+                                                                    <Col span={2} offset={2}>
+                                                                <span className={'schema-table-content'}>
+                                                                    <DeleteTableButton
+                                                                        currentTable={table.name}
+                                                                        currentTableIndex={data.findIndex(obj => obj.name === table.name)}
+                                                                        schemaID={this.state.schemaID}
+                                                                        userID={userID}
+                                                                        showTablePagination={this.showTablePagination}
+                                                                        page={this.state.page}
+                                                                        pageSize={this.state.pageSize}
+                                                                    />
+                                                                </span>
+                                                                    </Col>
+                                                                </Row>
+                                                            </div>
+
+                                                        ))
+                                                        :
+                                                        data.slice(0, 15).map(table => (
+                                                            <div key={table.name}
+                                                                 className={'schema-table-list-content'}>
+                                                                <Row>
+                                                                    <Col
+                                                                        span={10}
+                                                                        onClick={() => this.switchTable(table.name)}
+                                                                    >
+                                                                <span
+                                                                    className={'schema-table-content name'}>{table.name}</span>
+                                                                    </Col>
+                                                                    <Col span={10}>
+                                                                <span
+                                                                    className={'schema-table-content'}>{table.remark}</span>
+                                                                    </Col>
+                                                                    <Col span={2} offset={2}>
+                                                                <span className={'schema-table-content'}>
+                                                                    <DeleteTableButton
+                                                                        currentTable={table.name}
+                                                                        currentTableIndex={data.findIndex(obj => obj.name === table.name)}
+                                                                        schemaID={this.state.schemaID}
+                                                                        userID={userID}
+                                                                    />
+                                                                </span>
+                                                                    </Col>
+                                                                </Row>
+                                                            </div>
+
+                                                        ))
+                                                }
+                                            </div>
+
+                                            <div className={'schema-bottom'}>
+                                                <Row>
+                                                    <Col span={4}>
+                                                        <div className={'delete-schema'}>
+                                                            <DeleteSchemaButton
                                                                 userID={userID}
+                                                                schemaName={this.state.schemaName}
                                                             />
-                                                        </Col>
-                                                    </Row>
-                                                ))
-                                            }
+                                                        </div>
+                                                    </Col>
+                                                    <Col span={4} offset={16}>
+                                                        <div className={'pagination'}>
+                                                            <Pagination
+                                                                simple
+                                                                defaultCurrent={1}
+                                                                hideOnSinglePage={true}
+                                                                defaultPageSize={15}
+                                                                total={data.length}
+                                                                onChange={(page, pageSize) => {
+                                                                    this.showTablePagination(page, pageSize, data)
+                                                                }}
+                                                            />
+                                                        </div>
+                                                    </Col>
+                                                </Row>
+                                            </div>
                                         </div>
                                         :
                                         this.state.currentTable === 'add' ?
@@ -144,47 +269,62 @@ class Schema extends Component {
 export default Schema;
 
 
-// 备用代码
-
-// class DeleteSchemaButton extends Component {
-//     constructor(props) {
-//         super(props);
-//         this.state = {
-//             schemaName: props.schemaName
-//         }
-//     }
-//
-//     render() {
-//         let userID = this.props.userID;
-//         return (
-//             <Mutation
-//                 mutation={DELETE_SCHEMA}
-//                 update={(cache) => {
-//                     let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});
-//
-//                     data.schema_by_props.splice(data.schema_by_props.findIndex(obj => obj.schemaName === this.state.schemaName), 1);
-//                     cache.writeQuery({
-//                         query: SHOW_SCHEMA,
-//                         variables: {user_id: userID},
-//                         data
-//                     });
-//                 }}
-//             >
-//                 {(delete_schema, {loading, error}) => {
-//                     if (error)
-//                         return 'error';
-//                     if (loading)
-//                         return <Spin style={{marginLeft: 3}}/>;
-//                     return (
-//                         <Button onClick={(e) => {
-//                             delete_schema({variables: {schemaName: this.props.schemaName}});
-//                         }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
-//                     )
-//                 }}
-//             </Mutation>
-//         )
-//     }
-// }
+class DeleteSchemaButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            schemaName: props.schemaName
+        }
+    }
+
+    showConfirm = (delete_schema, schemaName) => {
+        confirm({
+            title: 'Do you want to delete this schema?',
+            content: 'It cannot be find back!',
+            onOk() {
+                delete_schema({variables: {schemaName}});
+            },
+            onCancel() {
+            },
+        });
+    };
+
+    render() {
+        let userID = this.props.userID;
+        return (
+            <Mutation
+                mutation={gql(DELETE_SCHEMA)}
+                update={(cache) => {
+                    let data = cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}});
+
+                    data.schema_by_props.splice(data.schema_by_props.findIndex(obj => obj.schemaName === this.state.schemaName), 1);
+                    cache.writeQuery({
+                        query: gql(SHOW_SCHEMA),
+                        variables: {user_id: userID},
+                        data
+                    });
+                }}
+            >
+                {(delete_schema, {loading, error}) => {
+                    if (error)
+                        return 'error';
+                    if (loading)
+                        return <Spin style={{marginLeft: 3}}/>;
+                    return (
+                        <Button
+                            type="danger"
+                            onClick={() => {
+                                this.showConfirm(delete_schema, this.props.schemaName);
+                            }}
+                        >
+                            delete
+                        </Button>
+                    )
+                }}
+            </Mutation>
+        )
+    }
+}
 
 
 class DeleteTableButton extends Component {
@@ -284,6 +424,8 @@ class DeleteTableButton extends Component {
                                                           schemaData: JSON.stringify(schemaCols)
                                                       }
                                                   });
+                                                  this.props.showTablePagination?
+                                                      this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols):(()=>{})()
                                               }}>
 
                                         </Icon>

src/components/common/schema/index.css

@@ -1,86 +1,140 @@
 .current {
-    background-color: #0F83E8;
-    color: white;
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-    margin-top: 3px;
+  background-color: #0F83E8;
+  color: white;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  margin-top: 3px;
 }
 
 .title {
-    font-weight: bolder;
-    font-size: 18px;
-    margin: 10px 0 0 5px;
+  font-weight: bolder;
+  font-size: 18px;
+  margin: 10px 0 0 5px;
 }
 
 p.show {
-    margin: 5px 0 3px 10px;
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: bold;
+  margin: 5px 0 3px 10px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .wrapper {
-    position: relative;
+  position: relative;
 }
 
 .add {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 2;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 2;
 }
 
 .add-input {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .column-menu {
-    /*padding: 0 24px;*/
-    /*position: fixed;*/
-    width: 100%;
-    z-index: 1;
-    line-height:50px;
-    font-weight:600;
-    background-color: white;
-    border-bottom: 1px solid #dcdadb;
+  /*padding: 0 24px;*/
+  /*position: fixed;*/
+  width: 100%;
+  z-index: 1;
+  line-height: 50px;
+  font-weight: 600;
+  background-color: white;
+  border-bottom: 1px solid #dcdadb;
+  cursor: pointer;
 }
 
 .column-title {
-    /*padding-left: 10px;*/
-    font-weight: 500;
-    font-size: 16px;
-    display: inline-block;
-    width: 168px;
-    height: 35px;
-    color: #3a76c5;
+  /*padding-left: 10px;*/
+  font-weight: 500;
+  font-size: 16px;
+  display: inline-block;
+  width: 168px;
+  height: 35px;
+  color: #3a76c5;
 }
 
 .column-content {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .column-details {
-    width: 120px;
-    margin:10px 48px 10px 0 !important;
+  width: 120px;
+  margin: 10px 48px 10px 0 !important;
 }
 
 .table-title {
-    font-weight: 500;
-    font-size: 20px;
-    display: block;
-    height: 35px;
-    margin: 10px 0;
+  font-weight: 500;
+  font-size: 20px;
+  display: block;
+  height: 35px;
+  margin: 10px 0;
 }
 
 .table-title::before {
-    content: '|';
-    display: inline-block;
-    font-weight: 900;
-    color: #3187FA;
-    /*border-right: */
+  content: '|';
+  display: inline-block;
+  font-weight: 900;
+  color: #3187FA;
+  /*border-right: */
 }
+
 .remark {
-    font-weight: lighter;
-    font-size: smaller;
+  font-weight: lighter;
+  font-size: smaller;
+}
+
+.schema {
+  width: 100%;
+  height: 50px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.schema-name {
+  color: #3187FA;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 50px;
+}
+
+.schema-table-list-title {
+  background-color: #f7f7f7;
+  height: 40px;
+  padding-left: 10px;
+}
+
+.schema-table-title {
+  line-height: 40px;
+  font-weight: bold;
+}
+
+.schema-table-list-content {
+  height: 40px;
+  padding-left: 10px;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.name {
+  color: #3c658a;
+  cursor: pointer;
+}
+
+.schema-table-list-content:last-child {
+  border-bottom: none;
+}
+
+.schema-table-content {
+  line-height: 40px;
+}
+
+.schema-bottom {
+  margin-top: 70px;
+}
+
+.delete-schema {
+
 }