From 3f8f0c213029ab69448a8f9abce2f438dfaea446 Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Tue, 6 Aug 2013 23:48:28 -0700
Subject: [PATCH] Episode details file uses backgrid

---
 UI/Episode/Layout.js                          |  9 +--
 UI/Episode/Summary/Layout.js                  | 55 +++++++++++++++++++
 UI/Episode/Summary/LayoutTemplate.html        |  4 ++
 UI/Episode/Summary/{View.js => NoFileView.js} |  2 +-
 UI/Episode/Summary/NoFileViewTemplate.html    |  3 +
 UI/Episode/Summary/ViewTemplate.html          | 29 ----------
 6 files changed, 66 insertions(+), 36 deletions(-)
 create mode 100644 UI/Episode/Summary/Layout.js
 create mode 100644 UI/Episode/Summary/LayoutTemplate.html
 rename UI/Episode/Summary/{View.js => NoFileView.js} (71%)
 create mode 100644 UI/Episode/Summary/NoFileViewTemplate.html
 delete mode 100644 UI/Episode/Summary/ViewTemplate.html

diff --git a/UI/Episode/Layout.js b/UI/Episode/Layout.js
index 585f43dd8..8634d6b46 100644
--- a/UI/Episode/Layout.js
+++ b/UI/Episode/Layout.js
@@ -2,9 +2,9 @@
 define(
     [
         'marionette',
-        'Episode/Summary/View',
+        'Episode/Summary/Layout',
         'Episode/Search/Layout'
-    ], function (Marionette, SummaryView, SearchLayout) {
+    ], function (Marionette, SummaryLayout, SearchLayout) {
 
         return Marionette.Layout.extend({
             template: 'Episode/LayoutTemplate',
@@ -43,8 +43,7 @@ define(
                 }
 
                 this.ui.summary.tab('show');
-                this.summary.show(new SummaryView({model: this.model}));
-
+                this.summary.show(new SummaryLayout({model: this.model}));
             },
 
             _showActivity: function (e) {
@@ -92,7 +91,5 @@ define(
                     this.ui.monitored.removeClass('icon-bookmark');
                 }
             }
-
         });
-
     });
diff --git a/UI/Episode/Summary/Layout.js b/UI/Episode/Summary/Layout.js
new file mode 100644
index 000000000..72f0c08b0
--- /dev/null
+++ b/UI/Episode/Summary/Layout.js
@@ -0,0 +1,55 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'backgrid',
+        'Cells/FileSizeCell',
+        'Cells/QualityCell',
+        'Episode/Summary/NoFileView'
+    ], function (Marionette, Backgrid, FileSizeCell, QualityCell, NoFileView) {
+
+        return Marionette.Layout.extend({
+            template: 'Episode/Summary/LayoutTemplate',
+
+            regions: {
+                overview: '.episode-overview',
+                activity: '.episode-file-info'
+            },
+
+            columns:
+                [
+                    {
+                        name    : 'path',
+                        label   : 'Path',
+                        cell    : 'string',
+                        sortable: false
+                    },
+                    {
+                        name    : 'size',
+                        label   : 'Size',
+                        cell    : FileSizeCell,
+                        sortable: false
+                    },
+                    {
+                        name    : 'quality',
+                        label   : 'Quality',
+                        cell    : QualityCell,
+                        sortable: false
+                    }
+                ],
+
+            onShow: function () {
+                if (this.model.get('episodeFile')) {
+                    this.activity.show(new Backgrid.Grid({
+                        collection: new Backbone.Collection(this.model.get('episodeFile')),
+                        columns   : this.columns,
+                        className : 'table table-bordered'
+                    }));
+                }
+
+                else {
+                    this.activity.show(new NoFileView());
+                }
+            }
+        });
+    });
diff --git a/UI/Episode/Summary/LayoutTemplate.html b/UI/Episode/Summary/LayoutTemplate.html
new file mode 100644
index 000000000..fe5ad02c9
--- /dev/null
+++ b/UI/Episode/Summary/LayoutTemplate.html
@@ -0,0 +1,4 @@
+<div class="episode-overview">
+    {{overview}}
+</div>
+<div class="episode-file-info"></div>
diff --git a/UI/Episode/Summary/View.js b/UI/Episode/Summary/NoFileView.js
similarity index 71%
rename from UI/Episode/Summary/View.js
rename to UI/Episode/Summary/NoFileView.js
index 193e9bd7c..dafa72f98 100644
--- a/UI/Episode/Summary/View.js
+++ b/UI/Episode/Summary/NoFileView.js
@@ -5,7 +5,7 @@ define(
     ], function (Marionette) {
 
         return Marionette.ItemView.extend({
-            template: 'Episode/Summary/ViewTemplate'
+            template: 'Episode/Summary/NoFileViewTemplate'
         });
 
     });
diff --git a/UI/Episode/Summary/NoFileViewTemplate.html b/UI/Episode/Summary/NoFileViewTemplate.html
new file mode 100644
index 000000000..62acb5499
--- /dev/null
+++ b/UI/Episode/Summary/NoFileViewTemplate.html
@@ -0,0 +1,3 @@
+<p class="text-warning">
+    No file available for this episode.
+</p>
\ No newline at end of file
diff --git a/UI/Episode/Summary/ViewTemplate.html b/UI/Episode/Summary/ViewTemplate.html
deleted file mode 100644
index ebeedf1d0..000000000
--- a/UI/Episode/Summary/ViewTemplate.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="episode-overview">
-    {{overview}}
-</div>
-<div class="episode-file-info">
-    {{#if episodeFile}}
-        {{#with episodeFile}}
-        <table class="table table-bordered">
-            <thead>
-            <tr>
-                <th>Path</th>
-                <th>Size</th>
-                <th>Quality</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td>{{path}}</td>
-                <td>{{Bytes size}}</td>
-                <td>{{quality.quality.name}}</td>
-            </tr>
-            </tbody>
-        </table>
-        {{/with}}
-    {{else}}
-        <p class="text-warning">
-            No file available for this episode.
-        </p>
-    {{/if}}
-</div>