Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/components/app/App.jsx
#	src/components/common/schema/Column.jsx

src/components/common/schema/Column.jsx

@@ -1,463 +0,0 @@
-import React, {Component} from 'react';
-
-import {Layout,Select, Input, Icon, Button, notification, Spin} from 'antd';
-import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../gql";
-import gql from "graphql-tag";
-
-import {Mutation, Query} from "react-apollo";
-import {getCookie} from "../../cookie";
-
-const Option = Select.Option;
-const {Content} = Layout;
-
-class Column extends Component {
-    constructor(props) {
-        super(props);
-        console.log('column props',props);
-        this.state = {
-            currentSchema: props.currentSchema || [{}],
-            currentTable: props.currentTable || ' ',
-            remark: props.remark || '',
-            columns: props.columns || [],
-            newColName: '',
-            newColType: 'type',
-            types: ['ID', 'String', 'Int', 'Float', 'Boolean', 'DateTime'],
-            descriptions: ['description', 'key', 'non-null', 'non-null-list', 'list']
-        }
-    }
-
-
-    // 下面的 handlexxxx 全是 state 内部方法，用于操作视图
-    // cache 仅在提交删除整体使用
-
-    handleNameChange = (index) => {
-        return (e) => {
-            let columns = this.state.columns;
-            columns[index].name = e.target.value;
-            this.setState({
-                columns
-            })
-        };
-    };
-
-    handleNameNew = (e) => {
-        this.setState({
-            newColName: e.target.value,
-            showNewColumn: false
-        })
-    };
-
-    handleTypeChange = (index) => {
-        return (value) => {
-            let columns = this.state.columns;
-            columns[index].type = value;
-            this.setState({
-                columns
-            });
-        }
-    };
-
-    handleTypeNew = (value) => {
-        if (this.state.newColName !== '') {
-            let columns = this.state.columns;
-            columns.push({name: this.state.newColName, type: value, description: 'description'});
-            this.setState({
-                columns,
-                newColName: '',
-                newColType: 'type'
-            })
-        } else {
-            notification['warning']({
-                message: 'Notification',
-                description: 'Input a field name first.',
-            });
-        }
-    };
-
-    handleDescChange = (index) => {
-        return (value) => {
-            let columns = this.state.columns;
-            columns[index].description = value;
-            this.setState({
-                columns
-            });
-        };
-    };
-
-    handleColDelete = (index) => {
-        return () => {
-            let columns = this.state.columns;
-            columns.splice(index, 1);
-            this.setState({
-                columns
-            });
-        }
-    };
-
-    componentWillReceiveProps(next) {
-        this.setState({
-            currentTable: next.currentTable,
-            currentSchema: next.currentSchema,
-            columns: next.columns || [],
-            remark: next.remark
-        });
-    };
-
-    render() {
-        console.log('columns',this.state.columns);
-        let {schemaId:schemaID,schemaName} = this.props.history.location.state;
-        let userID = this.props.userID || getCookie('user_id');
-        console.log('schemaID',schemaID,'userID',userID);
-
-        return (
-            <div>
-                <div className="column-menu" onClick={()=>this.props.history.goBack()}>
-                    <Icon type="left" style={{color:'#3187FA'}} /> {schemaName}
-                </div>
-
-                <Layout style={{padding: '24px', zIndex: '0'}}>
-                    <Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
-                        <div className="column-content">
-                            <span className='table-title'> Table name</span>
-                            <Input
-                                value={this.state.currentTable}
-                                placeholder="please input table name"
-                                style={{width: 200, margin:'10px 0'}}
-                                onChange={(e) => {
-                                    this.setState({currentTable: e.target.value})
-                                }}/>
-                        </div>
-
-                        <div style={{marginBottom: 20}}>
-                            <span className='table-title'> Table remark</span>
-                            <Input
-                                value={this.state.remark}
-                                placeholder="please input table remark"
-                                style={{width: 250, margin:'10px 0'}}
-                                onChange={(e) => {
-                                    this.setState({remark: e.target.value})
-                                }}/>
-                        </div>
-
-                        <div>
-                            <span className='table-title'> Table fields</span>
-                            <span className='column-title'>name</span>
-                            <span className='column-title'>type</span>
-                            <span className='column-title'>description</span>
-                            {
-                                this.state.columns.map((col, index) =>
-                                    <div key={index} style={{marginBottom: 3}}>
-                                        <Input
-                                            className="column-details"
-                                            value={col.name}
-                                            onChange={this.handleNameChange(index)}
-                                        />
-                                        <Select
-                                            className="column-details"
-                                            defaultValue={col.type}
-                                            onChange={this.handleTypeChange(index)}>
-                                            {
-                                                this.state.types.map((value) =>
-                                                    <Option key={Math.random()+'types'} value={value.toLowerCase()}>{value}</Option>
-                                                )
-                                            }
-                                        </Select>
-                                        <Select
-                                            className="column-details"
-                                            defaultValue={col.description}
-                                            onChange={this.handleDescChange(index)}>
-                                            {
-                                                this.state.descriptions.map((value) =>
-                                                    <Option key={Math.random()+'descriptions'} value={value.toLowerCase()}>{value}</Option>
-                                                )
-                                            }
-                                        </Select>
-                                        <Icon type="delete" theme="twoTone" style={{cursor: 'pointer'}} onClick={this.handleColDelete(index)}/>
-                                    </div>
-                                )
-                            }
-                            <div>
-                                <Input
-                                    className="column-details"
-                                    placeholder="field name"
-                                    onChange={this.handleNameNew}
-                                    value={this.state.newColName}
-                                />
-                                <Select
-                                    className="column-details"
-                                    defaultValue="type"
-                                    onChange={this.handleTypeNew}
-                                    value={this.state.newColType}>
-                                    {
-                                        this.state.types.map((value) =>
-                                            <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                                        )
-                                    }
-                                </Select>
-                            </div>
-                        </div>
-
-                        <div style={{marginTop: 20}}>
-                            <UpdateTableButton
-                                currentTable={this.state.currentTable}
-                                columns={this.state.columns}
-                                remark={this.state.remark}
-                                currentTableIndex={this.props.currentTableIndex}
-                                schemaID={schemaID}
-                                userID={userID}
-                            />
-                            {/*{*/}
-                                {/*// undefined的时候 上层未传进来 currentTable === 'add'，为的是输入框内不默认显示 add*/}
-                                {/*this.state.currentTable === '' ? '' : this.state.currentTable === undefined ? '' :*/}
-                                    {/*<DeleteTableButton*/}
-                                        {/*currentTable={this.state.currentTable}*/}
-                                        {/*currentTableIndex={this.props.currentTableIndex}*/}
-                                        {/*schemaID={schemaID}*/}
-                                        {/*userID={userID}*/}
-                                    {/*/>*/}
-                            {/*}*/}
-                        </div>
-                    </Content>
-                </Layout>
-            </div>
-        )
-    }
-}
-
-export default Column;
-
-
-class UpdateTableButton extends Component {
-
-    render() {
-        let schemaID = this.props.schemaID;
-        let userID = this.props.userID;
-
-        let varobj = {
-            id: schemaID,
-            updatedAt: new Date().getTime(),
-            schemaState: 'updated-update-table',
-        };
-
-        return (
-            <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 index = showSchemaData.schema_by_props.findIndex(obj => obj.schemaName === update_schema.schemaName);
-                                    showSchemaData.schema_by_props.splice(index, 1, update_schema);
-
-                                    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);
-
-                                    // 处理一下description的问题
-                                    let cols = this.props.columns;
-                                    cols.map(obj => {
-                                        if (obj.description === 'description')
-                                            obj.description = '';
-                                        return obj
-                                    });
-
-                                    let newTable = {
-                                        name: this.props.currentTable,
-                                        remark: this.props.remark,
-                                        cols
-                                    };
-
-                                    const index = this.props.currentTableIndex;
-                                    if (index === -2) {
-                                        schemaCols.push(newTable);
-                                    } else if (index === -1) {
-                                        console.log('进行了一次删除操作 或 未知错误，数据库信息不匹配');
-                                    } else {
-                                        schemaCols.splice(index, 1, newTable);
-                                    }
-
-                                    return (
-                                        <div style={{display: 'inline-block'}}>
-                                            <Button type="primary" onClick={() => {
-                                                update_schema({
-                                                    variables: {
-                                                        ...varobj,
-                                                        schemaData: JSON.stringify(schemaCols)
-                                                    }
-                                                });
-                                            }}>
-                                                save
-                                            </Button>
-                                        </div>
-                                    )
-                                }}
-                            </Mutation>
-                        )
-                    }
-                }
-            </Query>
-        )
-    }
-}
-
-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 (
-            <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;
-                                    // 设置-2 标志为新建页面，防止通过 tablename 被修改导致每次 index 都为 -1 从而修改最后一个
-                                    if (index === -2) {
-                                        console.log('初始页面')
-                                    } else if (index === -1) {
-                                        console.log('进行了一次删除操作 或 数据库信息不匹配');
-                                    } else {
-                                        schemaCols.splice(index, 1);
-                                    }
-
-                                    return (
-                                        <div style={{display: 'inline-block'}}>
-                                            <Button type="danger"
-                                                    onClick={() => {
-                                                        update_schema({
-                                                            variables: {
-                                                                ...varobj,
-                                                                schemaData: JSON.stringify(schemaCols)
-                                                            }
-                                                        });
-                                                    }}>
-                                                DELETE
-                                            </Button>
-                                        </div>
-                                    )
-                                }}
-                            </Mutation>
-                        )
-                    }
-                }
-
-            </Query>
-        )
-    }
-}

