diff options
Diffstat (limited to 'animism-align/frontend/app/views/episode')
6 files changed, 94 insertions, 16 deletions
diff --git a/animism-align/frontend/app/views/episode/components/episode.form.js b/animism-align/frontend/app/views/episode/components/episode.form.js index 63d55e7..c60d3b2 100644 --- a/animism-align/frontend/app/views/episode/components/episode.form.js +++ b/animism-align/frontend/app/views/episode/components/episode.form.js @@ -20,6 +20,7 @@ const newEpisode = () => ({ export default class EpisodeForm extends Component { state = { + project_id: 0, title: "", submitTitle: "", data: { ...newEpisode() }, @@ -37,8 +38,10 @@ export default class EpisodeForm extends Component { } componentDidMount() { - const { data, isNew } = this.props - const title = isNew ? 'New episode' : 'Editing ' + data.title + const { data, isNew, project } = this.props + const title = isNew + ? 'Add episode to project ' + project.title + : 'Editing Episode ' + data.episode_number + ": " + data.title const submitTitle = isNew ? "Add Episode" : "Save Changes" this.setState({ title, @@ -112,8 +115,8 @@ export default class EpisodeForm extends Component { } const { isNew, onSubmit } = this.props const { data } = this.state - const requiredKeys = "episode_number release_date".split(" ") - const validKeys = "title episode_number release_date is_live settings".split(" ") + const requiredKeys = "project_id episode_number release_date".split(" ") + const validKeys = "project_id title episode_number release_date is_live settings".split(" ") const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) if (!data.title) { data.title = "TBD" @@ -141,10 +144,8 @@ export default class EpisodeForm extends Component { <div className='form'> <h1>{title}</h1> <form onSubmit={this.handleSubmit}> - <SubmitButton - title={submitTitle} - onClick={this.handleSubmit} - /> + <h2>Episode information</h2> + <TextInput title="Title" name="title" @@ -176,6 +177,37 @@ export default class EpisodeForm extends Component { onChange={this.handleSelect} /> + <h2>Build configuration</h2> + + <TextInput + title="HTML title" + name="page_title" + placeholder="HTML title tag" + data={data.settings} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <TextArea + title="Page description" + name="page_desc" + placeholder="Social media / search engine snippet" + data={data.settings} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <TextInput + title="Build folder" + name="url_path" + placeholder="Folder to build into, e.g. episode1" + data={data.settings} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <h2>Credits</h2> + <TextArea title="Artists" name="artists" diff --git a/animism-align/frontend/app/views/episode/components/episode.menu.js b/animism-align/frontend/app/views/episode/components/episode.menu.js index 445084b..4b75ec1 100644 --- a/animism-align/frontend/app/views/episode/components/episode.menu.js +++ b/animism-align/frontend/app/views/episode/components/episode.menu.js @@ -28,7 +28,7 @@ const EpisodeIndexMenu = () => ([ ]) const EpisodeShowMenu = connect(mapStateToProps)((props) => ([ - <MenuButton key='back' name="back" href="/episode/" />, + <MenuButton key='back' name="back" href="/" />, <MenuButton key='edit' name="edit" href={"/episode/" + props.match.params.id + "/edit/"} />, <MenuButton key='delete' name="delete" onClick={() => { const { res: episode } = props.episode.show @@ -41,11 +41,11 @@ const EpisodeShowMenu = connect(mapStateToProps)((props) => ([ ])) const EpisodeNewMenu = (props) => ([ - <MenuButton key='back' name="back" href="/episode/" />, + <MenuButton key='back' name="back" href="/" />, ]) const EpisodeEditMenu = connect(mapStateToProps)((props) => ([ - <MenuButton key='back' name="back" href="/episode/" />, + <MenuButton key='back' name="back" href="/" />, <MenuButton key='delete' name="delete" onClick={() => { const { res: episode } = props.episode.show if (confirm("Really delete this episode?")) { diff --git a/animism-align/frontend/app/views/episode/containers/episode.edit.js b/animism-align/frontend/app/views/episode/containers/episode.edit.js index 4d7e270..8ba16ae 100644 --- a/animism-align/frontend/app/views/episode/containers/episode.edit.js +++ b/animism-align/frontend/app/views/episode/containers/episode.edit.js @@ -10,9 +10,25 @@ import EpisodeForm from '../components/episode.form' import EpisodeMenu from '../components/episode.menu' class EpisodeEdit extends Component { + state = { + project: {}, + } componentDidMount() { + this.ready() + } + componentDidUpdate(prevProps) { + if (this.props.project.lookup !== prevProps.project.lookup) { + this.ready() + } + } + ready() { + if (!this.props.project.lookup) return console.log(this.props.match.params.id) actions.episode.show(this.props.match.params.id) + .then(episode => { + const project = this.props.project.lookup[episode.project_id] + this.setState({ project }) + }) } handleSubmit(data) { @@ -20,7 +36,7 @@ class EpisodeEdit extends Component { .then(response => { // response console.log(response) - history.push('/episode/') + history.push('/') }) } @@ -38,6 +54,7 @@ class EpisodeEdit extends Component { <EpisodeMenu episodeActions={this.props.episodeActions} /> <EpisodeForm data={show.res} + project={this.state.project} onSubmit={this.handleSubmit.bind(this)} /> </div> @@ -47,6 +64,7 @@ class EpisodeEdit extends Component { const mapStateToProps = state => ({ episode: state.episode, + project: state.episode.index, }) export default connect(mapStateToProps)(EpisodeEdit) diff --git a/animism-align/frontend/app/views/episode/containers/episode.new.js b/animism-align/frontend/app/views/episode/containers/episode.new.js index 42e9837..2ff279b 100644 --- a/animism-align/frontend/app/views/episode/containers/episode.new.js +++ b/animism-align/frontend/app/views/episode/containers/episode.new.js @@ -12,10 +12,26 @@ class EpisodeNew extends Component { state = { loading: true, initialData: {}, + project: {}, } - componentDidMount() { - this.setState({ loading: false }) + this.ready() + } + componentDidUpdate(prevProps) { + if (this.props.project.lookup !== prevProps.project.lookup) { + this.ready() + } + } + ready() { + if (!this.props.project.lookup) return + const { project_id } = this.props.match.params + const project = this.props.project.lookup[project_id] + this.setState({ + loading: false, + initialData: { project_id }, + project, + }) + console.log(this.props.match.params.project_id) } handleSubmit(data) { @@ -24,7 +40,7 @@ class EpisodeNew extends Component { .then(res => { console.log(res) if (res.res && res.res.id) { - history.push('/episode/') + history.push('/') } }) .catch(err => { @@ -44,6 +60,7 @@ class EpisodeNew extends Component { <EpisodeForm isNew data={this.state.initialData} + project={this.state.project} onSubmit={this.handleSubmit.bind(this)} /> </div> @@ -53,6 +70,7 @@ class EpisodeNew extends Component { const mapStateToProps = state => ({ episode: state.episode, + project: state.project.index, }) const mapDispatchToProps = dispatch => ({ diff --git a/animism-align/frontend/app/views/episode/episode.container.js b/animism-align/frontend/app/views/episode/episode.container.js index 62363ec..9cd70f8 100644 --- a/animism-align/frontend/app/views/episode/episode.container.js +++ b/animism-align/frontend/app/views/episode/episode.container.js @@ -13,7 +13,6 @@ class Container extends Component { return ( <div className='episodeContainer'> <Route exact path='/episode/:id/edit/' component={EpisodeEdit} /> - <Route exact path='/episode/new/' component={EpisodeNew} /> <Route exact path='/episode/' component={EpisodeIndex} /> </div> ) @@ -24,3 +23,8 @@ const mapStateToProps = state => ({ }) export default connect(mapStateToProps)(Container) + +/* + // episodes are now added via the project + <Route exact path='/episode/new/' component={EpisodeNew} /> +*/
\ No newline at end of file diff --git a/animism-align/frontend/app/views/episode/episode.css b/animism-align/frontend/app/views/episode/episode.css index e0747ab..96806da 100644 --- a/animism-align/frontend/app/views/episode/episode.css +++ b/animism-align/frontend/app/views/episode/episode.css @@ -7,3 +7,9 @@ .episode-index { margin-top: 1rem; } + +.episodeContainer .formContainer h2 { + color: #888; + margin-top: 1.5rem; + font-style: italic; +} |