|
|
@@ -1,10 +1,12 @@
|
|
|
import React, {Component} from 'react';
|
|
|
import {Layout, Menu, Input, 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";
|
|
|
|
|
|
import moment from 'moment';
|
|
|
import 'moment/locale/zh-cn';
|
|
|
-import { FormattedMessage } from 'react-intl';
|
|
|
+import {FormattedMessage} from 'react-intl';
|
|
|
import zhCN from 'antd/lib/locale-provider/zh_CN';
|
|
|
|
|
|
import WechatService from "../wechatService/WechatService";
|
|
|
@@ -13,6 +15,7 @@ import TrialCase from "../trialCase/TrialCase";
|
|
|
import Login from "../login/Login";
|
|
|
import '../common/graphql/index.css';
|
|
|
import './index.css'
|
|
|
+import {DELETE_SCHEMA, SHOW_SCHEMA} from "../gql";
|
|
|
|
|
|
const {SubMenu} = Menu;
|
|
|
const {Header, Sider} = Layout;
|
|
|
@@ -21,7 +24,7 @@ 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",
|
|
|
@@ -49,15 +52,15 @@ class App extends Component {
|
|
|
// console.log('app language',language);
|
|
|
let local = language === "中文" ? zhCN : undefined;
|
|
|
// console.log('app local',local);
|
|
|
- let changeLanguage = language === "中文" ? "English" : "中文";
|
|
|
+ let changeLanguage = language === "中文" ? "English" : "中文";
|
|
|
// console.log('app changeLanguage',changeLanguage);
|
|
|
- let nowLanguage = language === "中文" ? 'zh' : 'en';
|
|
|
+ let nowLanguage = language === "中文" ? 'zh' : 'en';
|
|
|
// console.log('app nowLanguage',nowLanguage);
|
|
|
- sessionStorage.setItem("language",changeLanguage);
|
|
|
+ sessionStorage.setItem("language", changeLanguage);
|
|
|
this.props.changeLanguage(nowLanguage);
|
|
|
this.setState({
|
|
|
- language:changeLanguage,
|
|
|
- locale:local
|
|
|
+ language: changeLanguage,
|
|
|
+ locale: local
|
|
|
});
|
|
|
if (!local) {
|
|
|
moment.locale('en');
|
|
|
@@ -68,7 +71,7 @@ class App extends Component {
|
|
|
|
|
|
|
|
|
render() {
|
|
|
- const { locale,language } = this.state;
|
|
|
+ const {locale, language} = this.state;
|
|
|
return (
|
|
|
<Router>
|
|
|
<Layout style={{minHeight: '100vh'}}>
|
|
|
@@ -89,7 +92,8 @@ 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>
|
|
|
@@ -99,61 +103,26 @@ 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>
|
|
|
|
|
|
- <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"
|
|
|
- inlineCollapsed={this.state.inlineCollapsed}
|
|
|
- defaultSelectedKeys={['e-commerce']}
|
|
|
- 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="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="1"><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 graphql"><Link to="/graphql-service/my-create/my graphql">my graphql</Link></Menu.Item>
|
|
|
- </SubMenu>
|
|
|
- </Menu>
|
|
|
- );
|
|
|
- case 'wechat-service':
|
|
|
- return (
|
|
|
+ {(() => {
|
|
|
+ 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}/>
|
|
|
+ );
|
|
|
+ case 'wechat-service':
|
|
|
+ return (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.state.collapsed}
|
|
|
+ onCollapse={this.onCollapse}
|
|
|
+ >
|
|
|
<Menu
|
|
|
theme="dark"
|
|
|
mode="inline"
|
|
|
@@ -172,18 +141,32 @@ 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="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>
|
|
|
+ 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 (
|
|
|
+ </Sider>
|
|
|
+ );
|
|
|
+ case 'quantization-service':
|
|
|
+ return (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.state.collapsed}
|
|
|
+ onCollapse={this.onCollapse}
|
|
|
+ >
|
|
|
<Menu
|
|
|
theme="dark"
|
|
|
mode="inline"
|
|
|
@@ -202,64 +185,31 @@ 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="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>
|
|
|
+ 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"
|
|
|
- inlineCollapsed={this.state.inlineCollapsed}
|
|
|
- defaultSelectedKeys={['e-commerce']}
|
|
|
- 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="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="1"><Icon type="edit" theme="twoTone" /><span>Create</span>
|
|
|
- <Icon type="plus" style={{
|
|
|
- position: 'absolute',
|
|
|
- top: '35%',
|
|
|
- right: '6px',
|
|
|
- color: 'white'}}/>
|
|
|
- </Menu.Item>
|
|
|
+ </Sider>
|
|
|
+ );
|
|
|
+ default:
|
|
|
+ return (
|
|
|
+ <GraphqlSidebar collapsed={this.state.collapsed} onCollapse={this.onCollapse} inlineCollapsed={this.state.inlineCollapsed} sideBar={this.state.sideBar} switchMenu={this.switchMenu}/>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })()}
|
|
|
|
|
|
- <SubMenu key="my-create"
|
|
|
- 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>
|
|
|
- {
|
|
|
- // todo: 路由如何传值是个问题，包括schema_id, user_id
|
|
|
- }
|
|
|
<LocaleProvider locale={locale}>
|
|
|
- <Layout style={{marginTop: '64px', zIndex: '0'}} key={locale ? locale.locale : 'en'/* Have to refresh for production environment */} >
|
|
|
+ <Layout style={{marginTop: '64px', zIndex: '0'}}
|
|
|
+ key={locale ? locale.locale : 'en'/* Have to refresh for production environment */}>
|
|
|
<Switch>
|
|
|
<Route path="/" exact component={TrialCase}/>
|
|
|
<Route path="/graphql-service/:sidebar/:caseId" component={TrialCase}/>
|
|
|
@@ -278,6 +228,156 @@ class App extends Component {
|
|
|
|
|
|
export default App;
|
|
|
|
|
|
+class GraphqlSidebar extends Component {
|
|
|
+ render() {
|
|
|
+ let userID = 'ioobot';
|
|
|
+ return (
|
|
|
+ <Query query={gql(SHOW_SCHEMA)} variables={{user_id: userID}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) return <Spin style={{marginLeft: 3}}/>;
|
|
|
+ if (error) return 'error!';
|
|
|
+ return (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.props.collapsed}
|
|
|
+ onCollapse={this.props.onCollapse}
|
|
|
+ >
|
|
|
+ <Menu
|
|
|
+ theme="dark"
|
|
|
+ mode="inline"
|
|
|
+ inlineCollapsed={this.props.inlineCollapsed}
|
|
|
+ defaultSelectedKeys={['e-commerce']}
|
|
|
+ defaultOpenKeys={['trial-case', 'my-create']}
|
|
|
+ // openKeys={['cloud-function']}
|
|
|
+ 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>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="1"><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.schema_by_props.map((schema) => <Menu.Item key={schema.schemaName}><Link
|
|
|
+ to={`/graphql-service/my-create/${schema.schemaName}`}>{schema.schemaName}</Link></Menu.Item>)
|
|
|
+ }
|
|
|
+ </SubMenu>
|
|
|
+ </Menu>
|
|
|
+ </Sider>
|
|
|
+ )
|
|
|
+
|
|
|
+
|
|
|
+ // <div key={schema.schemaName} className='title'
|
|
|
+ // onClick={() => {
|
|
|
+ // this.props.switchSchema(schema.schemaName, schema.id);
|
|
|
+ // }}>
|
|
|
+ // <Row>
|
|
|
+ // <Col span={20}>{schema.schemaName}</Col>
|
|
|
+ // <Col span={4}>
|
|
|
+ // <Button onClick={() => this.props.switchTable('add')}
|
|
|
+ // type="primary"
|
|
|
+ // shape="circle" icon="plus" size='small'/>
|
|
|
+ // <DeleteSchemaButton
|
|
|
+ // schemaName={schema.schemaName}
|
|
|
+ // userID={this.props.userID}
|
|
|
+ // />
|
|
|
+ // </Col>
|
|
|
+ // </Row>
|
|
|
+ //
|
|
|
+ //
|
|
|
+ // {
|
|
|
+ // JSON.parse(schema.schemaData).map(table => (
|
|
|
+ // <p
|
|
|
+ // onClick={() => {
|
|
|
+ // this.props.switchTable(table.name)
|
|
|
+ // }}
|
|
|
+ // key={table.name}
|
|
|
+ // className='show'>
|
|
|
+ // <Icon type="ordered-list" theme="outlined"/> {table.name}
|
|
|
+ // <span className='remark'><i> {table.remark}</i></span>
|
|
|
+ // </p>
|
|
|
+ // ))
|
|
|
+ // }
|
|
|
+ // </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//
|
|
|
+// class DeleteSchemaButton extends Component {
|
|
|
+// constructor(props) {
|
|
|
+// super(props);
|
|
|
+// this.state = {
|
|
|
+// schemaName: props.schemaName
|
|
|
+// }
|
|
|
+// }
|
|
|
+//
|
|
|
+// 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 onClick={(e) => {
|
|
|
+// delete_schema({variables: {schemaName: this.props.schemaName}});
|
|
|
+// }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
|
|
|
+// )
|
|
|
+// }}
|
|
|
+// </Mutation>
|
|
|
+// )
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+
|
|
|
|
|
|
|
|
|
|
xy