delete items from gallery

1 files changed, 39 insertions, 3 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 5f7f653..d978b83 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -70,6 +70,7 @@ export default class MediaGalleryForm extends Component {
       this.handleSettingsChange('multiple', {
         image_order: new_image_order,
         image_lookup: image_lookup,
+        caption_lookup: data.settings.caption_lookup || {},
         thumbnail_lookup: data.settings.thumbnail_lookup || {},
       })
       return this.uploadResizedFiles(files, added_image_order)
@@ -180,6 +181,35 @@ export default class MediaGalleryForm extends Component {
     }
   }
 
+  handleDeleteItem(id) {
+    let { image_order, image_lookup, thumbnail_lookup, display_lookup, caption_lookup } = this.props.data.settings
+    const new_image_order = image_order.filter(n => n !== id)
+    caption_lookup = caption_lookup || {}
+    const image_lookup_upload_id = (image_lookup[id] || {}).id
+    if (image_lookup_upload_id) {
+      actions.upload.destroy({ id: image_lookup_upload_id })
+    }
+    const thumbnail_lookup_upload_id = (thumbnail_lookup[id] || {}).id
+    if (thumbnail_lookup_upload_id) {
+      actions.upload.destroy({ id: thumbnail_lookup_upload_id })
+    }
+    const display_lookup_upload_id = (display_lookup[id] || {}).id
+    if (display_lookup_upload_id) {
+      actions.upload.destroy({ id: display_lookup_upload_id })
+    }
+    delete image_lookup[id]
+    delete thumbnail_lookup[id]
+    delete display_lookup[id]
+    delete caption_lookup[id]
+    this.handleSettingsChange('multiple', {
+      image_order: new_image_order,
+      image_lookup: { ...image_lookup },
+      thumbnail_lookup: { ...thumbnail_lookup },
+      display_lookup: { ...display_lookup },
+      caption_lookup: { ...caption_lookup },
+    })
+  }
+
   render() {
     const { data } = this.props
     const { image_order, image_lookup, thumbnail_lookup, caption_lookup } = data.settings
@@ -206,11 +236,16 @@ export default class MediaGalleryForm extends Component {
                 key={image_id}
                 image={image_lookup[image_id]}
                 thumbnail={thumbnail_lookup[image_id]}
-                onClick={e => {
+                onEdit={e => {
                   e.preventDefault()
                   e.stopPropagation()
                   this.setState({ edit_image_id: image_id })
                 }}
+                onDestroy={e => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  this.handleDeleteItem(image_id)
+                }}
               />
             ))}
           </ReactSortable>
@@ -233,7 +268,7 @@ const initialCaptionData = (caption_lookup, image_id) => {
   return caption_lookup[image_id] || {}
 }
 
-const GalleryListItem = ({ id, key, image, thumbnail, onClick }) => {
+const GalleryListItem = ({ id, key, image, thumbnail, onEdit, onDestroy }) => {
   // console.log(image, thumbnail)
   return (
     <div className='galleryListItem'>
@@ -241,7 +276,8 @@ const GalleryListItem = ({ id, key, image, thumbnail, onClick }) => {
         ? (
           <div>
             <div><img src={thumbnail.url} /></div>
-            <button onClick={onClick}>Edit</button>
+            <button onClick={onEdit}>Edit</button>
+            <button onClick={onDestroy}>x</button>
           </div>
         ) : <Loader />
       }