save

src/components/common/schema/Schema.jsx

@@ -4,7 +4,7 @@ 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 {DELETE_SCHEMA, SHOW_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;
@@ -31,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 : '';
@@ -54,7 +66,7 @@ class Schema extends Component {
         this.setState({
             page,
             pageSize,
-            data: data.slice((page-1)*pageSize, page*pageSize)
+            data: data.slice((page - 1) * pageSize, page * pageSize)
         })
     };
 
@@ -92,29 +104,23 @@ class Schema extends Component {
                                     this.state.currentTable === '' ?
                                         <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>
+                                                this.state.editSchemaName ?
+                                                    <ModifySchemaNameInput
+                                                        editSchemaName={this.state.editSchemaName}
+                                                        changeEditSchemaName={this.changeEditSchemaName}
+                                                        clearEditSchemaName={this.clearEditSchemaName}
+                                                        schemaID={this.state.schemaID}
+                                                        userID={userID}
+                                                        schemaName={this.state.schemaName}
+                                                    />
                                                     :
                                                     <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})}
-                                                        }/>
+                                                        <Icon style={{marginLeft: 15}} type="edit" theme="twoTone"
+                                                              onClick={() => {
+                                                                  this.setState({editSchemaName: this.state.schemaName})
+                                                              }
+                                                              }/>
                                                     </div>
                                             }
 
@@ -326,7 +332,6 @@ class DeleteSchemaButton extends Component {
     }
 }
 
-
 class DeleteTableButton extends Component {
     render() {
         let schemaID = this.props.schemaID;
@@ -424,8 +429,9 @@ class DeleteTableButton extends Component {
                                                           schemaData: JSON.stringify(schemaCols)
                                                       }
                                                   });
-                                                  this.props.showTablePagination?
-                                                      this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols):(()=>{})()
+                                                  this.props.showTablePagination ?
+                                                      this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols) : (() => {
+                                                      })()
                                               }}>
 
                                         </Icon>
@@ -439,4 +445,62 @@ 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={(cache) => {
+                    let data = cache.readQuery({query: gql(SHOW_ALL_SCHEMA), variables: {user_id: userID}});
+                    console.log('a', data);
+                    console.log('b', schemaName);
+                    console.log(data.schema_by_props.findIndex(obj => obj.schemaName === schemaName));
+                    // data.schema_by_props[data.schema_by_props.findIndex(obj => obj.schemaName === schemaName)]= '';
+                    // cache.writeQuery({
+                    //     query: gql(SHOW_SCHEMA),
+                    //     variables: {user_id: userID},
+                    //     data
+                    // });
+                }}
+            >
+                {(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.clearEditSchemaName();
+                                }}
+                            />
+                        </div>
+                    )
+                }}
+            </Mutation>
+        )
+    }
 }

src/components/gql.js

@@ -123,6 +123,19 @@ const UPDATE_SCHEMA = `
             }
         `;
 
+const UPDATE_SCHEMA_NAME = `
+            mutation SCHEMA($id: ID!, $schemaName: String, $updatedAt: String) {
+                update_schema(
+                    id: $id,
+                    updatedAt: $updatedAt,
+                    schemaName: $schemaName,
+                ) {
+                    schemaName,
+                    id
+                }
+            }
+        `;
+
 
 const SHOW_TABLE = `
             query TABLE($schema_id: ID!) {
@@ -364,6 +377,7 @@ export {
     SHOW_ALL_SCHEMA,
     SHOW_SCHEMA,
     UPDATE_SCHEMA,
+    UPDATE_SCHEMA_NAME,
     DELETE_SCHEMA,
     SHOW_TABLE,
     ADD_CLOUD,