Pagination for admin track viewer

public/templates/admin/tracks.html

@@ -1,3 +1,20 @@
+<div class="pagination" ng-if="totalPages > 1">
+    <ul>
+        <li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
+        <li ng-repeat="page in pages track by page" ng-class="{active: page == currentPage}">
+            <a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
+        </li>
+        <li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
+        <li class="pagination-jump">
+            <a href="#" ng-click="showPageSelector();" ng-hide="pageSelectorShown" pfm-eat-click>Jump&hellip;</a>
+            <form ng-submit="jumpToPage(inputPageNumber)" ng-show="pageSelectorShown">
+                <input type="number" id="pagination-jump-destination" ng-model="inputPageNumber" ng-blur="hidePageSelector()" />
+                <input type="submit" />
+            </form>
+        </li>
+    </ul>
+</div>
+
 <div class="stretch-to-bottom">
     <pfm-tracks-list tracks="tracks" class="three-columns"></pfm-tracks-list>
 </div>

resources/assets/scripts/app/controllers/admin-tracks.coffee

@@ -31,4 +31,46 @@ module.exports = angular.module('ponyfm').controller "admin-tracks", [
     ($scope, tracks, $state) ->
         tracks.mainQuery.fetch().done (searchResults) ->
             $scope.tracks = searchResults.tracks
+
+            $scope.currentPage = parseInt(searchResults.current_page)
+            $scope.totalPages = parseInt(searchResults.total_pages)
+            delete $scope.nextPage
+            delete $scope.prevPage
+
+            $scope.nextPage = $scope.currentPage + 1 if $scope.currentPage < $scope.totalPages
+            $scope.prevPage = $scope.currentPage - 1 if $scope.currentPage > 1
+            $scope.allPages = [1..$scope.totalPages]
+
+            # TODO: turn this into a directive
+            # The actual first page will always be in the paginator.
+            $scope.pages = [1]
+
+            # This logic determines how many pages to add prior to the current page, if any.
+            firstPage = Math.max(2, $scope.currentPage-3)
+            $scope.pages = $scope.pages.concat [firstPage..$scope.currentPage] unless $scope.currentPage == 1
+
+            pagesLeftToAdd = 8-$scope.pages.length
+
+            lastPage = Math.min($scope.totalPages - 1, $scope.currentPage+1+pagesLeftToAdd)
+            $scope.pages = $scope.pages.concat([$scope.currentPage+1..lastPage]) unless $scope.currentPage >= lastPage
+
+            # The actual last page will always be in the paginator.
+            $scope.pages.push($scope.totalPages) unless $scope.totalPages in $scope.pages
+
+        $scope.pageSelectorShown = false
+
+        $scope.gotoPage = (page) ->
+            $state.transitionTo 'content.tracks.list', {filter: $state.params.filter, page: page}
+
+        $scope.showPageSelector = () ->
+            $scope.pageSelectorShown = true
+            focus('#pagination-jump-destination')
+
+        $scope.hidePageSelector = () ->
+            $scope.pageSelectorShown = false
+
+
+        $scope.jumpToPage = (inputPageNumber) ->
+            $scope.gotoPage(inputPageNumber)
+
 ]