Add unrestricted roles field to Add new app form

merge-requests/358/head
Jayasanka 5 years ago
parent dff6d74c72
commit 9dd7444cd7

@ -39,7 +39,8 @@
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"shade-blend-color": "^1.0.0", "shade-blend-color": "^1.0.0",
"storm-react-diagrams": "^5.2.1", "storm-react-diagrams": "^5.2.1",
"typescript": "^3.6.4" "typescript": "^3.6.4",
"lodash.debounce": "latest"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.5.0", "@babel/core": "^7.5.0",

@ -509,8 +509,8 @@ class AppDetailsDrawer extends React.Component {
title="Published" title="Published"
style={{ style={{
backgroundColor: '#52c41a', backgroundColor: '#52c41a',
borderRadius:"50%", borderRadius: "50%",
color:"white" color: "white"
}} }}
count={ count={
<Icon <Icon
@ -547,10 +547,10 @@ class AppDetailsDrawer extends React.Component {
/> />
</div> </div>
<Divider dashed={true}/>
{/*display add new release only if app type is enterprise*/} {/*display add new release only if app type is enterprise*/}
{(app.type === "ENTERPRISE") && ( {(app.type === "ENTERPRISE") && (
<div> <div>
<Divider dashed={true}/>
<div style={{paddingBottom: 16}}> <div style={{paddingBottom: 16}}>
<Text> <Text>
Add new release for the application Add new release for the application

@ -74,7 +74,6 @@ const columns = [
) : ( ) : (
<Avatar shape="square" size="large" <Avatar shape="square" size="large"
style={{ style={{
marginRight: 20,
borderRadius: "28%", borderRadius: "28%",
border: "1px solid #ddd" border: "1px solid #ddd"
}} }}

@ -17,10 +17,11 @@
*/ */
import React from "react"; import React from "react";
import {Button, Col, Divider, Form, Icon, Input, notification, Row, Select, Switch, Upload} from "antd"; import {Button, Col, Divider, Form, Icon, Input, notification, Row, Select, Spin, Switch, Upload} from "antd";
import axios from "axios"; import axios from "axios";
import {withConfigContext} from "../../../context/ConfigContext"; import {withConfigContext} from "../../../context/ConfigContext";
import {handleApiError} from "../../../js/Utils"; import {handleApiError} from "../../../js/Utils";
import debounce from 'lodash.debounce';
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
@ -42,12 +43,15 @@ class NewAppDetailsForm extends React.Component {
this.state = { this.state = {
categories: [], categories: [],
tags: [], tags: [],
deviceTypes:[] deviceTypes: [],
fetching: false,
roleSearchValue: [],
unrestrictedRoles: []
}; };
this.lastFetchId = 0;
this.fetchUser = debounce(this.fetchRoles, 800);
} }
handleSubmit = e => { handleSubmit = e => {
e.preventDefault(); e.preventDefault();
const {formConfig} = this.props; const {formConfig} = this.props;
@ -58,13 +62,17 @@ class NewAppDetailsForm extends React.Component {
this.setState({ this.setState({
loading: true loading: true
}); });
const {name, description, categories, tags, price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription, releaseType} = values; const {name, description, categories, tags, unrestrictedRoles} = values;
const unrestrictedRolesData = [];
unrestrictedRoles.map(val=>{
unrestrictedRolesData.push(val.key);
});
const application = { const application = {
name, name,
description, description,
categories, categories,
tags, tags,
unrestrictedRoles: [], unrestrictedRoles: unrestrictedRolesData,
}; };
if (formConfig.installationType !== "WEB_CLIP") { if (formConfig.installationType !== "WEB_CLIP") {
@ -141,15 +149,15 @@ class NewAppDetailsForm extends React.Component {
const allowedDeviceTypes = []; const allowedDeviceTypes = [];
// exclude mobile device types if installation type is custom // exclude mobile device types if installation type is custom
if(installationType==="CUSTOM"){ if (installationType === "CUSTOM") {
allDeviceTypes.forEach(deviceType=>{ allDeviceTypes.forEach(deviceType => {
if(!mobileDeviceTypes.includes(deviceType.name)){ if (!mobileDeviceTypes.includes(deviceType.name)) {
allowedDeviceTypes.push(deviceType); allowedDeviceTypes.push(deviceType);
} }
}); });
}else{ } else {
allDeviceTypes.forEach(deviceType=>{ allDeviceTypes.forEach(deviceType => {
if(mobileDeviceTypes.includes(deviceType.name)){ if (mobileDeviceTypes.includes(deviceType.name)) {
allowedDeviceTypes.push(deviceType); allowedDeviceTypes.push(deviceType);
} }
}); });
@ -168,9 +176,49 @@ class NewAppDetailsForm extends React.Component {
}); });
}; };
fetchRoles = value => {
const config = this.props.context;
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.setState({data: [], fetching: true});
axios.get(
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/roles?filter=" + value,
).then(res => {
if (res.status === 200) {
if (fetchId !== this.lastFetchId) {
// for fetch callback order
return;
}
const data = res.data.data.roles.map(role => ({
text: role,
value: role,
}));
this.setState({
unrestrictedRoles: data,
fetching: false
});
}
}).catch((error) => {
handleApiError(error, "Error occurred while trying to load roles.");
this.setState({fetching: false});
});
};
handleRoleSearch = roleSearchValue => {
this.setState({
roleSearchValue,
unrestrictedRoles: [],
fetching: false,
});
};
render() { render() {
const {formConfig} = this.props; const {formConfig} = this.props;
const {categories, tags, deviceTypes} = this.state; const {categories, tags, deviceTypes, fetching, roleSearchValue, unrestrictedRoles} = this.state;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
return ( return (
@ -198,8 +246,7 @@ class NewAppDetailsForm extends React.Component {
<Select <Select
style={{width: '100%'}} style={{width: '100%'}}
placeholder="select device type" placeholder="select device type"
onChange={this.handleCategoryChange} onChange={this.handleCategoryChange}>
>
{ {
deviceTypes.map(deviceType => { deviceTypes.map(deviceType => {
return ( return (
@ -238,6 +285,29 @@ class NewAppDetailsForm extends React.Component {
<TextArea placeholder="Enter the description..." rows={7}/> <TextArea placeholder="Enter the description..." rows={7}/>
)} )}
</Form.Item> </Form.Item>
{/*Unrestricted Roles*/}
<Form.Item {...formItemLayout} label="Unrestricted Roles">
{getFieldDecorator('unrestrictedRoles', {
rules: [],
initialValue: []
})(
<Select
mode="multiple"
labelInValue
value={roleSearchValue}
placeholder="Search roles"
notFoundContent={fetching ? <Spin size="small"/> : null}
filterOption={false}
onSearch={this.fetchRoles}
onChange={this.handleRoleSearch}
style={{width: '100%'}}>
{unrestrictedRoles.map(d => (
<Option key={d.value}>{d.text}</Option>
))}
</Select>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Categories"> <Form.Item {...formItemLayout} label="Categories">
{getFieldDecorator('categories', { {getFieldDecorator('categories', {
rules: [{ rules: [{
@ -249,8 +319,7 @@ class NewAppDetailsForm extends React.Component {
mode="multiple" mode="multiple"
style={{width: '100%'}} style={{width: '100%'}}
placeholder="Select a Category" placeholder="Select a Category"
onChange={this.handleCategoryChange} onChange={this.handleCategoryChange}>
>
{ {
categories.map(category => { categories.map(category => {
return ( return (
@ -274,8 +343,7 @@ class NewAppDetailsForm extends React.Component {
<Select <Select
mode="tags" mode="tags"
style={{width: '100%'}} style={{width: '100%'}}
placeholder="Tags" placeholder="Tags">
>
{ {
tags.map(tag => { tags.map(tag => {
return ( return (

@ -107,8 +107,7 @@ class RoleInstall extends React.Component {
filterOption={false} filterOption={false}
onSearch={this.fetchUser} onSearch={this.fetchUser}
onChange={this.handleChange} onChange={this.handleChange}
style={{width: '100%'}} style={{width: '100%'}}>
>
{data.map(d => ( {data.map(d => (
<Option key={d.value}>{d.text}</Option> <Option key={d.value}>{d.text}</Option>
))} ))}

Loading…
Cancel
Save