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

import React, {Component} from 'react';

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

const confirm = Modal.confirm;
const Search = Input.Search;

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,
            editSchemaName: '',
            data: '',
            page: '',
            pageSize: ''
        };
    }

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

    showTablePagination = (page, pageSize, data) => {
        // console.log(page);
        // console.log(pageSize);
        // console.log(data);
        // 这个之所以这么麻烦，是因为 'apollo 不能存数据' 而 '分页又得用数据展示'，
        // 所以展示 table 的时候分了两个，
        // 首先进入展示 15个 , 这前 15 个没有任何问题。
        // 如果数据多于 15个，在按下第二页的时候 将数据通过 antd 的分页组件的回调函数传入 state，之后 table 的展示由 this.state.data 来接管
        // 但是这又引起一个问题，通过 this.state.data 的展示如果进行删除，是不会通过 apollo 的，这也意味着数据库被删除了，而页面还存在
        // 于是，在使用 this.state.data 的页面的 deleteTableButton 组件内调用该函数，重新刷新 this.state.data
        this.setState({
            page,
            pageSize,
            data: data.slice((page-1)*pageSize, page*pageSize)
        })
    };

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

    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>
                                            {
                                                this.state.editSchemaName?
                                                    <div className={'schema'}>
                                                        <Search
                                                            value={this.state.editSchemaName}
                                                            enterButton="Confirm"
                                                            style={{width: 500}}
                                                            size="large"
                                                            onChange={e => this.setState({
                                                                editSchemaName: e.target.value
                                                            })}
                                                            onSearch={value => {
                                                                this.setState({
                                                                   editSchemaName: ''
                                                                });
                                                                console.log('我还没做 value = ', value)
                                                            }}
                                                        />
                                                    </div>
                                                    :
                                                    <div className={'schema'}>
                                                        <span className={'schema-name'}>{this.state.schemaName}</span>
                                                        <Icon style={{marginLeft: 15}} type="edit" theme="twoTone" onClick={()=>{this.setState({editSchemaName:this.state.schemaName})}
                                                        }/>
                                                    </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>
                                                {
                                                    this.state.data ?
                                                        this.state.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 name'}>{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}
                                                                        showTablePagination={this.showTablePagination}
                                                                        page={this.state.page}
                                                                        pageSize={this.state.pageSize}
                                                                    />
                                                                </span>
                                                                    </Col>
                                                                </Row>
                                                            </div>

                                                        ))
                                                        :
                                                        data.slice(0, 15).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 name'}>{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}
                                                            />
                                                        </div>
                                                    </Col>
                                                    <Col span={4} offset={16}>
                                                        <div className={'pagination'}>
                                                            <Pagination
                                                                simple
                                                                defaultCurrent={1}
                                                                hideOnSinglePage={true}
                                                                defaultPageSize={15}
                                                                total={data.length}
                                                                onChange={(page, pageSize) => {
                                                                    this.showTablePagination(page, pageSize, data)
                                                                }}
                                                            />
                                                        </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)
                                                      }
                                                  });
                                                  this.props.showTablePagination?
                                                      this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols):(()=>{})()
                                              }}>

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

            </Query>
        )
    }
}