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