From 434e53dea597f61ad59e14012f528ceac58ead85 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 6 Jun 2020 16:30:51 +0200
Subject: tile list. drag items to sort them

---
 frontend/views/page/components/page.header.js |  1 +
 frontend/views/page/components/tile.form.js   |  8 +--
 frontend/views/page/components/tile.list.js   | 73 +++++++++++++++++++++++++++
 frontend/views/page/components/tile.new.js    |  1 +
 4 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 frontend/views/page/components/tile.list.js

(limited to 'frontend/views/page/components')

diff --git a/frontend/views/page/components/page.header.js b/frontend/views/page/components/page.header.js
index 4170f8b..2898f86 100644
--- a/frontend/views/page/components/page.header.js
+++ b/frontend/views/page/components/page.header.js
@@ -13,6 +13,7 @@ function PageHeader(props) {
       </div>
       <div>
         <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
+        <button onClick={() => props.pageActions.toggleTileList()}>+ Sort tiles</button>
       </div>
     </header>
   )
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 31d49e3..6cf9474 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -77,7 +77,7 @@ class TileForm extends Component {
   }
 
   componentDidMount() {
-    const { graph, page, isNew, initialData } = this.props
+    const { graph, page, isNew, initialData, sortOrder } = this.props
     const title = isNew ? 'new tile' : 'editing tile'
     const submitTitle = isNew ? "Create Tile" : "Save Changes"
     this.setState({
@@ -86,11 +86,13 @@ class TileForm extends Component {
       errorFields: new Set([]),
     })
     if (isNew) {
-      this.props.tileActions.updateTemporaryTile(newImage({
+      const newTile = newImage({
         id: "new",
         graph_id: graph.show.res.id,
         page_id: page.show.res.id,
-      }))
+        sort_order: sortOrder,
+      })
+      this.props.tileActions.updateTemporaryTile(newTile)
     } else {
       this.props.tileActions.updateTemporaryTile({ ...initialData })
     }
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
new file mode 100644
index 0000000..232516d
--- /dev/null
+++ b/frontend/views/page/components/tile.list.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { ReactSortable } from "react-sortablejs"
+
+// import actions from '../../../actions'
+import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from '../../page/page.actions'
+
+class TileList extends Component {
+  state = {
+    tiles: [],
+  }
+
+  componentDidMount(prevProps) {
+    const { tiles } = this.props.page.show.res
+    this.setState({ tiles })
+    // this.props.pageActions.setTileSortOrder(list)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { tiles } = this.state
+    const { tiles: oldTiles } = prevState
+    // const { tiles } = this.props.page.show.res
+    // const { tiles: oldTiles } = prevProps.page.show.res
+    if (tiles !== oldTiles) {
+      this.props.pageActions.setTileSortOrder(tiles)
+    }
+  }
+
+  render() {
+    const { tiles } = this.state
+    return (
+      <div className='box tileList'>
+        <ReactSortable
+          list={tiles}
+          setList={newTiles => this.setState({ tiles: newTiles })}
+        >
+          {tiles.map(tile => (
+            tile.type === 'image'
+            ? <TileListImage key={tile.id} tile={tile} />
+            : <TileListText key={tile.id} tile={tile} />
+          ))}
+        </ReactSortable>
+      </div>
+    )
+  }
+}
+
+const TileListImage = ({ tile }) => (
+  <div className='row'>
+    <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
+  </div>
+)
+
+const TileListText = ({ tile }) => (
+  <div className='row'>
+    <span className='snippet'>{tile.settings.content.substr(0, 100)}</span>
+  </div>
+)
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileList)
diff --git a/frontend/views/page/components/tile.new.js b/frontend/views/page/components/tile.new.js
index 3c97c31..c5ebeab 100644
--- a/frontend/views/page/components/tile.new.js
+++ b/frontend/views/page/components/tile.new.js
@@ -35,6 +35,7 @@ class TileNew extends Component {
         graph={this.props.graph.show.res}
         page={this.props.page.show.res}
         initialData={null}
+        sortOrder={this.props.page.show.res.tiles.length}
         onSubmit={this.handleSubmit.bind(this)}
       />
     )
-- 
cgit v1.2.3-70-g09d2