120 lines
4.1 KiB
JavaScript
120 lines
4.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {Button, SVGIcon, TextField} from 'react-md';
|
|
import '../css/Intent.css'
|
|
import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH} from '../config';
|
|
|
|
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);
|
|
this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
|
|
this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
|
|
this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
|
|
}
|
|
|
|
componentWillReceiveProps(props){
|
|
this.setState({intent: props.selectedIntent});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="IntentDetails">
|
|
<div className="QuestionBox">
|
|
<TextField
|
|
id="intent name"
|
|
lineDirection="center"
|
|
placeholder="Intent name"
|
|
label="Intent name"
|
|
className="md-cell md-cell--bottom"
|
|
style={{width:'60%'}}
|
|
onChange={this.handleIntentNameEdit}
|
|
maxLength={INTENT_NAME_MAX_LENGTH}
|
|
value={this.state.intent.intentName} />
|
|
</div>
|
|
<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="intent question"
|
|
lineDirection="center"
|
|
placeholder="Question"
|
|
className="md-cell md-cell--bottom"
|
|
style={{width:'60%'}}
|
|
maxLength={QUESTION_MAX_LENGTH}
|
|
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>}
|
|
onChange={(e)=>{this.handleQuestionEdit(e,index)}}
|
|
value={question}/>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
<br></br>
|
|
{
|
|
<div className="QuestionBox">
|
|
<TextField
|
|
id="intent answer"
|
|
lineDirection="center"
|
|
label="Answer"
|
|
placeholder="Answer"
|
|
style={{width:'60%'}}
|
|
maxLength={ANSWER_MAX_LENGTH}
|
|
className="md-cell md-cell--bottom"
|
|
onChange={this.handleAnswerEdit}
|
|
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('');
|
|
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});
|
|
}
|
|
|
|
handleQuestionEdit(e,index){
|
|
if (e.length === QUESTION_MAX_LENGTH) return;
|
|
let newIntent = this.state.intent;
|
|
newIntent.questions[index] = e;
|
|
this.setState({intent: newIntent});
|
|
}
|
|
|
|
handleAnswerEdit(e){
|
|
if (e.length === ANSWER_MAX_LENGTH) return;
|
|
let newIntent = this.state.intent;
|
|
newIntent.answer = e;
|
|
this.setState({intent: newIntent});
|
|
}
|
|
|
|
handleIntentNameEdit(e){
|
|
if (e.length === INTENT_NAME_MAX_LENGTH) return;
|
|
//e.replace(/\s/g,'');
|
|
let newIntent = this.state.intent;
|
|
newIntent.intentName = e;
|
|
this.setState({intent: newIntent});
|
|
}
|
|
}
|
|
|
|
export default IntentDetails;
|