beginning the BIG refactor. moving editor stuff into per-episode hierarchy

1 files changed, 129 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/editor/media/components/media.formGalleryImage.js b/animism-align/frontend/app/views/editor/media/components/media.formGalleryImage.js
new file mode 100644
index 0000000..4d2b99c
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/media/components/media.formGalleryImage.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react'
+
+import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+
+export default class GalleryImageForm extends Component {
+  state = {
+    loaded: false,
+    data: {},
+  }
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleSubmitAndEditNext = this.handleSubmitAndEditNext.bind(this)
+    this.handleCancel = this.handleCancel.bind(this)
+  }
+  componentDidMount() {
+    this.setState({
+      loaded: true,
+      data: { ...this.props.initialData },
+    })
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.id !== prevProps.id) {
+      this.setState({
+        data: { ...this.props.initialData },
+      })
+    }
+  }
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+  handleSelect(name, value) {
+    this.setState({
+      data: {
+        ...this.state.data,
+        [name]: value,
+      }
+    })
+  }
+  handleSubmit(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.props.onSave(this.props.id, this.state.data)
+  }
+  handleSubmitAndEditNext(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.props.onSave(this.props.id, this.state.data, true)
+  }
+  handleCancel(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.props.onSave(null)
+  }
+  render() {
+    const { thumbnail } = this.props
+    const { loaded, data } = this.state
+    if (!loaded) return <div />
+    return (
+      <div className='modal visible'>
+        <div className='row'>
+          <div>
+            <img src={thumbnail.url} />
+          </div>
+          <div>
+            <TextInput
+              title="Author"
+              name="author"
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="Title"
+              name="title"
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="Date"
+              name="date"
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="Medium"
+              name="medium"
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <Checkbox
+              label="Include in checklist"
+              name="in_checklist"
+              checked={data.in_checklist}
+              onChange={this.handleSelect}
+            />
+            <TextArea
+              title="Short caption"
+              name="caption"
+              placeholder="Used on inline galleries"
+              data={data}
+              onChange={this.handleChange}
+            />
+            <TextArea
+              title="Long caption"
+              name="long_caption"
+              placeholder="Used on detail views of the item, suitable for longer texts"
+              data={data}
+              onChange={this.handleChange}
+            />
+            <div className='label'>
+              <span></span>
+              <div className='buttons'>
+                <button onClick={this.handleSubmit}>Save and close</button>
+                <button onClick={this.handleSubmitAndEditNext}>Save and edit next</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}