community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added form validations for application create.

Browse Source
This commit is contained in:
Menaka Jayawardena 2017-10-03 16:56:43 +05:30
parent 7fa3c886fb
commit 34ff40ef21
6 changed files with 150 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
View File

@ -211,6 +211,10 @@ body {
height: 300px;
}
#form-error {
color: red;
}
.application-create-banner-dropzone {
width: 300px;
height: 150px;

38
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/validator.js Normal file
View File

@ -0,0 +1,38 @@
/*
* 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.
*/
'use strict';
/**
* This Utility class will contain basic methods for form validation.
* */
export const validateURL = (value) => {
};
export const validateNull = (value) => {
return !value;
};
export const validateEmpty = (array) => {
return array.length > 0;
};
export const validateEmptyObject = (object) => {
return Object.keys(object).length > 0;
};

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
View File

@ -126,7 +126,7 @@ class ApplicationCreate extends Component {
* @param data: The form data of the step.
* */
setStepData(step, data) {
console.log(step, data, this.state.stepData); //TODO: Remove this
console.log(step, data, this.state); //TODO: Remove this
switch (step) {
case "generalInfo": {
this.setState({generalInfo: data}, this.onNextClick());

49
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
View File

@ -18,9 +18,9 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {Badge, FormGroup, Input, Label} from 'reactstrap';
import {FormattedMessage} from 'react-intl';
import {Badge, Button, Form, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
import {Badge, Button, Form, FormFeedback, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
import * as validator from '../../../../common/validator';
/**
* The Second step of application create wizard.
@ -49,6 +49,7 @@ class Step1 extends Component {
this.onVisibilityChange = this.onVisibilityChange.bind(this);
this.onVisibilityItemSelect = this.onVisibilityItemSelect.bind(this);
this.handleRequestDelete = this.handleRequestDelete.bind(this);
this.validate = this.validate.bind(this);
this.state = {
tags: [],
name: "",
@ -114,19 +115,49 @@ class Step1 extends Component {
tags: tags,
visibility: visibility
};
let {errorCount, errors} = this.validate();
if (errorCount !== 0) {
this.setState({errors: errors});
} else {
this.props.setStepData("generalInfo", stepData);
}
};
onCancelClick() {
this.props.close();
}
/**
* Validate the form fields.
* */
validate() {
const {name, description, tags} = this.state;
let errorCount = 0;
let errors = {};
if (validator.validateNull(name)) {
errorCount++;
errors.name = "Application Title is Required!";
}
if (validator.validateNull(description)) {
errorCount++;
errors.description = "Description is Required!"
}
if (!validator.validateEmpty(tags)) {
errorCount++;
errors.tags = "You need to enter at least one tag!"
}
return {errorCount, errors};
}
/**
* Set text field values to state.
* */
onTextFieldChange(event) {
let field = event.target.name;
console.log(field, event.target.value);
switch (field) {
case "appName": {
this.setState({name: event.target.value});
@ -192,7 +223,7 @@ class Step1 extends Component {
};
return (
<div className="createStep2Content">
<div>
<div>
<div>
<FormGroup>
@ -207,6 +238,7 @@ class Step1 extends Component {
value={this.state.name}
onChange={this.onTextFieldChange}
/>
<FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
</FormGroup>
<FormGroup>
<Label for="app-description">
@ -220,6 +252,7 @@ class Step1 extends Component {
value={this.state.description}
onChange={this.onTextFieldChange}
/>
<FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
</FormGroup>
<FormGroup>
<Label for="app-category">
@ -244,7 +277,8 @@ class Step1 extends Component {
<option id="app-visibility-default" disabled selected>Select the App Visibility
Option.
</option>
<option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/></option>
<option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/>
</option>
<option key={2}><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
<option key={3}><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
</Input>
@ -263,6 +297,7 @@ class Step1 extends Component {
onChange={this.handleTagChange.bind(this)}
onKeyPress={this.addTags.bind(this)}
/>
<div id="batch-content">
{this.state.tags.map(tag => {
return (
@ -278,6 +313,7 @@ class Step1 extends Component {
}
)}
</div>
<FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
</FormGroup>
</div>
</div>
@ -293,8 +329,7 @@ class Step1 extends Component {
Step1.prototypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
setData: PropTypes.func
};
export default Step1;

28
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
View File

@ -20,8 +20,9 @@ import PropTypes from 'prop-types';
import React, {Component} from 'react';
import AuthHandler from "../../../../api/authHandler";
import PlatformMgtApi from "../../../../api/platformMgtApi";
import {Button, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
import {Button, FormFeedback, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
import {FormattedMessage} from 'react-intl';
import * as validator from '../../../../common/validator';
/**
* The first step of the application creation wizard.
@ -43,11 +44,13 @@ class Step2 extends Component {
this.setStepData = this.setStepData.bind(this);
this.onCancelClick = this.onCancelClick.bind(this);
this.onBackClick = this.onBackClick.bind(this);
this.validate = this.validate.bind(this);
this.platforms = [];
this.state = {
errors: {},
store: 1,
platformSelectedIndex: 0,
platform: "",
platform: {},
platforms: []
};
}
@ -80,7 +83,7 @@ class Step2 extends Component {
platform = platforms[index];
tmpPlatforms.push(platform);
}
this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name})
this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0})
}
/**
@ -92,8 +95,15 @@ class Step2 extends Component {
store: store,
platform: platform[0]
};
const {errorCount, errors} = this.validate();
if (errorCount > 0) {
this.setState({errors: errors})
} else {
this.props.setStepData("platform", data);
}
}
onCancelClick() {
this.props.close();
@ -103,6 +113,17 @@ class Step2 extends Component {
this.props.handlePrev();
}
validate() {
const {store, platform} = this.state;
let errors = {};
let errorCount = 0;
if (!validator.validateEmptyObject(platform)) {
errorCount++;
errors.platform = "You must select an application platform!"
}
return {errorCount, errors};
}
/**
* Triggers when changing the Platform selection.
* */
@ -149,6 +170,7 @@ class Step2 extends Component {
)
}) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
</Input>
<FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback>
</FormGroup>
<ModalFooter>
<Button color="primary" onClick={this.onBackClick}>Back</Button>

48
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
View File

@ -19,7 +19,8 @@
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
import React, {Component} from 'react';
import {Button, FormGroup, Label, ModalFooter} from 'reactstrap';
import * as validator from '../../../../common/validator';
import {Button, FormFeedback, FormGroup, Label, ModalFooter} from 'reactstrap';
import AppImage from "../../../UIComponents/AppImage/AppImage";
import {FormattedMessage} from 'react-intl';
@ -42,6 +43,7 @@ class Step3 extends Component {
super();
this.setStepData = this.setStepData.bind(this);
this.onBackClick = this.onBackClick.bind(this);
this.validate = this.validate.bind(this);
this.onCancelClick = this.onCancelClick.bind(this);
this.state = {
icon: [],
@ -57,18 +59,6 @@ class Step3 extends Component {
this.setState(defaultData);
}
/**
* Handles Chip delete function.
* Removes the tag from state.tags
* */
handleRequestDelete(event) {
this.chipData = this.state.tags;
console.log(event.target); //TODO: Remove Console log.
const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
this.chipData.splice(chipToDelete, 1);
this.setState({tags: this.chipData});
};
/**
* Creates an object with the current step data and persist in the parent.
* */
@ -82,7 +72,14 @@ class Step3 extends Component {
screenshots: screenshots
};
const {errorCount, errors} = this.validate();
if (errorCount > 0) {
this.setState({errors: errors})
} else {
this.props.setStepData("screenshots", stepData);
}
};
onCancelClick() {
@ -93,6 +90,28 @@ class Step3 extends Component {
this.props.handlePrev();
}
validate() {
const {icon, banner, screenshots} = this.state;
let errors = {}, errorCount = 0;
if (!validator.validateEmpty(icon)) {
errorCount++;
errors.icon = "You must upload an icon image!"
}
if (!validator.validateEmpty(banner)) {
errorCount++;
errors.banner = "You must upload a banner image!"
}
if (!validator.validateEmpty(screenshots)) {
errorCount++;
errors.screenshots = "You must upload at least one screenshot image!"
}
return {errorCount, errors};
}
/**
* Removed user uploaded banner.
* */
@ -146,6 +165,7 @@ class Step3 extends Component {
<i className="fw fw-add"></i>
</Dropzone> : <div/>}
</div>
<FormFeedback id="form-error">{this.state.errors.screenshots}</FormFeedback>
</FormGroup>
</div>
<div style={{display: 'flex'}}>
@ -173,6 +193,7 @@ class Step3 extends Component {
<i className="fw fw-add"></i>
</Dropzone> : <div/>}
</div>
<FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
</FormGroup>
</div>
<div style={{marginLeft: '15px'}}>
@ -199,6 +220,7 @@ class Step3 extends Component {
</Dropzone> : <div/>
}
</div>
<FormFeedback id="form-error">{this.state.errors.banner}</FormFeedback>
</FormGroup>
</div>
</div>