Starting missing conversion to backgrid

NzbDrone.Api/Missing/MissingModule.cs

@@ -28,7 +28,8 @@ namespace NzbDrone.Api.Missing
             var episodes = _episodeService.EpisodesWithoutFiles(includeSpecials);
 
             //TODO: Include the Series Title
-            return Mapper.Map<List<Episode>, List<EpisodeResource>>(episodes).AsResponse();
+            //TODO: Remove Take(20)
+            return Mapper.Map<List<Episode>, List<EpisodeResource>>(episodes).Take(20).AsResponse();
         }
     }
 }

NzbDrone.Core/Tv/EpisodeService.cs

@@ -95,7 +95,9 @@ namespace NzbDrone.Core.Tv
 
         public List<Episode> EpisodesWithoutFiles(bool includeSpecials)
         {
-            return _episodeRepository.EpisodesWithoutFiles(includeSpecials);
+            var episodes = _episodeRepository.EpisodesWithoutFiles(includeSpecials);
+
+            return LinkSeriesToEpisodes(episodes);
         }
 
         public List<Episode> GetEpisodesByFileId(int episodeFileId)
@@ -288,14 +290,8 @@ namespace NzbDrone.Core.Tv
         public List<Episode> EpisodesBetweenDates(DateTime start, DateTime end)
         {
             var episodes = _episodeRepository.EpisodesBetweenDates(start.ToUniversalTime(), end.ToUniversalTime());
-            var series = _seriesService.GetSeriesInList(episodes.Select(e => e.SeriesId).Distinct());
 
-            episodes.ForEach(e =>
-                                 {
-                                     e.Series = series.SingleOrDefault(s => s.Id == e.SeriesId);
-                                 });
-
-            return episodes;
+            return LinkSeriesToEpisodes(episodes);
         }
 
         public void Handle(EpisodeGrabbedEvent message)
@@ -354,5 +350,17 @@ namespace NzbDrone.Core.Tv
 
             logger.Trace("Deleted episodes that no longer exist in TVDB for {0}", series.Id);
         }
+
+        private List<Episode> LinkSeriesToEpisodes(List<Episode> episodes)
+        {
+            var series = _seriesService.GetSeriesInList(episodes.Select(e => e.SeriesId).Distinct());
+
+            episodes.ForEach(e =>
+            {
+                e.Series = series.SingleOrDefault(s => s.Id == e.SeriesId);
+            });
+
+            return episodes;
+        }
     }
 }

UI/Controller.js

