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

const Search = Input.Search;

const idGen = (kind) => {
    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
};


class Schema extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentSchema: '',
            currentTable: '',
            schemaID: ''
        };
    }

    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({
            currentTable: table
        })
    };

    render() {
        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>
        )
    }
}

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) {
        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>
        )
    }
}