online/src/app/common/deploy/tencent/apiGroupCard/APIGroupCardRender.js

import React, {Component} from 'react';
import {Input, Collapse, Button, Radio, Icon, Tooltip} from 'antd';
import {idGen} from "../../../../../func";
import {graphqlUrl, manageUsers} from "../../../../../config";
import {FormattedMessage} from 'react-intl';
import {ADD_APIGROUP, UPDATE_APIGROUP, UPDATE_PROJECT_GROUP, UPDATE_PROJECT_ONLY_STATUS} from "../../../../../gql";
import {request} from 'graphql-request'
import {removePrefix, shiftPrefix} from "../../../../../func";

const Panel = Collapse.Panel;

// 如需改变显示，请在此处 value 处更改
// 如需添加中文，请在此处 value 处添加
// eg: 'xxxx': <F..  id='xxx'/>
const valueToKey = {
    'groupName': 'groupName',
    'environmentName': 'environmentName',
    'defaultDomain': 'defaultDomain',
    'frontType': 'frontType',
    'userDomain': 'userDomain',
    'userStatus': 'userStatus',
    'region': 'region',
};

const toolTipTitle = {
    'groupName': 'its groupName',
    'environmentName': 'its environmentName',
    'defaultDomain': 'its defaultDomain',
    'frontType': 'its frontType',
    'userDomain': 'its userDomain',
    'userStatus': 'its userStatus',
    'region': 'its region',
};

const youMustFill = {
    'groupName': true,
    'environmentName': true,
    'defaultDomain': true,
    'frontType': true,
    'userDomain': false,
    'userStatus': true,
    'region': true,
};

class APIGroupCardRender extends Component {
    constructor(props) {
        super(props);
        if (props.group !== '' && props.group !== null) {
            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = props.group;
            this.state = {
                showOK: false,
                groupName,
                environmentName,
                defaultDomain,
                frontType,
                userDomain,
                userStatus,
                groupRegion: region
            }
        } else {
            this.state = {
                showOK: false,
                groupName: 'graphql_endpoint',
                environmentName: 'test',
                defaultDomain: '',
                frontType: 'http&https',
                userDomain: '',
                userStatus: 'open',
                groupRegion: props.region === '' ? 'ap-beijing' : props.region,
            };
        }
    }

    componentWillReceiveProps(next) {
        if (next.group !== '' && next.group !== null) {
            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = next.group;
            this.setState({
                groupName,
                environmentName,
                defaultDomain,
                frontType,
                userDomain,
                userStatus,
                groupRegion: next.region === '' ? region : next.region
            })
        } else {
            this.setState({
                groupName: 'graphql_endpoint',
                environmentName: 'test',
                defaultDomain: '',
                frontType: 'http&https',
                userDomain: '',
                userStatus: 'open',
                groupRegion: next.region === '' ? 'ap-beijing' : next.region
            });
        }
    };

    switchConfig = (label) => {
        return (e) => {
            this.setState({
                [label]: e.target.value
            })
        };
    };

