forked from community/device-mgt-core
parent
ff7158bf00
commit
3a3de0ff00
@ -1,60 +0,0 @@
|
|||||||
import {
|
|
||||||
Skeleton, Switch, Card, Icon, Avatar, Typography
|
|
||||||
} from 'antd';
|
|
||||||
import React from "react";
|
|
||||||
import config from "../../../public/conf/config.json";
|
|
||||||
import {openReleasesModal} from "../../js/actions";
|
|
||||||
import {connect} from "react-redux";
|
|
||||||
|
|
||||||
const { Meta } = Card;
|
|
||||||
const { Text } = Typography;
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
|
||||||
openReleasesModal: (app) => dispatch(openReleasesModal(app))
|
|
||||||
});
|
|
||||||
|
|
||||||
class ConnectedAppCard extends React.Component {
|
|
||||||
|
|
||||||
constructor(props){
|
|
||||||
super(props);
|
|
||||||
this.handleReleasesClick = this.handleReleasesClick.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleReleasesClick(){
|
|
||||||
this.props.openReleasesModal(this.props.app);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const defaultPlatformIcons = config.defaultPlatformIcons;
|
|
||||||
let icon = defaultPlatformIcons.default;
|
|
||||||
if(defaultPlatformIcons.hasOwnProperty(this.props.platform)){
|
|
||||||
icon = defaultPlatformIcons[this.props.platform];
|
|
||||||
}
|
|
||||||
let descriptionText = this.props.description;
|
|
||||||
if(descriptionText.length>50){
|
|
||||||
descriptionText = descriptionText.substring(0,50)+"...";
|
|
||||||
}
|
|
||||||
const description = (
|
|
||||||
<div>
|
|
||||||
<p>{descriptionText}</p>
|
|
||||||
<Text code>{this.props.type}</Text>
|
|
||||||
<Text> {this.props.subType}</Text>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card style={{marginTop: 16 }} actions={[<Icon type="edit" />, <Icon type="delete" />, <Icon type="appstore" theme="twoTone" onClick={this.handleReleasesClick} />]}>
|
|
||||||
<Meta
|
|
||||||
avatar={<Avatar src={icon} />}
|
|
||||||
title={this.props.name}
|
|
||||||
description={description}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const AppCard = connect(null,mapDispatchToProps)(ConnectedAppCard);
|
|
||||||
|
|
||||||
export default AppCard;
|
|
@ -1,42 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import AppCard from "./AppCard";
|
|
||||||
import {Col, Row} from "antd";
|
|
||||||
import {connect} from "react-redux";
|
|
||||||
import {getApps} from "../../js/actions";
|
|
||||||
|
|
||||||
// connecting state.apps with the component
|
|
||||||
const mapStateToProps= state => {
|
|
||||||
return {apps : state.apps}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
class ConnectedAppList extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
componentDidMount() {
|
|
||||||
this.props.getApps();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Row gutter={16}>
|
|
||||||
{this.props.apps.map(app => (
|
|
||||||
<Col key={app.id} xs={24} sm={12} md={6} lg={6}>
|
|
||||||
<AppCard key={app.id}
|
|
||||||
app = {app}
|
|
||||||
name={app.name}
|
|
||||||
platform={app.deviceType}
|
|
||||||
type={app.type}
|
|
||||||
subType={app.subType}
|
|
||||||
description={app.description}/>
|
|
||||||
</Col>
|
|
||||||
))}
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
|
|
||||||
|
|
||||||
export default AppList;
|
|
@ -1,60 +0,0 @@
|
|||||||
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