frontend code refactoring

This commit is contained in:
GotPPay
2018-01-14 01:00:35 +01:00
parent 7f56a28509
commit 07857fd2f4
16 changed files with 186 additions and 258 deletions

View File

@@ -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});