62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
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">
|
||
|
|
<p> Questions </p>
|
||
|
|
{
|
||
|
|
this.state.intent.questions.map((question, index)=>{
|
||
|
|
return (
|
||
|
|
<div key={index} className="QuestionBox">
|
||
|
|
<input value={question}></input>
|
||
|
|
<button onClick={()=>{this.deleteQuestion(question)}}>Del</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
<p> Answer </p>
|
||
|
|
{
|
||
|
|
<input value={this.state.intent.answer}></input>
|
||
|
|
}
|
||
|
|
<br></br>
|
||
|
|
<br></br>
|
||
|
|
<button onClick={this.addQuestion}>Add question</button>
|
||
|
|
<button onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete</button>
|
||
|
|
<button 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;
|