fixes #506 - Song list - make columns headers clickable for sorting

dashboard-ui/scripts/alphapicker.js

@@ -90,4 +90,9 @@
         return this;
     };
 
+    $.fn.alphaClear = function (val) {
+
+        return this.alphaValue('');
+    };
+
 })(window, document, jQuery);

dashboard-ui/scripts/librarybrowser.js

@@ -236,6 +236,35 @@
             return html;
         },
 
+        getSongHeaderCellHtml: function (text, cssClass, enableSorting, sortField, selectedSortField, sortDirection) {
+
+            var html = cssClass ? '<th class="' + cssClass + '">' : '<th>';
+
+            if (text && enableSorting) {
+                html += '<a class="lnkColumnSort" data-sortfield="' + sortField + '" href="#" style="text-decoration:underline;">';
+            }
+
+            html += text;
+
+            if (text && enableSorting) {
+
+                html += '</a>';
+
+                if (sortField == selectedSortField) {
+
+                    if (sortDirection == "Descending") {
+                        html += '<span style="font-weight:bold;margin-left:3px;">&darr;</span>';
+                    } else {
+                        html += '<span style="font-weight:bold;margin-left:3px;">&uarr;</span>';
+                    }
+                }
+            }
+
+            html += '</th>';
+
+            return html;
+        },
+
         getSongTableHtml: function (items, options) {
 
             options = options || {};
@@ -248,24 +277,21 @@
 
             html += '<tr>';
 
-            html += '<th></th>';
+            html += LibraryBrowser.getSongHeaderCellHtml('', '', options.enableColumnSorting);
-            html += '<th></th>';
+            html += LibraryBrowser.getSongHeaderCellHtml('', '', options.enableColumnSorting);
-
+            html += LibraryBrowser.getSongHeaderCellHtml('Track', '', options.enableColumnSorting, 'Name', options.sortBy, options.sortOrder);
-            html += '<th>Track</th>';
 
             if (options.showAlbum) {
-                html += '<th>Album</th>';
+                html += LibraryBrowser.getSongHeaderCellHtml('Album', '', options.enableColumnSorting, 'Album,SortName', options.sortBy, options.sortOrder);
             }
             if (options.showArtist) {
-                html += '<th>Album Artist</th>';
+                html += LibraryBrowser.getSongHeaderCellHtml('Album Artist', '', options.enableColumnSorting, 'AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
-            }
+                html += LibraryBrowser.getSongHeaderCellHtml('Artist', '', options.enableColumnSorting, 'Artist,Album,SortName', options.sortBy, options.sortOrder);
-            if (options.showArtist) {
-                html += '<th>Artist</th>';
             }
 
-            html += '<th class="tabletColumn">Runtime</th>';
+            html += LibraryBrowser.getSongHeaderCellHtml('Runtime', 'tabletColumn', options.enableColumnSorting, 'Runtime,AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
-            html += '<th class="tabletColumn">Play Count</th>';
+            html += LibraryBrowser.getSongHeaderCellHtml('Play Count', 'tabletColumn', options.enableColumnSorting, 'PlayCount,AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
-            html += '<th class="tabletColumn userDataCell"></th>';
+            html += LibraryBrowser.getSongHeaderCellHtml('', 'tabletColumn userDataCell', options.enableColumnSorting);
 
             html += '</tr>';
 

dashboard-ui/scripts/musicalbums.js

@@ -77,19 +77,31 @@
 
         var page = this;
 
-        $('.radioSortBy', this).on('click', function () {
+        $('.radioSortBy', page).on('click', function () {
             query.SortBy = this.getAttribute('data-sortby');
             query.StartIndex = 0;
+            
+            // Clear this
+            $('.alphabetPicker', page).alphaClear();
+            query.NameStartsWithOrGreater = '';
+            query.AlbumArtistStartsWithOrGreater = '';
+
             reloadItems(page);
         });
 
-        $('.radioSortOrder', this).on('click', function () {
+        $('.radioSortOrder', page).on('click', function () {
             query.SortOrder = this.getAttribute('data-sortorder');
             query.StartIndex = 0;
+
+            // Clear this
+            $('.alphabetPicker', page).alphaClear();
+            query.NameStartsWithOrGreater = '';
+            query.AlbumArtistStartsWithOrGreater = '';
+
             reloadItems(page);
         });
 
-        $('.chkStandardFilter', this).on('change', function () {
+        $('.chkStandardFilter', page).on('change', function () {
 
             var filterName = this.getAttribute('data-filter');
             var filters = query.Filters || "";
@@ -106,7 +118,7 @@
             reloadItems(page);
         });
 
-        $('#selectView', this).on('change', function () {
+        $('#selectView', page).on('change', function () {
 
             view = this.value;
 
@@ -121,9 +133,16 @@
             }
         });
 
-        $('.alphabetPicker', this).on('alphaselect', function (e, character) {
+        $('.alphabetPicker', page).on('alphaselect', function (e, character) {
 
+            if (query.SortBy.indexOf('AlbumArtist') == -1) {
                 query.NameStartsWithOrGreater = character;
+                query.AlbumArtistStartsWithOrGreater = '';
+            } else {
+                query.AlbumArtistStartsWithOrGreater = character;
+                query.NameStartsWithOrGreater = '';
+            }
+            
             query.StartIndex = 0;
 
             reloadItems(page);
@@ -131,6 +150,7 @@
         }).on('alphaclear', function (e) {
 
             query.NameStartsWithOrGreater = '';
+            query.AlbumArtistStartsWithOrGreater = '';
 
             reloadItems(page);
         });

dashboard-ui/scripts/songs.js

@@ -1,9 +1,11 @@
 (function ($, document) {
 
+    var defaultSortBy = "Album,SortName";
+
     // The base query options
     var query = {
 
-        SortBy: "Album,SortName",
+        SortBy: defaultSortBy,
         SortOrder: "Ascending",
         IncludeItemTypes: "Audio",
         Recursive: true,
@@ -12,6 +14,22 @@
         StartIndex: 0
     };
 
+    function updateFilterControls(page) {
+
+        // Reset form values using the last used query
+        $('.radioSortBy', page).each(function () {
+
+            this.checked = query.SortBy == this.getAttribute('data-sortby');
+
+        }).checkboxradio('refresh');
+
+        $('.radioSortOrder', page).each(function () {
+
+            this.checked = query.SortOrder == this.getAttribute('data-sortorder');
+
+        }).checkboxradio('refresh');
+    }
+
     function reloadItems(page) {
 
         Dashboard.showLoadingMsg();
@@ -27,7 +45,10 @@
 
             html += LibraryBrowser.getSongTableHtml(result.Items, {
                 showAlbum: true,
-                showArtist: true
+                showArtist: true,
+                enableColumnSorting: true,
+                sortBy: query.SortBy,
+                sortOrder: query.SortOrder
             });
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@@ -55,7 +76,37 @@
                 reloadItems(page);
             });
 
+            $('.lnkColumnSort', page).on('click', function () {
+
+                var order = this.getAttribute('data-sortfield');
+
+                if (query.SortBy == order) {
+
+                    if (query.SortOrder == "Descending") {
+
+                        query.SortOrder = "Ascending";
+                        query.SortBy = defaultSortBy;
+
+                    } else {
+
+                        query.SortOrder = "Descending";
+                        query.SortBy = order;
+                    }
+
+                } else {
+
+                    query.SortOrder = "Ascending";
+                    query.SortBy = order;
+                }
+
+                query.StartIndex = 0;
+
+                reloadItems(page);
+            });
+
             Dashboard.hideLoadingMsg();
+
+            $(page).trigger('itemsreloaded');
         });
     }
 
@@ -98,18 +149,11 @@
 
     }).on('pageshow', "#songsPage", function () {
 
-        // Reset form values using the last used query
+        updateFilterControls(this);
-        $('.radioSortBy', this).each(function () {
 
-            this.checked = query.SortBy == this.getAttribute('data-sortby');
+    }).on('itemsreloaded', "#songsPage", function () {
 
-        }).checkboxradio('refresh');
+        updateFilterControls(this);
-
-        $('.radioSortOrder', this).each(function () {
-
-            this.checked = query.SortOrder == this.getAttribute('data-sortorder');
-
-        }).checkboxradio('refresh');
     });
 
 })(jQuery, document);

dashboard-ui/songs.html

@@ -32,6 +32,9 @@
                         <strong>Sort By:</strong>
                     </legend>
 
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioName" value="on" checked="checked" data-sortby="Name" data-mini="true">
+                    <label for="radioName">Track Name</label>
+
                     <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioAlbum" value="on" checked="checked" data-sortby="Album,SortName" data-mini="true">
                     <label for="radioAlbum">Album</label>
 
@@ -41,19 +44,19 @@
                     <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioArtist" value="on" data-sortby="Artist,Album,SortName" data-mini="true">
                     <label for="radioArtist">Artist</label>
 
-                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,Artist,Album,SortName" data-mini="true">
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,AlbumArtist,Album,SortName" data-mini="true">
                     <label for="radioDateCreated">Date Added</label>
 
-                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,Artist,Album,SortName" data-mini="true">
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,AlbumArtist,Album,SortName" data-mini="true">
                     <label for="radioDatePlayed">Date Played</label>
 
-                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,Artist,Album,SortName" data-mini="true">
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,AlbumArtist,Album,SortName" data-mini="true">
                     <label for="radioPremiereDate">Date Released</label>
 
-                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,Artist,Album,SortName" data-mini="true">
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,AlbumArtist,Album,SortName" data-mini="true">
                     <label for="radioPlayCount">Play Count</label>
 
-                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime" data-mini="true">
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime,AlbumArtist,Album,SortName" data-mini="true">
                     <label for="radioRuntime">Runtime</label>
                 </fieldset>