@@ -4,7 +4,7 @@ define(['app', 'Shared/ModalRegion', 'AddSeries/AddSeriesLayout',
     'Calendar/CalendarCollectionView', 'Shared/NotificationView',
     'Shared/NotFoundView', 'MainMenuView',
     'Series/Details/SeriesDetailsView', 'Series/EpisodeCollection',
-    'Settings/SettingsLayout', 'Missing/MissingCollectionView'],
+    'Settings/SettingsLayout', 'Missing/MissingLayout'],
     function (app, modalRegion) {
 
         var controller = Backbone.Marionette.Controller.extend({
@@ -58,12 +58,7 @@ define(['app', 'Shared/ModalRegion', 'AddSeries/AddSeriesLayout',
             missing: function () {
                 this._setTitle('Missing');
 
-                var missingCollection = new NzbDrone.Missing.MissingCollection();
-                missingCollection.fetch({
-                    success: function () {
-                        NzbDrone.mainRegion.show(new NzbDrone.Missing.MissingCollectionView({collection: missingCollection}));
-                    }
-                });
+                NzbDrone.mainRegion.show(new NzbDrone.Missing.MissingLayout());
             },
 
             notFound: function () {

UI/Missing/Collection.js

@@ -1,6 +1,6 @@
 "use strict";
-define(['app', 'Series/EpisodeModel'], function () {
-    NzbDrone.Missing.MissingCollection = Backbone.Collection.extend({
+define(['app'], function () {
+    NzbDrone.Missing.Collection = Backbone.PageableCollection.extend({
         url       : NzbDrone.Constants.ApiRoot + '/missing',
         model     : NzbDrone.Series.EpisodeModel,
         comparator: function (model) {

UI/Missing/ControlsColumnTemplate.html

@@ -0,0 +1 @@
+<i class="icon-search x-search" title="Search"></i>

UI/Missing/EpisodeColumnTemplate.html

@@ -0,0 +1,2 @@
+
+{{seasonNumber}}x{{paddedEpisodeNumber}}

UI/Missing/MissingCollectionTemplate.html

@@ -1,37 +0,0 @@
-<table class="table table-hover x-missing-table">
-    <thead>
-    <tr>
-        <th>Series Title</th>
-        <th>Episode</th>
-        <th>Episode Title</th>
-        <th>Air Date</th>
-        <th></th>
-    </tr>
-    </thead>
-    <tbody></tbody>
-</table>
-<div class="x-missing-table-pager">
-    <div class="row">
-        <div class="pagination span8">
-            <ul>
-                <li class="first">
-                    <a href="#"><i class="icon-fast-backward"></i></a>
-                </li>
-                <li class="prev">
-                    <a href="#"><i class="icon-backward"></i></a></li>
-                <li>
-                    <span class="page-number">0</span>
-                </li>
-                <li class="next">
-                    <a href="#"><i class="icon-forward"></i></a>
-                </li>
-                <li class="last">
-                    <a href="#"><i class="icon-fast-forward"></i></a>
-                </li>
-            </ul>
-        </div>
-        <div class="pull-right pagedisplay-container">
-            <span class="pagedisplay"></span>
-        </div>
-    </div>
-</div>

UI/Missing/MissingCollectionView.js

@@ -1,87 +0,0 @@
-'use strict';
-define(['app', 'Missing/MissingItemView'], function () {
-    NzbDrone.Missing.MissingCollectionView = Backbone.Marionette.CompositeView.extend({
-        itemView         : NzbDrone.Missing.MissingItemView,
-        itemViewContainer: 'tbody',
-        template         : 'Missing/MissingCollectionTemplate',
-
-        ui: {
-            table: '.x-missing-table',
-            pager: '.x-missing-table-pager'
-        },
-
-        onCompositeCollectionRendered: function () {
-            this.ui.table.trigger('update');
-
-            if (!this.tableSorter && this.collection.length > 0) {
-                this.tableSorter = this.ui.table.tablesorter({
-                    textExtraction: function (node) {
-                        return node.innerHTML;
-                    },
-                    sortList      : [
-                        [3, 1]
-                    ],
-                    headers       : {
-                        0: {
-                            sorter: 'innerHtml'
-                        },
-                        1: {
-                            sorter: false
-                        },
-                        2: {
-                            sorter: false
-                        },
-                        3: {
-                            sorter: 'date'
-                        },
-                        4: {
-                            sorter: false
-                        }
-                    }
-                });
-
-                this.ui.table.bind('pagerComplete pagerInitialized', function (event, c) {
-                    c.container.find('.page-number').text(c.page + 1);
-                });
-
-                this.ui.table.tablesorterPager({
-                    container: this.ui.pager,
-                    output   : 'Displaying {startRow} to {endRow} of {totalRows} episodes'
-                });
-
-                this.applySortIcons();
-
-                this.ui.table.bind("sortEnd", function () {
-                    this.applySortIcons();
-                });
-            }
-            else {
-                this.ui.table.trigger('update');
-            }
-        },
-
-        //Todo: Remove this from each view that requires it
-        applySortIcons               : function () {
-            $(this.ui.table).find('th.tablesorter-header .tablesorter-header-inner i').each(function () {
-                $(this).remove();
-            });
-
-            $(this.ui.table).find('th.tablesorter-header').each(function () {
-                if ($(this).hasClass('tablesorter-headerDesc')) {
-                    $(this).children('.tablesorter-header-inner').append('<i class="icon-sort-up pull-right">');
-                }
-
-                else if ($(this).hasClass('tablesorter-headerAsc')) {
-                    $(this).children('.tablesorter-header-inner').append('<i class="icon-sort-down pull-right">');
-                }
-
-                else if (!$(this).hasClass('sorter-false')) {
-                    $(this).children('.tablesorter-header-inner').append('<i class="icon-sort pull-right">');
-                }
-            });
-        },
-        updatePageNumber             : function (event, stuff) {
-
-        }
-    });
-});

UI/Missing/MissingItemTemplate.html

@@ -1,5 +0,0 @@
-<td><a href="/series/details/{{seriesId}}">{{seriesTitle}}</a></td>
-<td>{{seasonNumber}}x{{paddedEpisodeNumber}}</td>
-<td name="title"></td>
-<td><span title="{{formatedDateString}}" data-date="{{airDate}}">{{bestDateString}}</span></td>
-<td><i class="icon-search x-search" title="Search for Episode"></i></td>

UI/Missing/MissingItemView.js

@@ -1,12 +0,0 @@
-'use strict';
-
-define([
-    'app',
-    'Missing/MissingCollection'
-
-], function () {
-    NzbDrone.Missing.MissingItemView = Backbone.Marionette.ItemView.extend({
-        template: 'Missing/MissingItemTemplate',
-        tagName : 'tr',
-    });
-});

UI/Missing/MissingLayout.js

@@ -0,0 +1,84 @@
+"use strict";
+define([
+    'app',
+    'Missing/Collection',
+    'Series/Index/Table/AirDateCell',
+    'Series/Index/Table/SeriesStatusCell',
+    'Shared/Toolbar/ToolbarView',
+    'Shared/Toolbar/ToolbarLayout'
+],
+    function () {
+        NzbDrone.Missing.MissingLayout = Backbone.Marionette.Layout.extend({
+            template: 'Missing/MissingLayoutTemplate',
+
+            regions: {
+                missing: '#x-missing',
+                toolbar: '#x-toolbar'
+            },
+
+            showTable: function () {
+
+                var columns = [
+                    {
+                        name      : 'seriesTitle',
+                        label     : 'Series Title',
+                        editable  : false,
+                        cell      : Backgrid.TemplateBackedCell.extend({ template: 'Missing/SeriesTitleTemplate' }),
+                        headerCell: 'nzbDrone'
+                    },
+                    {
+                        name      : 'episode',
+                        label     : 'Episode',
+                        editable  : false,
+                        sortable  : false,
+                        cell      : Backgrid.TemplateBackedCell.extend({ template: 'Missing/EpisodeColumnTemplate' }),
+                        headerCell: 'nzbDrone'
+                    },
+                    {
+                        name      : 'title',
+                        label     : 'Episode Title',
+                        editable  : false,
+                        sortable  : false,
+                        cell      : 'string',
+                        headerCell: 'nzbDrone'
+                    },
+                    {
+                        name      : 'airDate',
+                        label     : 'Air Date',
+                        editable  : false,
+                        cell      : 'airDate',
+                        headerCell: 'nzbDrone'
+                    },
+                    {
+                        name      : 'edit',
+                        label     : '',
+                        editable  : false,
+                        sortable  : false,
+                        cell      : Backgrid.TemplateBackedCell.extend({ template: 'Missing/ControlsColumnTemplate' }),
+                        headerCell: 'nzbDrone'
+                    }
+                ];
+
+                this.missing.show(new Backgrid.Grid(
+                    {
+                        row       : NzbDrone.Missing.Row,
+                        columns   : columns,
+                        collection: this.missingCollection,
+                        className : 'table table-hover'
+                    }));
+            },
+
+            initialize: function () {
+                this.missingCollection = new NzbDrone.Missing.Collection();
+                this.missingCollection.fetch();
+            },
+
+            onShow: function () {
+                this.showTable();
+                //this.toolbar.show(new NzbDrone.Shared.Toolbar.ToolbarLayout({right: [ viewButtons], context: this}));
+            }
+
+        })
+        ;
+    })
+;

UI/Missing/MissingLayoutTemplate.html

@@ -0,0 +1,6 @@
+<div id="x-toolbar"></div>
+<div class="row">
+    <div class="span12">
+        <div id="x-missing"></div>
+    </div>
+</div>

UI/Missing/Row.js

@@ -0,0 +1,9 @@
+NzbDrone.Missing.Row = Backgrid.Row.extend({
+    events: {
+        'click .x-search'  : 'search'
+    },
+
+    search: function () {
+        window.alert('Episode Search');
+    }
+});

UI/Missing/SeriesTitleTemplate.html

@@ -0,0 +1 @@
+<a href="series/details/{{series.titleSlug}}">{{series.title}}</a>

UI/Mixins/backbone.Backgrid.mixin.js

@@ -14,28 +14,6 @@ Backgrid.TemplateBackedCell = Backgrid.Cell.extend({
     }
 });
 
-Backgrid.SeriesIndexTableRow = Backgrid.Row.extend({
-    events: {
-        'click .x-edit'  : 'editSeries',
-        'click .x-remove': 'removeSeries'
-    },
-
-    editSeries: function () {
-        var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
-
-        NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
-            view: view
-        });
-    },
-
-    removeSeries: function () {
-        var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
-        NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
-            view: view
-        });
-    }
-});
-
 Backgrid.NzbDroneHeaderCell = Backgrid.HeaderCell.extend({
     events: {
         'click': 'onClick'
@@ -43,7 +21,6 @@ Backgrid.NzbDroneHeaderCell = Backgrid.HeaderCell.extend({
 
     render: function () {
         this.$el.empty();
-        var test = this.column.get('label');
         this.$el.append(this.column.get("label"));
 
         if (this.column.get('sortable')) {

UI/Series/Index/SeriesIndexLayout.js

@@ -84,7 +84,7 @@ define([
 
                 this.series.show(new Backgrid.Grid(
                     {
-                        row       : Backgrid.SeriesIndexTableRow,
+                        row       : NzbDrone.Series.Index.Table.Row,
                         columns   : columns,
                         collection: this.seriesCollection,
                         className : 'table table-hover'

UI/Series/Index/SeriesIndexLayoutTemplate.html

@@ -1,24 +1,4 @@
-<!--<div class="row series-toolbar">
-    <div class="span12">
-        <div class="pull-left">
-            <div class="btn-group">
-                <button class="btn">Left</button>
-                <button class="btn">Middle</button>
-                <button class="btn">Right</button>
-            </div>
-        </div>
-        <div class="pull-right">
-            <div class="btn-toolbar">
-                <div class="btn-group">
-                    <a class="btn x-series-change-view x-series-show-table" href="#" title="Table" data-target="0"><i class="icon-table"></i></a>
-                    <a class="btn x-series-change-view x-series-show-list" href="#" title="List" data-target="1"><i class="icon-list"></i></a>
-                    <a class="btn x-series-change-view x-series-show-posters" href="#" title="Posters" data-target="2"><i class="icon-picture"></i></a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>-->
-<div id="x-toolbar"></div>
+<div id="x-toolbar"></div>
 <div class="row">
     <div class="span12">
         <div id="x-series"></div>

UI/Series/Index/Table/Row.js

@@ -0,0 +1,21 @@
+NzbDrone.Series.Index.Table.Row = Backgrid.Row.extend({
+    events: {
+        'click .x-edit'  : 'editSeries',
+        'click .x-remove': 'removeSeries'
+    },
+
+    editSeries: function () {
+        var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
+
+        NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
+            view: view
+        });
+    },
+
+    removeSeries: function () {
+        var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
+        NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
+            view: view
+        });
+    }
+});