mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Created Application View Component with styles.
This commit is contained in:
Menaka Jayawardena
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…
Reference in New Issue
Block a user