Merge branch 'application-mgt-new' of https://gitlab.com/entgra/carbon-device-mgt into application-mgt-new

merge-requests/62/head
Gathika94 6 years ago
commit 52a91e2655

@ -20,4 +20,8 @@
.steps-action { .steps-action {
margin-top: 24px; margin-top: 24px;
}
.ant-input-affix-wrapper .ant-input{
min-height: 0;
} }

@ -5,8 +5,6 @@ const { Header, Content, Footer } = Layout;
import styles from './Dashboard.less'; import styles from './Dashboard.less';
import Logo from "../../../public/images/logo.svg"; import Logo from "../../../public/images/logo.svg";
import Login from "../Login";
import {renderRoutes} from "react-router-config";
import {Link, NavLink} from "react-router-dom"; import {Link, NavLink} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes" import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
@ -23,7 +21,9 @@ class Dashboard extends React.Component {
return ( return (
<Layout className="layout"> <Layout className="layout">
<Header> <Header>
<div style={{backgroundImage: "url(" + { Logo} + ")"}} className={styles.logo}/> <div className={styles.logo}>
<img src={Logo}/>
</div>
<Menu <Menu
theme="light" theme="light"
mode="horizontal" mode="horizontal"

@ -1,7 +1,15 @@
.logo { .logo {
width: 120px; width: 120px;
height: 31px; height: 31px;
background: rgba(0,0,0,.2); margin: 16px 0 16px 20px;
margin: 16px 24px 16px 0;
float: left; float: left;
img{
height: 35px;
}
}
input{
min-height: 0;
} }

@ -1,6 +1,9 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css"; import "antd/dist/antd.css";
import {PageHeader, Typography, Card, Steps, Button, message} from "antd"; import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd";
import Step1 from "./Step1"
import Step2 from "./Step2"
import Step3 from "./Step3"
const Paragraph = Typography; const Paragraph = Typography;
@ -23,13 +26,13 @@ const Step = Steps.Step;
const steps = [{ const steps = [{
title: 'First', title: 'First',
content: 'First-content', content: Step1
}, { }, {
title: 'Second', title: 'Second',
content: 'Second-content', content: Step2,
}, { }, {
title: 'Last', title: 'Last',
content: 'Last-content', content: Step3,
}]; }];
@ -54,7 +57,8 @@ class AddNewApp extends React.Component {
render() { render() {
const { current } = this.state; const {current} = this.state;
const Content = steps[current].content;
return ( return (
<div> <div>
<PageHeader <PageHeader
@ -70,33 +74,38 @@ class AddNewApp extends React.Component {
</div> </div>
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<Card> <Row>
<div> <Col span={16} offset={4}>
<Steps current={current}> <Card>
{steps.map(item => <Step key={item.title} title={item.title}/>)} <div>
</Steps> <Steps current={current}>
<div className="steps-content">{steps[current].content}</div> {steps.map(item => <Step key={item.title} title={item.title}/>)}
<div className="steps-action"> </Steps>
{ <Content/>
current < steps.length - 1 <div className="steps-action">
&& <Button type="primary" onClick={() => this.next()}>Next</Button> {
} current < steps.length - 1
{ && <Button type="primary" onClick={() => this.next()}>Next</Button>
current === steps.length - 1 }
&& <Button type="primary" {
onClick={() => message.success('Processing complete!')}>Done</Button> current === steps.length - 1
} && <Button type="primary"
{ onClick={() => message.success('Processing complete!')}>Done</Button>
current > 0 }
&& ( {
<Button style={{marginLeft: 8}} onClick={() => this.prev()}> current > 0
Previous && (
</Button> <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
) Previous
} </Button>
</div> )
</div> }
</Card> </div>
</div>
</Card>
</Col>
</Row>
</div> </div>
</div> </div>

@ -0,0 +1,153 @@
import React from "react";
import {Form, Input, Button, Select, Divider, Tag, Tooltip, Icon, Checkbox, Row, Col} from "antd";
import styles from './Style.less';
const { Option } = Select;
const { TextArea } = Input;
const InputGroup = Input.Group;
const formItemLayout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
class EditableTagGroup extends React.Component {
state = {
tags: [],
inputVisible: false,
inputValue: '',
};
handleClose = (removedTag) => {
const tags = this.state.tags.filter(tag => tag !== removedTag);
console.log(tags);
this.setState({ tags });
}
showInput = () => {
this.setState({ inputVisible: true }, () => this.input.focus());
}
handleInputChange = (e) => {
this.setState({ inputValue: e.target.value });
}
handleInputConfirm = () => {
const { inputValue } = this.state;
let { tags } = this.state;
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue];
}
console.log(tags);
this.setState({
tags,
inputVisible: false,
inputValue: '',
});
}
saveInputRef = input => this.input = input
render() {
const { tags, inputVisible, inputValue } = this.state;
return (
<div>
{tags.map((tag, index) => {
const isLongTag = tag.length > 20;
const tagElem = (
<Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
</Tag>
);
return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
})}
{inputVisible && (
<Input
ref={this.saveInputRef}
type="text"
size="small"
style={{ width: 78 }}
value={inputValue}
onChange={this.handleInputChange}
onBlur={this.handleInputConfirm}
onPressEnter={this.handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag
onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }}
>
<Icon type="plus" /> New Tag
</Tag>
)}
</div>
);
}
}
class Step1 extends React.Component {
render() {
console.log("hhhoohh");
return (
<div>
<Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
<Form.Item {...formItemLayout} label="Platform">
<Select placeholder="ex: android">
<Option value="Android">Android</Option>
<Option value="iOS">iOS</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Type">
<Select value="Enterprise">
<Option value="Enterprise" selected>Enterprise</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Name">
<Input placeholder="App Name" />
</Form.Item>
<Form.Item {...formItemLayout} label="Description">
<TextArea placeholder="Enter the description" rows={4} />
</Form.Item>
<Form.Item {...formItemLayout} label="Category">
<Select placeholder="Select a category">
<Option value="travel">Travel</Option>
<Option value="entertainment">Entertainment</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Tags">
<EditableTagGroup/>
</Form.Item>
<Form.Item {...formItemLayout} label="Price">
<Input prefix="$" placeholder="00.00" />
</Form.Item>
<Form.Item {...formItemLayout} label="Share with all tenents?">
<Checkbox > </Checkbox>
</Form.Item>
<Form.Item {...formItemLayout} label="Meta Daa">
<InputGroup>
<Row gutter={8}>
<Col span={5}>
<Input placeholder="Key" />
</Col>
<Col span={10}>
<Input placeholder="value" />
</Col>
<Col span={4}>
<Button type="dashed" shape="circle" icon="plus" />
</Col>
</Row>
</InputGroup>
</Form.Item>
</Form>
</div>
);
}
}
export default Step1;

@ -0,0 +1,12 @@
import React from "react"
class Step2 extends React.Component {
render() {
console.log("hhhoohh");
return (
<p>tttoooeeee</p>
);
}
}
export default Step2;

@ -0,0 +1,12 @@
import React from "react"
class Step3 extends React.Component {
render() {
console.log("hhhoohh");
return (
<p>tttoooeeee</p>
);
}
}
export default Step3;

@ -1,9 +1,10 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css"; import "antd/dist/antd.css";
import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon} from "antd"; import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon, Row, Col} from "antd";
import Highlighter from 'react-highlight-words'; import Highlighter from 'react-highlight-words';
const Paragraph = Typography; const Paragraph = Typography;
const Search = Input.Search;
const routes = [ const routes = [
{ {
@ -189,7 +190,18 @@ class Apps extends React.Component {
breadcrumb={{routes}} breadcrumb={{routes}}
/> />
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
<Card> <Card>
<Row style={{padding:10}}>
<Col span={6} offset={18}>
<Search
placeholder="search"
onSearch={value => console.log(value)}
style={{ width: 200}}
/>
<Button style={{margin:5}}>Advanced Search</Button>
</Col>
</Row>
<Table columns={columns} dataSource={data}/> <Table columns={columns} dataSource={data}/>
</Card> </Card>
</div> </div>

Loading…
Cancel
Save