    ok = (id, userID, projectID, cloudID, group) => {
        let {userStatus, userDomain, groupName, groupRegion, frontType, environmentName} = this.state;
        let region = shiftPrefix('ap-', groupRegion);
        let varObj = {
            id,
            cloud_id: cloudID,
            user_id: userID,
            userStatus,
            userDomain,
            groupName,
            frontType,
            region,
            environmentName,
            defaultDomain: '',
            status: '',
            serviceId: '',
            createdAt: new Date().getTime(),
            updatedAt: ''
        };
        if (group === '' || group === null) {
            request(graphqlUrl, ADD_APIGROUP, varObj).then(
                data => {
                    if (data.create_apiGWGroup !== null) {
                        this.setState({
                            showOK: true
                        });
                        // 写回 project
                        request(graphqlUrl, UPDATE_PROJECT_GROUP, {
                            id: projectID,
                            updatedAt: new Date().getTime(),
                            apiGWGroup_id: id,
                            projectStatus: 'grouped'
                        }).then(data => {
                            if (data.update_project !== null)
                                this.props.stepByStep(2);
                        });
                    }
                    setTimeout(() => {
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )
        } else {
            let {userStatus, userDomain, groupName, groupRegion, frontType, environmentName} = this.state;
            let region = shiftPrefix('ap-', groupRegion);
            let varObj = {
                id: group.id,
                userStatus,
                userDomain,
                groupName,
                frontType,
                region,
                environmentName,
                updatedAt: new Date().getTime()
            };
            request(graphqlUrl, UPDATE_APIGROUP, varObj).then(
                data => {
                    if (data.update_apiGWGroup !== null) {
                        this.setState({
                            showOK: true
                        });
                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
                            id: projectID,
                            updatedAt: new Date().getTime(),
                            projectStatus: 'updated'
                        }).then(data => {
                            if(data.update_project !== null)
                                this.props.stepByStep(2);
                        })
                    }
                    setTimeout(() => {
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )
        }
    };

    render() {
        const customPanelStyle = {
            background: '#f7f7f7',
            borderRadius: 4,
            marginBottom: 24,
            border: 0,
            overflow: 'hidden',
        };

        return (
            <div>
                <div style={{marginBottom: 10}}>
                    <span className='vice-title'>
                        {
                            youMustFill['groupName'] ?
                                <span
                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                :
                                ''
                        }
                        <FormattedMessage id={valueToKey['groupName']}/>
                        &nbsp;
                        <Tooltip placement="top" title={toolTipTitle['groupName']}>
                            <Icon type="question-circle"/>
                        </Tooltip>
                    </span>
                    <Input value={this.state.groupName} style={{width: 400}}
                           onChange={this.switchConfig('groupName')}/>
                </div>

                <div style={{marginBottom: 10}}>
                    <span className='vice-title'>
                        {
                            youMustFill['region'] ?
                                <span
                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                :
                                ''
                        }
                        <FormattedMessage id={valueToKey['region']}/>
                        &nbsp;
                        <Tooltip placement="top" title={toolTipTitle['region']}>
                            <Icon type="question-circle"/>
                        </Tooltip>
                    </span>
                    <Radio.Group onChange={(e) => {
                        // 如果不想一变所有都变，就将 onchange 改成
                        // onChange={this.switchConfig('groupRegion')}
                        this.props.switchRegion(e);
                    }} value={removePrefix('ap-', this.state.groupRegion)} buttonStyle="solid">
                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
                    </Radio.Group>
                </div>

                <div style={{marginBottom: 10}}>
                    <span className='vice-title'>
                        {
                            youMustFill['environmentName'] ?
                                <span
                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                :
                                ''
                        }
                        <FormattedMessage id={valueToKey['environmentName']}/>
                        &nbsp;
                        <Tooltip placement="top" title={toolTipTitle['environmentName']}>
                            <Icon type="question-circle"/>
                        </Tooltip>
                    </span>
                    <Radio.Group onChange={this.switchConfig('environmentName')}
                                 defaultValue={this.state.environmentName}
                                 buttonStyle="solid">
                        <Radio.Button value="test"><FormattedMessage id="test"/></Radio.Button>
                        <Radio.Button value="prepub"><FormattedMessage id="prepub"/></Radio.Button>
                        <Radio.Button value="release"><FormattedMessage id="release"/></Radio.Button>
                    </Radio.Group>
                </div>
                <div style={{marginBottom: 10}}>
                            <span className='vice-title'>
                                {
                                    youMustFill['frontType'] ?
                                        <span style={{
                                            color: 'red',
                                            display: 'inline',
                                            marginRight: 10
                                        }}>*</span>
                                        :
                                        ''
                                }
                                <FormattedMessage id={valueToKey['frontType']}/>
                                &nbsp;
                                <Tooltip placement="top" title={toolTipTitle['frontType']}>
                                    <Icon type="question-circle"/>
                                </Tooltip>
                            </span>
                    <Radio.Group onChange={this.switchConfig('frontType')}
                                 defaultValue={this.state.frontType}
                                 buttonStyle="solid">
                        <Radio.Button value="http">http</Radio.Button>
                        <Radio.Button value="https">https</Radio.Button>
                        <Radio.Button value="http&https">http&https</Radio.Button>
                    </Radio.Group>
                </div>
                <Collapse bordered={false}>
                    <Panel header={<FormattedMessage id="Want more options?"/>}
                           style={customPanelStyle}>
                        {/*<div style={{marginBottom: 10}}>*/}
                        {/*<span className='vice-title'>{valueToKey['defaultDomain']}*/}
                        {/*&nbsp;*/}
                        {/*<Tooltip placement="top" title={toolTipTitle['defaultDomain']}>*/}
                        {/*<Icon type="question-circle"/>*/}
                        {/*</Tooltip>*/}
                        {/*</span>*/}
                        {/*<Input value={this.state.defaultDomain} style={{width: 400}} disabled/>*/}
                        {/*</div>*/}

                        <div style={{marginBottom: 10}}>
                            <span className='vice-title'>
                                {
                                    youMustFill['userDomain'] ?
                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                        :
                                        ''
                                }
                                <FormattedMessage id={valueToKey['userDomain']}/>
                                &nbsp;
                                <Tooltip placement="top" title={toolTipTitle['userDomain']}>
                                    <Icon type="question-circle"/>
                                </Tooltip>
                            </span>
                            <Input value={this.state.userDomain} style={{width: 400}}
                                   onChange={this.switchConfig('userDomain')}/>
                        </div>
                        {/*<div style={{marginBottom: 10}}>*/}
                        {/*<span className='vice-title'>{valueToKey['userStatus']}*/}
                        {/*&nbsp;*/}
                        {/*<Tooltip placement="top" title={toolTipTitle['userStatus']}>*/}
                        {/*<Icon type="question-circle"/>*/}
                        {/*</Tooltip>*/}
                        {/*</span>*/}
                        {/*<Radio.Group onChange={this.switchConfig('userStatus')} defaultValue={this.state.userStatus}*/}
                        {/*buttonStyle="solid">*/}
                        {/*<Radio.Button value="open">open</Radio.Button>*/}
                        {/*<Radio.Button value="close">close</Radio.Button>*/}
                        {/*</Radio.Group>*/}
                        {/*</div>*/}
                    </Panel>
                </Collapse>
                {
                    manageUsers.includes(this.props.userID) ?
                        <div>
                            <div>
                                {
                                    this.props.stepAllShow ? '' :
                                        <Button onClick={() => {
                                            this.props.stepByStep(0)
                                        }}><FormattedMessage id="previous-step"/></Button>

                                }
                                <Button onClick={() => {
                                    const id = idGen('group');
                                    this.ok(id, this.props.userID, this.props.projectID, this.props.cloudID, this.props.group);
                                }} type='primary'><FormattedMessage id="save"/></Button>
                            </div>
                            {
                                this.state.showOK === true ?
                                    <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                    :
                                    ''
                            }
                        </div>
                        :
                        this.props.trialcase ?
                            ''
                            :
                            <div>
                                <div>
                                    {
                                        this.props.stepAllShow ? '' :
                                            <Button onClick={() => {
                                                this.props.stepByStep(0)
                                            }}><FormattedMessage id="previous-step"/></Button>

                                    }
                                    <Button onClick={() => {
                                        const id = idGen('group');
                                        this.ok(id, this.props.userID, this.props.projectID, this.props.cloudID, this.props.group);
                                    }} type='primary'><FormattedMessage id="save"/></Button>
                                </div>
                                {
                                    this.state.showOK === true ?
                                        <Icon type="check-circle" theme="twoTone"
                                              twoToneColor="#52c41a"/>
                                        :
                                        ''
                                }
                            </div>
                }
            </div>
        )
    }
}

export default APIGroupCardRender;