tile list. drag items to sort them

11 files changed, 189 insertions, 6 deletions

diff --git a/frontend/store.js b/frontend/store.js
index 40c8d9c..9af2b96 100644
--- a/frontend/store.js
+++ b/frontend/store.js
@@ -1,6 +1,7 @@
 import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import { createBrowserHistory } from 'history'
+import createDebounce from 'redux-debounced';
 import thunk from 'redux-thunk'
 // import { login } from './util'
 
@@ -33,6 +34,7 @@ const configureStore = (initialState = {}, history) => {
     composeEnhancers(
       applyMiddleware(
         thunk,
+        createDebounce(),
         routerMiddleware(history)
       ),
     ),
diff --git a/frontend/types.js b/frontend/types.js
index 98c18cb..10fb411 100644
--- a/frontend/types.js
+++ b/frontend/types.js
@@ -12,6 +12,8 @@ export const page = crud_type('page', [
   'show_add_tile_form', 'hide_add_tile_form', 'toggle_add_tile_form',
   'show_edit_tile_form', 'hide_edit_tile_form', 'toggle_edit_tile_form',
   'update_page_tile',
+  'set_tile_sort_order', 'update_tile_sort_order',
+  'show_tile_list', 'hide_tile_list', 'toggle_tile_list',
 ])
 
 export const tile = crud_type('tile', [
diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
index d6a0ff0..60a4c81 100644
--- a/frontend/views/graph/graph.css
+++ b/frontend/views/graph/graph.css
@@ -17,8 +17,11 @@
 
 .sidebar {
   position: absolute;
-  top: 1rem;
-  right: 1rem;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  overflow: auto;
+  max-height: 100%;
   z-index: 2000;
 }
 .box {
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)}
       />
     )
diff --git a/frontend/views/page/page.actions.js b/frontend/views/page/page.actions.js
index bd38683..dd94936 100644
--- a/frontend/views/page/page.actions.js
+++ b/frontend/views/page/page.actions.js
@@ -26,6 +26,18 @@ export const toggleEditTileForm = () => dispatch => {
   dispatch({ type: types.page.toggle_edit_tile_form })
 }
 
+export const showTileList = () => dispatch => {
+  dispatch({ type: types.page.show_tile_list })
+}
+
+export const hideTileList = () => dispatch => {
+  dispatch({ type: types.page.hide_tile_list })
+}
+
+export const toggleTileList = () => dispatch => {
+  dispatch({ type: types.page.toggle_tile_list })
+}
+
 export const updatePageTile = tile => dispatch => {
   dispatch({ type: types.page.update_page_tile, tile })
 }
@@ -52,4 +64,14 @@ export const showGraphIfUnloaded = ({ graph_name }) => dispatch => (
     .then(resolve)
     .catch(reject)
   })
-)
\ No newline at end of file
+)
+
+export const setTileSortOrder = tiles => dispatch => {
+  dispatch({ type: types.page.set_tile_sort_order, tiles })
+  updateTileSortOrder(tiles)(dispatch)
+}
+
+export const updateTileSortOrder = tiles => dispatch => {
+
+}
+
diff --git a/frontend/views/page/page.container.js b/frontend/views/page/page.container.js
index 0c366ab..5da41d6 100644
--- a/frontend/views/page/page.container.js
+++ b/frontend/views/page/page.container.js
@@ -14,6 +14,7 @@ import * as pageActions from './page.actions'
 import PageEdit from '../graph/components/page.edit'
 import TileNew from './components/tile.new'
 import TileEdit from './components/tile.edit'
+import TileList from './components/tile.list'
 
 import PageHeader from './components/page.header'
 import PageEditor from './components/page.editor'
@@ -72,6 +73,7 @@ class PageContainer extends Component {
             {this.props.graph.editor.editingPage && <PageEdit />}
             {this.props.page.editor.addingTile && <TileNew />}
             {this.props.page.editor.editingTile && <TileEdit />}
+            {this.props.page.editor.tileList && <TileList />}
           </div>
         </div>
       </div>
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 67e35df..d828b82 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -27,3 +27,32 @@
 .tile.top_right { top: 0; right: 0; }
 .tile.center_right { top: 50%; right: 0; }
 .tile.bottom_right { bottom: 0; right: 0; }
+
+.tileList .row {
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 2.5rem;
+  margin-bottom: 0.5rem;
+  box-shadow: 4px 4px 6px rgba(0,0,0,0.5);
+}
+.tileList .row:nth-child(odd) {
+  background: rgba(0,0,0,0.2);
+}
+.tileList .row:nth-child(even) {
+  background: rgba(255,255,255,0.2);
+}
+.tileList span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  padding: 0.25rem;
+}
+.tileList .thumb {
+  width: 100%;
+  height: 2.5rem;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
\ No newline at end of file
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
index 2b0d102..063e22d 100644
--- a/frontend/views/page/page.reducer.js
+++ b/frontend/views/page/page.reducer.js
@@ -7,6 +7,7 @@ const initialState = crudState('page', {
   editor: {
     addingTile: false,
     editingTile: false,
+    tileList: false,
   },
   options: {
   }
@@ -49,6 +50,7 @@ export default function pageReducer(state = initialState, action) {
         }
       }
 
+    // add tile UI
     case types.page.show_add_tile_form:
       return {
         ...state,
@@ -77,6 +79,7 @@ export default function pageReducer(state = initialState, action) {
         }
       }
 
+    // edit tile UI
     case types.page.show_edit_tile_form:
       return {
         ...state,
@@ -96,6 +99,49 @@ export default function pageReducer(state = initialState, action) {
         }
       }
 
+    // tile list UI
+    case types.page.show_tile_list:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: false,
+          editingTile: false,
+          tileList: true,
+        }
+      }
+
+    case types.page.hide_tile_list:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          tileList: false,
+        }
+      }
+
+    case types.page.toggle_tile_list:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          tileList: !state.editor.tileList,
+        }
+      }
+
+    case types.page.set_tile_sort_order:
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...state.res,
+            tiles: action.tiles,
+          }
+        }
+      }
+
+
     default:
       return state
   }