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

feature/appm-store/pbac
Gathika94 6 years ago
commit 52a91e2655

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

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

@ -1,6 +1,9 @@
import React from "react";
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;
@ -23,13 +26,13 @@ const Step = Steps.Step;
const steps = [{
title: 'First',
content: 'First-content',
content: Step1
}, {
title: 'Second',
content: 'Second-content',
content: Step2,
}, {
title: 'Last',
content: 'Last-content',
content: Step3,
}];
@ -54,7 +57,8 @@ class AddNewApp extends React.Component {
render() {
const { current } = this.state;
const {current} = this.state;
const Content = steps[current].content;
return (
<div>
<PageHeader
@ -70,33 +74,38 @@ class AddNewApp extends React.Component {
</div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<Card>
<div>
<Steps current={current}>
{steps.map(item => <Step key={item.title} title={item.title}/>)}
</Steps>
<div className="steps-content">{steps[current].content}</div>
<div className="steps-action">
{
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 > 0
&& (
<Button style={{marginLeft: 8}} onClick={() => this.prev()}>
Previous
</Button>
)
}
</div>
</div>
</Card>
<Row>
<Col span={16} offset={4}>
<Card>
<div>
<Steps current={current}>
{steps.map(item => <Step key={item.title} title={item.title}/>)}
</Steps>
<Content/>
<div className="steps-action">
{
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 > 0
&& (
<Button style={{marginLeft: 8}} onClick={() => this.prev()}>
Previous
</Button>
)
}
</div>
</div>
</Card>
</Col>
</Row>
</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 "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';
const Paragraph = Typography;
const Search = Input.Search;
const routes = [
{
@ -189,7 +190,18 @@ class Apps extends React.Component {
breadcrumb={{routes}}
/>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
<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}/>
</Card>
</div>

Loading…
Cancel
Save