From ac43e33512a8e70ba34574de60cba0f5f7a03490 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 10 Aug 2020 18:45:26 +0200
Subject: sortable

---
 .../views/media/components/media.formGallery.js    | 81 ++++++++++------------
 1 file changed, 35 insertions(+), 46 deletions(-)

(limited to 'animism-align/frontend/app/views/media/components/media.formGallery.js')

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 2c1fa49..f5a0bf3 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -1,11 +1,12 @@
 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 } from 'app/utils'
 
-import { TextInput, LabelDescription, UploadImage, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
 import { renderThumbnail } from 'app/common/upload.helpers'
 
 const DISPLAY_SIZE = 2000
@@ -28,14 +29,6 @@ export default class MediaGalleryForm extends Component {
     this.uploadTaggedSize = this.uploadTaggedSize.bind(this)
   }
 
-  componentDidMount() {
-    // this.setState({ })
-    if (this.props.data.settings.fullsize) {
-      preloadImage(this.props.data.settings.fullsize.url)
-      .then(img => this.setState({ img }))
-    }
-  }
-
   handleChange(e) {
     const { name, value } = e.target
     this.handleSelect(name, value)
@@ -49,22 +42,8 @@ export default class MediaGalleryForm extends Component {
     this.props.onSettingsChange(name, value)
   }
 
-  handleUpload({ file, img, canvas, blob }) {
-    // sizes: fullsize, display, thumbnail
-    this.replaceTaggedSize(file, 'fullsize')
-    .then(data => {
-      this.setState({ img })
-      this.props.onSettingsChange('multiple', {
-        fullsize: data,
-        crop: {},
-      })
-      return this.replaceTaggedSize(blob, 'display', file.name)
-    }).then(data => {
-      this.props.onSettingsChange('multiple', {
-        display: data,
-      })
-      this.uploadThumbnail(img)
-    })
+  handleUpload(files) {
+    // this.uploadThumbnail(img)
   }
 
   uploadThumbnail(img) {
@@ -115,32 +94,42 @@ export default class MediaGalleryForm extends Component {
     })
   }
 
+  handleOrderChanged(image_order) {
+    this.handleSettingsChange('image_order', image_order)
+  }
+
   render() {
     const { data } = this.props
+    const { image_order, image_lookup, thumbnail_lookup } = data.settings
     // console.log(data)
     return (
-      <div className='imageForm'>
-        {!data.url &&
-          <label className={'text fileInput'}>
-            <span>{"Upload image"}</span>
-            <div className="row">
-              <button>
-                {"Choose image"}
-              </button>
-              <FileInputField
-                title="Upload images"
-                mime="*/*"
-                onChange={this.handleUpload}
-              />
-            </div>
-          </label>
-        }
-        {data.settings.fullsize &&
-          <div>
-            {data.settings.fullsize.url}
-          </div>
-        }
+      <div className='galleryForm'>
+        <FileInputField
+          multiple
+          title="Upload images"
+          mime="*/*"
+          onChange={this.handleUpload}
+        />
+        <ReactSortable
+          list={image_order || []}
+          setList={new_order => this.handleOrderChanged(new_order)}
+        >
+          {(image_order || []).map(image_id => {
+            <GalleryImageForm
+              id={image_id}
+              key={image_id}
+              image={image_lookup[image_id]}
+              thumbnail={image_lookup[image_id]}
+            />
+          })}
+        </ReactSortable>
       </div>
     )
   }
 }
+
+const GalleryImageForm =({ id, key, image, thumbnail }) => {
+  return (
+    <div />
+  )
+}
-- 
cgit v1.2.3-70-g09d2