Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for #206, show authors, issues & articles editors in Dialog boxes on admin site #217

Merged
merged 9 commits into from
Oct 5, 2017
Merged

Fix for #206, show authors, issues & articles editors in Dialog boxes on admin site #217

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7dea9bf
fix for #206, add scroll to author & article pages
flakybot2077 Sep 25, 2017
d3498a1
move hash scroll to admin-client.js, add support for Issues page
flakybot2077 Sep 26, 2017
477d011
revert to 17c8d7a, cancel the scroll fix
flakybot2077 Sep 27, 2017
6c19b95
add material ui Dialog to admin articles page
flakybot2077 Sep 27, 2017
804300f
fix submit issue, enable page redirect in articles page
flakybot2077 Oct 2, 2017
651ec48
fix small problems with Dialog and add to Authors & Issues page
flakybot2077 Oct 4, 2017
dc3a2cc
Removed redundant style object from EditorArticleController
emilgoldsmith Oct 4, 2017
081fefe
remove Dialog from Issues page
flakybot2077 Oct 5, 2017
4b44343
Removed redundant Paper wrappers around modals
emilgoldsmith Oct 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 100 additions & 78 deletions src/components/editor/EditorArticleController.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import moment from 'moment';
import { updateFieldValue } from 'components/editor/lib/form-field-updaters';

