2017-08-17 00:53:55 +02:00
|
|
|
import Inferno from 'inferno';
|
|
|
|
import Component from 'inferno-component';
|
|
|
|
import marked from 'marked';
|
|
|
|
|
2017-08-17 21:50:28 +02:00
|
|
|
import helper from '../../../Helper';
|
2017-08-17 00:53:55 +02:00
|
|
|
|
2017-08-17 21:50:28 +02:00
|
|
|
import { Modal } from '../../structure/Modal';
|
2017-08-17 00:53:55 +02:00
|
|
|
|
|
|
|
import { EditDictionaryForm } from './EditDictionaryForm';
|
|
|
|
import { EditLinguisticsForm } from './EditLinguisticsForm';
|
|
|
|
|
|
|
|
const DISPLAY = {
|
|
|
|
DETAILS: 1,
|
|
|
|
LINGUISTICS: 2,
|
|
|
|
SETTINGS: 3,
|
|
|
|
}
|
|
|
|
|
|
|
|
export class EditDictionaryModal extends Component {
|
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
currentDisplay: DISPLAY.DETAILS,
|
|
|
|
|
|
|
|
name: props.name,
|
|
|
|
specification: props.specification,
|
|
|
|
description: props.description,
|
|
|
|
partsOfSpeech: props.partsOfSpeech.join('\n'),
|
|
|
|
|
|
|
|
hasChanged: false,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
hasChanged () {
|
|
|
|
return (
|
|
|
|
this.state.name != this.props.name
|
|
|
|
|| this.state.specification != this.props.specification
|
|
|
|
|| this.state.description != this.props.description
|
|
|
|
|| this.state.partsOfSpeech != this.props.partsOfSpeech.join('\n')
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleDisplay (display) {
|
|
|
|
this.setState({
|
|
|
|
currentDisplay: display,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
displaySection () {
|
|
|
|
let displayJSX;
|
|
|
|
|
|
|
|
switch(this.state.currentDisplay) {
|
|
|
|
case DISPLAY.DETAILS : {
|
|
|
|
displayJSX = (
|
|
|
|
<EditDictionaryForm
|
|
|
|
editDictionaryModal={ this }
|
|
|
|
name={ this.state.name }
|
|
|
|
specification={ this.state.specification }
|
|
|
|
description={ this.state.description }
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case DISPLAY.LINGUISTICS : {
|
|
|
|
displayJSX = (
|
|
|
|
<EditLinguisticsForm
|
|
|
|
editDictionaryModal={ this }
|
|
|
|
partsOfSpeech={ this.state.partsOfSpeech }
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case DISPLAY.SETTINGS : {
|
|
|
|
displayJSX = (
|
|
|
|
<div className='content'>
|
|
|
|
<p>Settings!</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className='box'>
|
|
|
|
{ displayJSX }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
save () {
|
|
|
|
const updatedDetails = {};
|
|
|
|
|
|
|
|
if (this.state.name !== this.props.name) {
|
|
|
|
updatedDetails['name'] = this.state.name;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.state.specification !== this.props.specification) {
|
|
|
|
updatedDetails['specification'] = this.state.specification;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.state.description !== this.props.description) {
|
|
|
|
updatedDetails['description'] = this.state.description;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.state.partsOfSpeech !== this.props.partsOfSpeech.join('\n')) {
|
|
|
|
updatedDetails['partsOfSpeech'] = this.state.partsOfSpeech.split('\n')
|
|
|
|
.filter((value) => { return value !== '' })
|
|
|
|
.map((value) => { return value.trim() });
|
|
|
|
}
|
|
|
|
|
2017-08-20 20:31:04 +02:00
|
|
|
// console.log(updatedDetails);
|
2017-08-17 00:53:55 +02:00
|
|
|
|
|
|
|
this.props.updater.updateDictionaryDetails(updatedDetails)
|
|
|
|
.then(() => {
|
|
|
|
this.setState({ hasChanged: false });
|
|
|
|
})
|
|
|
|
.catch(errorMessage => {
|
|
|
|
console.error(errorMessage);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const { currentDisplay, hasChanged } = this.state;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Modal title={ `Edit ${ this.props.specification }` }
|
|
|
|
buttonText={ `Edit ${ this.props.specification }` }
|
|
|
|
footerAlign='right'
|
|
|
|
footerContent={
|
|
|
|
(
|
|
|
|
<div>
|
|
|
|
<button className='button is-success'
|
|
|
|
disabled={ !hasChanged }
|
|
|
|
onClick={ this.save.bind(this) }
|
|
|
|
>
|
|
|
|
Save
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
|
|
|
|
<div className='tabs'>
|
|
|
|
<ul>
|
|
|
|
<li className={ (currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null }>
|
|
|
|
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.DETAILS) }>
|
|
|
|
Details
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li className={ (currentDisplay === DISPLAY.LINGUISTICS) ? 'is-active' : null }>
|
|
|
|
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.LINGUISTICS) }>
|
|
|
|
Linguistics
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li className={ (currentDisplay === DISPLAY.SETTINGS) ? 'is-active' : null }>
|
|
|
|
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.SETTINGS) }>
|
|
|
|
Settings
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{ this.displaySection() }
|
|
|
|
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|