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

---
 .../app/views/media/components/media.form.js       |  2 +-
 .../views/media/components/media.formGallery.js    | 81 ++++++++++------------
 .../app/views/media/containers/media.index.js      | 17 +++++
 animism-align/package-lock.json                    |  6 +-
 4 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/animism-align/frontend/app/views/media/components/media.form.js b/animism-align/frontend/app/views/media/components/media.form.js
index 60b8736..2d21838 100644
--- a/animism-align/frontend/app/views/media/components/media.form.js
+++ b/animism-align/frontend/app/views/media/components/media.form.js
@@ -259,7 +259,7 @@ export default class MediaForm extends Component {
             onChange={this.handleSettingsChangeEvent}
           />
           <Checkbox
-            label="Hide in list of works"
+            label="Hide in checklist"
             name="hide_in_bibliography"
             checked={data.settings.hide_in_bibliography}
             onChange={this.handleSettingsChange}
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 />
+  )
+}
diff --git a/animism-align/frontend/app/views/media/containers/media.index.js b/animism-align/frontend/app/views/media/containers/media.index.js
index 7935563..2b80362 100644
--- a/animism-align/frontend/app/views/media/containers/media.index.js
+++ b/animism-align/frontend/app/views/media/containers/media.index.js
@@ -74,6 +74,8 @@ class MediaIndex extends Component {
           <div className={'results ' + options.thumbnailSize}>
             <h2>Images</h2>
             {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)}
+            <h2>Galleries</h2>
+            {order.filter(id => lookup[id].type === 'gallery').map(id => <GalleryItem key={id} data={lookup[id]} />)}
             <h2>Video</h2>
             {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)}
             <h2>Files</h2>
@@ -106,6 +108,21 @@ const MediaItem = ({ data }) => {
   )
 }
 
+const GalleryItem = ({ data }) => {
+  // console.log(data)
+  return (
+    <div className='cell'>
+      <div className='meta center'>
+        <Link to={"/media/" + data.id + "/edit/"}>
+          <div>
+            <i>{data.title}</i><br />
+          </div>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
 const FileItem = ({ data }) => {
   // console.log(data)
   return (
diff --git a/animism-align/package-lock.json b/animism-align/package-lock.json
index 4124245..3df35f4 100644
--- a/animism-align/package-lock.json
+++ b/animism-align/package-lock.json
@@ -3302,9 +3302,9 @@
       }
     },
     "@types/sortablejs": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.4.tgz",
-      "integrity": "sha512-iXdJUEM09Hc0RacStDvkEi5BBdHuuwdys0L5/GtsRiEht69Df4hapA3FwFIeXn2STicqJjBAkowyD1OA3jGgwA=="
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.5.tgz",
+      "integrity": "sha512-U/i9rGkCwmgmsa0UzHlGnQtL4y57tjywjp6j3GbA64MLaGO+sEBLVhBrQokWfgzeV2T6hQRYC4dZtXkl6dCMfw=="
     },
     "@types/vimeo__player": {
       "version": "2.9.0",
-- 
cgit v1.2.3-70-g09d2