fix conflict

src/components/app/App.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Layout, Menu, Input, Button, Spin, Breadcrumb, Icon, Radio, LocaleProvider} from 'antd';
+import {Layout, Menu, Input, Modal, Button, Spin, Breadcrumb, Icon, Radio, LocaleProvider} from 'antd';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
@@ -15,6 +15,8 @@ import TrialCase from "../trialCase/TrialCase";
 import Login from "../login/Login";
 import '../common/graphql/index.css';
 import './index.css'
+import Create from "../common/schema/Create";
+
 import {SHOW_SCHEMA} from "../gql";
 import axios from 'axios';
 
@@ -24,11 +26,10 @@ const {SubMenu} = Menu;
 const {Header, Sider} = Layout;
 moment.locale('en');
 
-
 class App extends Component {
     constructor(props) {
         super(props);
-        sessionStorage.setItem("language", "English");
+        sessionStorage.setItem("language","English");
         this.state = {
             menuLevel1: "trail",
             sideBar: "e-commerce",
@@ -36,7 +37,9 @@ class App extends Component {
             inlineCollapsed: false,
             locale: undefined,
             language: sessionStorage.getItem("language"),
+            visible: false,
             userID: ''
+
         };
     }
 
@@ -52,7 +55,20 @@ class App extends Component {
         });
     };
 
+    showModal = () => {
+        this.setState({
+            visible: true,
+        });
+    };
+
+    hideModal = () => {
+        this.setState({
+            visible: false,
+        });
+    };
+
     changeLocale = (e) => {
+        e.stopPropagation();
         let language = sessionStorage.getItem("language");
         // console.log('app language',language);
         let local = language === "中文" ? zhCN : undefined;
@@ -74,9 +90,9 @@ class App extends Component {
         }
     };
 
