wxConfig init

src/components/app/App.jsx

@@ -18,7 +18,7 @@ import '../common/graphql/index.css';
 import './index.css'
 import Create from "../common/schema/Create";
 
-import {SHOW_ALL_SCHEMA} from "../gql";
+import {SHOW_ALL_SCHEMA, SHOW_ALL_WXCONFIG} from "../gql";
 import axios from 'axios';
 import {getCookie} from "../cookie";
 
@@ -191,36 +191,9 @@ class App extends Component {
                                         collapsed={this.state.collapsed}
                                         onCollapse={this.onCollapse}
                                     >
-                                        <Menu
-                                            theme="dark"
-                                            mode="inline"
-                                            inlineCollapsed={this.state.inlineCollapsed}
-                                            defaultSelectedKeys={['my-wechat']}
-                                            defaultOpenKeys={['my-create']}
-                                            // openKeys={['cloud-function']}
-                                            onClick={(e) => this.switchMenu('sideBar', e)}
-                                            selectedKeys={[this.state.sideBar]}
-                                            style={{
-                                                borderRight: 0,
-                                                overflow: 'auto',
-                                                height: '100vh',
-                                                left: '0',
-                                                width: '200px',
-                                                position: 'fixed'
-                                            }}
-                                        >
-                                            <SubMenu key="my-create" title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
-                                                <Menu.Item key="my-wechat">
-                                                    <Link to="/wechat-service/my-create/my wechat">my wechat</Link></Menu.Item>
-                                            </SubMenu>
-
-                                            <Menu.Item key="instructions" >
-                                                <a href="https://ioobot-document.netlify.com/" title="instructions" target="instructions">
-                                                    <Icon type="file-text" theme="twoTone" />
-                                                    <span>Instructions</span>
-                                                </a>
-                                            </Menu.Item>
-                                        </Menu>
+                                        <WxConfigSiderbar inlineCollapsed={this.state.inlineCollapsed}
+                                                        sideBar={this.state.sideBar} switchMenu={this.switchMenu}
+                                                        showModal={this.showModal}/>
                                     </Sider>
                                 );
                             case 'quant-service':
@@ -431,6 +404,98 @@ class GraphqlSidebar extends Component {
 
                             </Menu>
 
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+class WxConfigSiderbar extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            userID: getCookie('user_id'),
+        }
+    }
+
+    render() {
+        return (
+            <Query query={gql(SHOW_ALL_WXCONFIG)} variables={{user_id: this.state.userID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) return <Spin style={{marginLeft: 3}}/>;
+                        if (error) return 'error!';
+                        return (
+                            <Menu
+                                theme="dark"
+                                mode="inline"
+                                inlineCollapsed={this.props.inlineCollapsed}
+                                defaultSelectedKeys={['my-wechat']}
+                                defaultOpenKeys={['trial-case', 'my-create']}
+                                // openKeys={['trial-case', 'my-create']}
+                                onClick={(e) => this.props.switchMenu('sideBar', e)}
+                                selectedKeys={[this.props.sideBar]}
+                                style={{
+                                    borderRight: 0,
+                                    overflow: 'auto',
+                                    height: '100vh',
+                                    left: '0',
+                                    width: '200px',
+                                    position: 'fixed'
+                                }}
+                            >
+                                <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Case Show</span></span>}>
+                                    {
+                                        data.caseWxConfig.map((config) =>
+                                            <Menu.Item key={config.appName}>
+                                                <Link to={{
+                                                    pathname: `/graphql-service/trial-case/${config.appName}`,
+                                                    state:{
+                                                        configName:config.appName,
+                                                        configID:config.id
+                                                    }
+                                                }}>{config.appName}</Link>
+                                            </Menu.Item>)
+                                    }
+                                </SubMenu>
+
+                                <Menu.Item key="create-config" onClick={this.props.showModal}>
+                                    <Icon type="edit" theme="twoTone"/>
+                                    <span>Create</span>
+                                    <Icon type="plus" style={{
+                                        position: 'absolute',
+                                        top: '35%',
+                                        right: '6px',
+                                        color: 'white'
+                                    }}/>
+                                </Menu.Item>
+
+                                <SubMenu key="my-create" title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
+                                    {
+                                        data.userWxConfig.map((config) =>
+                                            <Menu.Item key={config.appName}>
+                                                <Link to={{
+                                                    pathname: `/wechat-service/my-create/${config.appName}`,
+                                                    state:{
+                                                        configName:config.appName,
+                                                        configID:config.id
+                                                    }
+                                                }}>{config.appName}</Link>
+                                            </Menu.Item>)
+                                    }
+                                </SubMenu>
+
+                                <Menu.Item key="instructions">
+                                    <a href="https://ioobot-document.netlify.com/" title="instructions" target="_blank" rel="noopener noreferrer">
+                                        <Icon type="file-text" theme="twoTone" />
+                                        <span>Instructions</span>
+                                    </a>
+                                </Menu.Item>
+
+                            </Menu>
+
                         )
                     }
                 }