src/components/common/schema/Table.js

@@ -1,12 +1,14 @@
 import React, {Component} from 'react';
 
-import {Select, Input, Icon, Button, notification, Spin} from 'antd';
+import {Layout, Select, Input, Icon, Button, notification, Spin} from 'antd';
 import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../gql";
 import gql from "graphql-tag";
 
 import {Mutation, Query} from "react-apollo";
+import {getCookie} from "../../cookie";
 
 const Option = Select.Option;
+const {Content} = Layout;
 
 class Table extends Component {
     constructor(props) {
@@ -99,90 +101,124 @@ class Table extends Component {
     };
 
     render() {
-        return (
-            <div style={{margin: 20}}>
-                <div style={{marginBottom: 20}}>
-                    <span className='table-title'> Table name</span>
-                    <Input value={this.state.currentTable} placeholder="table_name" style={{width: 120}}
-                           onChange={(e) => {
-                               this.setState({currentTable: e.target.value})
-                           }}/>
 
-                </div>
+        // console.log('columns',this.state.columns);
+        let schemaID = this.props.schemaID || this.props.location.search.substr(this.props.location.search.indexOf("=")+1);
+        let userID = this.props.userID || getCookie('user_id');
+        // console.log('schemaID',schemaID,'userID',userID);
+
 
-                <div style={{marginBottom: 20}}>
-                    <span className='table-title'> Table remark</span>
-                    <Input value={this.state.remark} placeholder="table_remark" style={{width: 250}} onChange={(e) => {
-                        this.setState({remark: e.target.value})
-                    }}/>
+        return (
+            <div>
+                <div className="column-menu" onClick={()=>this.props.history.goBack()}>
+                    {/*<Icon type="left" style={{color:'#3187FA'}} /> {this.props.match.params.name}*/}
                 </div>
 
-                <div>
-                    <span className='table-title'> Table columns</span>
-                    <span className='column-title'>name</span>
-                    <span className='column-title'>type</span>
-                    <span className='column-title'>description</span>
-                    {
-                        this.state.columns.map((col, index) =>
-                            <div key={index} style={{marginBottom: 3}}>
-                                <Input style={{width: 120, marginRight: 10}} value={col.name}
-                                       onChange={this.handleNameChange(index)}/>
-                                <Select defaultValue={col.type} style={{width: 120, marginRight: 10}}
-                                        onChange={this.handleTypeChange(index)}>
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
+
+                        <div className="column-content">
+                            <span className='table-title'> Table name</span>
+                            <Input
+                                value={this.state.currentTable}
+                                placeholder="please input table name"
+                                style={{width: 200, margin:'10px 0'}}
+                                onChange={(e) => {
+                                    this.setState({currentTable: e.target.value})
+                                }}/>
+                        </div>
+
+                        <div style={{marginBottom: 20}}>
+                            <span className='table-title'> Table remark</span>
+                            <Input
+                                value={this.state.remark}
+                                placeholder="please input table remark"
+                                style={{width: 250, margin:'10px 0'}}
+                                onChange={(e) => {
+                                    this.setState({remark: e.target.value})
+                                }}/>
+                        </div>
+
+                        <div>
+                            <span className='table-title'> Table fields</span>
+                            <span className='column-title'>name</span>
+                            <span className='column-title'>type</span>
+                            <span className='column-title'>description</span>
+                            {
+                                this.state.columns.map((col, index) =>
+                                    <div key={index} style={{marginBottom: 3}}>
+                                        <Input
+                                            className="column-details"
+                                            value={col.name}
+                                            onChange={this.handleNameChange(index)}
+                                        />
+                                        <Select
+                                            className="column-details"
+                                            defaultValue={col.type}
+                                            onChange={this.handleTypeChange(index)}>
+                                            {
+                                                this.state.types.map((value) =>
+                                                    <Option key={Math.random()+'types'} value={value.toLowerCase()}>{value}</Option>
+                                                )
+                                            }
+                                        </Select>
+                                        <Select
+                                            className="column-details"
+                                            defaultValue={col.description}
+                                            onChange={this.handleDescChange(index)}>
+                                            {
+                                                this.state.descriptions.map((value) =>
+                                                    <Option key={Math.random()+'descriptions'} value={value.toLowerCase()}>{value}</Option>
+                                                )
+                                            }
+                                        </Select>
+                                        <Icon type="delete" theme="twoTone" style={{cursor: 'pointer'}} onClick={this.handleColDelete(index)}/>
+                                    </div>
+                                )
+                            }
+                            <div>
+                                <Input
+                                    className="column-details"
+                                    placeholder="field name"
+                                    onChange={this.handleNameNew}
+                                    value={this.state.newColName}
+                                />
+                                <Select
+                                    className="column-details"
+                                    defaultValue="type"
+                                    onChange={this.handleTypeNew}
+                                    value={this.state.newColType}>
                                     {
                                         this.state.types.map((value) =>
                                             <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
                                         )
                                     }
                                 </Select>
-                                <Select defaultValue={col.description} style={{width: 120, marginRight: 10}}
-                                        onChange={this.handleDescChange(index)}>
-                                    {
-                                        this.state.descriptions.map((value) =>
-                                            <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                                        )
-                                    }
-                                </Select>
-                                <Icon type="delete" theme="outlined" style={{cursor: 'pointer'}}
-                                      onClick={this.handleColDelete(index)}/>
                             </div>
-                        )
-                    }
-                    <div>
-                        <Input placeholder="column_name" style={{width: 120, marginRight: 10}}
-                               onChange={this.handleNameNew}
-                               value={this.state.newColName}/>
-                        <Select defaultValue="type" style={{width: 120, marginRight: 10}} onChange={this.handleTypeNew}
-                                value={this.state.newColType}>
-                            {
-                                this.state.types.map((value) =>
-                                    <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                                )
-                            }
-                        </Select>
-                    </div>
-                </div>
-                <div style={{marginTop: 20}}>
-                    <UpdateTableButton
-                        currentTable={this.state.currentTable}
-                        columns={this.state.columns}
-                        remark={this.state.remark}
-                        currentTableIndex={this.props.currentTableIndex}
-                        schemaID={this.props.schemaID}
-                        userID={this.props.userID}
-                    />
-                    {
-                        // undefined的时候 上层未传进来 currentTable === 'add'，为的是输入框内不默认显示 add
-                        this.state.currentTable === '' ? '' : this.state.currentTable === undefined ? '' :
-                            <DeleteTableButton
+                        </div>
+
+                        <div style={{marginTop: 20}}>
+                            <UpdateTableButton
                                 currentTable={this.state.currentTable}
+                                columns={this.state.columns}
+                                remark={this.state.remark}
                                 currentTableIndex={this.props.currentTableIndex}
-                                schemaID={this.props.schemaID}
-                                userID={this.props.userID}
+                                schemaID={schemaID}
+                                userID={userID}
                             />
-                    }
-
-                </div>
+                            {
+                                // undefined的时候 上层未传进来 currentTable === 'add'，为的是输入框内不默认显示 add
+                                this.state.currentTable === '' ? '' : this.state.currentTable === undefined ? '' :
+                                    <DeleteTableButton
+                                        currentTable={this.state.currentTable}
+                                        currentTableIndex={this.props.currentTableIndex}
+                                        schemaID={schemaID}
+                                        userID={userID}
+                                    />
+                            }
+                        </div>
+                    </Content>
+                </Layout>
             </div>
         )
     }
@@ -295,7 +331,7 @@ class UpdateTableButton extends Component {
                                                     }
                                                 });
                                             }}>
-                                                SUBMIT
+                                                save
                                             </Button>
                                         </div>
                                     )