-
     render() {
-        const {locale, language} = this.state;
+        const { locale,language,visible } = this.state;
+
         return (
             <Router>
                 <Layout style={{minHeight: '100vh'}}>
@@ -89,7 +105,7 @@ class App extends Component {
                         <Menu
                             theme="dark"
                             mode="horizontal"
-                            // defaultSelectedKeys={['cloud-function']}
+                            defaultSelectedKeys={['graphql-service']}
                             style={{lineHeight: '64px'}}
                             onClick={(e) => this.switchMenu('menuLevel1', e)}
                         >
@@ -97,8 +113,7 @@ class App extends Component {
                                 <Link to="/"><FormattedMessage id="Graphql Service"/></Link>
                             </Menu.Item>
                             <Menu.Item key="wechat-service">
-                                <Link to="/wechat-service/trial-case/wechat case"><FormattedMessage
-                                    id="Wechat Service"/></Link>
+                                <Link to="/wechat-service/trial-case/wechat case"><FormattedMessage id="Wechat Service"/></Link>
                             </Menu.Item>
                             <Menu.Item key="quantization-service">
                                 <Link to="/quant-service/"><FormattedMessage id="Quantization Service"/></Link>
@@ -108,29 +123,21 @@ class App extends Component {
                         <Link to="/login"><Button className='login-button' type='primary'>Login</Button></Link>
 
                         <div className="change-locale">
-                            <Button size="small" onClick={(e) => this.changeLocale(e)}>{language}</Button>
+                            <Button size="small" onClick={(e)=>this.changeLocale(e)}>{language}</Button>
                         </div>
                     </Header>
 
-
-                    {(() => {
-                        switch (this.state.menuLevel1) {
-                            case 'graphql-service':
-                                return (
-                                    <GraphqlSidebar collapsed={this.state.collapsed} onCollapse={this.onCollapse}
-                                                    inlineCollapsed={this.state.inlineCollapsed}
-                                                    sideBar={this.state.sideBar} switchMenu={this.switchMenu}
-                                                    userID={this.state.userID}/>
-                                );
-                            case 'wechat-service':
-                                return (
-                                    <Sider
-                                        width={200}
-                                        style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
-                                        collapsible
-                                        collapsed={this.state.collapsed}
-                                        onCollapse={this.onCollapse}
-                                    >
+                    <Sider
+                        width={200}
+                        style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
+                        collapsible
+                        collapsed={this.state.collapsed}
+                        onCollapse={this.onCollapse}
+                    >
+                        {(() => {
+                            switch (this.state.menuLevel1) {
+                                case 'graphql-service':
+                                    return (
                                         <Menu
                                             theme="dark"
                                             mode="inline"
@@ -149,32 +156,90 @@ class App extends Component {
                                                 position: 'fixed'
                                             }}
                                         >
-                                            <SubMenu key="trial-case"
-                                                     title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
-                                                <Menu.Item key="wechat"><Link
-                                                    to="/wechat-service/trial-case/wechat case">wechat
-                                                    case</Link></Menu.Item>
+                                            <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
+                                                <Menu.Item key="e-commerce"><Link to="/graphql-service/trial-case/e-commerce">e-commerce</Link></Menu.Item>
+                                                <Menu.Item key="keep accounts"><Link to="/graphql-service/trial-case/keep accounts">keep accounts</Link></Menu.Item>
+                                                <Menu.Item key="appointment"><Link to="/graphql-service/trial-case/appointment">appointment</Link></Menu.Item>
                                             </SubMenu>
 
+                                            <Menu.Item key="create-graphql" onClick={this.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>}>
-                                                <Menu.Item key="my wechat"><Link
-                                                    to="/wechat-service/my-create/my wechat">my
-                                                    wechat</Link></Menu.Item>
+                                                     title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
+                                                <Menu.Item key="my graphql"><Link to="/graphql-service/my-create/my graphql">my graphql</Link></Menu.Item>
                                             </SubMenu>
                                         </Menu>
-                                    </Sider>
-                                );
-                            case 'quantization-service':
-                                return (
-                                    <Sider
-                                        width={200}
-                                        style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
-                                        collapsible
-                                        collapsed={this.state.collapsed}
-                                        onCollapse={this.onCollapse}
-                                    >
+                                    );
+                                case 'wechat-service':
+                                    return (
+                                        <Menu
+                                            theme="dark"
+                                            mode="inline"
+                                            inlineCollapsed={this.state.inlineCollapsed}
+                                            defaultSelectedKeys={['wechat']}
+                                            defaultOpenKeys={['trial-case']}
+                                            // 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="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
+                                                <Menu.Item key="wechat"><Link to="/wechat-service/trial-case/wechat case">wechat case</Link></Menu.Item>
+                                            </SubMenu>
+
+                                            <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>
+                                    );
+                                case 'quantization-service':
+                                    return (
+                                        <Menu
+                                            theme="dark"
+                                            mode="inline"
+                                            inlineCollapsed={this.state.inlineCollapsed}
+                                            defaultSelectedKeys={['quant-service']}
+                                            defaultOpenKeys={['trial-case']}
+                                            // 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="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
+                                                <Menu.Item key="quant-service"><Link to="/quant-service/">quant case</Link></Menu.Item>
+                                            </SubMenu>
+
+                                            <SubMenu key="my-create"
+                                                     title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
+                                                <Menu.Item key="my quant"><Link to="/quant-service/">my quant</Link></Menu.Item>
+                                            </SubMenu>
+                                        </Menu>
+                                    );
+                                default:
+                                    return (
                                         <Menu
                                             theme="dark"
                                             mode="inline"
@@ -193,30 +258,35 @@ class App extends Component {
                                                 position: 'fixed'
                                             }}
                                         >
-                                            <SubMenu key="trial-case"
-                                                     title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
-                                                <Menu.Item key="quant-service"><Link to="/quant-service/">quant
-                                                    case</Link></Menu.Item>
+                                            <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
+                                                <Menu.Item key="e-commerce"><Link to="/graphql-service/trial-case/e-commerce">e-commerce</Link></Menu.Item>
+                                                <Menu.Item key="keep accounts"><Link to="/graphql-service/trial-case/keep accounts">keep accounts</Link></Menu.Item>
+                                                <Menu.Item key="appointment"><Link to="/graphql-service/trial-case/appointment">appointment</Link></Menu.Item>
                                             </SubMenu>
 
+                                            <Menu.Item key="create-graphql"  onClick={this.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>}>
-                                                <Menu.Item key="my quant"><Link to="/quant-service/">my
-                                                    quant</Link></Menu.Item>
+                                                     title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
+                                                <Menu.Item key="my graphql"><Link to="/graphql-service/my-create/my graphql">my graphql</Link></Menu.Item>
                                             </SubMenu>
                                         </Menu>
-                                    </Sider>
-                                );
-                            default:
-                                return (
-                                    <GraphqlSidebar collapsed={this.state.collapsed} onCollapse={this.onCollapse}
-                                                    inlineCollapsed={this.state.inlineCollapsed}
-                                                    sideBar={this.state.sideBar} switchMenu={this.switchMenu}
-                                                    userID={this.state.userID}/>
-                                );
-                        }
-                    })()}
+                                    );
+                            }
+                        })()}
+                    </Sider>
+                    <Create visible={visible} hideModal={this.hideModal}/>
+                    {
+                        // todo: 路由如何传值是个问题，包括schema_id, user_id
+                    }
 
                     <LocaleProvider locale={locale}>
                         <Layout style={{marginTop: '64px', zIndex: '0'}}

src/components/common/schema/Create.js

@@ -1,29 +1,34 @@
 import React, {Component} from 'react';
 
-import {Row, Col, Input, Icon, Button, Spin} from 'antd';
-import './index.css';
-import Column from './Column';
+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, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
 
-const Search = Input.Search;
+import {SHOW_SCHEMA, ADD_SCHEMA} from '../../gql'
+import './index.css';
 
 const idGen = (kind) => {
     return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
 };
 
-
 class Create extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            currentSchema: '',
-            currentTable: '',
-            schemaID: ''
+            schemaName: '',
+            schemaID: '',
+            visible: false,
+            confirmLoading: false,
         };
     }
 
+    componentWillReceiveProps(nextProps){
+        // console.log('nextProps',nextProps);
+        this.setState({
+            visible: nextProps.visible,
+        });
+    }
 
     switchSchema = (name, id) => {
         this.setState({
@@ -32,34 +37,7 @@ class Create extends Component {
         });
     };
 
-    switchTable = (table) => {
-        this.setState({
-            currentTable: table
-        })
-    };
-
-    render() {
-        let userID = this.props.userID;
-        return (
-            <div>
-                <Row>
-                    <Col span={6}>
-                        <div className='wrapper'>
-                            <AddSchemaInput userID={userID}/>
-                        </div>
-                    </Col>
-                </Row>
-            </div>
-        )
-    }
-}
-
-export default Create;
-
-class AddSchemaInput extends Component {
-
-    render() {
-        let userID = this.props.userID;
+    handleOk = (userID,create_schema) => {
 
         let varobj = {
             id: idGen('schema'),
@@ -70,50 +48,78 @@ class AddSchemaInput extends Component {
             schemaData: JSON.stringify([]),
             reference: ''
         };
+        this.setState({
+            confirmLoading: true,
+        });
+
+        create_schema({
+            variables: {
+                ...varobj,
+                schemaName: this.state.schemaName
+            }
+        });
+        setTimeout(() => {
+            this.setState({
+                visible: false,
+                confirmLoading: false,
+            });
+        }, 2000);
+    };
 
+    render() {
+        let userID = this.props.userID || "user_1543305776799_25177768";
+        console.log('userid',userID);
+        const { visible, confirmLoading } = this.state;
 
         return (
-            <Mutation
-                mutation={gql(ADD_SCHEMA)}
-                update={(cache, {data: {create_schema}}) => {
-                    let data = cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}});
-                    data.schema_by_props.push(create_schema);
-                    cache.writeQuery({
-                        query: gql(SHOW_SCHEMA),
-                        variables: {user_id: userID},
-                        data
-                    });
-                }}
-            >
-
-                {(create_schema, {loading, error}) => {
-                    if (loading)
-                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
-                    if (error)
-                        return 'error';
-                    return (
-                        <div>
-                            <Search
-                                className='add-input'
-                                placeholder="input schema_name"
-                                enterButton="Confirm"
-                                onSearch={value => {
-                                    this.setState({
-                                        switch: true,
-                                        currentSchema: value,
-                                        currentTable: ''
-                                    });
-                                    create_schema({
-                                        variables: {
-                                            ...varobj,
-                                            schemaName: value
-                                        }
-                                    });
-                                }}
-                            />
-                        </div>)
-                }}
-            </Mutation>
+            <div>
+                <Mutation
+                    mutation={gql(ADD_SCHEMA)}
+                    refetchQueries={[{query:gql(SHOW_SCHEMA), variables:{user_id: userID}}]}
+                    // update={(cache, {data: {create_schema}}) => {
+                    //     console.log('cache',cache);
+                    //     console.log('data1',cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}}));
+                    //     let data = cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}});
+                    //     console.log('data',data);
+                    //     data.schema_by_props.push(create_schema);
+                    //     cache.writeQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}, data});
+                    // }}
+                >
+
+                    {(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();
+                                            console.log('schema name',e.target.value);
+                                            this.setState({
+                                                schemaName: e.target.value,
+                                            });
+                                        }}
+                                    />
+                                </div>
+                            </Modal>
+                        )
+                    }}
+                </Mutation>
+            </div>
         )
     }
 }
