1 files changed, 45 insertions, 11 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 f785b40..fb4f73a 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { ReactSortable } from "react-sortablejs"
 
-import { session } from 'app/session'
 import actions from 'app/actions'
 import { capitalize, preloadImage, simpleArraysEqual } from 'app/utils'
 import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from 'app/constants'
@@ -10,9 +9,12 @@ import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from
 import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
 import { renderThumbnail } from 'app/common/upload.helpers'
 
+import GalleryImageForm from './media.formGalleryImage'
+
 export default class MediaGalleryForm extends Component {
   state = {
     loading: false,
+    edit_image_id: null,
   }
 
   constructor(props) {
@@ -22,6 +24,7 @@ export default class MediaGalleryForm extends Component {
     this.handleSettingsChange = this.handleSettingsChange.bind(this)
     this.handleUpload = this.handleUpload.bind(this)
     this.uploadSize = this.uploadSize.bind(this)
+    this.handleSaveItem = this.handleSaveItem.bind(this)
   }
 
   handleChange(e) {
@@ -158,9 +161,17 @@ export default class MediaGalleryForm extends Component {
     }
   }
 
+  handleSaveItem(id, item) {
+    const caption_lookup = data.settings.caption_lookup || {}
+    caption_lookup[id] = item
+    this.handleSettingsChange('caption_lookup', caption_lookup)
+    this.setState({ edit_image_id: null })
+  }
+
   render() {
     const { data } = this.props
-    const { image_order, image_lookup, thumbnail_lookup } = data.settings
+    const { image_order, image_lookup, thumbnail_lookup, caption_lookup } = data.settings
+    const { loading, edit_image_id } = this.state
     // console.log(data)
     return (
       <div className='galleryForm'>
@@ -170,38 +181,61 @@ export default class MediaGalleryForm extends Component {
           mime="*/*"
           onChange={this.handleUpload}
         />
-        {this.state.loading && <Loader />}
+        {loading && <Loader />}
         {image_order && image_order.length &&
           <ReactSortable
+            className='galleryList'
             list={image_order.map(id => ({ id }))}
             setList={new_order => this.handleOrderChanged(new_order)}
           >
             {image_order.map(image_id => (
-              <GalleryImageForm
+              <GalleryListItem
                 id={image_id}
                 key={image_id}
                 image={image_lookup[image_id]}
                 thumbnail={thumbnail_lookup[image_id]}
+                onClick={e => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  this.setState({ edit_image_id: image_id })
+                }}
               />
             ))}
           </ReactSortable>
         }
+        {edit_image_id &&
+          <GalleryImageForm
+            id={edit_image_id}
+            initalData={initialCaptionData(caption_lookup, edit_image_id)}
+            thumbnail={thumbnail_lookup[edit_image_id]}
+            onSave={this.handleSaveItem}
+          />
+        }
       </div>
     )
   }
 }
 
-const GalleryImageForm = ({ id, key, image, thumbnail }) => {
+const initialCaptionData = (caption_lookup, image_id) => {
+  caption_lookup = caption_lookup || {}
+  const initialData = caption_lookup[image_id] || {}
+  return {
+    ...initialData,
+  }
+}
+
+const GalleryListItem = ({ id, key, image, thumbnail, onClick }) => {
   // console.log(image, thumbnail)
   return (
-    <div>
+    <div className='galleryListItem'>
       {thumbnail
-        ? <img src={thumbnail.url} />
-        : <Loader />
+        ? (
+          <div>
+            <div><img src={thumbnail.url} /></div>
+            <button onClick={onClick}>Edit</button>
+          </div>
+        ) : <Loader />
       }
     </div>
   )
 }
-
-/*
-*/