|
|
@@ -4,21 +4,20 @@ import {Row, Col, Input, Icon, Button, Spin} from 'antd';
|
|
|
import './index.css';
|
|
|
import {Mutation, Query} from "react-apollo";
|
|
|
import gql from "graphql-tag";
|
|
|
-import {SHOW_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
|
|
|
+import {SHOW_SCHEMA, DELETE_SCHEMA, SHOW_TABLE, UPDATE_SCHEMA} from '../../gql'
|
|
|
import Table from "./Table";
|
|
|
|
|
|
class Schema extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
- currentTable: props.location.state === undefined? '' : props.location.state.create ? 'add' : '',
|
|
|
+ currentTable: props.location.state === undefined ? '' : props.location.state.create ? 'add' : '',
|
|
|
// default schemaID and schemaName
|
|
|
schemaID: props.schemaID || props.location.state.schemaID,
|
|
|
schemaName: props.schemaName || props.location.state.schemaName,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
-
|
|
|
switchTable = (table) => {
|
|
|
this.setState({
|
|
|
currentTable: table
|
|
|
@@ -37,7 +36,7 @@ class Schema extends Component {
|
|
|
|
|
|
componentWillReceiveProps(next) {
|
|
|
this.setState({
|
|
|
- currentTable: next.location.state === undefined? '' : next.location.state.create ? 'add' : '',
|
|
|
+ currentTable: next.location.state === undefined ? '' : next.location.state.create ? 'add' : '',
|
|
|
schemaID: next.schemaID,
|
|
|
schemaName: next.schemaName
|
|
|
});
|
|
|
@@ -96,7 +95,14 @@ class Schema extends Component {
|
|
|
<Col span={8}
|
|
|
onClick={() => this.switchTable(table.name)}><span>{table.name}</span></Col>
|
|
|
<Col span={8}><span>{table.remark}</span></Col>
|
|
|
- <Col span={8}><Icon type="delete"/></Col>
|
|
|
+ <Col span={8}>
|
|
|
+ <DeleteTableButton
|
|
|
+ currentTable={table.name}
|
|
|
+ currentTableIndex={data.findIndex(obj => obj.name === table.name)}
|
|
|
+ schemaID={this.state.schemaID}
|
|
|
+ userID={userID}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
</Row>
|
|
|
))
|
|
|
}
|
|
|
@@ -140,42 +146,155 @@ export default Schema;
|
|
|
|
|
|
// 备用代码
|
|
|
|
|
|
-class DeleteSchemaButton extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props);
|
|
|
- this.state = {
|
|
|
- schemaName: props.schemaName
|
|
|
- }
|
|
|
- }
|
|
|
+// 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 DeleteTableButton extends Component {
|
|
|
render() {
|
|
|
+ let schemaID = this.props.schemaID;
|
|
|
let userID = this.props.userID;
|
|
|
+
|
|
|
+ let varobj = {
|
|
|
+ id: schemaID,
|
|
|
+ updatedAt: new Date().getTime(),
|
|
|
+ schemaState: 'updated-delete-table',
|
|
|
+ };
|
|
|
+
|
|
|
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>
|
|
|
+ <Query query={gql(SHOW_TABLE)} variables={{schema_id: schemaID}}>
|
|
|
+
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading)
|
|
|
+ return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
|
|
|
+ if (error)
|
|
|
+ return 'error';
|
|
|
+
|
|
|
+ let schemaData = data;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Mutation
|
|
|
+ mutation={gql(UPDATE_SCHEMA)}
|
|
|
+ update={(cache, {data: {update_schema}}) => {
|
|
|
+ let data = cache.readQuery({
|
|
|
+ query: gql(SHOW_TABLE),
|
|
|
+ variables: {schema_id: schemaID}
|
|
|
+ });
|
|
|
+ data.schema_by_id = update_schema;
|
|
|
+
|
|
|
+ let showSchemaData = cache.readQuery({
|
|
|
+ query: gql(SHOW_SCHEMA),
|
|
|
+ variables: {user_id: userID}
|
|
|
+ });
|
|
|
+ let schemas = showSchemaData.schema_by_props;
|
|
|
+ // console.log('schemas', schemas);
|
|
|
+ let targetSchema = schemas.find(obj => obj.schemaName === update_schema.schemaName);
|
|
|
+ // console.log('targetSchema', targetSchema);
|
|
|
+ let targetSchemaIndex = schemas.findIndex(obj => obj.schemaName === update_schema.schemaName);
|
|
|
+ // console.log('targetSchemaIndex', targetSchemaIndex);
|
|
|
+ let targetTables = JSON.parse(schemas[targetSchemaIndex].schemaData);
|
|
|
+ // console.log('targetTables', targetTables);
|
|
|
+ let targetTableIndex = targetTables.findIndex(obj => obj.name === this.props.currentTable);
|
|
|
+ // console.log('targetTableIndex', targetTableIndex);
|
|
|
+ targetTables.splice(targetTableIndex, 1);
|
|
|
+ // console.log('targetTablesAfterDelete', targetTables);
|
|
|
+ let temp = {schemaData: JSON.stringify(targetTables)};
|
|
|
+ // console.log('temp', temp);
|
|
|
+ let tempSchema = {...targetSchema, ...temp};
|
|
|
+ // console.log('tempSchema', tempSchema);
|
|
|
+ showSchemaData.schema_by_props.splice(targetSchemaIndex, 1, tempSchema);
|
|
|
+
|
|
|
+ cache.writeQuery(
|
|
|
+ {
|
|
|
+ query: gql(SHOW_TABLE),
|
|
|
+ variables: {schema_id: schemaID},
|
|
|
+ data
|
|
|
+ },
|
|
|
+ {
|
|
|
+ query: gql(SHOW_SCHEMA),
|
|
|
+ variables: {user_id: userID},
|
|
|
+ showSchemaData
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ >
|
|
|
+
|
|
|
+ {(update_schema, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
|
|
|
+ if (error)
|
|
|
+ return 'error';
|
|
|
+
|
|
|
+ // 先 query 再 mutation,然后删除
|
|
|
+ let schemaCols;
|
|
|
+ if (schemaData.schema_by_id === null) schemaCols = [];
|
|
|
+ else schemaCols = JSON.parse(schemaData.schema_by_id.schemaData);
|
|
|
+
|
|
|
+ const index = this.props.currentTableIndex;
|
|
|
+ if (index === -1) {
|
|
|
+ console.log('数据库信息不匹配');
|
|
|
+ } else {
|
|
|
+ schemaCols.splice(index, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Icon type="delete"
|
|
|
+ onClick={() => {
|
|
|
+ update_schema({
|
|
|
+ variables: {
|
|
|
+ ...varobj,
|
|
|
+ schemaData: JSON.stringify(schemaCols)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }}>
|
|
|
+
|
|
|
+ </Icon>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ </Query>
|
|
|
)
|
|
|
}
|
|
|
-}
|
|
|
+}
|