ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js

/*-
 * ============LICENSE_START=======================================================
 * ONAP CLAMP
 * ================================================================================
 * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
 * ================================================================================
 * Licensed 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.
 * ============LICENSE_END============================================
 * ===================================================================
 *
 */

import React from 'react'
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import styled from 'styled-components';
import LoopService from '../../../api/LoopService';

const ModalStyled = styled(Modal)`
	background-color: transparent;
`
export default class LoopPropertiesModal extends React.Component {

	state = {
		show: true,
		loopCache: this.props.loopCache,
		temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()))
	};

	constructor(props, context) {
		super(props, context);

		this.handleClose = this.handleClose.bind(this);
		this.handleSave = this.handleSave.bind(this);
		this.handleChange = this.handleChange.bind(this);

		this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
		this.renderAllParameters = this.renderAllParameters.bind(this);
		this.getDcaeParameters = this.getDcaeParameters.bind(this);
	}

	componentWillReceiveProps(newProps) {
		this.setState({
			loopCache: newProps.loopCache,
			temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
		});
	}

	handleClose() {
		this.props.history.push('/');
	}

	handleSave(event) {
		LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => {
			this.setState({ show: false });
			this.props.history.push('/');
			this.props.loadLoopFunction(this.state.loopCache.getLoopName());
		});
	}

	handleChange(event) {
		this.setState({temporaryPropertiesJson:{[event.target.name]: JSON.parse(event.target.value)}});
	}

	renderAllParameters() {
		return (<Modal.Body>
			<Form>
				{this.renderDcaeParameters()}
			</Form>
		</Modal.Body>
		);
	}

	getDcaeParameters() {
		if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
			return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
		} else {
			return "";
		}

	}

	renderDcaeParameters() {
		return (
			<Form.Group >
				<Form.Label>Deploy Parameters</Form.Label>
				<Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.getDcaeParameters()}></Form.Control>
			</Form.Group>
		);
	}

	render() {
		return (
			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
				<Modal.Header closeButton>
					<Modal.Title>Model Properties</Modal.Title>
				</Modal.Header>
					{this.renderAllParameters()}
				<Modal.Footer>
					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
					<Button variant="primary" type="submit" onClick={this.handleSave}>Save Changes</Button>
				</Modal.Footer>
			</ModalStyled>
		);
	}
}