update: added playlist sort logic to laravel controller

update: implemented basic filter functions to angular

app/Http/Controllers/Api/Web/PlaylistsController.php

@@ -64,10 +64,7 @@ class PlaylistsController extends ApiControllerBase
 
     public function getIndex()
     {
-        $page = 1;
+        $page = Input::has('page') ? Input::get('page') : 1;
-        if (Input::has('page')) {
-            $page = Input::get('page');
-        }
 
         $query = Playlist::summary()
             ->with('user',
@@ -79,10 +76,11 @@ class PlaylistsController extends ApiControllerBase
                 'tracks.album',
                 'tracks.album.user')
             ->userDetails()
-            ->orderBy('favourite_count', 'desc')
             ->where('track_count', '>', 0)
             ->whereIsPublic(true);
 
+        $this->applyFilters($query);
+
         $count = $query->count();
         $perPage = 40;
 
@@ -210,4 +208,15 @@ class PlaylistsController extends ApiControllerBase
 
         return Response::json($playlists, 200);
     }
+
+    private function applyFilters($query)
+    {
+        if (Input::has('order')) {
+            $order = \Input::get('order');
+            $parts = explode(',', $order);
+            $query->orderBy($parts[0], $parts[1]);
+        }
+
+        return $query;
+    }
 }

public/templates/playlists/index.html

@@ -1,10 +1,31 @@
-<div class="pagination" ng-show="totalPages > 1">
+<ul class="dropdowns">
+    <li class="dropdown" ng-class="{'has-filter': !query.filters.sort.isDefault}">
+        <a class="dropdown-toggle btn btn-default" bs-dropdown>
+            Order: <strong>{{query.filters.sort.title}}</strong>
+        </a>
+        <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('sort')"><i class="fa fa-remove"></i></a>
+        <ul class="dropdown-menu">
+            <li ng-repeat="filter in ::filters.sort.values track by $index" ng-class="{selected: filter == query.filters.sort}">
+                <a pfm-eat-click href="#" ng-click="setFilter('sort', filter)">{{::filter.title}}</a>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+<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>
 

resources/assets/scripts/app/controllers/playlists.coffee

@@ -14,9 +14,23 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+window.pfm.preloaders['playlists'] = [
+    'playlists', '$state'
+    (playlists) ->
+        playlists.loadFilters()
+]
+
 module.exports = angular.module('ponyfm').controller "playlists", [
     '$scope', 'playlists', '$state'
     ($scope, playlists, $state) ->
+        # ToDo: Move this function back to preloaders, as soon as I figured out how they work
+        playlists.loadFilters()
+
+        $scope.query = playlists.mainQuery
+        $scope.filters = playlists.filters
+
+        playlists.mainQuery.listen (searchResults) ->
+            $scope.playlists = searchResults.playlists
         
         refreshPages = (list) ->
             $scope.playlists = list.playlists
@@ -32,6 +46,8 @@ module.exports = angular.module('ponyfm').controller "playlists", [
         playlists.fetchList($state.params.page).done refreshPages
         $scope.$on 'playlists-feteched', (e, list) -> refreshPages(list)
 
+        $scope.pageSelectorShown = false
+
         $scope.gotoPage = (page) ->
             return if !page
             $state.transitionTo 'content.playlists.list', {page: page}

resources/assets/scripts/app/services/playlists.coffee

@@ -21,8 +21,89 @@ module.exports = angular.module('ponyfm').factory('playlists', [
         playlists = {}
         playlistPages = []
 
+        class Query
+            cacheDef: null
+            page: 1
+            listeners: []
+
+            constructor: (@availableFilters) ->
+                @filters = {}
+                @hasLoadedFilters = false
+                @resetFilters()
+
+            resetFilters: ->
+                _.each @availableFilters, (filter, name) =>
+                    if filter.type == 'single'
+                        @filters[name] = _.find filter.values, (f) -> f.isDefault
+                    else
+                        @filters[name] = {title: 'Any', selectedArray: [], selectedObject: {}}
+
+            clearFilter: (type) ->
+                @cachedDef = null
+                @page = 1
+                filter = @availableFilters[type]
+
+                if filter.type == 'single'
+                    @filters[type] = _.find filter.values, (f) -> f.isDefault
+                else
+                    currentFilter = @filters[type]
+                    currentFilter.selectedArray = []
+                    currentFilter.selectedObject = {}
+                    currentFilter.title = 'Any'
+
+            listen: (listener) ->
+                @listeners.push listener
+                @cachedDef.done listener if @cachedDef
+
+            fetch: () ->
+                return @cachedDef if @cachedDef
+                @cachedDef = new $.Deferred()
+                trackDef = @cachedDef
+
+                query = '/api/web/playlists?'
+
+
+                parts = ['page=' + @page]
+                _.each @availableFilters, (filter, name) =>
+                    if filter.type == 'single'
+                        parts.push @filters[name].filter
+                    else
+                        queryName = filter.filterName
+                        for item in @filters[name].selectedArray
+                            parts.push queryName + "[]=" + item.id
+
+                query += parts.join '&'
+                $http.get(query).success (playlists) =>
+                    @playlists = playlists
+                    for listener in @listeners
+                        listener playlists
+
+
+                    trackDef.resolve tracks
+
+                trackDef.promise()
+
+
         self =
             pinnedPlaylists: []
+            filters: {}
+
+            createQuery: -> new Query self.filters
+
+            loadFilters: ->
+                self.filters.sort =
+                    type: 'single'
+                    name: 'sort'
+                    values: [
+                        {title: 'Most Favourited', query: 'favourites', isDefault: true, filter: 'order=favourite_count,desc'}
+                        {title: 'Most Viewed', query: 'plays', isDefault: false, filter: 'order=view_count,desc'},
+                        {title: 'Most Downloaded', query: 'downloads', isDefault: false, filter: 'order=download_count,desc'},
+                        {title: 'Alphabetical', query: 'alphabetical', isDefault: false, filter: 'order=title,asc'},
+                        {title: 'Latest', query: 'latest', isDefault: false, filter: 'order=created_at,desc'},
+                        {title: 'Track count', query: 'tracks', isDefault: false, filter: 'order=track_count,desc'},
+                    ]
+
+                self.mainQuery = self.createQuery()
 
             fetchList: (page, force) ->
                 force = force || false
@@ -148,6 +229,7 @@ module.exports = angular.module('ponyfm').factory('playlists', [
 
                 def
 
+
         self.refresh()
         self
 ])