Merge branch 'application-mgt-new' into 'application-mgt-new'

Publisher : Add new Apps page

See merge request entgra/carbon-device-mgt!59
merge-requests/61/head
Dharmakeerthi Lasantha 6 years ago
commit 0c5ce12eba

@ -13,6 +13,7 @@
"antd": "^3.15.0", "antd": "^3.15.0",
"react": "^16.8.4", "react": "^16.8.4",
"react-dom": "^16.8.4", "react-dom": "^16.8.4",
"react-highlight-words": "^0.16.0",
"react-router-config": "^5.0.0", "react-router-config": "^5.0.0",
"react-router-dom": "latest", "react-router-dom": "latest",
"react-scripts": "2.1.8" "react-scripts": "2.1.8"

@ -1,3 +1,23 @@
.App { .App {
padding: 20px; 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;
}

@ -1,10 +1,12 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import App from "./App" import App from "./App";
import Login from "./pages/Login" import Login from "./pages/Login";
import Dashboard from "./pages/dashboard/Dashboard" import Dashboard from "./pages/dashboard/Dashboard";
import Apps from "./pages/dashboard/apps/Apps";
import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
import './index.css';
@ -15,7 +17,17 @@ const routes = [
}, },
{ {
path: '/publisher/dashboard', path: '/publisher/dashboard',
component: Dashboard component: Dashboard,
routes: [
{
path: '/publisher/dashboard/apps',
component: Apps
},
{
path: '/publisher/dashboard/new-app',
component: AddNewApp
}
]
} }
] ]

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Layout, Menu, Breadcrumb, PageHeader } from 'antd'; import { Layout, Menu, Icon } from 'antd';
const { Header, Content, Footer } = Layout; const { Header, Content, Footer } = Layout;
@ -7,7 +7,7 @@ import styles from './Dashboard.less';
import Logo from "../../../public/images/logo.svg"; import Logo from "../../../public/images/logo.svg";
import Login from "../Login"; import Login from "../Login";
import {renderRoutes} from "react-router-config"; import {renderRoutes} from "react-router-config";
import {NavLink} from "react-router-dom"; import {Link, NavLink} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes" import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
@ -30,25 +30,16 @@ class Dashboard extends React.Component {
defaultSelectedKeys={['2']} defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }} style={{ lineHeight: '64px' }}
> >
<Menu.Item key="1">nav 1</Menu.Item> <Menu.Item key="1"><Link to="apps"><Icon type="appstore" />Apps</Link></Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item> <Menu.Item key="2"><Link to="apps"><Icon type="line-chart" />Apps</Link></Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item> <Menu.Item key="3"><Link to="new-app"><Icon type="upload" />Add New App</Link></Menu.Item>
</Menu> </Menu>
</Header> </Header>
<Content style={{ padding: '0 0' }}> <Content style={{ padding: '0 0' }}>
<Breadcrumb style={{ margin: '16px 50px' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<PageHeader
title="Title"
/>
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
{this.state.routes.map((route) => ( {this.state.routes.map((route) => (
<RouteWithSubRoutes key={route.path} {...route} /> <RouteWithSubRoutes key={route.path} {...route} />
))} ))}
</div>
</Content> </Content>
<Footer style={{ textAlign: 'center' }}> <Footer style={{ textAlign: 'center' }}>
©2019 entgra.io ©2019 entgra.io

@ -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…
Cancel
Save