Skip to content

Commit

Permalink
Move article and author editing to modals on admin site (#217)
Browse files Browse the repository at this point in the history
  • Loading branch information
flakybot2077 authored and emilgoldsmith committed Oct 5, 2017
1 parent 17c8d7a commit d30d13e
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 66 deletions.
28 changes: 20 additions & 8 deletions src/components/editor/EditorArticleController.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import FalcorController from 'lib/falcor/FalcorController';
import { browserHistory } from 'react-router';
import _ from 'lodash';
import EditAuthorsForm from './EditAuthorsForm';
import { debounce } from 'lib/utilities';
Expand All @@ -8,6 +9,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 +23,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 Down Expand Up @@ -121,6 +124,14 @@ export default class EditorArticleController extends FalcorController {
}
}

handleDialogClose() {
if (this.state.saving) return;

const page = this.props.params.page;
const path = `/articles/page/${page}`;
browserHistory.push(path);
}

handleSaveChanges(event) {
event.preventDefault();

Expand Down Expand Up @@ -307,11 +318,6 @@ export default class EditorArticleController extends FalcorController {
marginTop: 24,
marginBottom: 12,
},
innerPaper: {
paddingLeft: 30,
paddingRight: 30,
paddingBottom: 15,
},
};

if (this.state.ready) {
Expand Down Expand Up @@ -349,8 +355,14 @@ export default class EditorArticleController extends FalcorController {
}

return (
<div style={styles.innerPaper}>
<h2>Article Editor: {article.title}</h2>
<Dialog
title="Article Editor"
open
modal={false}
autoScrollBodyContent
onRequestClose={this.handleDialogClose}
>
<h2>{article.title}</h2>
<Divider />
<TextField
disabled
Expand Down Expand Up @@ -435,7 +447,7 @@ export default class EditorArticleController extends FalcorController {
onClick={this.unpublish}
icon={<Warning />}
/>
</div>
</Dialog>
);
}
return (
Expand Down
4 changes: 1 addition & 3 deletions src/components/editor/EditorArticleListController.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,7 @@ export default class EditorArticleListController extends FalcorController {
/>
</div>
</Paper>
<Paper style={styles.paper} zDepth={2}>
{this.props.children}
</Paper>
{this.props.children}
</div>
);
}
Expand Down
121 changes: 69 additions & 52 deletions src/components/editor/EditorAuthorController.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React from 'react';
import { browserHistory } from 'react-router';
import FalcorController from 'lib/falcor/FalcorController';
import { debounce, markdownLength } from 'lib/utilities';
import { updateFieldValue } from './lib/form-field-updaters';

// material-ui
import Dialog from 'material-ui/Dialog';
import CircularProgress from 'material-ui/CircularProgress';
import Divider from 'material-ui/Divider';
import TextField from 'material-ui/TextField';
Expand All @@ -27,6 +29,7 @@ const styles = {
export default class EditorAuthorController extends FalcorController {
constructor(props) {
super(props);
this.handleDialogClose = this.handleDialogClose.bind(this);
this.handleSaveChanges = this.handleSaveChanges.bind(this);
this.fieldUpdaters = {
name: updateFieldValue.bind(this, 'name', undefined),
Expand Down Expand Up @@ -129,6 +132,13 @@ export default class EditorAuthorController extends FalcorController {
}
}

handleDialogClose() {
if (this.state.saving) return;

const path = '/authors';
browserHistory.push(path);
}

handleSaveChanges(event) {
event.preventDefault();

Expand Down Expand Up @@ -245,58 +255,65 @@ export default class EditorAuthorController extends FalcorController {
}

return (
<div style={styles.authorProfile}>
<h3>Author Profile: {this.state.name}</h3>
<Divider />
<form onSubmit={this.handleSaveChanges}>
<TextField
value={this.state.name}
floatingLabelText="Name"
disabled={this.state.saving}
onChange={this.fieldUpdaters.name}
/><br />
<TextField
value={this.state.slug}
floatingLabelText="Slug"
disabled={this.state.saving}
onChange={this.fieldUpdaters.slug}
/><br />
<TextField
value={this.state.jobTitle}
floatingLabelText="Job Title"
disabled={this.state.saving}
onChange={this.fieldUpdaters.jobTitle}
/><br />
<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="biography"
floatingLabelText={
`Biography (${markdownLength(this.state.biography)} ` +
`of ${MAX_BIOGRAPHY_LENGTH} characters)`
}
value={this.state.biography}
disabled={this.state.saving}
onChange={this.fieldUpdaters.biography}
multiLine
rows={2}
fullWidth
/><br />
<RaisedButton
label={changedStateMessage}
type="submit"
primary
style={styles.buttons}
disabled={!this.state.changed || this.state.saving}
/>
</form>
</div>
<Dialog
title="Author Profile"
open
autoScrollBodyContent
onRequestClose={this.handleDialogClose}
>
<div style={styles.authorProfile}>
<h3>Author Profile: {this.state.name}</h3>
<Divider />
<form onSubmit={this.handleSaveChanges}>
<TextField
value={this.state.name}
floatingLabelText="Name"
disabled={this.state.saving}
onChange={this.fieldUpdaters.name}
/><br />
<TextField
value={this.state.slug}
floatingLabelText="Slug"
disabled={this.state.saving}
onChange={this.fieldUpdaters.slug}
/><br />
<TextField
value={this.state.jobTitle}
floatingLabelText="Job Title"
disabled={this.state.saving}
onChange={this.fieldUpdaters.jobTitle}
/><br />
<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="biography"
floatingLabelText={
`Biography (${markdownLength(this.state.biography)} ` +
`of ${MAX_BIOGRAPHY_LENGTH} characters)`
}
value={this.state.biography}
disabled={this.state.saving}
onChange={this.fieldUpdaters.biography}
multiLine
rows={2}
fullWidth
/><br />
<RaisedButton
label={changedStateMessage}
type="submit"
primary
style={styles.buttons}
disabled={!this.state.changed || this.state.saving}
/>
</form>
</div>
</Dialog>
);
}
return (
Expand Down
4 changes: 1 addition & 3 deletions src/components/editor/EditorAuthorListController.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,7 @@ export default class EditorAuthorListController extends FalcorController {
</Tabs>
<Divider />
</Paper>
<Paper style={styles.paper} zDepth={2}>
{this.props.children}
</Paper>
{this.props.children}
<br />
</div>
);
Expand Down

0 comments on commit d30d13e

Please sign in to comment.