+
+export default Create;

src/components/monitorNotify/MonitorNotify.jsx

@@ -0,0 +1,62 @@
+import React, {Component} from 'react';
+
+import {Layout, Menu} from 'antd';
+import CaseNotification from "../common/caseNotification/CaseNotification";
+import Notification from "./notification/Notification";
+import GraphqlTrigger from "./graphqlTrigger/GraphqlTrigger";
+import StockSignal from "./stockSignal/StockSignal";
+
+const { Content } = Layout;
+
+class MonitorNotify extends Component {
+    constructor() {
+        super();
+        this.state = {
+            menuLevel2: "notification",
+        }
+    }
+
+    switchMenu = (menuName, e) => {
+        console.log('menuName', menuName, 'e', e);
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['notification']}
+                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
+                    onClick={(e) => this.switchMenu('menuLevel2', e)}
+                    selectedKeys={[this.state.menuLevel2]}
+                >
+                    <Menu.Item key="notification">notification</Menu.Item>
+                    <Menu.Item key="graphql-trigger">graphql trigger</Menu.Item>
+                    <Menu.Item key="stock-signal">stock signal</Menu.Item>
+                </Menu>
+
+                <Layout style={{ padding: '24px', zIndex: '0'}}>
+                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
+                        {(() => {
+                            switch (this.state.menuLevel2) {
+                                case 'notification':
+                                    return <Notification />;
+                                case 'graphql-trigger':
+                                    return <GraphqlTrigger />;
+                                case 'stock-signal':
+                                    return <StockSignal />;
+                                default:
+                                    return <Notification />
+                            }
+                        })()}
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default MonitorNotify;

src/components/monitorNotify/graphqlTrigger/GraphqlTrigger.jsx

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+class GraphqlTrigger extends Component {
+
+
+    render() {
+        return (
+            <div>
+                Graphql Trigger
+            </div>
+        )
+    }
+}
+
+export default GraphqlTrigger;

src/components/monitorNotify/notification/Notification.jsx

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+class Notification extends Component {
+
+
+    render() {
+        return (
+            <div>
+                <p>Notification</p>
+            </div>
+        )
+    }
+}
+
+export default Notification;

src/components/monitorNotify/stockSignal/StockSignal.jsx

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+
+class StockSignal extends Component {
+
+    render() {
+        return (
+            <div>
+                Stock Signal
+            </div>
+        )
+    }
+}
+
+export default StockSignal;