Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-06-23 17:46:39 +02:00
Code Issues Releases Activity

Disable editing dictionary if marked complete

Browse source
This commit is contained in:
Robbie Antenesse 2017-12-12 10:46:41 -07:00
parent 629bb9858b
commit 9869d29a55
4 changed files with 114 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/MainDisplay.jsx
View file

@ -49,6 +49,7 @@ export class MainDisplay extends Component {
render () { render () {
const { dictionaryInfo, wordsToDisplay, updateDisplay, updater } = this.props; const { dictionaryInfo, wordsToDisplay, updateDisplay, updater } = this.props;
const { isMobile, wordFormIsOpen } = this.state; const { isMobile, wordFormIsOpen } = this.state;
const wordFormIsDisabled = dictionaryInfo.settings.isComplete;
return ( return (
<section className='section'> <section className='section'>
@ -56,6 +57,7 @@ export class MainDisplay extends Component {
<div className='columns'> <div className='columns'>
<LeftColumn <LeftColumn
isDisabled={ wordFormIsDisabled }
isMobile={ isMobile } isMobile={ isMobile }
displayForm={ wordFormIsOpen } displayForm={ wordFormIsOpen }
openWordForm={ this.openWordForm.bind(this) } openWordForm={ this.openWordForm.bind(this) }
@ -66,7 +68,7 @@ export class MainDisplay extends Component {
/> />
</LeftColumn> </LeftColumn>
<RightColumn formIsDisplayed={ this.state.wordFormIsOpen }> <RightColumn formIsDisplayed={ !wordFormIsDisabled && wordFormIsOpen }>
<DictionaryDetails <DictionaryDetails
updater={ updater } updater={ updater }
name={ dictionaryInfo.name } name={ dictionaryInfo.name }

2
src/components/management/EditDictionaryModal/EditSettingsForm.jsx
View file

@ -106,7 +106,7 @@ export const EditSettingsForm = (props) => {
}} /> }} />
</label> </label>
<div className='help'> <div className='help'>
Checking this box will mark your { specification } as "complete", and you will not be able to alter it until this checkbox is unchecked. Checking this box will mark your { specification } as "complete" and prevent any changes from being made.
</div> </div>
</div> </div>
</div> </div>

91
src/components/management/EditDictionaryModal/index.jsx
View file

@ -242,10 +242,11 @@ export class EditDictionaryModal extends Component {
render () { render () {
const { currentDisplay, hasChanged } = this.state; const { currentDisplay, hasChanged } = this.state;
const { specification, settings, isLoggedIn } = this.props;
return ( return (
<Modal title={ `Edit ${ this.props.specification }` } <Modal title={ `Edit ${ specification }` }
buttonText={ `Edit ${ this.props.specification }` } buttonText={ `Edit ${ specification }` }
footerAlign='right' footerAlign='right'
footerContent={ footerContent={
( (
@ -261,28 +262,74 @@ export class EditDictionaryModal extends Component {
} }
> >
<div className='tabs'> {!settings.isComplete
<ul> ? [(
<li className={ (currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null }> <div className='tabs'>
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.DETAILS) }> <ul>
Details <li className={ (currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null }>
</a> <a onClick={ this.toggleDisplay.bind(this, DISPLAY.DETAILS) }>
</li> Details
<li className={ (currentDisplay === DISPLAY.LINGUISTICS) ? 'is-active' : null }> </a>
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.LINGUISTICS) }> </li>
Linguistics <li className={ (currentDisplay === DISPLAY.LINGUISTICS) ? 'is-active' : null }>
</a> <a onClick={ this.toggleDisplay.bind(this, DISPLAY.LINGUISTICS) }>
</li> Linguistics
<li className={ (currentDisplay === DISPLAY.SETTINGS) ? 'is-active' : null }> </a>
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.SETTINGS) }> </li>
Settings <li className={ (currentDisplay === DISPLAY.SETTINGS) ? 'is-active' : null }>
</a> <a onClick={ this.toggleDisplay.bind(this, DISPLAY.SETTINGS) }>
</li> Settings
</ul> </a>
</div> </li>
</ul>
</div>
),
this.displaySection(),
] : (
<div className='columns'>
{ this.displaySection() } <div className='column has-text-centered'>
{ specification } marked complete<br />
<a className='button is-warning is-small'
onClick={() => {
this.setState({ isComplete: false, currentDisplay: DISPLAY.SETTINGS }, () => {
this.save();
})
}}>
Mark it incomplete
</a>
</div>
{isLoggedIn
&& (
<div className='column has-text-centered'>
Your dictionary is <strong>{ settings.isPublic ? 'Public' : 'Private'}</strong>
{settings.isPublic
&& (
[
' You can view it at',
<br />,
<a className='button is-text is-small'
onClick={() => console.log('set up copying to clipboard')}>
PUBLIC_LINK
</a>,
]
)}
<br />
<a className='button is-small'
onClick={() => {
this.setState({ isPublic: !settings.isPublic }, () => {
this.save();
})
}}>
Mark it { settings.isPublic ? 'Private' : 'Public'}
</a>
</div>
)}
</div>
)
}
</Modal> </Modal>
); );
} }

79
src/components/structure/LeftColumn/index.jsx
View file

@ -7,6 +7,7 @@ import './styles.scss';
export const LeftColumn = (props) => { export const LeftColumn = (props) => {
PropTypes.checkPropTypes({ PropTypes.checkPropTypes({
isDisabled: PropTypes.bool,
isMobile: PropTypes.bool.isRequired, isMobile: PropTypes.bool.isRequired,
displayForm: PropTypes.bool.isRequired, displayForm: PropTypes.bool.isRequired,
openWordForm: PropTypes.func.isRequired, openWordForm: PropTypes.func.isRequired,
@ -14,42 +15,44 @@ export const LeftColumn = (props) => {
children: PropTypes.object, children: PropTypes.object,
}, props, 'prop', 'LeftColumn'); }, props, 'prop', 'LeftColumn');
const { isMobile, displayForm, openWordForm, closeWordForm } = props; const { isDisabled, isMobile, displayForm, openWordForm, closeWordForm } = props;
return ( if (!isDisabled) {
<div className={ `left-column-${ displayForm ? 'open' : 'closed' }` } > return (
{isMobile <div className={ `left-column-${ displayForm ? 'open' : 'closed' }` } >
? ( {isMobile
<div className='floating-word-button'> ? (
<Modal title='New Word' <div className='floating-word-button'>
buttonText={<span className='icon'><i className='fa fa-plus' /></span>} <Modal title='New Word'
> buttonText={<span className='icon'><i className='fa fa-plus' /></span>}
{ props.children } >
</Modal> { props.children }
</div> </Modal>
) : ( </div>
<div> ) : (
{displayForm <div>
? ( {displayForm
<div className='floating-word-form'> ? (
<a className='button is-pulled-right' <div className='floating-word-form'>
onClick={ closeWordForm } <a className='button is-pulled-right'
> onClick={ closeWordForm }
<span className='icon'><i className='fa fa-close' /></span> >
</a> <span className='icon'><i className='fa fa-close' /></span>
{ props.children } </a>
</div> { props.children }
) : ( </div>
<div className='floating-word-button'> ) : (
<a className='button' onClick={ openWordForm }> <div className='floating-word-button'>
<span className='icon'><i className='fa fa-plus' /></span> <a className='button' onClick={ openWordForm }>
</a> <span className='icon'><i className='fa fa-plus' /></span>
</div> </a>
) </div>
} )
</div> }
) </div>
} )
</div> }
); </div>
} );
}
}