forked from community/device-mgt-core
Create Detailed App view component in APPM publisher See merge request entgra/carbon-device-mgt!121feature/appm-store/pbac
Dharmakeerthi Lasantha
6 years ago
commit
0ef803c2c7
@ -0,0 +1,72 @@
|
|||||||
|
.d-rating .numeric-data{
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 20px 0 20px 0;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-rating .bar-containers{
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 20px 20px 20px 30px;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-rating .bar-containers .bar-container{
|
||||||
|
color: #737373;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 20px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-rating .bar-containers .bar-container .number{
|
||||||
|
font-size: 11px;
|
||||||
|
left: -16px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-rating .bar-containers .bar-container .bar{
|
||||||
|
transition: width .25s ease;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
opacity: .8;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-container .rate-5{
|
||||||
|
background: #57bb8a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-container .rate-4{
|
||||||
|
background: #9ace6a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-container .rate-3{
|
||||||
|
background: #ffcf02;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-container .rate-2{
|
||||||
|
background: #ff9f02;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-container .rate-1{
|
||||||
|
background: #ff6f31;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-rating .numeric-data .rate{
|
||||||
|
color: #333;
|
||||||
|
font-size: 64px;
|
||||||
|
font-weight: 100;
|
||||||
|
line-height: 64px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-rating .numeric-data .people-count{
|
||||||
|
padding-top: 6px;
|
||||||
|
}
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Row, Typography, Icon} from "antd";
|
||||||
|
import StarRatings from "react-star-ratings";
|
||||||
|
import "./DetailedRating.css";
|
||||||
|
import config from "../../../../public/conf/config.json";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const { Text } = Typography;
|
||||||
|
|
||||||
|
|
||||||
|
class DetailedRating extends React.Component{
|
||||||
|
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
this.state={
|
||||||
|
detailedRating: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getData(this.props.uuid);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(nextProps) {
|
||||||
|
if (nextProps !== this.props) {
|
||||||
|
this.getData(this.props.uuid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getData = (uuid)=>{
|
||||||
|
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating";
|
||||||
|
|
||||||
|
return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
let detailedRating = res.data.data;
|
||||||
|
this.setState({
|
||||||
|
detailedRating
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch(function (error) {
|
||||||
|
if (error.response.status === 401) {
|
||||||
|
window.location.href = 'https://localhost:9443/store/login';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const detailedRating = this.state.detailedRating;
|
||||||
|
|
||||||
|
console.log(detailedRating);
|
||||||
|
|
||||||
|
if(detailedRating ==null){
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalCount = detailedRating.noOfUsers;
|
||||||
|
const ratingVariety = detailedRating.ratingVariety;
|
||||||
|
|
||||||
|
const ratingArray = [];
|
||||||
|
|
||||||
|
for (let [key, value] of Object.entries(ratingVariety)) {
|
||||||
|
ratingArray.push(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const maximumRating = Math.max(...ratingArray);
|
||||||
|
|
||||||
|
const ratingBarPercentages = [0,0,0,0,0];
|
||||||
|
|
||||||
|
if(maximumRating>0){
|
||||||
|
for(let i = 0; i<5; i++){
|
||||||
|
ratingBarPercentages[i] = (ratingVariety[(i+1).toString()])/maximumRating*100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(ratingBarPercentages);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Row className="d-rating">
|
||||||
|
<div className="numeric-data">
|
||||||
|
<div className="rate">{detailedRating.ratingValue.toFixed(1)}</div>
|
||||||
|
<StarRatings
|
||||||
|
rating={detailedRating.ratingValue}
|
||||||
|
starRatedColor="#777"
|
||||||
|
starDimension = "16px"
|
||||||
|
starSpacing = "2px"
|
||||||
|
numberOfStars={5}
|
||||||
|
name='rating'
|
||||||
|
/>
|
||||||
|
<br/>
|
||||||
|
<Text type="secondary" className="people-count"><Icon type="team" /> {totalCount} total</Text>
|
||||||
|
</div>
|
||||||
|
<div className="bar-containers">
|
||||||
|
<div className="bar-container">
|
||||||
|
<span className="number">5</span>
|
||||||
|
<span className="bar rate-5" style={{width: ratingBarPercentages[4]+"%"}}> </span>
|
||||||
|
</div>
|
||||||
|
<div className="bar-container">
|
||||||
|
<span className="number">4</span>
|
||||||
|
<span className="bar rate-4" style={{width: ratingBarPercentages[3]+"%"}}> </span>
|
||||||
|
</div>
|
||||||
|
<div className="bar-container">
|
||||||
|
<span className="number">3</span>
|
||||||
|
<span className="bar rate-3" style={{width: ratingBarPercentages[2]+"%"}}> </span>
|
||||||
|
</div>
|
||||||
|
<div className="bar-container">
|
||||||
|
<span className="number">2</span>
|
||||||
|
<span className="bar rate-2" style={{width: ratingBarPercentages[1]+"%"}}> </span>
|
||||||
|
</div>
|
||||||
|
<div className="bar-container">
|
||||||
|
<span className="number">1</span>
|
||||||
|
<span className="bar rate-1" style={{width: ratingBarPercentages[0]+"%"}}> </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default DetailedRating;
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Drawer, Row, Col, Typography, Divider, Tag, Avatar, List} from 'antd';
|
||||||
|
import "../../../App.css";
|
||||||
|
import DetailedRating from "../detailed-rating/DetailedRating";
|
||||||
|
|
||||||
|
const {Text, Title, Paragraph} = Typography;
|
||||||
|
|
||||||
|
class AppDetailsDrawer extends React.Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {app, visible, onClose} = this.props;
|
||||||
|
if (app == null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
console.log(app);
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
placement="right"
|
||||||
|
width={640}
|
||||||
|
closable={false}
|
||||||
|
onClose={onClose}
|
||||||
|
visible={visible}
|
||||||
|
>
|
||||||
|
<div style={{textAlign: "center"}}>
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
marginBottom: 10,
|
||||||
|
width: 100,
|
||||||
|
borderRadius: "28%",
|
||||||
|
border: "1px solid #ddd"
|
||||||
|
}}
|
||||||
|
src={app.applicationReleases[0].iconPath}
|
||||||
|
/>
|
||||||
|
<Title level={2}>{app.name}</Title>
|
||||||
|
</div>
|
||||||
|
<Divider/>
|
||||||
|
<Paragraph type="secondary" ellipsis={{rows: 3, expandable: true}}>{app.description}</Paragraph>
|
||||||
|
<Divider dashed={true}/>
|
||||||
|
<Text strong={true}>Categories</Text>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<span>
|
||||||
|
{app.appCategories.map(category => {
|
||||||
|
return (
|
||||||
|
<Tag color="blue" key={category} style={{paddingBottom: 5}}>
|
||||||
|
{category}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<Divider dashed={true}/>
|
||||||
|
<Text strong={true}>Tags</Text>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<span>
|
||||||
|
{app.tags.map(category => {
|
||||||
|
return (
|
||||||
|
<Tag color="gold" key={category} style={{paddingBottom: 5}}>
|
||||||
|
{category}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
<Divider dashed={true}/>
|
||||||
|
<Text strong={true}>Releases</Text>
|
||||||
|
<br/>
|
||||||
|
<List
|
||||||
|
itemLayout="horizontal"
|
||||||
|
dataSource={app.applicationReleases}
|
||||||
|
renderItem={release => (
|
||||||
|
<List.Item>
|
||||||
|
<List.Item.Meta
|
||||||
|
title={<a href={"apps/releases/"+release.uuid}>{release.version}</a>}
|
||||||
|
description={
|
||||||
|
<div>
|
||||||
|
Status : <Tag>{release.currentStatus}</Tag> Release Type <Tag color="green">{release.releaseType}</Tag>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Divider dashed={true}/>
|
||||||
|
|
||||||
|
<DetailedRating uuid={app.applicationReleases[0].uuid}/>
|
||||||
|
</Drawer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppDetailsDrawer;
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd";
|
||||||
|
import {connect} from "react-redux";
|
||||||
|
import {getApps} from "../../../js/actions";
|
||||||
|
import axios from "axios";
|
||||||
|
import config from "../../../../public/conf/config.json";
|
||||||
|
|
||||||
|
const {Title} = Typography;
|
||||||
|
|
||||||
|
// connecting state.apps with the component
|
||||||
|
const mapStateToProps = state => {
|
||||||
|
return {apps: state.apps}
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '',
|
||||||
|
dataIndex: 'name',
|
||||||
|
render: (name, row) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Avatar shape="square" size="large"
|
||||||
|
style={{
|
||||||
|
marginRight: 20,
|
||||||
|
borderRadius: "28%",
|
||||||
|
border: "1px solid #ddd"
|
||||||
|
}}
|
||||||
|
src={row.applicationReleases[0].iconPath}
|
||||||
|
/>
|
||||||
|
{name}
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Categories',
|
||||||
|
dataIndex: 'appCategories',
|
||||||
|
render: appCategories => (
|
||||||
|
<span>
|
||||||
|
{appCategories.map(category => {
|
||||||
|
return (
|
||||||
|
<Tag color="blue" key={category}>
|
||||||
|
{category}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Platform',
|
||||||
|
dataIndex: 'deviceType',
|
||||||
|
render: platform => {
|
||||||
|
const defaultPlatformIcons = config.defaultPlatformIcons;
|
||||||
|
let icon = defaultPlatformIcons.default.icon;
|
||||||
|
let color = defaultPlatformIcons.default.color;
|
||||||
|
if (defaultPlatformIcons.hasOwnProperty(platform)) {
|
||||||
|
icon = defaultPlatformIcons[platform].icon;
|
||||||
|
color = defaultPlatformIcons[platform].color;
|
||||||
|
}
|
||||||
|
return (<span style={{fontSize: 20, color: color, textAlign: "center"}}><Icon type={icon}
|
||||||
|
theme="filled"/></span>)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Type',
|
||||||
|
dataIndex: 'type'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Subscription',
|
||||||
|
dataIndex: 'subType'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
class ConnectedAppsTable extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
pagination: {
|
||||||
|
total: 100
|
||||||
|
},
|
||||||
|
apps: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.fetch();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleTableChange = (pagination, filters, sorter) => {
|
||||||
|
const pager = {...this.state.pagination};
|
||||||
|
pager.current = pagination.current;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
pagination: pager,
|
||||||
|
});
|
||||||
|
this.fetch({
|
||||||
|
results: pagination.pageSize,
|
||||||
|
page: pagination.current,
|
||||||
|
sortField: sorter.field,
|
||||||
|
sortOrder: sorter.order,
|
||||||
|
...filters,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
fetch = (params = {}) => {
|
||||||
|
this.setState({loading: true});
|
||||||
|
|
||||||
|
const extraParams = {
|
||||||
|
offset: 10 * (params.page - 1),
|
||||||
|
limit: 10
|
||||||
|
};
|
||||||
|
// note: encode with '%26' not '&'
|
||||||
|
const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('%26');
|
||||||
|
const parameters = {
|
||||||
|
method: "post",
|
||||||
|
'content-type': "application/json",
|
||||||
|
payload: JSON.stringify({}),
|
||||||
|
'api-endpoint': "/application-mgt-publisher/v1.0/applications?" + encodedExtraParams
|
||||||
|
};
|
||||||
|
|
||||||
|
const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
|
||||||
|
console.log(request);
|
||||||
|
axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
let apps = [];
|
||||||
|
|
||||||
|
if (res.data.data.hasOwnProperty("applications")) {
|
||||||
|
apps = res.data.data.applications;
|
||||||
|
}
|
||||||
|
const pagination = {...this.state.pagination};
|
||||||
|
// Read total count from server
|
||||||
|
// pagination.total = data.totalCount;
|
||||||
|
pagination.total = 200;
|
||||||
|
this.setState({
|
||||||
|
loading: false,
|
||||||
|
apps: apps,
|
||||||
|
pagination,
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.response.status === 401) {
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = 'https://localhost:9443/publisher/login';
|
||||||
|
} else {
|
||||||
|
message.error('Something went wrong... :(');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({loading: false});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
console.log("rendered");
|
||||||
|
return (
|
||||||
|
|
||||||
|
<Table
|
||||||
|
rowKey={record => record.id}
|
||||||
|
dataSource={this.state.apps}
|
||||||
|
columns={columns}
|
||||||
|
pagination={this.state.pagination}
|
||||||
|
onChange={this.handleTableChange}
|
||||||
|
onRow={(record, rowIndex) => {
|
||||||
|
return {
|
||||||
|
onClick: event => {
|
||||||
|
this.props.showDrawer(record);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const AppsTable = connect(mapStateToProps, {getApps})(ConnectedAppsTable);
|
||||||
|
|
||||||
|
export default AppsTable;
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button} from "antd";
|
||||||
|
|
||||||
|
const {Option} = Select;
|
||||||
|
const {Title, Text} = Typography;
|
||||||
|
|
||||||
|
class Filters extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<Row>
|
||||||
|
<Col span={6}>
|
||||||
|
<Title level={4}>Filter</Title>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider/>
|
||||||
|
|
||||||
|
<Text strong={true}>Category</Text>
|
||||||
|
<br/><br/>
|
||||||
|
<Select
|
||||||
|
mode="multiple"
|
||||||
|
style={{width: '100%'}}
|
||||||
|
placeholder="All Categories"
|
||||||
|
>
|
||||||
|
<Option key={1}>IoT</Option>
|
||||||
|
<Option key={2}>EMM</Option>
|
||||||
|
</Select>
|
||||||
|
<Divider/>
|
||||||
|
|
||||||
|
<Text strong={true}>Platform</Text>
|
||||||
|
<br/><br/>
|
||||||
|
<Checkbox>Android</Checkbox><br/>
|
||||||
|
<Checkbox>iOS</Checkbox><br/>
|
||||||
|
<Checkbox>Windows</Checkbox><br/>
|
||||||
|
<Checkbox>Default</Checkbox><br/>
|
||||||
|
<Divider/>
|
||||||
|
|
||||||
|
<Text strong={true}>Tags</Text>
|
||||||
|
<br/><br/>
|
||||||
|
<Select
|
||||||
|
mode="multiple"
|
||||||
|
style={{width: '100%'}}
|
||||||
|
placeholder="All Tags"
|
||||||
|
>
|
||||||
|
<Option key={1}>test tag</Option>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Divider/>
|
||||||
|
<Text strong={true}>Type</Text>
|
||||||
|
<br/><br/>
|
||||||
|
<Checkbox>Enterprise</Checkbox><br/>
|
||||||
|
<Checkbox>Public</Checkbox><br/>
|
||||||
|
<Checkbox>Web APP</Checkbox><br/>
|
||||||
|
<Checkbox>Web Clip</Checkbox><br/>
|
||||||
|
<Divider/>
|
||||||
|
|
||||||
|
<Text strong={true}>Subscription</Text>
|
||||||
|
<br/><br/>
|
||||||
|
<Checkbox>Free</Checkbox><br/>
|
||||||
|
<Checkbox>Paid</Checkbox><br/>
|
||||||
|
<Divider/>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default Filters;
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button} from "antd";
|
||||||
|
import {connect} from "react-redux";
|
||||||
|
import {getApps} from "../../../js/actions";
|
||||||
|
import AppsTable from "./AppsTable";
|
||||||
|
import Filters from "./Filters";
|
||||||
|
import AppDetailsDrawer from "./AppDetailsDrawer";
|
||||||
|
|
||||||
|
const {Option} = Select;
|
||||||
|
const {Title, Text} = Typography;
|
||||||
|
const Search = Input.Search;
|
||||||
|
// connecting state.apps with the component
|
||||||
|
const mapStateToProps = state => {
|
||||||
|
return {apps: state.apps}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
class ConnectedListApps extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
isDrawerVisible: false,
|
||||||
|
selectedApp: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//handler to show app drawer
|
||||||
|
showDrawer = (app) => {
|
||||||
|
console.log(app);
|
||||||
|
this.setState({
|
||||||
|
isDrawerVisible: true,
|
||||||
|
selectedApp: app
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// handler to close the app drawer
|
||||||
|
closeDrawer = () => {
|
||||||
|
this.setState({
|
||||||
|
isDrawerVisible: false
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {isDrawerVisible} = this.state;
|
||||||
|
return (
|
||||||
|
<Row gutter={28}>
|
||||||
|
<Col md={6}>
|
||||||
|
<Filters/>
|
||||||
|
</Col>
|
||||||
|
<Col md={18}>
|
||||||
|
<Card>
|
||||||
|
<Row>
|
||||||
|
<Col span={6}>
|
||||||
|
<Title level={4}>Apps</Title>
|
||||||
|
</Col>
|
||||||
|
<Col span={18} style={{textAlign: "right"}}>
|
||||||
|
<Search
|
||||||
|
placeholder="input search text"
|
||||||
|
onSearch={value => console.log(value)}
|
||||||
|
style={{width: 200}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider dashed={true}/>
|
||||||
|
<AppsTable showDrawer={this.showDrawer} />
|
||||||
|
<AppDetailsDrawer visible={isDrawerVisible} onClose={this.closeDrawer} app={this.state.selectedApp}/>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ListApps = connect(mapStateToProps, {getApps})(ConnectedListApps);
|
||||||
|
|
||||||
|
export default ListApps;
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import React from "react";
|
||||||
|
import "antd/dist/antd.css";
|
||||||
|
import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
|
||||||
|
import AppList from "../../../components/apps/AppList";
|
||||||
|
import ReleaseModal from "../../../components/apps/ReleaseModal";
|
||||||
|
|
||||||
|
const Search = Input.Search;
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: 'index',
|
||||||
|
breadcrumbName: 'Publisher',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'first',
|
||||||
|
breadcrumbName: 'Dashboard',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'second',
|
||||||
|
breadcrumbName: 'Apps',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
class Apps extends React.Component {
|
||||||
|
routes;
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.routes = props.routes;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PageHeader
|
||||||
|
breadcrumb={{routes}}
|
||||||
|
/>
|
||||||
|
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
|
||||||
|
<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>
|
||||||
|
<ReleaseModal/>
|
||||||
|
<AppList/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Apps;
|
||||||
Loading…
Reference in new issue