Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/components/common/schema/Schema.jsx

src/components/common/schema/Schema.jsx

@@ -9,262 +9,260 @@ import {Mutation, Query} from "react-apollo";
 const Search = Input.Search;
 
 const idGen = (kind) => {
-    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+  return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
 };
 
 class Schema extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            currentSchema: '',
-            currentTable: '',
-            schemas: [
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentSchema: '',
+      currentTable: '',
+      schemas: [
+        {
+          name: 'magazineApp',
+          tables: [
+            {
+              name: 'magazine',
+              remark: 'magazine list',
+              cols: [
                 {
-                    name: 'magazineApp',
-                    tables: [
-                        {
-                            name: 'magazine',
-                            remark: 'magazine list',
-                            cols: [
-                                {
-                                    name: 'id',
-                                    type: 'ID',
-                                    desc: 'key'
-                                },
-                                {
-                                    name: 'name',
-                                    type: 'string',
-                                    desc: 'non-null'
-                                },
-                                {
-                                    name: 'suitableGrade',
-                                    type: 'int',
-                                    desc: 'non-null-list'
-                                },
-                                {
-                                    name: 'picture',
-                                    type: 'string',
-                                    desc: 'description'
-                                },
-                                {
-                                    name: 'magazineIntro',
-                                    type: 'string',
-                                    desc: 'description'
-                                },
-                                {
-                                    name: 'unitPrice',
-                                    type: 'float',
-                                    desc: 'description'
-                                },
-                                {
-                                    name: 'enableSub',
-                                    type: 'int',
-                                    desc: 'list'
-                                }
-                            ]
-                        },
-                        {
-                            name: 'slideshow',
-                            remark: 'slideshow list',
-                            cols: [
-                                {
-                                    name: 'id',
-                                    type: 'ID',
-                                    desc: 'key'
-                                },
-                                {
-                                    name: 'briefIntro',
-                                    type: 'string',
-                                    desc: 'description'
-                                },
-                                {
-                                    name: 'picture',
-                                    type: 'string',
-                                    desc: 'description'
-                                }
-                            ]
-                        }
-                    ]
+                  name: 'id',
+                  type: 'ID',
+                  desc: 'key'
                 },
                 {
-                    name: 'onlineApp',
-                    tables: [
-                        {
-                            name: 'database',
-                            remark: 'database configs',
-                            cols: [
-                                {
-                                    name: 'dbname',
-                                    type: 'string',
-                                    desc: 'non-null'
-                                },
-                                {
-                                    name: 'dbConfig',
-                                    type: 'string',
-                                    desc: 'non-null'
-                                },
-                                {
-                                    name: 'createdAt',
-                                    type: 'string',
-                                    desc: 'description'
-                                },
-                                {
-                                    name: 'updatedAt',
-                                    type: 'string',
-                                    desc: 'description'
-                                }
-                            ]
-                        },
-                        {
-                            name: 'deploy',
-                            remark: 'deploy\'s collections ',
-                            cols: [
-                                {
-                                    name: 'cloud_id',
-                                    type: 'string',
-                                    desc: 'non-null'
-                                },
-                                {
-                                    name: 'schema_id',
-                                    type: 'string',
-                                    desc: 'non-null'
-                                },
-                                {
-                                    name: 'user_id',
-                                    type: 'string',
-                                    desc: 'description'
-                                }
-                            ]
-                        }
-                    ]
+                  name: 'name',
+                  type: 'string',
+                  desc: 'non-null'
+                },
+                {
+                  name: 'suitableGrade',
+                  type: 'int',
+                  desc: 'non-null-list'
+                },
+                {
+                  name: 'picture',
+                  type: 'string',
+                  desc: 'description'
+                },
+                {
+                  name: 'magazineIntro',
+                  type: 'string',
+                  desc: 'description'
+                },
+                {
+                  name: 'unitPrice',
+                  type: 'float',
+                  desc: 'description'
+                },
+                {
+                  name: 'enableSub',
+                  type: 'int',
+                  desc: 'list'
                 }
-            ],
-        };
-        if (this.state.schemas.length !== 0) {
-            this.state.currentSchema = this.state.schemas[0].name;
-            this.state.currentTable = this.state.schemas[0].tables[0].name;
-        }
-    }
-
-    addTable = (columns, remark, tableName, schemaName) => {
-        let schemas = this.state.schemas;
-        let targetSchema = schemas.find(obj => obj.name === schemaName);
-        let targetTable = targetSchema.tables.find(obj => obj.name === tableName);
-        if (targetTable === undefined) {
-            targetSchema.tables.push({name: tableName, remark, cols: columns})
-        } else {
-            targetTable.remark = remark;
-            targetTable.cols = columns;
+              ]
+            },
+            {
+              name: 'slideshow',
+              remark: 'slideshow list',
+              cols: [
+                {
+                  name: 'id',
+                  type: 'ID',
+                  desc: 'key'
+                },
+                {
+                  name: 'briefIntro',
+                  type: 'string',
+                  desc: 'description'
+                },
+                {
+                  name: 'picture',
+                  type: 'string',
+                  desc: 'description'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: 'onlineApp',
+          tables: [
+            {
+              name: 'database',
+              remark: 'database configs',
+              cols: [
+                {
+                  name: 'dbname',
+                  type: 'string',
+                  desc: 'non-null'
+                },
+                {
+                  name: 'dbConfig',
+                  type: 'string',
+                  desc: 'non-null'
+                },
+                {
+                  name: 'createdAt',
+                  type: 'string',
+                  desc: 'description'
+                },
+                {
+                  name: 'updatedAt',
+                  type: 'string',
+                  desc: 'description'
+                }
+              ]
+            },
+            {
+              name: 'deploy',
+              remark: 'deploy\'s collections ',
+              cols: [
+                {
+                  name: 'cloud_id',
+                  type: 'string',
+                  desc: 'non-null'
+                },
+                {
+                  name: 'schema_id',
+                  type: 'string',
+                  desc: 'non-null'
+                },
+                {
+                  name: 'user_id',
+                  type: 'string',
+                  desc: 'description'
+                }
+              ]
+            }
+          ]
         }
-        this.setState({
-            schemas
-        })
+      ],
     };
+    if (this.state.schemas.length !== 0) {
+      this.state.currentSchema = this.state.schemas[0].name;
+      this.state.currentTable = this.state.schemas[0].tables[0].name;
+    }
+  }
 
-    deleteTable = (tableName, schemaName) => {
-        let schemas = this.state.schemas;
-        let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
-        let targetTableIndex = schemas.find(obj => obj.name === schemaName).tables.findIndex(obj => obj.name === tableName);
-        schemas[targetSchemaIndex].tables.splice(targetTableIndex, 1);
-        this.setState({
-            schemas
-        });
+  addTable = (columns, remark, tableName, schemaName) => {
+    let schemas = this.state.schemas;
+    let targetSchema = schemas.find(obj => obj.name === schemaName);
+    let targetTable = targetSchema.tables.find(obj => obj.name === tableName);
+    if (targetTable === undefined) {
+      targetSchema.tables.push({name: tableName, remark, cols: columns})
+    } else {
+      targetTable.remark = remark;
+      targetTable.cols = columns;
+    }
+    this.setState({
+      schemas
+    })
+  };
 
-        let tables = this.state.schemas.find(obj => obj.name === this.state.currentSchema).tables;
-        if (tables.length !== 0) {
-            this.setState({
-                currentTable: tables[0].name
-            })
-        } else {
-            this.setState({
-                currentTable: ''
-            })
-        }
-    };
+  deleteTable = (tableName, schemaName) => {
+    let schemas = this.state.schemas;
+    let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
+    let targetTableIndex = schemas.find(obj => obj.name === schemaName).tables.findIndex(obj => obj.name === tableName);
+    schemas[targetSchemaIndex].tables.splice(targetTableIndex, 1);
+    this.setState({
+      schemas
+    });
 
-    switchTable = (table) => {
-        return () => {
-            this.setState({
-                currentTable: table
-            })
-        };
-    };
+    let tables = this.state.schemas.find(obj => obj.name === this.state.currentSchema).tables;
+    if (tables.length !== 0) {
+      this.setState({
+        currentTable: tables[0].name
+      })
+    } else {
+      this.setState({
+        currentTable: ''
+      })
+    }
+  };
 
-    addSchema = (name) => {
-        this.setState({
-            schemas: [...this.state.schemas, {
-                name,
-                tables: []
-            }]
-        });
-    };
+  addSchema = (name) => {
+    this.setState({
+      schemas: [...this.state.schemas, {
+        name,
+        tables: []
+      }]
+    });
+  };
 
-    findColumns = () => {
-        let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
-        if (schema === undefined) return [];
-        //  if user insert a new schema, after merge to schemas with a {name: 'xx', tables: []}
-        //  you can find the following table is undefined.
-        //  so give a state here if you want add a tip!
-        else {
-            let table = schema.tables.find(table => table.name === this.state.currentTable);
-            if (table === undefined) return [];
-            else return table.cols;
-        }
-    };
+  findColumns = () => {
+    let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
+    if (schema === undefined) return [];
+    //  if user insert a new schema, after merge to schemas with a {name: 'xx', tables: []}
+    //  you can find the following table is undefined.
+    //  so give a state here if you want add a tip!
+    else {
+      let table = schema.tables.find(table => table.name === this.state.currentTable);
+      if (table === undefined) return [];
+      else return table.cols;
+    }
+  };
 
-    findRemark = () => {
-        let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
-        if (schema === undefined) return '';
-        else {
-            let table = schema.tables.find(table => table.name === this.state.currentTable);
-            if (table === undefined) return '';
-            else return table.remark;
-        }
-    };
+  findRemark = () => {
+    let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
+    if (schema === undefined) return '';
+    else {
+      let table = schema.tables.find(table => table.name === this.state.currentTable);
+      if (table === undefined) return '';
+      else return table.remark;
+    }
+  };
 
+  fetchSchemas = (schemas) => {
+    this.setState({
+      schemas
+    })
+  };
 
-    render() {
-        return (
-            <div>
-              <Row>
-                <Col span={6}>
-                  <div className='wrapper'>
-                    <div className='current'>{this.state.currentSchema}</div>
-                    <AddSchemaInput userID={this.props.userID} addSchema={this.addSchema}/>
-                  </div>
-                  <ShowSchemaList fetchSchemas={this.fetchSchemas}/>
-                </Col>
+  render() {
+    return (
+        <div>
+          <Row>
+            <Col span={6}>
+              <div className='wrapper'>
+                <div className='current'>{this.state.currentSchema}</div>
+                <AddSchemaInput userID={this.props.userID} addSchema={this.addSchema}/>
+              </div>
+              <ShowSchemaList schemas={this.state.schemas} fetchSchemas={this.fetchSchemas}/>
+            </Col>
 
-                <Col span={18}>
-                    {
-                        this.state.currentTable === 'add' ?
-                            <SchemaChange currentSchema={this.state.currentSchema} columns={[]} remark='' addTable={this.addTable}
-                                    deleteTable={this.deleteTable}/> :
-                            <SchemaChange currentSchema={this.state.currentSchema} currentTable={this.state.currentTable}
-                                    columns={this.findColumns()} remark={this.findRemark()} addTable={this.addTable}
-                                    deleteTable={this.deleteTable}/>
-                    }
-                </Col>
-              </Row>
-            </div>
-        )
-    }
+            <Col span={18}>
+              {
+                this.state.currentTable === 'add' ?
+                    <SchemaChange currentSchema={this.state.currentSchema} columns={[]} remark=''
+                                  addTable={this.addTable}
+                                  deleteTable={this.deleteTable}/> :
+                    <SchemaChange currentSchema={this.state.currentSchema} currentTable={this.state.currentTable}
+                                  columns={this.findColumns()} remark={this.findRemark()} addTable={this.addTable}
+                                  deleteTable={this.deleteTable}/>
+              }
+            </Col>
+          </Row>
+        </div>
+    )
+  }
 }
 
 export default Schema;
 
 class AddSchemaInput extends Component {
 
-    render() {
-        let varobj = {
-            id: idGen('schema'),
-            user_id: this.props.userID,
-            createdAt: new Date().getTime(),
-            updatedAt: '',
-            schemaState: 'create',
-        };
+  render() {
+    let varobj = {
+      id: idGen('schema'),
+      user_id: this.props.userID,
+      createdAt: new Date().getTime(),
+      updatedAt: '',
+      schemaState: 'create',
+    };
 
-        const ADD_SCHEMA = gql`
+    const ADD_SCHEMA = gql`
             mutation SCHEMA($id: ID!, $user_id: String!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String) {
                 create_schema(
                     id: $id,
@@ -282,87 +280,95 @@ class AddSchemaInput extends Component {
         `;
 
 
-        return (
-            <Mutation mutation={ADD_SCHEMA}>
-                {(create_schema, {loading, error}) => {
-                    if (loading)
-                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
-                    if (error)
-                        return 'error';
-                    return (
-                        <div>
-                          <Search
-                              className='add-input'
-                              placeholder="input schema_name"
-                              enterButton="Confirm"
-                              onSearch={value => {
-                                  this.setState({
-                                      switch: true,
-                                      currentSchema: value,
-                                      currentTable: ''
-                                  });
-                                  this.props.addSchema(value);
-                                  create_schema({
-                                      variables: {
-                                          ...varobj,
-                                          schemaName: value,
-                                          schemaData: {
-                                              name: value,
-                                              tables: []
-                                          }
-                                      }
-                                  });
-                              }}
-                          />
-                        </div>)
-                }}
-            </Mutation>
-        )
-    }
+    return (
+        <Mutation mutation={ADD_SCHEMA}>
+          {(create_schema, {loading, error}) => {
+            if (loading)
+              return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+            if (error)
+              return 'error';
+            return (
+                <div>
+                  <Search
+                      className='add-input'
+                      placeholder="input schema_name"
+                      enterButton="Confirm"
+                      onSearch={value => {
+                        this.setState({
+                          switch: true,
+                          currentSchema: value,
+                          currentTable: ''
+                        });
+                        this.props.addSchema(value);
+                        create_schema({
+                          variables: {
+                            ...varobj,
+                            schemaName: value,
+                            schemaData: JSON.stringify({
+                              name: value,
+                              tables: []
+                            })
+                          }
+                        });
+                      }}
+                  />
+                </div>)
+          }}
+        </Mutation>
+    )
+  }
 }
 
 class ShowSchemaList extends Component {
 
-    switchSchema = (schema) => {
-        return () => {
-            this.setState({
-                currentSchema: schema
-            });
-            // when this schema has no table, show new
-            if (this.state.schemas.find(obj => obj.name === schema).tables.length === 0) {
-                this.setState({
-                    currentTable: ''
-                })
-            }
-        }
-    };
+  switchSchema = (schema) => {
+    return () => {
+      this.setState({
+        currentSchema: schema
+      });
+      // when this schema has no table, show new
+      if (this.state.schemas.find(obj => obj.name === schema).tables.length === 0) {
+        this.setState({
+          currentTable: ''
+        })
+      }
+    }
+  };
 
-    deleteSchema = (e, schemaName) => {
-        e.stopPropagation();
-        let schemas = this.state.schemas;
-        let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
-        if (targetSchemaIndex !== -1) {
-            schemas.splice(targetSchemaIndex, 1);
-            this.setState({
-                schemas
-            });
-        }
-        if (this.state.schemas.length !== 0) {
-            this.setState({
-                currentSchema: this.state.schemas[0].name,
-                currentTable: this.state.schemas[0].tables[0] ? this.state.schemas[0].tables[0].name : ''
-            })
-        } else {
-            this.setState({
-                currentSchema: '',
-                currentTable: ''
-            })
-        }
+  deleteSchema = (e, schemaName) => {
+    e.stopPropagation();
+    let schemas = this.state.schemas;
+    let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
+    if (targetSchemaIndex !== -1) {
+      schemas.splice(targetSchemaIndex, 1);
+      this.setState({
+        schemas
+      });
+    }
+    if (this.state.schemas.length !== 0) {
+      this.setState({
+        currentSchema: this.state.schemas[0].name,
+        currentTable: this.state.schemas[0].tables[0] ? this.state.schemas[0].tables[0].name : ''
+      })
+    } else {
+      this.setState({
+        currentSchema: '',
+        currentTable: ''
+      })
+    }
+
+  };
 
+  switchTable = (table) => {
+    return () => {
+      this.setState({
+        currentTable: table
+      })
     };
+  };
 
-    render() {
-        const SHOW_SCHEMA = gql`
+  render() {
+    const SHOW_SCHEMA = gql`
             query SCHEMA($user_id: String) {
                 schema_by_props(user_id: $user_id) {
                     schemaData
@@ -370,84 +376,89 @@ class ShowSchemaList extends Component {
                 }
             }
         `;
-        return (
-            <Query query={SHOW_SCHEMA} variables={{user_id: this.props.userID}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return <Spin style={{marginLeft: 3}}/>
-                        }
-                        if (error) {
-                            return 'error!';
-                        }
-                        if (data.schema_by_props.length === 0)
-                            return (
-                                <div>
-                                  <span>no schemas, create one</span>
-                                </div>
-                            );
-                        else {
-                            console.log('getttttttttt', data);
-                            console.log('gettttttttt', JSON.stringify(data.schemaData));
-                            return (
-                                <div>
-                                    {/*{*/}
-                                        {/*data.schema_by_props.map((schema) => {*/}
-                                            {/*return <div key={schema.schemaData.name} className='title' onClick={this.switchSchema(schema.schemaData.name)}>*/}
-                                              {/*<Row>*/}
-                                                {/*<Col span={20}>{schema.schemaData.name}</Col>*/}
-                                                {/*<Col span={4}>*/}
-                                                  {/*<Button onClick={() => this.setState({currentTable: 'add'})} type="primary"*/}
-                                                          {/*shape="circle" icon="plus" size='small'/>*/}
-                                                  {/*<DeleteSchemaButton schemaName={schema.schemaData.name} deleteSchema={this.deleteSchema}/>*/}
-                                                {/*</Col>*/}
-                                              {/*</Row>*/}
+    return (
+        <Query query={SHOW_SCHEMA} variables={{user_id: this.props.userID}}>
+          {
+            ({loading, error, data}) => {
+              if (loading) {
+                return <Spin style={{marginLeft: 3}}/>
+              }
+              if (error) {
+                return 'error!';
+              }
+              if (data.schema_by_props.length === 0)
+                return (
+                    <div>
+                      <span>no schemas, create one</span>
+                    </div>
+                );
+              else {
+                console.log('getttttttttt', data);
+                let schemas = data.schema_by_props.map(dataSchema =>
+                  JSON.parse(dataSchema.schemaData)
+                );
+                console.log(schemas);
+                // this.props.fetchSchemas(schemas);
 
+                return (
+                    <div>
+                      {
+                        this.props.schemas.map((schema) => {
+                          return <div key={schema.name} className='title' onClick={this.switchSchema(schema.name)}>
+                            <Row>
+                              <Col span={20}>{schema.name}</Col>
+                              <Col span={4}>
+                                <Button onClick={() => this.setState({currentTable: 'add'})} type="primary"
+                                        shape="circle" icon="plus" size='small'/>
+                                <DeleteSchemaButton schemaName={schema.name} deleteSchema={this.deleteSchema}/>
+                              </Col>
+                            </Row>
 
-                                                {/*{*/}
-                                                    {/*schema.schemaData.tables.map((table) =>*/}
-                                                        {/*<p onClick={this.switchTable(table.name)} key={table.name} className='show'>*/}
-                                                          {/*<Icon type="ordered-list" theme="outlined"/> {table.name}*/}
-                                                          {/*<span className='remark'><i>   {table.remark}</i></span>*/}
-                                                        {/*</p>*/}
-                                                    {/*)*/}
-                                                {/*}*/}
-                                            {/*</div>*/}
-                                        {/*})*/}
-                                    {/*}*/}
-                                </div>
-                            );
-                        }
-                    }
-                }
-            </Query>
-        )
-    }
+
+                            {
+                              schema.tables.map((table) =>
+                                  <p onClick={this.switchTable(table.name)} key={table.name} className='show'>
+                                    <Icon type="ordered-list" theme="outlined"/> {table.name}
+                                    <span className='remark'><i>   {table.remark}</i></span>
+                                  </p>
+                              )
+                            }
+                          </div>
+                        })
+                      }
+                    </div>
+                );
+              }
+            }
+          }
+        </Query>
+    )
+  }
 }
 
 class DeleteSchemaButton extends Component {
-    render() {
-        const DELETE_SCHEMA = gql`
+  render() {
+    const DELETE_SCHEMA = gql`
             mutation SCHEMA($schemaName: String) {
                 delete_schema(schemaName: $schemaName)
             }
         `;
-        return (
-            <Mutation mutation={DELETE_SCHEMA}>
-                {(delete_schema, {loading, error}) => {
-                    if (error)
-                        return 'error';
-                    if (loading)
-                        return <Spin style={{marginLeft: 3}}/>;
-                    return (
-                        <Button onClick={(e) => {
-                            this.props.deleteSchema(e, this.props.schemaName);
-                            delete_schema({variables: {schemaName: this.props.schemaName}});
-                        }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
-                    )
-                }}
-            </Mutation>
-        )
-    }
+    return (
+        <Mutation mutation={DELETE_SCHEMA}>
+          {(delete_schema, {loading, error}) => {
+            if (error)
+              return 'error';
+            if (loading)
+              return <Spin style={{marginLeft: 3}}/>;
+            return (
+                <Button onClick={(e) => {
+                  this.props.deleteSchema(e, this.props.schemaName);
+                  delete_schema({variables: {schemaName: this.props.schemaName}});
+                }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
+            )
+          }}
+        </Mutation>
+    )
+  }
 }
 

src/index.js

@@ -9,8 +9,8 @@ import { ApolloProvider } from "react-apollo";
 
 const client = new ApolloClient({
   // xySchema api
-  uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
-  // uri: "http://localhost:3000/graphql"
+  // uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
+  uri: "http://localhost:3000/graphql"
 });
 
 ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('root'));