Created Application View Component with styles.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 5ba211191f
commit 8ee0bd0404

@ -21,9 +21,9 @@ import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import AuthHandler from "../../api/authHandler";
import ApplicationMgtApi from '../../api/applicationMgtApi';
import {Table} from 'reactstrap';
import {Button, Table} from 'reactstrap';
import Drawer from '../UIComponents/Drawer/Drawer';
import ApplicationEdit from './Edit/Base/ApplicationEditBaseLayout';
import ApplicationView from './View/ApplicationView';
/**
* The App Create Component.
@ -139,7 +139,6 @@ class ApplicationListing extends Component {
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
// this.setState({data: this.data});
}
@ -207,12 +206,12 @@ class ApplicationListing extends Component {
onRowClick() {
console.log("sfsdfsdf");
let style = {
width: '250px',
marginLeft: '250px'
width: '500px',
marginLeft: '500px'
};
let appListStyle = {
marginRight: '250px',
marginRight: '500px',
}
this.setState({drawer: style, appListStyle: appListStyle});
@ -228,59 +227,57 @@ class ApplicationListing extends Component {
// this.props.history.push("apps/" + id);
}
handleButtonClick(id) {
console.log("Application Listing", id);
this.props.history.push("apps/" + id);
handleButtonClick() {
console.log("Application Listing");
this.props.history.push("apps/edit/fdsfdsf343");
}
render() {
return (
<div id="application-list" style={this.state.appListStyle}>
{/*<Table striped hover>*/}
{/*<thead>*/}
{/*<tr>*/}
{/*<th></th>*/}
{/*/!* TODO: Remove console.log and add sort method. *!/*/}
{/*<th onClick={() => {console.log("sort")}}>Application Name</th>*/}
{/*<th>Category</th>*/}
{/*<th>Platform</th>*/}
{/*<th>Status</th>*/}
{/*<th></th>*/}
{/*</tr>*/}
{/*</thead>*/}
{/*<tbody>*/}
{/*{this.applications.map(*/}
{/*(application) => {*/}
{/*return (*/}
{/*<tr key={application.id} onClick={this.onRowClick}>*/}
{/*<td>*/}
{/*/!* TODO: Move this styles to css. *!/*/}
{/*<img*/}
{/*src={application.icon}*/}
{/*height='50px'*/}
{/*width='50px'*/}
{/*style={{border: 'solid 1px black', borderRadius: "100%"}}*/}
{/*/></td>*/}
{/*<td>{application.applicationName}</td>*/}
{/*<td>{application.category}</td>*/}
{/*<td>{application.platform}</td>*/}
{/*<td>{application.status}</td>*/}
{/*<td><i>Edit</i></td>*/}
{/*</tr>*/}
{/*)*/}
{/*}*/}
{/*)}*/}
{/*</tbody>*/}
{/*</Table>*/}
<Table striped hover>
<thead>
<tr>
<th></th>
{/* TODO: Remove console.log and add sort method. */}
<th onClick={() => {console.log("sort")}}>Application Name</th>
<th>Category</th>
<th>Platform</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{this.applications.map(
(application) => {
return (
<tr key={application.id} onClick={this.onRowClick}>
<td>
{/* TODO: Move this styles to css. */}
<img
src={application.icon}
height='50px'
width='50px'
style={{border: 'solid 1px black', borderRadius: "100%"}}
/></td>
<td>{application.applicationName}</td>
<td>{application.category}</td>
<td>{application.platform}</td>
<td>{application.status}</td>
<td><Button onClick={this.handleButtonClick}>Edit</Button></td>
</tr>
)
}
)}
</tbody>
</Table>
<ApplicationEdit/>
{/*<ApplicationEdit/>*/}
<Drawer style={this.state.drawer}>
<div id="application-view">
</div>
<ApplicationView/>
</Drawer>
</div>
);

