78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {Button, SVGIcon, TextField} from 'react-md';
|
|
import '../css/Intent.css'
|
|
|
|
class IntentDetails extends Component {
|
|
constructor(props){
|
|
super(props);
|
|
|
|
this.state= {intent: props.selectedIntent};
|
|
|
|
this.addQuestion = this.addQuestion.bind(this);
|
|
this.deleteQuestion = this.deleteQuestion.bind(this);
|
|
}
|
|
|
|
componentWillReceiveProps(props){
|
|
this.setState({intent: props.selectedIntent});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="IntentDetails">
|
|
<h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
|
|
{
|
|
this.state.intent.questions.map((question, index)=>{
|
|
return (
|
|
<div key={index} className="QuestionBox">
|
|
<TextField
|
|
id="floating-center-title"
|
|
lineDirection="center"
|
|
placeholder="Question"
|
|
className="md-cell md-cell--bottom"
|
|
style={{width:'60%'}}
|
|
rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
|
|
value={question}/>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
<br></br>
|
|
{
|
|
<div className="QuestionBox">
|
|
<TextField
|
|
id="floating-center-title"
|
|
lineDirection="center"
|
|
label="Answer"
|
|
placeholder="Answer"
|
|
style={{width:'60%'}}
|
|
className="md-cell md-cell--bottom"
|
|
value={this.state.intent.answer}/>
|
|
</div>
|
|
}
|
|
<br></br>
|
|
<br></br>
|
|
<Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete intent</Button>
|
|
<Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion}>Add question</Button>
|
|
<Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
addQuestion(){
|
|
let newIntent = this.state.intent;
|
|
newIntent.questions.push('New question');
|
|
this.setState({intent: newIntent});
|
|
}
|
|
|
|
deleteQuestion(question){
|
|
let newIntent = this.state.intent;
|
|
let removeId = newIntent.questions.indexOf(question);
|
|
if (removeId !== -1)
|
|
newIntent.questions.splice(removeId,1);
|
|
|
|
this.setState({intent: newIntent});
|
|
}
|
|
}
|
|
|
|
export default IntentDetails;
|