forked from community/device-mgt-core
Publisher: View Releases See merge request entgra/carbon-device-mgt!84feature/appm-store/pbac
Dharmakeerthi Lasantha
6 years ago
commit
8926e7ffd8
@ -0,0 +1,85 @@
|
||||
import React from "react";
|
||||
import {Modal, Typography,List, Avatar} from 'antd';
|
||||
import {connect} from 'react-redux';
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
// connecting state.releaseView with the component
|
||||
const mapStateToProps = state => {
|
||||
return {releaseView: state.releaseView}
|
||||
};
|
||||
|
||||
const Text = Typography;
|
||||
|
||||
class ConnectedReleaseModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
visible: false,
|
||||
app: null
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps !== this.props) {
|
||||
this.setState({
|
||||
visible: nextProps.releaseView.visible,
|
||||
app: nextProps.releaseView.app
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
showModal = () => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
});
|
||||
};
|
||||
|
||||
handleOk = (e) => {
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = (e) => {
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.props.releaseView.app != null) {
|
||||
const app = this.props.releaseView.app;
|
||||
return (
|
||||
<div>
|
||||
<Modal
|
||||
title={app.name}
|
||||
visible={this.state.visible}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}
|
||||
>
|
||||
<p>Some contents...</p>
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={app.applicationReleases}
|
||||
renderItem={release => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={release.iconPath} />}
|
||||
title={<Link to={"/publisher/apps/releases/"+release.uuid}>{release.version}</Link>}
|
||||
description={release.description}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const ReleaseModal = connect(mapStateToProps, null)(ConnectedReleaseModal);
|
||||
|
||||
export default ReleaseModal;
|
||||
@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
import {Avatar, Row, Col, Typography} from "antd";
|
||||
|
||||
const {Title, Text} = Typography;
|
||||
|
||||
class ReleaseView extends React.Component {
|
||||
render() {
|
||||
const release = this.props.release;
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<Avatar size={128} shape="square"
|
||||
src={release.iconPath}/>
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<Title level={2}>App Name</Title>
|
||||
<Text>{release.version}</Text><br/>
|
||||
<Text type="secondary">{release.description}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<br/>
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<img style={{width:"100%"}} src={release.screenshotPath1}/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ReleaseView;
|
||||
@ -0,0 +1,17 @@
|
||||
import keyMirror from 'keymirror';
|
||||
|
||||
// export const LOGIN = "LOGIN";
|
||||
// export const GET_APPS = "GET_APPS";
|
||||
// export const OPEN_RELEASES_MODAL = "OPEN_RELEASES_MODAL";
|
||||
// export const CLOSE_RELEASES_MODAL = "CLOSE_RELEASES_MODAL";
|
||||
|
||||
const ActionTypes = keyMirror({
|
||||
LOGIN: null,
|
||||
GET_APPS: null,
|
||||
OPEN_RELEASES_MODAL: null,
|
||||
CLOSE_RELEASES_MODAL: null,
|
||||
GET_RELEASE: null
|
||||
|
||||
});
|
||||
|
||||
export default ActionTypes;
|
||||
@ -1,3 +0,0 @@
|
||||
export const LOGIN = "LOGIN";
|
||||
export const GET_APPS = "GET_APPS";
|
||||
|
||||
@ -1,17 +1,34 @@
|
||||
import {GET_APPS} from "../constants/action-types";
|
||||
import ActionTypes from "../constants/ActionTypes";
|
||||
|
||||
const initialState = {
|
||||
apps: []
|
||||
apps: [],
|
||||
releaseView: {
|
||||
visible: false,
|
||||
app: null
|
||||
},
|
||||
release: null
|
||||
};
|
||||
|
||||
function rootReducer(state = initialState, action) {
|
||||
if (action.type === GET_APPS) {
|
||||
console.log(11);
|
||||
if (action.type === ActionTypes.GET_APPS) {
|
||||
return Object.assign({}, state, {
|
||||
apps: action.payload
|
||||
});
|
||||
} else if (action.type === ActionTypes.OPEN_RELEASES_MODAL) {
|
||||
return Object.assign({}, state, {
|
||||
releaseView: {
|
||||
visible: true,
|
||||
app: action.payload.app
|
||||
}
|
||||
});
|
||||
}else if(action.type === ActionTypes.GET_RELEASE){
|
||||
return Object.assign({}, state, {
|
||||
release: action.payload
|
||||
});
|
||||
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
|
||||
export default rootReducer;
|
||||
@ -0,0 +1,80 @@
|
||||
import React from "react";
|
||||
import {PageHeader, Typography, Input, Button, Row, Col, Avatar, Card} from "antd";
|
||||
import {connect} from "react-redux";
|
||||
import ReleaseView from "../../../../components/apps/release/ReleaseView";
|
||||
import {getRelease} from "../../../../js/actions";
|
||||
|
||||
const Search = Input.Search;
|
||||
const {Title} = Typography;
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'Publisher',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'Dashboard',
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'Apps',
|
||||
},
|
||||
];
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {release: state.release}
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
getRelease: (uuid) => dispatch(getRelease(uuid))
|
||||
});
|
||||
|
||||
class ConnectedRelease extends React.Component {
|
||||
routes;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.routes = props.routes;
|
||||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {uuid} = this.props.match.params;
|
||||
this.props.getRelease(uuid);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const release = this.props.release;
|
||||
if (release == null) {
|
||||
return (
|
||||
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
|
||||
<Title level={3}>No Releases Found</Title>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
breadcrumb={{routes}}
|
||||
/>
|
||||
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
|
||||
<Row style={{padding: 10}}>
|
||||
<Col span={18}>
|
||||
<Card>
|
||||
<ReleaseView release={release}/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Release = connect(mapStateToProps,mapDispatchToProps)(ConnectedRelease);
|
||||
|
||||
export default Release;
|
||||
Loading…
Reference in new issue