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

import React, {Component} from 'react';

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

const confirm = Modal.confirm;

class Schema extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentTable: props.location.state === undefined ? '' : props.location.state.create ? 'add' : '',
            // default schemaID and schemaName
            schemaID: props.schemaID || props.location.state.schemaID,
            schemaName: props.schemaName || props.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 : '';

    goBack = () => {
        this.setState({
            currentTable: ''
        })
    };

    componentWillReceiveProps(next) {
        this.setState({
            currentTable: next.location.state === undefined ? '' : next.location.state.create ? 'add' : '',
            schemaID: next.schemaID,
            schemaName: next.schemaName
        });
    }

    render() {
        let userID = this.props.userID;
        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 className={'schema'} onClick={() => {
                                                this.setState({
                                                    currentTable: ''
                                                })
                                            }}>
                                                <span className={'schema-name'}>{this.state.schemaName}</span>
                                                <Icon style={{marginLeft: 15}} type="edit" theme="twoTone"/>
                                            </div>
                                            <div className={'schema-table-list-title'}>
                                                <Row>
                                                    <Col span={10}><span
                                                        className={'schema-table-title'}>Name</span></Col>
                                                    <Col span={10}><span
                                                        className={'schema-table-title'}>Remark</span></Col>
                                                    <Col span={2} offset={2}>
                                                        <span
                                                            className={'schema-table-title'}
                                                            onClick={() => {
                                                                this.setState({
                                                                    currentTable: 'add'
                                                                })
                                                            }}>
                                                            <Icon type="plus"/>
                                                        </span>
                                                    </Col>
                                                </Row>
                                            </div>
                                            <div>
                                                {
                                                    data.map(table => (
                                                        <div key={table.name} className={'schema-table-list-content'}>
                                                            <Row>
                                                                <Col
                                                                    span={10}
                                                                    onClick={() => this.switchTable(table.name)}
                                                                >
                                                                <span
                                                                    className={'schema-table-content'}>{table.name}</span>
                                                                </Col>
                                                                <Col span={10}>
                                                                <span
                                                                    className={'schema-table-content'}>{table.remark}</span>
                                                                </Col>
                                                                <Col span={2} offset={2}>
                                                                <span className={'schema-table-content'}>
                                                                    <DeleteTableButton
                                                                        currentTable={table.name}
                                                                        currentTableIndex={data.findIndex(obj => obj.name === table.name)}
                                                                        schemaID={this.state.schemaID}
                                                                        userID={userID}
                                                                    />
                                                                </span>
                                                                </Col>
                                                            </Row>
                                                        </div>

                                                    ))
                                                }
                                            </div>

                                            <div className={'schema-bottom'}>
                                                <Row>
                                                    <Col span={4}>
                                                        <div className={'delete-schema'}>
                                                            <DeleteSchemaButton
                                                                userID={userID}
                                                                schemaName={this.state.schemaName}
                                                            />
                                                            {/*<Button type="danger">delete</Button>*/}
                                                        </div>
                                                    </Col>
                                                    <Col span={4} offset={16}>
                                                        <div className={'pagination'}>
                                                            <Pagination simple defaultCurrent={2} total={50}/>
                                                        </div>
                                                    </Col>
                                                </Row>
                                            </div>
                                        </div>
                                        :
                                        this.state.currentTable === 'add' ?
                                            <Table
                                                currentTable={''}
                                                currentTableIndex={-2}
                                                columns={[]}
                                                remark=''
                                                schemaID={this.state.schemaID}
                                                schemaName={this.state.schemaName}
                                                userID={userID}
                                                goBack={this.goBack}
                                            /> :
                                            <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}
                                                goBack={this.goBack}
                                            />
                                }

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

        )
    }
}

