form to edit captions

1 files changed, 96 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/media/components/media.formGalleryImage.js b/animism-align/frontend/app/views/media/components/media.formGalleryImage.js
new file mode 100644
index 0000000..1dbf1f2
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.formGalleryImage.js
@@ -0,0 +1,96 @@
+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)
+  }
+  componentDidMount() {
+    console.log(this.props)
+    this.setState({
+      loaded: true,
+      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,
+      }
+    })
+  }
+  handleSave() {
+    this.props.onSave(this.props.id, this.state.data)
+  }
+  render() {
+    const { thumbnail } = this.props
+    const { loaded, data } = this.state
+    if (!loaded) return <div />
+    console.log(data)
+    return (
+      <div className='modal visible'>
+        <div className='row'>
+          <div>
+            <img src={thumbnail.url} />
+          </div>
+          <div>
+            <TextInput
+              title="Author"
+              name="author"
+              required
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="Title"
+              name="title"
+              required
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="Date"
+              name="date"
+              required
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <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}
+            />
+            <SubmitButton
+              title={"Save"}
+              onClick={this.handleSubmit}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}