persist sort order

3 files changed, 35 insertions, 14 deletions

diff --git a/cli/app/controllers/page_controller.py b/cli/app/controllers/page_controller.py
index 3da2068..587c61d 100644
--- a/cli/app/controllers/page_controller.py
+++ b/cli/app/controllers/page_controller.py
@@ -28,8 +28,9 @@ class PageView(CrudView):
   def on_destroy(self, session, item):
     session.query(Tile).filter(Tile.page_id == item.id).delete(synchronize_session=False)
 
-  @route('/sort/<int:page_id>', methods=['POST'])
+  @route('/<int:page_id>/sort/', methods=['POST'])
   def set_sort_order(self, page_id):
+    session = Session()
     page = session.query(Page).get(page_id)
     if not page:
       session.close()
@@ -38,7 +39,11 @@ class PageView(CrudView):
         'error': 'page not found'
       })
 
-    print(request.json)
+    for i, tile_id in enumerate(request.json):
+      tile = session.query(Tile).get(tile_id)
+      tile.sort_order = i
+      session.add(tile)
+    session.commit()
 
     result = {
       'status': 'ok',
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
index 9d6ae05..d6e5366 100644
--- a/frontend/views/page/components/tile.list.js
+++ b/frontend/views/page/components/tile.list.js
@@ -36,17 +36,13 @@ class TileList extends Component {
     }
   }
 
-  componentWillUnmount() {
-    console.log('will unmount', this.state)
-  }
-
   handleChoose(e) {
     const { lastTargetId, lastTimeStamp } = this.state
     if (lastTimeStamp
       && parseInt(e.item.dataset.id) === lastTargetId
       && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
       ) {
-      console.log('selected', lastTargetId)
+      // console.log('selected', lastTargetId)
       this.didDoubleClick = true
       this.props.pageActions.showEditTileForm(lastTargetId)
     } else {
diff --git a/frontend/views/page/page.actions.js b/frontend/views/page/page.actions.js
index 255275f..42bd232 100644
--- a/frontend/views/page/page.actions.js
+++ b/frontend/views/page/page.actions.js
@@ -2,6 +2,13 @@ import * as types from '../../types'
 import { store } from '../../store'
 import actions from '../../actions'
 import { default as debounce } from 'lodash.debounce'
+import { post } from '../../util'
+
+const url = {
+  sortTiles: (id) => '/api/v1/page/' + id + '/sort',
+}
+
+// Add tile form
 
 export const showAddTileForm = () => dispatch => {
   dispatch({ type: types.page.show_add_tile_form })
@@ -15,6 +22,8 @@ export const toggleAddTileForm = () => dispatch => {
   dispatch({ type: types.page.toggle_add_tile_form })
 }
 
+// Edit tile form
+
 export const showEditTileForm = tile_id => dispatch => {
   dispatch({ type: types.page.show_edit_tile_form, tile_id })
 }
@@ -27,6 +36,8 @@ export const toggleEditTileForm = () => dispatch => {
   dispatch({ type: types.page.toggle_edit_tile_form })
 }
 
+// Tile list
+
 export const showTileList = () => dispatch => {
   dispatch({ type: types.page.show_tile_list })
 }
@@ -39,10 +50,14 @@ export const toggleTileList = () => dispatch => {
   dispatch({ type: types.page.toggle_tile_list })
 }
 
+// Update local page tile state when we change it
+
 export const updatePageTile = tile => dispatch => {
   dispatch({ type: types.page.update_page_tile, tile })
 }
 
+// Fetch graph/page when loading a new URL
+
 export const showGraphAndPageIfUnloaded = ({ graph_name, page_name }) => dispatch => (
   new Promise((resolve, reject) => {
     showGraphIfUnloaded({ graph_name })(dispatch)
@@ -67,9 +82,14 @@ export const showGraphIfUnloaded = ({ graph_name }) => dispatch => (
   })
 )
 
+// Sorting tiles in the tile list
+
 export const setTileSortOrder = (tiles) => dispatch => {
+  let oldTiles = store.getState().page.show.res.tiles
+  if (!isSameTileOrder(tiles, oldTiles)) {
+    updateTileSortOrder(tiles, dispatch)
+  }
   dispatch({ type: types.page.set_tile_sort_order, tiles })
-  updateTileSortOrder(tiles)
 }
 
 export const isSameTileOrder = (newTiles, oldTiles) => {
@@ -81,10 +101,10 @@ export const isSameTileOrder = (newTiles, oldTiles) => {
   return true
 }
 
-export const updateTileSortOrder = debounce((tiles) => {
-  let oldTiles = store.getState().page.show.res.tiles
-  if (isSameTileOrder(tiles, oldTiles)) return
-  console.log('update tile sort order')
-  const newOrder = tiles.map((tile, i) => ({ id: tile.id, sort_order: i }))
-  console.log(newOrder)
+export const updateTileSortOrder = debounce((tiles, dispatch) => {
+  const { page_id } = tiles[0]
+  const order = tiles.map(tile => (tile.id))
+  console.log(page_id, order)
+  post(dispatch, types.page, 'sort', url.sortTiles(page_id), order)
 }, 1000)
+