src/components/gql.js

@@ -375,6 +375,40 @@ const SHOW_FC = `
             }
         `;
 
+const SHOW_ALL_WXCONFIG = `
+            query WXCONFIG($user_id: ID) {
+                userWxConfig:wxConfig_by_props(user_id: $user_id) {
+                    appID
+                    appName
+                    appSecret
+                    attach
+                    body
+                    enter_url
+                    id
+                    mch_id
+                    notify_url
+                    pay_api_key
+                    spbill_create_ip
+                    token
+                    welcome_words
+                }
+                caseWxConfig:wxConfig_by_props(user_id: "ioobot") {
+                    appID
+                    appName
+                    appSecret
+                    attach
+                    body
+                    enter_url
+                    id
+                    mch_id
+                    notify_url
+                    pay_api_key
+                    spbill_create_ip
+                    token
+                    welcome_words
+                }
+            }
+        `;
 
 export {
     ADD_USER,
@@ -400,5 +434,6 @@ export {
     SHOW_APIGWPATH,
     ADD_APIGWPATH,
     UPDATE_APIGWPATH,
-    SHOW_FC
+    SHOW_FC,
+    SHOW_ALL_WXCONFIG
 }

src/components/wechatService/Config.jsx

@@ -0,0 +1,43 @@
+import React, {Component} from 'react';
+import {Input, Radio, Collapse, Button, Icon} from 'antd';
+import './index.css';
+
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
+class Config extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            configs: ['AppName', 'AppID', 'AppSecret', 'URL', 'Token', 'welcome_words', 'pay_api_key', 'attach', 'mch_id', 'body', 'spbill_create_ip', 'notify_url'],
+        }
+    }
+
+    switchConfig = (label) => {
+        return (e) => {
+            this.setState({
+                [label]: e.target.value
+            })
+        };
+    };
+
+    render() {
+        return (
+            <div>
+                {
+                    this.state.configs.map(config => (
+                        <div key={config} style={{marginBottom: 10}}>
+                            <span className='vice-title'>{config}: </span>
+                            <Input value={this.state[config]} style={{width: 200}} onChange={this.switchConfig(config)}/>
+                        </div>
+                    ))
+                }
+                <Button type={'primary'}>save</Button>
+            </div>
+        )
+    }
+}
+
+export default Config;

src/components/wechatService/Create.js