@ -1,71 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import IconButton from 'material-ui/IconButton'
import Create from 'material-ui/svg-icons/content/create';
/**
* Application view component.
* Shows the details of the application.
* */
class ApplicationView extends Component{
constructor() {
super();
this.state = {
application: {}
}
}
componentWillReceiveProps(props, nextProps) {
this.setState({application: props.application});
console.log(props.application, nextProps)
}
componentDidMount() {
//Download image artifacts.
// this.setState({application: this.props.application});
}
handleEdit() {
this.props.history.push("/assets/apps/edit/" + this.state.application.uuid);
}
render() {
const platform = this.state.application;
console.log(platform);
return (
<div>
<label>Application Name : {this.state.application.name}</label>
<br/>
<label>Description: {this.state.application.description}</label>
<br/>
<IconButton onClick={this.handleEdit.bind(this)}>
<Create/>
</IconButton>
</div>
);
}
}
export default withRouter(ApplicationView);

@ -16,11 +16,11 @@
* under the License.
*/
import React, {Component} from 'react';
import './baseLayout.css';
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
import {Col, Row} from "reactstrap";
import React, {Component} from 'react';
import GeneralInfo from "../GeneralInfo";
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
class ApplicationEdit extends Component {

@ -0,0 +1,124 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import {Col, Row} from "reactstrap";
import './applicationView.css';
/**
* Application view component.
* Shows the details of the application.
* */
class ApplicationView extends Component {
constructor() {
super();
this.state = {
application: {}
}
}
componentWillReceiveProps(props, nextProps) {
this.setState({application: props.application});
console.log(props.application, nextProps)
}
componentDidMount() {
//Download image artifacts.
// this.setState({application: this.props.application});
}
handleEdit() {
this.props.history.push("/assets/apps/edit/" + this.state.application.uuid);
}
render() {
const platform = this.state.application;
console.log(platform);
return (
<div id="application-view-content">
<div id="application-view-row">
<Row>
<Col>
<div id="app-icon">
</div>
</Col>
<Col>
<Row>
<span><strong>Facebook</strong></span>
</Row>
<Row>
<span className="app-updated-date">Last updated on 2017-09-23</span>
</Row>
</Col>
</Row>
</div>
<div id="application-view-row">
<Row>
<Col>
<span className="app-install-count">2k Installs</span>
</Col>
</Row>
<Row>
<Col>Rating</Col>
<Col>View in Store</Col>
</Row>
</div>
<hr/>
<div id="application-view-row">
<Row>
<Col>
<span><strong>Description: </strong></span>
</Col>
<Col>
<p>sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j</p>
</Col>
</Row>
<Row>
<Col>
<span><strong>Tags: </strong></span>
</Col>
<Col>
<p>[list of tags...]</p>
</Col>
</Row>
<Row>
<Col>
<span><strong>Release: </strong></span>
</Col>
<Col>
<p>Production</p>
</Col>
</Row>
<Row>
<Col>
<span><strong>Version: </strong></span>
</Col>
<Col>
<p>v1.0</p>
</Col>
</Row>
</div>
</div>
);
}
}
export default withRouter(ApplicationView);

@ -0,0 +1,56 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
#application-view-content {
width: 100%;
}
#application-view-row {
margin: 10px 10px 20px 20px;
}
#app-icon {
height: 100px;
width: 100px;
border: solid 1px black;
border-radius: 50%;
}
.app-updated-date {
color: #888888;
font-style: italic;
}
.app-install-count {
font-style: italic;
}
.app-details-tbl {
outline: none;
border-color: #2196F3;
}
.app-details-tbl tr {
margin: 20px 0 0 0;
}
.app-details-tbl td {
margin-left: 10px;
max-width: 400px;
}

@ -20,14 +20,15 @@ import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './drawer.css';
/**
* Custom React component for Application View.
* */
class Drawer extends Component {
render() {
return (
<div>
<div id="mySidenav" className="sidenav" style={this.props.style}>
<div id="app-view" className="app-view-drawer" style={this.props.style}>
{this.props.children}
</div>
</div>

@ -16,21 +16,22 @@
* under the License.
*/
.sidenav {
.app-view-drawer {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 11%;
top: 10%;
right: 0%;
background-color: white;
background-color: #b5b5b5;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
border: solid 1px black;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.sidenav a {
.app-view-drawer a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
@ -39,13 +40,9 @@
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
.app-view-drawer .closebtn {
position: absolute;
top: 0;
right: 25px;

@ -114,6 +114,7 @@ body {
#application-list {
margin-top: 20px;
transition: margin-right .5s;
}
.applicationCreateBannerDropZone {

Loading…
Cancel
Save