Modal blur bg; Editing/creating playlists with descriptions and collab

This commit is contained in:
James Barnsley
2017-07-13 15:26:30 +12:00
parent f272c6f733
commit bbc2cf8961
8 changed files with 136 additions and 62 deletions

View File

@ -12,7 +12,8 @@ export default class EditPlaylistModal extends React.Component{
error: null,
name: this.props.data.name,
description: (this.props.data.description ? this.props.data.description : ''),
is_public: this.props.data.is_public
is_public: this.props.data.is_public,
is_collaborative: this.props.data.is_collaborative
}
}
@ -23,7 +24,7 @@ export default class EditPlaylistModal extends React.Component{
this.setState({error: 'Name is required'})
return false
} else {
this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.is_public, this.state.description)
this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative)
this.props.uiActions.closeModal()
return false
}
@ -35,21 +36,22 @@ export default class EditPlaylistModal extends React.Component{
case 'spotify':
return (
<div>
<div className="field">
<div className="field text">
<span className="label">Name</span>
<input
type="text"
placeholder="Name"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
<div className="field">
<div className="field text">
<span className="label">Description</span>
<input
type="text"
placeholder="Description"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
<div className="field checkbox white">
<span className="label">Options</span>
<label>
<input
type="checkbox"
@ -58,6 +60,14 @@ export default class EditPlaylistModal extends React.Component{
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="is_collaborative"
checked={ this.state.is_collaborative }
onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
<span className="label">Collaborative</span>
</label>
</div>
</div>
)
@ -67,9 +77,9 @@ export default class EditPlaylistModal extends React.Component{
return (
<div>
<div className="field">
<span className="label">Name</span>
<input
type="text"
placeholder="Name"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>