Grid list doesn't update tiles order change

[blmundie]

When the tiles change order the grid list doesn't update. I confirmed the order was changing in the dom, but the grid list wasn't updating. For a work around I gave tiles an orderNumber property and sorted them in the grid list. I'm happy to do a pull request if you are interested.

[Subtletree]

Good find!

Can think of 2 solutions, either's good to me:

A) Make grid-tile accept an order property like you have set up.
- Benefit of this is it allows the grid to be ordered any way you want, not tied to the dom.
- Negative is it requires manually setting tile order (only if you care about the order)

B) Order tiles by their dom position:

orderedTiles() {
  let domTiles = this.$('md-grid-tile').toArray();
  return this.get('tiles').sort((a, b) => {
    return domTiles.indexOf(a.get('element')) > domTiles.indexOf(b.get('element')) ? 1 : -1;
  });
},

didUpdate() {
  this._super(...arguments);
  this.updateGrid();
},

_setTileLayout() {
  let tiles = this.orderedTiles();
  // ...
}

C) combination of both?

I'm sure there's use cases for all 3 but it's hard to think of them off the top of your head haha

[Subtletree]

D) Just use css grid

[blmundie]

I would think an optional order number property would be better, because it's direct ember and you don't have to worry about the render lifecycle by using jquery.

[miguelcobain]

Don't know if I fully understand the problem here, but this reminds me of a pattern I used in paper-tabs and paper-stepper.
Basically, when a child component (in this case paper-tile) registers with its parent (here paper-grid-list), the parent automatically sets an index to it.
However, if the child already has an index, explicitly provided by the user, we don't set the automatic index.

[blmundie]

The scenario is if you have 3 tiles rendered 1, 2, 3. Then you change their order and render them 2, 1, 3. Even if you call updateGrid the order change isn't reflected because the childComponents order doesn't change.

[miguelcobain]

@blmundie i see. but with what I said, couldn't we define a computed property here that would basically be the tiles sorted by index (be it an auto attributed index or explicit one)?

[blmundie]

If there is an index number already on childComponents I agree it would be better to just do a computed property sort on it. I just noticed that the order of childComponents didn't change even if the render order was changed.

[Subtletree]

The problem with adding the indexes to childComponents on register is that register/unregister is not called when components change order in the dom. (not an issue for tabs or steps as why would these be rearranged)

e.g Tiles are originally rendered in order A, B, C. the index is set for each of them 0, 1, 2.

When they are rearranged in the dom to B, C, A, ember doesn't destroy and recreate or even re render the tile components so register is never called again, neither are any of hooks on grid-tile (didUpdate, didRender). The only hook that is called is didRender/didUpdate on grid-list.

Also if tile D is added as the first tile in the dom, so we have D, B, C, A, when tile D is registered it is just added to the end of childComponents so order would still incorrectly be A, B, C, D.

So the only way I can see to keep the index updated is either:

1. Manually passing index to each tile and externally keep it updated as the dom changes.
2. Scan the dom on grid-list.didUpdate with this.$('md-grid-tile') or similar.

imo a combination would be best, dom scan for automatic ordering that can be overridden by a property on grid-tile.

Maybe there's a simpler solution i'm overlooking ¯\_(ツ)_/¯