sorting elements better... loading item on dblclick

5 files changed, 35 insertions, 6 deletions

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 81dd08c..c13e4ed 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -178,6 +178,7 @@ class PageEditor extends Component {
               bounds={this.state.bounds}
               box={currentTile && tile.id === currentTile.id && currentBox}
               onMouseDown={e => this.handleMouseDown(e, tile)}
+              onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
             />
           )
         })}
@@ -195,7 +196,7 @@ class PageEditor extends Component {
   }
 }
 
-const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
+const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
   // console.log(tile)
   const { width, height } = tile.settings
   const style = {
@@ -230,7 +231,12 @@ const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
       break
   }
   return (
-    <div className={className} onMouseDown={onMouseDown} style={style}>
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
       {content}
     </div>
   )
diff --git a/frontend/views/page/components/tile.edit.js b/frontend/views/page/components/tile.edit.js
index cb339c9..2f6dad7 100644
--- a/frontend/views/page/components/tile.edit.js
+++ b/frontend/views/page/components/tile.edit.js
@@ -16,18 +16,27 @@ class TileEdit extends Component {
   state = {
     tile: null
   }
+
   componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.page.editor.currentEditTileId !== this.props.page.editor.currentEditTileId) {
+      this.load()
+    }
+  }
+
+  load() {
     const { currentEditTileId } = this.props.page.editor
     const tile = this.props.page.show.res.tiles.filter(tile => tile.id === currentEditTileId)[0]
     console.log('edit', currentEditTileId)
     this.setState({ tile })
-    // actions.tile.show(this.props.match.params.id)
   }
 
   handleSubmit(data) {
     actions.tile.update(data)
       .then(response => {
-        // response
         // console.log(response)
         if (response.status === 'ok') {
           this.props.pageActions.updatePageTile(response.res)
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 6cf9474..c5f5c0b 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -98,6 +98,12 @@ class TileForm extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.initialData !== prevProps.initialData) {
+      this.props.tileActions.updateTemporaryTile({ ...this.props.initialData })
+    }
+  }
+
   handleChange(e) {
     const { name, value } = e.target
     this.clearErrorField(name)
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
index 96025f7..9d6ae05 100644
--- a/frontend/views/page/components/tile.list.js
+++ b/frontend/views/page/components/tile.list.js
@@ -23,13 +23,13 @@ class TileList extends Component {
 
   componentDidMount(prevProps) {
     const { tiles } = this.props.page.show.res
-    this.setState({ tiles })
+    this.setState({ tiles: tiles.slice(0).reverse() })
   }
 
   componentDidUpdate(prevProps, prevState) {
     const { tiles, didDoubleClick } = this.state
     if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
-      this.props.pageActions.setTileSortOrder(tiles)
+      this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
     }
     if (didDoubleClick) {
       this.setState({ didDoubleClick: false })
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 7794254..690cb3e 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -58,4 +58,12 @@
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
+}
+.tileList .row.sortable-chosen {
+  background-color: #000;
+}
+.tileList .row.sortable-ghost {
+}
+.tileList .row.sortable-drag {
+  opacity: 0.6;
 }
\ No newline at end of file