Layout modifications.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 4a09b41434
commit f7d6bbd639

@ -21,7 +21,7 @@ import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import AuthHandler from "../../api/authHandler";
import ApplicationCreate from '../Application/Create/ApplicationCreate';
import {Button, Col, Input, Row,} from 'reactstrap';
import {Col, Container, Input, Row,} from 'reactstrap';
import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
/**
@ -48,7 +48,6 @@ class BaseLayout extends Component {
}
handleApplicationCreateClick(event) {
console.log("dsfds");
event.preventDefault();
event.stopPropagation();
this.setState({openModal: true});
@ -72,7 +71,7 @@ class BaseLayout extends Component {
render() {
return (
<div id="container">
<Container noGutters fluid id="container">
<div id="header-content">
<div id="header">
<span id="header-text">
@ -82,33 +81,33 @@ class BaseLayout extends Component {
<i className="fw fw-notification btn-header"></i>
<i className="fw fw-user btn-header"></i>
</div>
</div>
<div id="search-box">
<i className="fw fw-search search-icon">
</i>
<Input
id="search"
name="search"
placeholder={'Search for Applications'}
onChange={(event) => console.log(event.target.value)}
/>
<div id="search-box">
<i className="fw fw-search search-icon">
</i>
<Input
id="search"
name="search"
placeholder={'Search for Applications'}
onChange={(event) => console.log(event.target.value)}
/>
</div>
</div>
<div id="add-btn-container">
<FloatingButton className="add-btn small" onClick={this.handleApplicationCreateClick.bind(this)}/>
<FloatingButton
className="add-btn small"
onClick={this.handleApplicationCreateClick.bind(this)}
/>
</div>
</div>
<div id="application-content" style={this.state.style}>
<Row>
<Col>
{this.props.children}
</Col>
</Row>
</div>
<ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
</div>
</Container>
);
}
}

@ -18,148 +18,299 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import AuthHandler from "../../../../api/authHandler";
import PlatformMgtApi from "../../../../api/platformMgtApi";
import {FormGroup, Input, Label} from 'reactstrap';
import {Badge, FormGroup, Input, Label} from 'reactstrap';
/**
* The first step of the application creation wizard.
* This contains following components:
* * Application Title
* * Store Type
* * Application Platform
* The Second step of application create wizard.
* This contains following components.
* * App Title
* * Short Description
* * Application Description
* * Application Visibility
* * Application Tags : {Used Material UI Chip component}
* * Application Category.
* * Platform Specific properties.
*
* Parent Component: Create
* Props:
* 1. handleNext: {type: function, Invokes handleNext function of parent component}
* 2. setData : {type: function, Sets current form data to the state of the parent component}
* 3. removeData: {type: function, Invokes the removeStepData function click of parent}
* * handleNext : {type: function, Invokes handleNext function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent}
* */
class Step1 extends Component {
constructor() {
super();
this.setPlatforms = this.setPlatforms.bind(this);
this.setStepData = this.setStepData.bind(this);
this.cancel = this.cancel.bind(this);
this.platforms = [];
this.state = {
finished: false,
stepIndex: 0,
store: 1,
platformSelectedIndex: 0,
platform: "",
platforms: [],
stepData: [],
tags: [],
icon: [],
title: "",
titleError: ""
errors: {},
banner: [],
defValue: "",
category: 0,
visibility: 0,
description: "",
screenshots: [],
identifier: "",
shortDescription: ""
};
this.scriptId = "application-create-step1";
}
componentDidMount() {
//Get the list of available platforms and set to the state.
PlatformMgtApi.getPlatforms().then(response => {
console.log(response);
this.setPlatforms(response.data);
}).catch(err => {
AuthHandler.unauthorizedErrorHandler(err);
})
this.scriptId = "application-create-step2";
}
/**
* Extract the platforms from the response data and populate the state.
* @param platforms: The array returned as the response.
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
setPlatforms(platforms) {
let tmpPlatforms = [];
for (let index in platforms) {
let platform = {};
platform = platforms[index];
tmpPlatforms.push(platform);
addTags(event) {
let tags = this.state.tags;
if (event.charCode === 13) {
event.preventDefault();
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
this.setState({tags, defValue: ""}, console.log(tags));
}
this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name})
}
/**
* Persist the current form data to the state.
* Set the value for tag.
* */
setStepData() {
console.log("Platforms", this.state.platforms);
let step = {
store: this.state.store,
platform: this.state.platforms[this.state.platformSelectedIndex]
};
console.log(step);
this.props.setData("step1", {step: step});
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
cancel() {
/**
* Invokes the handleNext function in Create component.
* */
handleNext() {
let fields = [{name: "Title", value: this.state.title},
{name: "Short Description", value: this.state.shortDescription},
{name: "Description", value: this.state.description},
{name: "Banner", value: this.state.banner},
{name: "Screenshots", value: this.state.screenshots},
{name: "Identifier", value: this.state.identifier},
{name: "Icon", value: this.state.icon}];
this.validate(fields);
}
/**
* Invokes the handlePrev function in Create component.
* */
handlePrev() {
this.props.handlePrev();
}
/**
* Triggers when changing the Platform selection.
* Handles Chip delete function.
* Removes the tag from state.tags
* */
handleRequestDelete(event) {
this.chipData = this.state.tags;
console.log(event.target);
const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
this.chipData.splice(chipToDelete, 1);
this.setState({tags: this.chipData});
};
/**
* Validate the form.
* */
onChangePlatform(event) {
console.log(event.target.value, this.state.platforms);
let id = event.target.value;
let selectedPlatform = this.state.platforms.filter((platform) => {
return platform.identifier === id;
validate(fields) {
let errors = {};
let errorsPresent = false;
fields.forEach(function (field) {
switch (field.name) {
case 'Title': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Identifier': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Short Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Banner': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Icon': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Screenshots': {
if (field.value.length < 3) {
errors[field.name] = "3 " + field.name + " are required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
}
});
console.log(selectedPlatform);
this.setState({platform: selectedPlatform});
if (!errorsPresent) {
this.setStepData();
} else {
this.setState({errors: errors}, console.log(errors));
}
}
/**
* Creates an object with the current step data and persist in the parent.
* */
setStepData() {
let stepData = {};
this.props.setData("step2", {step: stepData});
};
/**
* Triggers when changing the Store selection.
* Set text field values to state.
* */
onChangeStore(event) {
console.log(event.target.value);
this.setState({store: event.target.value});
onTextFieldChange(event, value) {
let field = event.target.id;
switch (field) {
case "name": {
this.setState({name: value});
break;
}
case "shortDescription": {
this.setState({shortDescription: value});
break;
}
case "description": {
this.setState({description: value});
break;
}
case "identifier": {
this.setState({identifier: value});
break;
}
}
};
render() {
console.log(this.state.visibilityComponent);
return (
<div>
<FormGroup>
<Label for="store">Store Type</Label>
<Input
type="select"
name="store"
id="store"
className="input-custom"
onChange={this.onChangeStore.bind(this)}
>
<option>Enterprise</option>
<option>Public</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="store">Platform</Label>
<Input
type="select"
name="store"
id="store"
onChange={this.onChangePlatform.bind(this)}
>
{this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
return (
<option value={platform.identifier}>
{platform.name}
</option>
)
}) : <option>No Platforms</option>}
</Input>
</FormGroup>
<div className="createStep2Content">
<div>
<div>
<FormGroup>
<Label for="app-title">Title*</Label>
<Input
required
type="text"
name="appName"
id="app-title"
/>
</FormGroup>
<FormGroup>
<Label for="app-description">Description*</Label>
<Input
required
type="textarea"
name="appDescription"
id="app-description"
/>
</FormGroup>
<FormGroup>
<Label for="app-category">Category</Label>
<Input
type="select"
name="category"
id="app-category"
>
<option>Business</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-visibility">Visibility</Label>
<Input
type="select"
name="visibility"
id="app-visibility"
>
<option>Devices</option>
<option>Roles</option>
<option>Groups</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-tags">Tags*</Label>
<Input
required
type="text"
value={this.state.defValue}
name="app-tags"
id="app-tags"
onChange={this.handleTagChange.bind(this)}
onKeyPress={this.addTags.bind(this)}
/>
<div id="batch-content">
{this.state.tags.map(tag => {
return (
<Badge
style={{margin: '0 2px 0 2px'}}
value={tag.value}
onClick={this.handleRequestDelete.bind(this)}
>
{tag.value}
</Badge>
)
}
)}
</div>
</FormGroup>
</div>
</div>
</div>
);
}
}
Step1.propTypes = {
Step1.prototypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};

@ -18,299 +18,148 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {Badge, FormGroup, Input, Label} from 'reactstrap';
import AuthHandler from "../../../../api/authHandler";
import PlatformMgtApi from "../../../../api/platformMgtApi";
import {FormGroup, Input, Label} from 'reactstrap';
/**
* The Second step of application create wizard.
* This contains following components.
* * App Title
* * Short Description
* * Application Description
* * Application Visibility
* * Application Tags : {Used Material UI Chip component}
* * Application Category.
* * Platform Specific properties.
* The first step of the application creation wizard.
* This contains following components:
* * Application Title
* * Store Type
* * Application Platform
*
* Parent Component: Create
* Props:
* * handleNext : {type: function, Invokes handleNext function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent}
* 1. handleNext: {type: function, Invokes handleNext function of parent component}
* 2. setData : {type: function, Sets current form data to the state of the parent component}
* 3. removeData: {type: function, Invokes the removeStepData function click of parent}
* */
class Step2 extends Component {
constructor() {
super();
this.setPlatforms = this.setPlatforms.bind(this);
this.setStepData = this.setStepData.bind(this);
this.cancel = this.cancel.bind(this);
this.platforms = [];
this.state = {
tags: [],
icon: [],
finished: false,
stepIndex: 0,
store: 1,
platformSelectedIndex: 0,
platform: "",
platforms: [],
stepData: [],
title: "",
errors: {},
banner: [],
defValue: "",
category: 0,
visibility: 0,
description: "",
screenshots: [],
identifier: "",
shortDescription: ""
titleError: ""
};
this.scriptId = "application-create-step2";
this.scriptId = "application-create-step1";
}
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
addTags(event) {
let tags = this.state.tags;
if (event.charCode === 13) {
event.preventDefault();
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
this.setState({tags, defValue: ""}, console.log(tags));
}
componentDidMount() {
//Get the list of available platforms and set to the state.
PlatformMgtApi.getPlatforms().then(response => {
console.log(response);
this.setPlatforms(response.data);
}).catch(err => {
AuthHandler.unauthorizedErrorHandler(err);
})
}
/**
* Set the value for tag.
* Extract the platforms from the response data and populate the state.
* @param platforms: The array returned as the response.
* */
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
/**
* Invokes the handleNext function in Create component.
* */
handleNext() {
let fields = [{name: "Title", value: this.state.title},
{name: "Short Description", value: this.state.shortDescription},
{name: "Description", value: this.state.description},
{name: "Banner", value: this.state.banner},
{name: "Screenshots", value: this.state.screenshots},
{name: "Identifier", value: this.state.identifier},
{name: "Icon", value: this.state.icon}];
this.validate(fields);
setPlatforms(platforms) {
let tmpPlatforms = [];
for (let index in platforms) {
let platform = {};
platform = platforms[index];
tmpPlatforms.push(platform);
}
this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name})
}
/**
* Invokes the handlePrev function in Create component.
* Persist the current form data to the state.
* */
handlePrev() {
this.props.handlePrev();
setStepData() {
console.log("Platforms", this.state.platforms);
let step = {
store: this.state.store,
platform: this.state.platforms[this.state.platformSelectedIndex]
};
console.log(step);
this.props.setData("step1", {step: step});
}
/**
* Handles Chip delete function.
* Removes the tag from state.tags
* */
handleRequestDelete(event) {
this.chipData = this.state.tags;
console.log(event.target);
const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
this.chipData.splice(chipToDelete, 1);
this.setState({tags: this.chipData});
};
/**
* Validate the form.
* */
validate(fields) {
let errors = {};
let errorsPresent = false;
fields.forEach(function (field) {
switch (field.name) {
case 'Title': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Identifier': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Short Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Banner': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Icon': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Screenshots': {
if (field.value.length < 3) {
errors[field.name] = "3 " + field.name + " are required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
}
});
cancel() {
if (!errorsPresent) {
this.setStepData();
} else {
this.setState({errors: errors}, console.log(errors));
}
}
/**
* Creates an object with the current step data and persist in the parent.
* Triggers when changing the Platform selection.
* */
setStepData() {
let stepData = {};
onChangePlatform(event) {
console.log(event.target.value, this.state.platforms);
let id = event.target.value;
let selectedPlatform = this.state.platforms.filter((platform) => {
return platform.identifier === id;
});
console.log(selectedPlatform);
this.props.setData("step2", {step: stepData});
this.setState({platform: selectedPlatform});
};
/**
* Set text field values to state.
* Triggers when changing the Store selection.
* */
onTextFieldChange(event, value) {
let field = event.target.id;
switch (field) {
case "name": {
this.setState({name: value});
break;
}
case "shortDescription": {
this.setState({shortDescription: value});
break;
}
case "description": {
this.setState({description: value});
break;
}
case "identifier": {
this.setState({identifier: value});
break;
}
}
onChangeStore(event) {
console.log(event.target.value);
this.setState({store: event.target.value});
};
render() {
console.log(this.state.visibilityComponent);
return (
<div className="createStep2Content">
<div>
<div>
<FormGroup>
<Label for="app-title">Title*</Label>
<Input
required
type="text"
name="appName"
id="app-title"
/>
</FormGroup>
<FormGroup>
<Label for="app-description">Description*</Label>
<Input
required
type="textarea"
name="appDescription"
id="app-description"
/>
</FormGroup>
<FormGroup>
<Label for="app-category">Category</Label>
<Input
type="select"
name="category"
id="app-category"
>
<option>Business</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-visibility">Visibility</Label>
<Input
type="select"
name="visibility"
id="app-visibility"
>
<option>Devices</option>
<option>Roles</option>
<option>Groups</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-tags">Tags*</Label>
<Input
required
type="text"
value={this.state.defValue}
name="app-tags"
id="app-tags"
onChange={this.handleTagChange.bind(this)}
onKeyPress={this.addTags.bind(this)}
/>
<div id="batch-content">
{this.state.tags.map(tag => {
return (
<Badge
style={{margin: '0 2px 0 2px'}}
value={tag.value}
onClick={this.handleRequestDelete.bind(this)}
>
{tag.value}
</Badge>
)
}
)}
</div>
</FormGroup>
</div>
</div>
<div>
<FormGroup>
<Label for="store">Store Type</Label>
<Input
type="select"
name="store"
id="store"
className="input-custom"
onChange={this.onChangeStore.bind(this)}
>
<option>Enterprise</option>
<option>Public</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="store">Platform</Label>
<Input
type="select"
name="store"
id="store"
onChange={this.onChangePlatform.bind(this)}
>
{this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
return (
<option value={platform.identifier}>
{platform.name}
</option>
)
}) : <option>No Platforms</option>}
</Input>
</FormGroup>
</div>
);
}
}
Step2.prototypes = {
Step2.propTypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};

@ -25,7 +25,6 @@ import SelectField from 'material-ui/SelectField';
import {FormGroup, Label} from 'reactstrap';
import AppImage from "../../../UIComponents/AppImage/AppImage";
/**
* The Third step of application create wizard.
* This contains following components.

@ -19,7 +19,7 @@
import './baseLayout.css';
import {Col, Row} from "reactstrap";
import React, {Component} from 'react';
import GeneralInfo from "../GeneralInfo";
import GeneralInfo from "../GenenralInfo/GeneralInfo";
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
class ApplicationEdit extends Component {

@ -22,6 +22,7 @@
width: 100%;
margin: 0;
font-size: 20px;
border-bottom: solid 1px #d8d8d8;
}
.application-header-text {

@ -21,7 +21,7 @@
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 5%;
top: 8%;
right: 0%;
background-color: #ffffff;
overflow-x: hidden; /* Disable horizontal scroll */

@ -18,7 +18,7 @@
body {
width: 100%;
font-family: sans-serif;
font-family: Roboto sans-serif;
}
#userName {
@ -48,10 +48,11 @@ body {
#container {
background-color: #ffffff;
padding: 0;
}
#header-content {
height: 100px;
height: 125px;
width: 100%;
margin: 0 10px 0 0;
background-color: #3b33bd;
@ -61,6 +62,12 @@ body {
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#header {
margin: 16px 16px 20px 16px;
height: 100%;
position: relative;
}
#application-content {
height: auto;
width: 80%;
@ -69,24 +76,14 @@ body {
padding: 10px 10px 10px 10px;
}
.add-btn {
#add-btn-container {
position: absolute;
left:12%;
top: 35px;
}
.add-btn.div {
position: relative;
margin-top: 20px;
margin-left: 20px;
}
#fw-api:before {
content: '\e601';
left: 12%;
top: 100px;
}
.btn-header {
margin-top: 10px;
margin-top: 15px;
margin-right: 20px;
color: white;
}
@ -113,8 +110,9 @@ body {
color: #a8a8a8;
position: relative;
float: right;
top: 35px;
margin-right: 10px;
top: 75px;
left: 80px;
margin-right: 16px;
}
#search {
@ -175,7 +173,6 @@ body {
margin: 70px 40px 40px 150px;
}
.applicationCreateScreenshotDropZone {
width: 150px;
height: 150px;

@ -48,6 +48,10 @@ const config = {
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
use: [ 'style-loader', 'scss-loader' ]
},
{
test: /\.less$/,
use: [{

Loading…
Cancel
Save