@@ -0,0 +1,120 @@
+import React, {Component} from 'react';
+import { withRouter } from "react-router-dom";
+import {Modal,Row, Col, Input, Icon, Button, Spin} from 'antd';
+
+import {Mutation, Query} from "react-apollo";
+import gql from "graphql-tag";
+
+import {SHOW_SCHEMA, ADD_SCHEMA} from '../gql'
+import './index.css';
+import {getCookie} from "../cookie";
+
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
+class Create extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            schemaName: '',
+            schemaID: '',
+            visible: false,
+            confirmLoading: false,
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            visible: nextProps.visible,
+        });
+    }
+
+
+    handleOk = (userID, create_schema) => {
+        let varobj = {
+            id: idGen('schema'),
+            user_id: userID,
+            createdAt: new Date().getTime(),
+            updatedAt: '',
+            schemaState: 'create',
+            schemaData: JSON.stringify([]),
+            reference: ''
+        };
+        let schemaName = this.state.schemaName;
+
+        this.setState({
+            confirmLoading: true,
+        });
+
+        create_schema({
+            variables: {
+                ...varobj,
+                schemaName
+            }
+        });
+        setTimeout(() => {
+            this.setState({
+                visible: false,
+                confirmLoading: false,
+            });
+        }, 1000);
+        this.props.hideModal();
+        this.props.switchSidebar(schemaName);
+        this.props.history.push({
+            pathname: `/graphql-service/my-create/${schemaName}`,
+            state:{
+                schemaName,
+                schemaID:varobj.id,
+                create: true
+            }
+        });
+    };
+
+    render() {
+        let userID = this.props.userID || getCookie('user_id');
+        const {visible, confirmLoading} = this.state;
+
+        return (
+            <div>
+                <Mutation
+                    mutation={gql(ADD_SCHEMA)}
+                    refetchQueries={[{query: gql(SHOW_SCHEMA), variables: {user_id: userID}}]}
+                >
+
+                    {(create_schema, {loading, error}) => {
+                        if (loading)
+                            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                        if (error)
+                            return 'error';
+                        return (
+                            <Modal title="Create Graphql Service"
+                                   centered
+                                   visible={visible}
+                                   onOk={() => this.handleOk(userID, create_schema)}
+                                   confirmLoading={confirmLoading}
+                                   onCancel={() => {this.props.hideModal();}}
+                            >
+                                <div>
+                                    <p>schema name</p>
+                                    <Input
+                                        className='add-input'
+                                        placeholder="input schema_name"
+                                        onChange={e => {
+                                            e.persist();
+                                            this.setState({
+                                                schemaName: e.target.value,
+                                            });
+                                        }}
+                                    />
+                                </div>
+                            </Modal>
+                        )
+                    }}
+                </Mutation>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Create);

src/components/wechatService/wechatConfig/WechatConfig.jsx → src/components/wechatService/Deploy.js

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
 
-class WechatConfig extends Component {
+class Deploy extends Component {
 
     render() {
         return (
             <div>
-                Wechat Config
+                Wechat Deploy
             </div>
         )
     }
 }
 
-export default WechatConfig;
+export default Deploy;

src/components/wechatService/wechatResult/WechatResult.jsx → src/components/wechatService/Result.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-class WechatResult extends Component {
+class Result extends Component {
 
     render() {
         return (
@@ -11,4 +11,4 @@ class WechatResult extends Component {
     }
 }
 
-export default WechatResult;
+export default Result;

src/components/wechatService/WechatService.jsx

@@ -2,11 +2,11 @@ import React, {Component} from 'react';
 
 import {Layout, Menu} from 'antd';
 
-import WechatConfig from "./wechatConfig/WechatConfig";
-import Deploy from "../common/deploy/Deploy";
-import WechatResult from './wechatResult/WechatResult';
+import Config from "./Config";
+import Deploy from "./Deploy";
+import Result from './Result';
 
-const { Content } = Layout;
+const {Content} = Layout;
 
 class WechatService extends Component {
     constructor() {
@@ -29,7 +29,14 @@ class WechatService extends Component {
                 <Menu
                     mode="horizontal"
                     defaultSelectedKeys={['wechat-config']}
-                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1',lineHeight:'50px',fontWeight:600}}
+                    style={{
+                        padding: '0 24px',
+                        position: 'fixed',
+                        width: '100%',
+                        zIndex: '1',
+                        lineHeight: '50px',
+                        fontWeight: 600
+                    }}
                     onClick={(e) => this.switchMenu('menuLevel3', e)}
                     selectedKeys={[this.state.menuLevel3]}
                 >
@@ -38,18 +45,18 @@ class WechatService extends Component {
                     <Menu.Item key="wechat-result">result</Menu.Item>
                 </Menu>
 
-                <Layout style={{ padding: '24px', zIndex: '0'}}>
-                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
                         {(() => {
                             switch (this.state.menuLevel3) {
                                 case 'wechat-config':
-                                    return <WechatConfig />;
+                                    return <Config/>;
                                 case 'wechat-deploy':
-                                    return <Deploy />;
+                                    return <Deploy/>;
                                 case 'wechat-result':
-                                    return <WechatResult />;
+                                    return <Result/>;
                                 default:
-                                    return <WechatConfig />
+                                    return <Config/>
                             }
                         })()}
                     </Content>

src/components/wechatService/index.css

@@ -0,0 +1,4 @@
+.vice-title {
+  width: 120px;
+  display: inline-block;
+}