Background:
Our API uses pagination on all lists. Every list endpoint returns an object like this:
{
"count": 14,
"next": http://stuff.com/page=2,
"previous": null,
"results": [...]
}
Our new UI focuses heavily on typeahead search when creating new things but, sometimes it's nice to just open a dropdown to see what's available.
Requirements:
We need a component that is both an infinite scrolling select box and a typeahead search.
When the user clicks the dropdown without entering any text, they will get page=1 of the results and as they scroll the component will keep fetching subsequent pages until they've reached the end of the result set.
When the user enters new text the search string will be passed to the API and the current page will be (re)set to 1. Then as the user scrolls the dropdown, the component will page through the search results.
This component should be able to handle a large number of pages of results.
If there are no results, we need to show 'No Results' in the dropdown.
Assignment:
Use the github user search endpoint, AngularUI Scroll and AngularUI Select to build a component with an interface like this:
<infinite-typeahead get-items="ctrl.getItems(search, pageNum)" on-select="ctrl.addUser(user)" formatter="ctrl.customFormatter(user)"></infinite-typeahead>
get-items will return a standard paginated results object, in this case:
{
"total_count": 5989,
"incomplete_results": false,
"items": []
}
on-select will take an item from the items array and do something, since this is just an exercise - $log.info()?
formatter is needed to display the object somehow, maybe it can return the 'login' property from the user object.
https://api.github.com/search/users?q=marcel&per_page=5
Rules:
Don't spend more than 4 hours total on this. There are no wrong answers. Document your thought process in comments along with your code. You don't have to use the AngularUI components but, do use Angular without jQuery. Submit code/comments as a gist, jsfiddle or even a repo with a module. Send any questions to [email protected]. Thanks and have fun.