Publisher : Add new Apps page See merge request entgra/carbon-device-mgt!59merge-requests/61/head
Dharmakeerthi Lasantha
6 years ago
commit
0c5ce12eba
@ -1,3 +1,23 @@
|
||||
.App {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ant-layout-header{
|
||||
padding: 0;
|
||||
height: auto;
|
||||
box-shadow: 0 2px 8px #f0f1f2;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin-top: 16px;
|
||||
border: 1px dashed #e9e9e9;
|
||||
border-radius: 6px;
|
||||
background-color: #fafafa;
|
||||
min-height: 200px;
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.steps-action {
|
||||
margin-top: 24px;
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
import React from "react";
|
||||
import "antd/dist/antd.css";
|
||||
import {PageHeader, Typography, Card, Steps, Button, message} from "antd";
|
||||
|
||||
const Paragraph = Typography;
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'publisher',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'dashboard',
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'add new app',
|
||||
},
|
||||
];
|
||||
|
||||
const Step = Steps.Step;
|
||||
|
||||
const steps = [{
|
||||
title: 'First',
|
||||
content: 'First-content',
|
||||
}, {
|
||||
title: 'Second',
|
||||
content: 'Second-content',
|
||||
}, {
|
||||
title: 'Last',
|
||||
content: 'Last-content',
|
||||
}];
|
||||
|
||||
|
||||
class AddNewApp extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
current: 0,
|
||||
};
|
||||
}
|
||||
|
||||
next() {
|
||||
const current = this.state.current + 1;
|
||||
this.setState({current});
|
||||
}
|
||||
|
||||
prev() {
|
||||
const current = this.state.current - 1;
|
||||
this.setState({current});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { current } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="Add New App"
|
||||
breadcrumb={{routes}}
|
||||
>
|
||||
<div className="wrap">
|
||||
<div className="content">
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AddNewApp;
|
||||
@ -0,0 +1,203 @@
|
||||
import React from "react";
|
||||
import "antd/dist/antd.css";
|
||||
import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon} from "antd";
|
||||
import Highlighter from 'react-highlight-words';
|
||||
|
||||
const Paragraph = Typography;
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'Publisher',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'Dashboard',
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'Apps',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
const data = [{
|
||||
key: '1',
|
||||
icon: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
|
||||
name: 'John Brown',
|
||||
platform: 'android',
|
||||
type: 'Enterprise',
|
||||
status: 'published',
|
||||
version: '13.0.0.1',
|
||||
updated_at: '27-03-2019 08:27'
|
||||
},{
|
||||
key: '2',
|
||||
icon: 'http://aztechbeat.com/wp-content/uploads/2014/04/confide-app-icon.png',
|
||||
name: 'Lorem Ipsum',
|
||||
platform: 'ios',
|
||||
type: 'Enterprise',
|
||||
status: 'published',
|
||||
version: '2.3.1.2',
|
||||
updated_at: '27-03-2019 09:45'
|
||||
},{
|
||||
key: '3',
|
||||
icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx2Xx1-hnH16EGZHUlT06nOcfGODPoboA2TXKaBVtODto4lJtK',
|
||||
name: 'Lorem Ipsum',
|
||||
platform: 'ios',
|
||||
type: 'Enterprise',
|
||||
status: 'removed',
|
||||
version: '4.1.1.0',
|
||||
updated_at: '27-03-2019 09:46'
|
||||
}];
|
||||
|
||||
class Apps extends React.Component {
|
||||
routes;
|
||||
|
||||
|
||||
state = {
|
||||
searchText: '',
|
||||
};
|
||||
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.routes = props.routes;
|
||||
}
|
||||
|
||||
getColumnSearchProps = (dataIndex) => ({
|
||||
filterDropdown: ({
|
||||
setSelectedKeys, selectedKeys, confirm, clearFilters,
|
||||
}) => (
|
||||
<div style={{ padding: 8 }}>
|
||||
<Input
|
||||
ref={node => { this.searchInput = node; }}
|
||||
placeholder={`Search ${dataIndex}`}
|
||||
value={selectedKeys[0]}
|
||||
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
|
||||
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
|
||||
style={{ width: 188, marginBottom: 8, display: 'block' }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => this.handleSearch(selectedKeys, confirm)}
|
||||
icon="search"
|
||||
size="small"
|
||||
style={{ width: 90, marginRight: 8 }}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => this.handleReset(clearFilters)}
|
||||
size="small"
|
||||
style={{ width: 90 }}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
|
||||
onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
|
||||
onFilterDropdownVisibleChange: (visible) => {
|
||||
if (visible) {
|
||||
setTimeout(() => this.searchInput.select());
|
||||
}
|
||||
},
|
||||
render: (text) => (
|
||||
<Highlighter
|
||||
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
|
||||
searchWords={[this.state.searchText]}
|
||||
autoEscape
|
||||
textToHighlight={text.toString()}
|
||||
/>
|
||||
),
|
||||
})
|
||||
|
||||
handleSearch = (selectedKeys, confirm) => {
|
||||
confirm();
|
||||
this.setState({ searchText: selectedKeys[0] });
|
||||
}
|
||||
|
||||
handleReset = (clearFilters) => {
|
||||
clearFilters();
|
||||
this.setState({ searchText: '' });
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const columns = [{
|
||||
title: '',
|
||||
dataIndex: 'icon',
|
||||
key: 'icon',
|
||||
render: text => <Avatar size="large" src={text}/>,
|
||||
}, {
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: text => <a href="javascript:;">{text}</a>,
|
||||
...this.getColumnSearchProps('name'),
|
||||
}, {
|
||||
title: 'Platform',
|
||||
dataIndex: 'platform',
|
||||
key: 'platform',
|
||||
}, {
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
}, {
|
||||
title: 'Status',
|
||||
key: 'status',
|
||||
dataIndex: 'status',
|
||||
render: tag => {
|
||||
let color;
|
||||
switch (tag) {
|
||||
case 'published':
|
||||
color = 'green';
|
||||
break;
|
||||
case 'removed':
|
||||
color = 'red'
|
||||
break;
|
||||
case 'default':
|
||||
color = 'blue'
|
||||
}
|
||||
return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
|
||||
},
|
||||
}, {
|
||||
title: 'Published Version',
|
||||
dataIndex: 'version',
|
||||
key: 'version',
|
||||
}, {
|
||||
title: 'Last Updated',
|
||||
dataIndex: 'updated_at',
|
||||
key: 'updated_at',
|
||||
},{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: () => (
|
||||
<span>
|
||||
<a href="javascript:;">Edit</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="javascript:;">Manage</a>
|
||||
</span>
|
||||
),
|
||||
}];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
breadcrumb={{routes}}
|
||||
/>
|
||||
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
|
||||
<Card>
|
||||
<Table columns={columns} dataSource={data}/>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Apps;
|
||||
Loading…
Reference in new issue