改变 schema 页面

src/components/common/schema/Schema.jsx

@@ -6,6 +6,7 @@ import Column from './Column';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
 import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
+import Table from './Table';
 
 const Search = Input.Search;
 
@@ -18,22 +19,13 @@ class Schema extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            currentSchema: '',
             currentTable: '',
-            schemaID: ''
+            // 下面这两个参数跟 props 拿
+            schemaID: 'schema_1542243424669_92094965',
+            schemaName: 'ecommerce'
         };
     }
 
-    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 : '';
-
-    switchSchema = (name, id) => {
-        this.setState({
-            currentSchema: name,
-            schemaID: id
-        });
-    };
 
     switchTable = (table) => {
         this.setState({
@@ -45,45 +37,57 @@ class Schema extends Component {
         let userID = this.props.userID;
         return (
             <div>
-                <Row>
-                    <Col span={17} offset={1}>
-                        {
-                            this.state.currentTable === 'add' ?
-                                <Column
-                                    currentSchema={this.state.currentSchema}
-                                    currentTableIndex={-2}
-                                    columns={[]}
-                                    remark=''
-                                    userID={userID}
-                                    schemaID={this.state.schemaID}
-                                /> :
-                                <Query query={gql(SHOW_TABLE)}
-                                       variables={{schema_id: this.state.schemaID}}>
-                                    {
-                                        ({loading, error, data}) => {
-                                            if (loading)
-                                                return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
-                                            if (error)
-                                                return 'error';
-                                            if (data.schema_by_id === null) data = [];
-                                            else data = JSON.parse(data.schema_by_id.schemaData);
-                                            return (
-                                                <Column
-                                                    currentSchema={this.state.currentSchema}
-                                                    currentTable={this.state.currentTable}
-                                                    currentTableIndex={this.state.currentTable === '' ? -2 : data.findIndex(obj => obj.name === this.state.currentTable)}
-                                                    columns={this.findColumns(data)}
-                                                    remark={this.findRemark(data)}
-                                                    schemaID={this.state.schemaID}
-                                                    userID={userID}
-                                                />
-                                            )
-                                        }
-                                    }
-                                </Query>
-                        }
-                    </Col>
-                </Row>
+                <div>
+                    {this.state.schemaName}
+                </div>
+                <div>
+                    <Row>
+                        <Col span={8}><span>Name</span></Col>
+                        <Col span={8}><span>Remark</span></Col>
+                        <Col span={8}><span><Icon type="plus"/></span></Col>
+                    </Row>
+                    <Table schemaID={this.state.schemaID}/>
+                </div>
+
+                {/*<Row>*/}
+                {/*<Col span={17} offset={1}>*/}
+                {/*{*/}
+                {/*this.state.currentTable === 'add' ?*/}
+                {/*<Column*/}
+                {/*currentSchema={this.state.currentSchema}*/}
+                {/*currentTableIndex={-2}*/}
+                {/*columns={[]}*/}
+                {/*remark=''*/}
+                {/*userID={userID}*/}
+                {/*schemaID={this.state.schemaID}*/}
+                {/*/> :*/}
+                {/*<Query query={gql(SHOW_TABLE)}*/}
+                {/*variables={{schema_id: this.state.schemaID}}>*/}
+                {/*{*/}
+                {/*({loading, error, data}) => {*/}
+                {/*if (loading)*/}
+                {/*return <Spin style={{marginLeft: 30, marginTop: 10}}/>;*/}
+                {/*if (error)*/}
+                {/*return 'error';*/}
+                {/*if (data.schema_by_id === null) data = [];*/}
+                {/*else data = JSON.parse(data.schema_by_id.schemaData);*/}
+                {/*return (*/}
+                {/*<Column*/}
+                {/*currentSchema={this.state.currentSchema}*/}
+                {/*currentTable={this.state.currentTable}*/}
+                {/*currentTableIndex={this.state.currentTable === '' ? -2 : data.findIndex(obj => obj.name === this.state.currentTable)}*/}
+                {/*columns={this.findColumns(data)}*/}
+                {/*remark={this.findRemark(data)}*/}
+                {/*schemaID={this.state.schemaID}*/}
+                {/*userID={userID}*/}
+                {/*/>*/}
+                {/*)*/}
+                {/*}*/}
+                {/*}*/}
+                {/*</Query>*/}
+                {/*}*/}
+                {/*</Col>*/}
+                {/*</Row>*/}
             </div>
         )
     }
@@ -92,76 +96,9 @@ class Schema extends Component {
 export default Schema;
 
 
+
+
 // 备用代码
-class ShowSchemaList extends Component {
-    render() {
-        let userID = this.props.userID;
-        return (
-            <Query query={SHOW_SCHEMA} variables={{user_id: 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 {
-                            return (
-                                <div>
-                                    {
-                                        data.schema_by_props.map((schema) => {
-                                            return <div key={schema.schemaName} className='title'
-                                                        onClick={() => {
-                                                            this.props.switchSchema(schema.schemaName)
-
-                                                        }}>
-                                                <Row>
-                                                    <Col span={20}>{schema.schemaName}</Col>
-                                                    <Col span={4}>
-                                                        <Button onClick={() => this.props.switchTable('add')}
-                                                                type="primary"
-                                                                shape="circle" icon="plus" size='small'/>
-                                                        <DeleteSchemaButton
-                                                            schemaName={schema.schemaName}
-                                                            userID={this.props.userID}
-                                                        />
-                                                    </Col>
-                                                </Row>
-
-
-                                                {
-                                                    JSON.parse(schema.schemaData).map(table => (
-                                                        <p
-                                                            onClick={() => {
-                                                                this.props.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 {
     constructor(props) {

src/components/common/schema/Table.js

@@ -0,0 +1,47 @@
+import React, {Component} from 'react';
+
+import {Row, Col, Icon, Spin} from 'antd';
+import './index.css';
+import Column from './Column';
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+import {SHOW_TABLE} from '../../gql'
+import Schema from "./Schema";
+
+
+class Table extends Component {
+    render() {
+        let userID = this.props.userID;
+        return (
+            <Query query={gql(SHOW_TABLE)} variables={{schema_id: this.props.schemaID}}>
+
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        return (
+                            <div>
+                                {
+                                    JSON.parse(data.schema_by_id.schemaData).map(table => (
+                                        <Row key={table.name} className='show'>
+                                            <Col span={8}><span>{table.name}</span></Col>
+                                            <Col span={8}><span>{table.remark}</span></Col>
+                                            <Col span={8}><Icon type="delete"/></Col>
+                                        </Row>
+                                    ))
+                                }
+                            </div>
+                        );
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+export default Table;
+