All Games

[casparss]

Summary

The show more button takes the user to a games screen consisting of a toolbar header with values: "Pending", "Upcoming", "Previous" and "Cancelled", the behaviour of each tabs as follows:

• "Pending" - displays only games that are awaiting accepting/rejecting only. Think that there should be two list headers with headings: "Needs attention" (where you have been challenged and you need to accept/reject) and "Your challenges" (where you have challenged another player and they need to accept/reject)
• "Upcoming" - accepted games in the future
• "Previous" - previously played games
• "Cancelled" - cancelled/rejected games with rejection comment (allows you to see how reliable a player is)

Technical implementation

Back-end considerations

The back-end API will use range querying, which requires all previously queried IDs to be stored as a list and used in every lazy load query to be used to signify the results which are not to be returned, so a list will need to be maintained in the query service, for each session of the all games component.

Filtering tabs

Filtering will now be done server side apart from the pending tab which will have some client side filtering for its sub-categories. 4 observables will be exposed for each filter category and it should be easy to switch the view to read from one or the other - a service will provide methods for querying each and will directly update the corresponding observable. As mentioned, 'pending' tab will use some filtering of its own to build the 'needs attention' and 'challenged others' categories - this should be easily achievable with some lodash magic.

Lazy loading implementation

Using HostListener decorator, it should be straight forward to build a lazy load trigger on the list container via a directive, example here.

Todos

• [x] Create filtered query service exposing observables for each filter cat.
• [ ] Build lazy load directive for triggering queries
• [x] Create custom filtering for the pending tab and build view to represent it
• [x] Tweak the style of the game card slightly so that the 'reject' button is more right aligned.

Stretch goals

• [ ] Comment facility to be shown for games on rejected tab, dependent on commenting/activity feature

[casparss]

Further considerations

• [x] When the selected tab is empty when loading, needs to redirect to another tab, so there should be an redirect-ordder to fall back to
• [x] Also, should be a tab query, so a tab can be specified to be open when the 'all games' is loaded
• [x] Should be a 'NO games for all tabs state' a nice message to the user
• [x] When a game is rejected/selected, then a lengths query should update the tabs

Badges

• [x] The games summary query should also grab the lengths and expose them for the badges, perhaps will need to make the games service a global service so that it can provide the lengths for the badges

[casparss]

• [ ] no games message is unstyled. Build reusable 'empty' state style/component, based on the style in the summary component , then implement it in summary component and games tab

[casparss]

All completed for MVP