fix up sorting on the request page

PlexRequests.UI/Content/requests.js

@@ -9,6 +9,16 @@ var searchSource = $("#search-template").html();
 var searchTemplate = Handlebars.compile(searchSource);
 var movieTimer = 0;
 var tvimer = 0;
+var mixItUpDefault = {
+    animation: { enable: true },
+    load: {
+        filter: 'all',
+        sort: 'default:asc'
+    },
+    layout: {
+        display: 'block'
+    }
+};
 
 movieLoad();
 tvLoad();
@@ -17,40 +27,26 @@ tvLoad();
 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     var target = $(e.target).attr('href');
     var activeState = "";
-    if (target === "#TvShowTab") {
-        if ($('#movieList').mixItUp('isLoaded')) {
-            activeState = $('#movieList').mixItUp('getState');
-            $('#movieList').mixItUp('destroy');
-        }
-        if (!$('#tvList').mixItUp('isLoaded')) {
-            $('#tvList').mixItUp({
-                load: {
-                    filter: activeState.activeFilter || 'all',
-                    sort: activeState.activeSort || 'default:asc'
-                },
-                layout: {
-                display: 'block'
-            }
 
-            });
+    var $ml = $('#movieList');
+    var $tvl = $('#tvList');
+
+    if (target === "#TvShowTab") {
+        
+        if ($ml.mixItUp('isLoaded')) {
+            activeState = $ml.mixItUp('getState');
+            $ml.mixItUp('destroy');
         }
+        if ($tvl.mixItUp('isLoaded')) $tvl.mixItUp('destroy');
+        $tvl.mixItUp(mixItUpConfig(activeState)); // init or reinit
     }
     if (target === "#MoviesTab") {
-        if ($('#tvList').mixItUp('isLoaded')) {
+        if ($tvl.mixItUp('isLoaded')) {
-            activeState = $('#tvList').mixItUp('getState');
+            activeState = $tvl.mixItUp('getState');
-            $('#tvList').mixItUp('destroy');
+            $tvl.mixItUp('destroy');
-        }
-        if (!$('#movieList').mixItUp('isLoaded')) {
-            $('#movieList').mixItUp({
-                load: {
-                    filter: activeState.activeFilter || 'all',
-                    sort: activeState.activeSort || 'default:asc'
-                },
-                layout: {
-                    display: 'block'
-                }
-            });
         }
+        if ($ml.mixItUp('isLoaded')) $ml.mixItUp('destroy');
+        $ml.mixItUp(mixItUpConfig(activeState)); // init or reinit
     }
 });
 
@@ -315,24 +311,26 @@ $(document).on("click", ".change", function (e) {
 
 });
 
+function mixItUpConfig(activeState) {
+    var conf = mixItUpDefault;
+
+    if (activeState) {
+        if (activeState.activeFilter) conf['load']['filter'] = activeState.activeFilter;
+        if (activeState.activeSort) conf['load']['sort'] = activeState.activeSort;
+    }
+    return conf;
+};
+
 function movieLoad() {
     $("#movieList").html("");
 
     $.ajax("/requests/movies/").success(function (results) {
         results.forEach(function (result) {
             var context = buildRequestContext(result, "movie");
-
             var html = searchTemplate(context);
             $("#movieList").append(html);
         });
-        $('#movieList').mixItUp({
+        $('#movieList').mixItUp(mixItUpConfig());
-            layout: {
-                display: 'block'
-            },
-            load: {
-                filter: 'all'
-            }
-        });
     });
 };
 
@@ -345,6 +343,7 @@ function tvLoad() {
             var html = searchTemplate(context);
             $("#tvList").append(html);
         });
+        $('#tvList').mixItUp(mixItUpConfig());
     });
 };
 
@@ -359,9 +358,11 @@ function buildRequestContext(result, type) {
         type: type,
         status: result.status,
         releaseDate: result.releaseDate,
+        releaseDateTicks: result.releaseDateTicks,
         approved: result.approved,
         requestedBy: result.requestedBy,
         requestedDate: result.requestedDate,
+        requestedDateTicks: result.requestedDateTicks,
         available: result.available,
         admin: result.admin,
         issues: result.issues,
@@ -376,7 +377,7 @@ function buildRequestContext(result, type) {
 }
 
 function startFilter(elementId) {
-    $('#'+element).mixItUp({
+    $('#' + element).mixItUp({
         load: {
             filter: activeState.activeFilter || 'all',
             sort: activeState.activeSort || 'default:asc'

PlexRequests.UI/Models/RequestViewModel.cs

@@ -37,11 +37,13 @@ namespace PlexRequests.UI.Models
         public string Title { get; set; }
         public string PosterPath { get; set; }
         public string ReleaseDate { get; set; }
+        public long ReleaseDateTicks { get; set; }
         public RequestType Type { get; set; }
         public string Status { get; set; }
         public bool Approved { get; set; }
         public string RequestedBy { get; set; }
         public string RequestedDate { get; set; }
+        public long RequestedDateTicks { get; set; }
         public string ReleaseYear { get; set; }
         public bool Available { get; set; }
         public bool Admin { get; set; }

PlexRequests.UI/Modules/RequestsModule.cs

@@ -90,7 +90,9 @@ namespace PlexRequests.UI.Modules
                 Id = movie.Id,
                 PosterPath = movie.PosterPath,
                 ReleaseDate = movie.ReleaseDate.Humanize(),
+                ReleaseDateTicks = movie.ReleaseDate.Ticks,
                 RequestedDate = movie.RequestedDate.Humanize(),
+                RequestedDateTicks = movie.RequestedDate.Ticks,
                 Approved = movie.Approved,
                 Title = movie.Title,
                 Overview = movie.Overview,
@@ -119,7 +121,9 @@ namespace PlexRequests.UI.Modules
                 Id = tv.Id,
                 PosterPath = tv.PosterPath,
                 ReleaseDate = tv.ReleaseDate.Humanize(),
+                ReleaseDateTicks = tv.ReleaseDate.Ticks,
                 RequestedDate = tv.RequestedDate.Humanize(),
+                RequestedDateTicks = tv.RequestedDate.Ticks,
                 Approved = tv.Approved,
                 Title = tv.Title,
                 Overview = tv.Overview,

PlexRequests.UI/Views/Requests/Index.cshtml

@@ -43,7 +43,10 @@
             </a>
             <ul class="dropdown-menu">
                 <li><a href="#" class="sort" data-sort="default">Default</a></li>
-                <li><a href="#" class="sort" data-sort="requestorder:asc">Requested Date</a></li>
+                <li><a href="#" class="sort" data-sort="requestorder:asc">Requested Date (asc)</a></li>
+                <li><a href="#" class="sort" data-sort="requestorder:desc">Requested Date (desc)</a></li>
+                <li><a href="#" class="sort" data-sort="releaseorder:asc">Release Date (asc)</a></li>
+                <li><a href="#" class="sort" data-sort="releaseorder:desc">Release Date (desc)</a></li>
             </ul>
         </div>
         @if (Model.SearchForMovies)
@@ -78,7 +81,7 @@
 
 
 <script id="search-template" type="text/x-handlebars-template">
-    <div id="{{requestId}}Template" class="mix available-{{available}} approved-{{approved}}">
+    <div id="{{requestId}}Template" class="mix available-{{available}} approved-{{approved}}" data-requestorder="{{requestedDateTicks}}" data-releaseorder="{{releaseDateTicks}}">
         <div class="row">
             <div class="col-sm-2">
                 {{#if_eq type "movie"}}