online/src/components/common/schema/Schema.jsx

import React, {Component} from 'react';

import {Row, Col, Input, Icon, Button, Spin} from 'antd';
import './index.css';
import {Mutation, Query} from "react-apollo";
import gql from "graphql-tag";
import {SHOW_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
import Table from "./Table";

class Schema extends Component {
    constructor(props) {
        super(props);
        console.log('Schema props',props);
        this.state = {
            currentTable: props.schemaID ?'':'add',
            // default schemaID and schemaName
            schemaID: props.schemaID || props.history.location.state.schemaID,
            schemaName: props.schemaName || props.history.location.state.schemaName,
        };
    }


    switchTable = (table) => {
        this.setState({
            currentTable: table
        })
    };

    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 : '';

    componentWillReceiveProps(next) {
        this.setState({
            currentTable: '',
            schemaID: next.schemaID,
            schemaName: next.schemaName
        });
    }

    render() {
        let userID = this.props.userID;
        console.log('this.state.currentTable',this.state.currentTable);
        return (
            <Query query={gql(SHOW_TABLE)} variables={{schema_id: this.state.schemaID}}>

                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }

                        // let schemaName = data.schema_by_id.schemaName;

                        if (data.schema_by_id === null) data = [];
                        else data = JSON.parse(data.schema_by_id.schemaData);


                        return (
                            <div>
                                {
                                    this.state.currentTable === '' ?
                                        <div>
                                            <div onClick={() => {
                                                this.setState({
                                                    currentTable: ''
                                                })
                                            }}>
                                                {this.state.schemaName}
                                            </div>
                                            <div>
                                                <Row>
                                                    <Col span={8}><span>Name</span></Col>
                                                    <Col span={8}><span>Remark</span></Col>
                                                    <Col span={8}>
                                                        <span onClick={() => {
                                                            this.setState({
                                                                currentTable: 'add'
                                                            })
                                                        }}>
                                                            <Icon type="plus"/>
                                                        </span>
                                                    </Col>
                                                </Row>
                                            </div>
                                            {
                                                data.map(table => (
                                                    <Row key={table.name} className='show'>
                                                        <Col span={8}
                                                             onClick={() => this.switchTable(table.name)}><span>{table.name}</span></Col>
                                                        <Col span={8}><span>{table.remark}</span></Col>
                                                        <Col span={8}><Icon type="delete"/></Col>
                                                    </Row>
                                                ))
                                            }
                                        </div>
                                        :
                                        this.state.currentTable === 'add' ?
                                            <Table
                                                currentTableIndex={-2}
                                                columns={[]}
                                                remark=''
                                                schemaID={this.state.schemaID}
                                                schemaName={this.state.schemaName}
                                                userID={userID}
                                            /> :
                                            <Table
                                                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}
                                                schemaName={this.state.schemaName}
                                                userID={userID}
                                            />
                                }

                            </div>
                        );
                    }
                }
            </Query>

        )
    }
}

export default Schema;


// 备用代码

class DeleteSchemaButton extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schemaName: props.schemaName
        }
    }

    render() {
        let userID = this.props.userID;
        return (
            <Mutation
                mutation={DELETE_SCHEMA}
                update={(cache) => {
                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});

                    data.schema_by_props.splice(data.schema_by_props.findIndex(obj => obj.schemaName === this.state.schemaName), 1);
                    cache.writeQuery({
                        query: SHOW_SCHEMA,
                        variables: {user_id: userID},
                        data
                    });
                }}
            >
                {(delete_schema, {loading, error}) => {
                    if (error)
                        return 'error';
                    if (loading)
                        return <Spin style={{marginLeft: 3}}/>;
                    return (
                        <Button onClick={(e) => {
                            delete_schema({variables: {schemaName: this.props.schemaName}});
                        }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
                    )
                }}
            </Mutation>
        )
    }
}