save and edit next

2 files changed, 38 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js
index 13bb468..5f7f653 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -160,19 +160,30 @@ export default class MediaGalleryForm extends Component {
     }
   }
 
-  handleSaveItem(id, item) {
+  handleSaveItem(id, item, editNext) {
+    if (!id) {
+      this.setState({ edit_image_id: null })
+    }
     const caption_lookup = this.props.data.settings.caption_lookup || {}
     caption_lookup[id] = item
-    console.log(caption_lookup)
     this.handleSettingsChange('caption_lookup', caption_lookup)
-    this.setState({ edit_image_id: null })
+    if (editNext) {
+      const image_order = this.props.data.settings.image_order
+      const index = image_order.indexOf(id) + 1
+      if (index < image_order.length) {
+        this.setState({ edit_image_id: image_order[index] })
+      } else {
+        this.setState({ edit_image_id: null })
+      }
+    } else {
+      this.setState({ edit_image_id: null })
+    }
   }
 
   render() {
     const { data } = this.props
     const { image_order, image_lookup, thumbnail_lookup, caption_lookup } = data.settings
     const { loading, edit_image_id } = this.state
-    console.log('render', caption_lookup)
     // console.log(data)
     return (
       <div className='galleryForm'>
diff --git a/animism-align/frontend/app/views/media/components/media.formGalleryImage.js b/animism-align/frontend/app/views/media/components/media.formGalleryImage.js
index 905062f..c01650f 100644
--- a/animism-align/frontend/app/views/media/components/media.formGalleryImage.js
+++ b/animism-align/frontend/app/views/media/components/media.formGalleryImage.js
@@ -12,14 +12,22 @@ export default class GalleryImageForm extends Component {
     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() {
-    console.log(this.props)
     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)
@@ -37,11 +45,16 @@ export default class GalleryImageForm extends Component {
     e.stopPropagation()
     this.props.onSave(this.props.id, this.state.data)
   }
+  handleSubmitAndEditNext(e) {
+    this.props.onSave(this.props.id, this.state.data, true)
+  }
+  handleCancel(e) {
+    this.props.onSave(null)
+  }
   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'>
@@ -84,10 +97,14 @@ export default class GalleryImageForm extends Component {
               data={data}
               onChange={this.handleChange}
             />
-            <SubmitButton
-              title={"Save"}
-              onClick={this.handleSubmit}
-            />
+            <div className='label'>
+              <span></span>
+              <div className='buttons'>
+                <button onClick={this.handleSubmit}>Save</button>
+                <button onClick={this.handleCancel}>Cancel</button>
+                <button onClick={this.handleSubmitAndEditNext}>Save and edit next</button>
+              </div>
+            </div>
           </div>
         </div>
       </div>