online/src/components/common/schema/Table.js

import React, {Component} from 'react';

import {Layout, Select, Input, Icon, Button, notification, Spin, Modal} from 'antd';
import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../gql";
import gql from "graphql-tag";

import {Mutation, Query} from "react-apollo";
import {getCookie} from "../../cookie";

const Option = Select.Option;
const {Content} = Layout;
const confirm = Modal.confirm;

class Table extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentTable: props.currentTable,
            remark: props.remark,
            columns: props.columns,
            newColName: '',
            newColType: 'type',
            types: ['ID', 'String', 'Int', 'Float', 'Boolean', 'DateTime'],
            descriptions: ['description', 'key', 'non-null', 'non-null-list', 'list'],
            characterTips: false
        }
    }

    // 下面的 handlexxxx 全是 state 内部方法，用于操作视图
    // cache 仅在提交删除整体使用

    handleNameChange = (index) => {
        return (e) => {
            let columns = this.state.columns;
            columns[index].name = e.target.value;
            this.setState({
                columns
            })
        };
    };

    handleNameNew = (e) => {
        let r = /^[^\u4e00-\u9fa5]*$/;
        if (r.test(e.target.value)) {
            this.setState({
                newColName: e.target.value,
            })
        } else {
            this.setState({
                characterTips: true
            });
            setTimeout(() => {
                this.setState({
                    characterTips: false
                })
            }, 2000)
        }
    };

    handleTypeChange = (index) => {
        return (value) => {
            let columns = this.state.columns;
            columns[index].type = value;
            this.setState({
                columns
            });
        }
    };

    handleTypeNew = (value) => {
        if (this.state.newColName !== '') {
            let columns = this.state.columns;
            columns.push({name: this.state.newColName, type: value, description: 'description'});
            this.setState({
                columns,
                newColName: '',
                newColType: 'type'
            })
        } else {
            notification['warning']({
                message: 'Notification',
                description: 'Input a field name first.',
            });
        }
    };

    handleDescChange = (index) => {
        return (value) => {
            let columns = this.state.columns;
            columns[index].description = value;
            this.setState({
                columns
            });
        };
    };

    handleColDelete = (index) => {
        return () => {
            let columns = this.state.columns;
            columns.splice(index, 1);
            this.setState({
                columns
            });
        }
    };

    componentWillReceiveProps(next) {
        this.setState({
            currentTable: next.currentTable,
            columns: next.columns,
            remark: next.remark
        });
    };

    render() {
        let schemaID = this.props.schemaID || this.props.history.location.state.schemaID;
        let schemaName = this.props.schemaName || this.props.history.location.state.schemaName;
        let userID = this.props.userID || getCookie('user_id');
        let trialcase = this.props.trialcase;

        return (
            <div>
                <div className="column-menu" onClick={this.props.goBack}>
                    <Icon type="left" style={{color: '#3187FA'}}/> {schemaName}
                </div>

                <Layout style={{zIndex: '0'}}>
                    <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
                        <div className="column-content">
                            <span className='table-title'> Table name</span>
                            <Input
                                value={this.state.currentTable}
                                placeholder="please input table name"
                                style={{width: 200, margin: '10px 0'}}
                                onChange={(e) => {
                                    this.setState({currentTable: e.target.value})
                                }}/>
                        </div>

                        <div style={{marginBottom: 20}}>
                            <span className='table-title'> Table remark</span>
                            <Input
                                value={this.state.remark}
                                placeholder="please input table remark"
                                style={{width: 250, margin: '10px 0'}}
                                onChange={(e) => {
                                    this.setState({remark: e.target.value})
                                }}/>
                        </div>

                        <div>
                            <span className='table-title'> Table fields</span>
                            <span className='column-title'>name</span>
                            <span className='column-title'>type</span>
                            <span className='column-title'>description</span>
                            {
                                this.state.columns.map((col, index) =>
                                    <div key={index} style={{marginBottom: 3}}>
                                        <Input
                                            className="column-details"
                                            value={col.name}
                                            onChange={this.handleNameChange(index)}
                                        />
                                        <Select
                                            className="column-details"
                                            defaultValue={col.type}
                                            onChange={this.handleTypeChange(index)}>
                                            {
                                                this.state.types.map((value) =>
                                                    <Option key={Math.random() + 'types'}
                                                            value={value.toLowerCase()}>{value}</Option>
                                                )
                                            }
                                        </Select>
                                        <Select
                                            className="column-details"
                                            defaultValue={col.description}
                                            onChange={this.handleDescChange(index)}>
                                            {
                                                this.state.descriptions.map((value) =>
                                                    <Option key={Math.random() + 'descriptions'} value={value.toLowerCase()}>{value}</Option>
                                                )
                                            }
                                        </Select>
                                        {
                                            trialcase ?
                                                ''
                                                :
                                                <Icon type="delete" theme="twoTone" style={{cursor: 'pointer'}}
                                                      onClick={this.handleColDelete(index)}/>
                                        }
                                    </div>
                                )
                            }
                            <div>
                                <Input
                                    className="column-details"
                                    placeholder="field name"
                                    onChange={this.handleNameNew}
                                    value={this.state.newColName}
                                />
                                <Select
                                    className="column-details"
                                    defaultValue="type"
                                    onChange={this.handleTypeNew}
                                    value={this.state.newColType}>
                                    {
                                        this.state.types.map((value) =>
                                            <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
                                        )
                                    }
                                </Select>
                            </div>
                        </div>

                        {
                            trialcase ?
                                ''
                                :
                                <div style={{marginTop: 20}}>
                                    <UpdateTableButton
                                        currentTable={this.state.currentTable}
                                        columns={this.state.columns}
                                        remark={this.state.remark}
                                        schemaID={schemaID}
                                        userID={userID}
                                        schemaData={this.props.schemaData}
                                        fetchData={this.props.fetchData}
                                        showTablePagination={this.props.showTablePagination}
                                        page={this.props.page}
                                        pageSize={this.props.pageSize}
                                        history={this.props.history}
                                        schemaName={schemaName}
                                        add={this.props.add}
                                    />
                                </div>
                        }

                    </Content>
                </Layout>
            </div>
        )
    }
}