export default Schema;


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

    showConfirm = (delete_schema, schemaName) => {
        confirm({
            title: 'Do you want to delete this schema?',
            content: 'It cannot be find back!',
            onOk() {
                delete_schema({variables: {schemaName}});
            },
            onCancel() {
            },
        });
    };

    render() {
        let userID = this.props.userID;
        return (
            <Mutation
                mutation={gql(DELETE_SCHEMA)}
                update={(cache) => {
                    let data = cache.readQuery({query: gql(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: gql(SHOW_SCHEMA),
                        variables: {user_id: userID},
                        data
                    });
                }}
            >
                {(delete_schema, {loading, error}) => {
                    if (error)
                        return 'error';
                    if (loading)
                        return <Spin style={{marginLeft: 3}}/>;
                    return (
                        <Button
                            type="danger"
                            onClick={() => {
                                this.showConfirm(delete_schema, this.props.schemaName);
                            }}
                        >
                            delete
                        </Button>
                    )
                }}
            </Mutation>
        )
    }
}


class DeleteTableButton extends Component {
    render() {
        let schemaID = this.props.schemaID;
        let userID = this.props.userID;

        let varobj = {
            id: schemaID,
            updatedAt: new Date().getTime(),
            schemaState: 'updated-delete-table',
        };

        return (
            <Query query={gql(SHOW_TABLE)} variables={{schema_id: schemaID}}>

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

                        let schemaData = data;

                        return (
                            <Mutation
                                mutation={gql(UPDATE_SCHEMA)}
                                update={(cache, {data: {update_schema}}) => {
                                    let data = cache.readQuery({
                                        query: gql(SHOW_TABLE),
                                        variables: {schema_id: schemaID}
                                    });
                                    data.schema_by_id = update_schema;

                                    let showSchemaData = cache.readQuery({
                                        query: gql(SHOW_SCHEMA),
                                        variables: {user_id: userID}
                                    });
                                    let schemas = showSchemaData.schema_by_props;
                                    // console.log('schemas', schemas);
                                    let targetSchema = schemas.find(obj => obj.schemaName === update_schema.schemaName);
                                    // console.log('targetSchema', targetSchema);
                                    let targetSchemaIndex = schemas.findIndex(obj => obj.schemaName === update_schema.schemaName);
                                    // console.log('targetSchemaIndex', targetSchemaIndex);
                                    let targetTables = JSON.parse(schemas[targetSchemaIndex].schemaData);
                                    // console.log('targetTables', targetTables);
                                    let targetTableIndex = targetTables.findIndex(obj => obj.name === this.props.currentTable);
                                    // console.log('targetTableIndex', targetTableIndex);
                                    targetTables.splice(targetTableIndex, 1);
                                    // console.log('targetTablesAfterDelete', targetTables);
                                    let temp = {schemaData: JSON.stringify(targetTables)};
                                    // console.log('temp', temp);
                                    let tempSchema = {...targetSchema, ...temp};
                                    // console.log('tempSchema', tempSchema);
                                    showSchemaData.schema_by_props.splice(targetSchemaIndex, 1, tempSchema);

                                    cache.writeQuery(
                                        {
                                            query: gql(SHOW_TABLE),
                                            variables: {schema_id: schemaID},
                                            data
                                        },
                                        {
                                            query: gql(SHOW_SCHEMA),
                                            variables: {user_id: userID},
                                            showSchemaData
                                        }
                                    );
                                }}
                            >

                                {(update_schema, {loading, error}) => {
                                    if (loading)
                                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                                    if (error)
                                        return 'error';

                                    // 先 query 再 mutation，然后删除
                                    let schemaCols;
                                    if (schemaData.schema_by_id === null) schemaCols = [];
                                    else schemaCols = JSON.parse(schemaData.schema_by_id.schemaData);

                                    const index = this.props.currentTableIndex;
                                    if (index === -1) {
                                        console.log('数据库信息不匹配');
                                    } else {
                                        schemaCols.splice(index, 1);
                                    }

                                    return (
                                        <Icon type="delete"
                                              onClick={() => {
                                                  update_schema({
                                                      variables: {
                                                          ...varobj,
                                                          schemaData: JSON.stringify(schemaCols)
                                                      }
                                                  });
                                              }}>

                                        </Icon>
                                    )
                                }}
                            </Mutation>
                        )
                    }
                }

            </Query>
        )
    }
}