|
|
@@ -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,83 +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);
|
|
|
- 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>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
|
ioobot