export default Table;


class UpdateTableButton extends Component {
    constructor(props) {
        super(props);
        this.state = {
            originTableName: props.currentTable
        }

    }

    showConfirm = (schemaName, schemaID) => {
        let _this = this;

        if (this.props.add !== 'add') {
            this.props.history.push({
                pathname: `/graphql-service/my-create/${schemaName}`,
                state: {
                    schemaName,
                    schemaID
                }
            });
        } else {
            confirm({
                title: '添加成功',
                content: '继续添加数据表？',
                onOk() {
                    console.log('继续添加');
                },
                onCancel() {
                    _this.props.history.push({
                        pathname: `/graphql-service/my-create/${schemaName}`,
                        state: {
                            schemaName,
                            schemaID
                        }
                    });
                }
            });
        }
    };

    render() {
        let schemaID = this.props.schemaID;
        let schemaName = this.props.schemaName;
        let userID = this.props.userID;

        let varobj = {
            id: schemaID,
            updatedAt: new Date().getTime(),
            schemaState: 'updated-update-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;
                        let referenceID = '';
                        if (data.schema_by_id)
                            referenceID = data.schema_by_id.reference;

                        return (
                            <Mutation
                                mutation={gql(UPDATE_SCHEMA)}
                                onCompleted={() => this.showConfirm(schemaName, schemaID)}
                                refetchQueries={[{query: gql(SHOW_TABLE), variables: {schema_id: schemaID}}]}
                            >

                                {(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);

                                    // 处理一下description的问题
                                    let cols = this.props.columns;
                                    cols.map(obj => {
                                        if (obj.description === 'description')
                                            obj.description = '';
                                        return obj
                                    });

                                    let newTable = {
                                        name: this.props.currentTable,
                                        remark: this.props.remark,
                                        cols
                                    };

                                    const index = this.state.originTableName === '' ? -2 : this.props.schemaData.findIndex(obj => obj.name === this.state.originTableName);
                                    if (index === -2) {
                                        if (referenceID !== '' && schemaCols.length === 0) {
                                            this.props.fetchData(referenceID).then(value => {
                                                schemaCols = JSON.parse(value);
                                                schemaCols.push(newTable);
                                            });
                                        } else {
                                            schemaCols.push(newTable);
                                        }

                                    } else if (index === -1) {
                                        // 先取数据，然后替换，然后填充
                                        this.props.fetchData(referenceID).then(value => {
                                            schemaCols = JSON.parse(value);
                                            const index = schemaCols.findIndex(obj => obj.name === this.state.originTableName);
                                            schemaCols.splice(index, 1, newTable);
                                        });
                                    } else {
                                        schemaCols.splice(index, 1, newTable);
                                    }

                                    return (
                                        <div style={{display: 'inline-block'}}>
                                            <Button type="primary" onClick={() => {
                                                update_schema({
                                                    variables: {
                                                        ...varobj,
                                                        schemaData: JSON.stringify(schemaCols)
                                                    }
                                                });
                                                this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols);
                                            }}>
                                                save
                                            </Button>
                                        </div>
                                    )
                                }}
                            </Mutation>
                        )
                    }
                }
            </Query>
        )
    }
}