|
|
@@ -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, UPDATE_SCHEMA_NAME, SHOW_ALL_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: ''
|
|
|
};
|
|
|
}
|
|
|
|
|
|
@@ -24,6 +31,18 @@ class Schema extends Component {
|
|
|
})
|
|
|
};
|
|
|
|
|
|
+ changeEditSchemaName = (e) => {
|
|
|
+ this.setState({
|
|
|
+ editSchemaName: e.target.value
|
|
|
+ })
|
|
|
+ };
|
|
|
+
|
|
|
+ clearEditSchemaName = () => {
|
|
|
+ this.setState({
|
|
|
+ editSchemaName: ''
|
|
|
+ })
|
|
|
+ };
|
|
|
+
|
|
|
findColumns = data => this.state.currentTable === '' ? [] : data.find(table => table.name === this.state.currentTable) ? data.find(table => table.name === this.state.currentTable).cols : [];
|
|
|
|
|
|
findRemark = data => this.state.currentTable === '' ? '' : data.find(table => table.name === this.state.currentTable) ? data.find(table => table.name === this.state.currentTable).remark : '';
|
|
|
@@ -34,11 +53,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 +98,183 @@ 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}
|
|
|
+ {
|
|
|
+ this.state.editSchemaName ?
|
|
|
+ <ModifySchemaNameInput
|
|
|
+ editSchemaName={this.state.editSchemaName}
|
|
|
+ changeEditSchemaName={this.changeEditSchemaName}
|
|
|
+ clearEditSchemaName={this.clearEditSchemaName}
|
|
|
+ schemaID={this.state.schemaID}
|
|
|
+ userID={userID}
|
|
|
+ schemaName={this.state.schemaName}
|
|
|
+ history={this.props.history}
|
|
|
+ />
|
|
|
+ :
|
|
|
+ <div className={'schema'}>
|
|
|
+ <span className={'schema-name'}>{this.state.schemaName}</span>
|
|
|
+ {
|
|
|
+ userID === 'ioobot' ?
|
|
|
+ ''
|
|
|
+ :
|
|
|
+ <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={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}>
|
|
|
+ {
|
|
|
+ userID === 'ioobot' ?
|
|
|
+ ''
|
|
|
+ :
|
|
|
+ <span
|
|
|
+ className={'schema-table-title'}
|
|
|
+ onClick={() => {
|
|
|
+ this.setState({
|
|
|
+ currentTable: 'add'
|
|
|
+ })
|
|
|
+ }}>
|
|
|
+ <Icon type="plus"/>
|
|
|
+ </span>
|
|
|
+ }
|
|
|
+
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
</div>
|
|
|
<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'}>
|
|
|
+ {
|
|
|
+ userID === 'ioobot'?
|
|
|
+ ''
|
|
|
+ :
|
|
|
+ <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'}>
|
|
|
+ {
|
|
|
+ userID === 'ioobot'?
|
|
|
+ ''
|
|
|
+ :
|
|
|
+ <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={8}><span>Name</span></Col>
|
|
|
- <Col span={8}><span>Remark</span></Col>
|
|
|
- <Col span={8}>
|
|
|
- <span onClick={() => {
|
|
|
- this.setState({
|
|
|
- currentTable: 'add'
|
|
|
- })
|
|
|
- }}>
|
|
|
- <Icon type="plus"/>
|
|
|
- </span>
|
|
|
+ <Col span={4}>
|
|
|
+ {
|
|
|
+ userID === 'ioobot'?
|
|
|
+ <div className={'delete-schema'}>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={()=>{
|
|
|
+ console.log('我还没做');
|
|
|
+ }}
|
|
|
+ >copy</Button>
|
|
|
+ </div>
|
|
|
+ :
|
|
|
+ <div className={'delete-schema'}>
|
|
|
+ <DeleteSchemaButton
|
|
|
+ userID={userID}
|
|
|
+ schemaName={this.state.schemaName}
|
|
|
+ />
|
|
|
+ </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>
|
|
|
- {
|
|
|
- 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}
|
|
|
- userID={userID}
|
|
|
- />
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- ))
|
|
|
- }
|
|
|
</div>
|
|
|
:
|
|
|
this.state.currentTable === 'add' ?
|
|
|
@@ -144,48 +313,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 found 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 {
|
|
|
render() {
|
|
|
@@ -284,6 +467,9 @@ class DeleteTableButton extends Component {
|
|
|
schemaData: JSON.stringify(schemaCols)
|
|
|
}
|
|
|
});
|
|
|
+ this.props.showTablePagination ?
|
|
|
+ this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols) : (() => {
|
|
|
+ })()
|
|
|
}}>
|
|
|
|
|
|
</Icon>
|
|
|
@@ -297,4 +483,54 @@ class DeleteTableButton extends Component {
|
|
|
</Query>
|
|
|
)
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+class ModifySchemaNameInput extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let userID = this.props.userID;
|
|
|
+ let schemaName = this.props.schemaName;
|
|
|
+ return (
|
|
|
+ <Mutation mutation={gql(UPDATE_SCHEMA_NAME)}>
|
|
|
+ {(update_schema, {loading, error}) => {
|
|
|
+ if (error)
|
|
|
+ return 'error';
|
|
|
+ if (loading)
|
|
|
+ return <Spin style={{marginLeft: 3}}/>;
|
|
|
+ return (
|
|
|
+ <div className={'schema'}>
|
|
|
+ <Search
|
|
|
+ value={this.props.editSchemaName}
|
|
|
+ enterButton="Confirm"
|
|
|
+ style={{width: 500}}
|
|
|
+ size="large"
|
|
|
+ onChange={this.props.changeEditSchemaName}
|
|
|
+ onSearch={value => {
|
|
|
+ update_schema({
|
|
|
+ variables: {
|
|
|
+ id: this.props.schemaID,
|
|
|
+ schemaName: value,
|
|
|
+ updateAt: new Date().getTime()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.props.history.push({
|
|
|
+ pathname: `/graphql-service/my-create/${value}`,
|
|
|
+ state: {
|
|
|
+ schemaName: value,
|
|
|
+ schemaID: this.props.schemaID,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.props.clearEditSchemaName();
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
wly