frontend code refactoring
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import {Button, SVGIcon, TextField} from 'react-md';
|
||||
import '../css/Intent.css'
|
||||
import '../css/components/IntentDetails.css';
|
||||
import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH} from '../config/constants';
|
||||
|
||||
class IntentDetails extends Component {
|
||||
@@ -22,20 +22,19 @@ class IntentDetails extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="IntentDetails">
|
||||
<div className="RightPanelBox">
|
||||
<div className="QuestionBox">
|
||||
<TextField
|
||||
id="intent name"
|
||||
lineDirection="center"
|
||||
placeholder="Intent name"
|
||||
label="Intent name"
|
||||
className="md-cell md-cell--bottom"
|
||||
style={{width:'60%'}}
|
||||
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
|
||||
onChange={this.handleIntentNameEdit}
|
||||
maxLength={INTENT_NAME_MAX_LENGTH}
|
||||
value={this.state.intent.intentName} />
|
||||
</div>
|
||||
<h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
|
||||
<h5 className="QuestionTitle">Questions</h5>
|
||||
{
|
||||
this.state.intent.questions.map((question, index)=>{
|
||||
return (
|
||||
@@ -44,8 +43,7 @@ class IntentDetails extends Component {
|
||||
id="intent question"
|
||||
lineDirection="center"
|
||||
placeholder="Question"
|
||||
className="md-cell md-cell--bottom"
|
||||
style={{width:'60%'}}
|
||||
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
|
||||
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)}}
|
||||
@@ -62,18 +60,17 @@ class IntentDetails extends Component {
|
||||
lineDirection="center"
|
||||
label="Answer"
|
||||
placeholder="Answer"
|
||||
style={{width:'60%'}}
|
||||
maxLength={ANSWER_MAX_LENGTH}
|
||||
className="md-cell md-cell--bottom"
|
||||
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
|
||||
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)}} disabled={this.props.waiting}>Delete intent</Button>
|
||||
<Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add question</Button>
|
||||
<Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
|
||||
<Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete intent</Button>
|
||||
<Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add question</Button>
|
||||
<Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
|
||||
|
||||
</div>
|
||||
);
|
||||
@@ -110,7 +107,6 @@ class IntentDetails extends Component {
|
||||
|
||||
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});
|
||||
|
||||
Reference in New Issue
Block a user