// material-ui
import Dialog from 'material-ui/Dialog';
import CircularProgress from 'material-ui/CircularProgress';
import RaisedButton from 'material-ui/RaisedButton';
import Divider from 'material-ui/Divider';
Expand All @@ -21,6 +22,7 @@ const MAX_TEASER_LENGTH = 156;
export default class EditorArticleController extends FalcorController {
constructor(props) {
super(props);
this.handleDialogClose = this.handleDialogClose.bind(this);
this.isFormChanged = this.isFormChanged.bind(this);
this.handleSaveChanges = this.handleSaveChanges.bind(this);
this.handleAddAuthor = this.handleAddAuthor.bind(this);
Expand All @@ -36,6 +38,7 @@ export default class EditorArticleController extends FalcorController {
image: updateFieldValue.bind(this, 'image', undefined),
};
this.safeSetState({
open: true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's remove this as described below.

changed: false,
saving: false,
authors: [],
Expand Down Expand Up @@ -92,6 +95,7 @@ export default class EditorArticleController extends FalcorController {
super.componentWillReceiveProps(nextProps, undefined, falcorCallback);

this.safeSetState({
open: true,
changed: false,
saving: false,
authors: [],
Expand Down Expand Up @@ -121,6 +125,10 @@ export default class EditorArticleController extends FalcorController {
}
}

handleDialogClose() {
this.safeSetState({ open: false });
}

handleSaveChanges(event) {
event.preventDefault();

Expand Down Expand Up @@ -348,93 +356,107 @@ export default class EditorArticleController extends FalcorController {
}
}

// Dialog action button
const actions = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I'll elaborate this button doesn't provide the functionality it previously did

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you saying it doesn't save changes now? That's a big issue. I'll look at it more carefully.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, doesn't save changes anymore, this button used to submit the form by being inside the form and being of type="submit" but now it no longer does that.

It's okay if you wait a bit with implementing changes though, at least until we just decide finally on what's the optimal way to implement this.
I just have quite a lot of stuff to get done tonight, but it's ruminating in the back of my head and I think I nearly have a good structure, but yeah, have a lot of stuff I need to finish tonight, sorry.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no it's totally cool. Good luck with whatever you're doing. Things can wait :).

<RaisedButton
label={changedStateMessage}
primary
style={styles.buttons}
type="submit"
onClick={this.handleDialogClose}
disabled={!this.state.changed || this.state.saving}
/>,
];

return (
<div style={styles.innerPaper}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm don't you think this styled div should be within the Dialog maybe?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes indeed. I'll fix this.

<h2>Article Editor: {article.title}</h2>
<Divider />
<TextField
disabled
defaultValue={article.title}
floatingLabelText="Title"
fullWidth
/>
<form
onSubmit={this.handleSaveChanges}
<Dialog
title="Article Editor"
actions={actions}
open={this.state.open}
modal={false}
autoScrollBodyContent={true}
onRequestClose={this.handleDialogClose}
>
<SelectField
Copy link
Contributor Author

@tongxin97 tongxin97 Sep 27, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only changed the indentation below this line. not sure why Git created such a mess with the blocks.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I'm afraid git isn't always so smart <.<. It seems like it's taking line 363 as a constant because it used to be an end of React element of Form and now it's an end of React element Dialog, but git thinks that's a line that you "kept"

floatingLabelText="Category"
maxHeight={400}
value={this.state.category}
onChange={this.fieldUpdaters.category}
disabled={this.state.saving}
autoWidth={false}
style={{ width: 200 }}
>
{
_.map(categories, category => (
<MenuItem
value={category.slug}
key={category.slug}
primaryText={category.name}
/>
))
}
</SelectField>
<h2>{article.title}</h2>
<Divider />
<TextField
name="image"
value={this.state.image}
floatingLabelText="Image (Remember to use https:// not http://)"
disabled={this.state.saving}
onChange={this.fieldUpdaters.image}
disabled
defaultValue={article.title}
floatingLabelText="Title"
fullWidth
/><br />
<TextField
name="teaser"
floatingLabelText={
`Teaser (${this.state.teaser.length} of ${MAX_TEASER_LENGTH} characters)`
}
value={this.state.teaser}
disabled={this.state.saving}
onChange={this.fieldUpdaters.teaser}
multiLine
rows={2}
fullWidth
/><br />
<EditAuthorsForm
authors={this.state.authors}
onChange={this.debouncedHandleFormStateChanges}
handleAddAuthor={this.handleAddAuthor}
handleDeleteAuthor={this.handleDeleteAuthor}
model={this.props.model}
disabled={this.state.saving}
/>
<form
onSubmit={this.handleSaveChanges}
>
<SelectField
floatingLabelText="Category"
maxHeight={400}
value={this.state.category}
onChange={this.fieldUpdaters.category}
disabled={this.state.saving}
autoWidth={false}
style={{ width: 200 }}
>
{
_.map(categories, category => (
<MenuItem
value={category.slug}
key={category.slug}
primaryText={category.name}
/>
))
}
</SelectField>
<TextField
name="image"
value={this.state.image}
floatingLabelText="Image (Remember to use https:// not http://)"
disabled={this.state.saving}
onChange={this.fieldUpdaters.image}
fullWidth
/><br />
<TextField
name="teaser"
floatingLabelText={
`Teaser (${this.state.teaser.length} of ${MAX_TEASER_LENGTH} characters)`
}
value={this.state.teaser}
disabled={this.state.saving}
onChange={this.fieldUpdaters.teaser}
multiLine
rows={2}
fullWidth
/><br />
<EditAuthorsForm
authors={this.state.authors}
onChange={this.debouncedHandleFormStateChanges}
handleAddAuthor={this.handleAddAuthor}
handleDeleteAuthor={this.handleDeleteAuthor}
model={this.props.model}
disabled={this.state.saving}
/>
</form>
<br />
<Divider />
<br />
{
article.published_at
? `This article was published on ${
moment(article.published_at).format('MMMM DD, YYYY')
}.`
: 'The article has yet to be published. It will be published automatically ' +
'when you publish the issue that contains it.'
} <br />
<RaisedButton
label={changedStateMessage}
primary
label="Unpublish Article"
secondary
style={styles.buttons}
type="submit"
disabled={!this.state.changed || this.state.saving}
disabled={!article.published_at}
onClick={this.unpublish}
icon={<Warning />}
/>
</form>
<br />
<Divider />
<br />
{
article.published_at
? `This article was published on ${
moment(article.published_at).format('MMMM DD, YYYY')
}.`
: 'The article has yet to be published. It will be published automatically ' +
'when you publish the issue that contains it.'
} <br />
<RaisedButton
label="Unpublish Article"
secondary
style={styles.buttons}
disabled={!article.published_at}
onClick={this.unpublish}
icon={<Warning />}
/>
</Dialog>
</div>
);
}
Expand Down