Add filter string to generic Table object; add call to refetch podcast episode table data

airtime_mvc/application/views/scripts/showbuilder/index.phtml

@@ -7,7 +7,7 @@
     <div class="panel-header">
         <div id="advanced-options" class="btn-group">
             <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
-                <span id="filter_message"></span>
+                <span id="lib-filter-message"></span>
                 <span class="caret"></span>
             </button>
             <div id="advanced_search" class="advanced_search form-horizontal dropdown-menu"></div>

airtime_mvc/public/css/dashboard.css

@@ -252,11 +252,19 @@ thead th.ui-state-default:focus {
     margin-top: 4px;
 }
 
-#filter_message {
+#lib-filter-message, .filter-message {
     border-top: none !important;
     text-shadow: none;
 }
 
+.filter-message {
+    position: relative;
+    font-size: 13px;
+    float: right;
+    line-height: 26px;
+    padding: 0 6px;
+}
+
 #advanced-options {
     float: right;
     z-index: 1004;

airtime_mvc/public/js/airtime/library/library.js

@@ -659,18 +659,19 @@ var AIRTIME = (function(AIRTIME) {
                     "success": fnCallback,
                     "error": handleAjaxError
                 }).done(function (data) {
+                    var filterMessage = $libContent.find('.filter-message');
                     if (data.iTotalRecords > data.iTotalDisplayRecords) {
-                        $('#filter_message').text(
+                        filterMessage.text(
                             $.i18n._("Filtering out ") + (data.iTotalRecords - data.iTotalDisplayRecords)
                             + $.i18n._(" of ") + data.iTotalRecords
                             + $.i18n._(" records")
                         );
                         $('#library_empty').hide();
-                        $('#library_display').find('tr:has(td.dataTables_empty)').show();
+                        $libTable.find('tr:has(td.dataTables_empty)').show();
                     } else {
-                        $('#filter_message').text("");
+                        filterMessage.text("");
                     }
-                    $('#library_content').find('.dataTables_filter input[type="text"]')
+                    $libContent.find('.dataTables_filter input[type="text"]')
                         .css('padding-right', $('#advanced-options').find('button').outerWidth());
                 });
             },

airtime_mvc/public/js/airtime/library/podcast.js

@@ -26,6 +26,7 @@ var AIRTIME = (function (AIRTIME) {
                 $http.put(endpoint + $scope.podcast.id, { csrf_token: jQuery("#csrf").val(), podcast: podcastData })
                     .success(function() {
                         // TODO refresh the table here somehow..
+                        episodeTable.reload($scope.podcast.id);
                     });
             };
 
@@ -87,10 +88,10 @@ var AIRTIME = (function (AIRTIME) {
 
     mod.editSelectedPodcasts = function() {
         _bulkAction(HTTPMethods.GET, function(json) {
-            json.forEach(function(el) {
-                var podcast = JSON.parse(el.podcast);
+            json.forEach(function(data) {
+                var podcast = JSON.parse(data.podcast);
                 var uid = AIRTIME.library.MediaTypeStringEnum.PODCAST+"_"+podcast.id,
-                    tab = AIRTIME.tabs.openTab(el, uid, null);
+                    tab = AIRTIME.tabs.openTab(data, uid, null);
                 var table = mod.initPodcastEpisodeDatatable(podcast.episodes);
                 _bootstrapAngularApp(podcast, tab, table);
             });
@@ -129,6 +130,15 @@ var AIRTIME = (function (AIRTIME) {
             if (rowData.ingested) return null;  // Don't create checkboxes for ingested items
             return AIRTIME.widgets.Table.prototype._datatablesCheckboxDataDelegate.call(this, rowData, callType, dataToSave);
         };
+        // Since we're using a static source, define a separate function to fetch and 'reload' the table data
+        // We use this when we save the Podcast because we need to flag rows the user is ingesting
+        PodcastTable.prototype.reload = function(id) {
+            var dt = this._datatable;
+            $.get(endpoint + id, function(json) {
+                dt.fnClearTable();
+                dt.fnAddData(JSON.parse(json).episodes);
+            });
+        };
 
         // This method is static, so use AIRTIME.widgets.Table
         var podcastToolbarButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
@@ -139,10 +149,14 @@ var AIRTIME = (function (AIRTIME) {
             true,                // Enable item selection
             podcastToolbarButtons, // Toolbar buttons
             {                    // Datatables overrides.
-                'aoColumns' : aoColumns,
-                'bServerSide': false,
+                'aoColumns'   : aoColumns,
+                'bServerSide' : false,
+                // We want to make as few round trips as possible, so we get
+                // the episode data alongside the Podcast data and pass it in
+                // as json. Doing this caches all the episode data on the front-end,
+                // which means we also don't need to go back to the server for pagination
                 'sAjaxSource' : null,
-                'aaData' : episodes,
+                'aaData'      : episodes,
                 "oColVis": {
                     "sAlign": "right",
                     "aiExclude": [0, 1],

airtime_mvc/public/js/airtime/widgets/table.js

@@ -141,10 +141,32 @@ var AIRTIME = (function(AIRTIME) {
             });
         }
 
+        // On filter, display the number of total and filtered results in the search bar
+        $(self._datatable).on('filter', function() {
+            var dt = self._datatable, f = dt.closest(".dataTables_wrapper").find(".filter-message"),
+                totalRecords = dt.fnSettings().fnRecordsTotal(),
+                totalDisplayRecords = dt.fnSettings().fnRecordsDisplay();
+
+            if (f.length === 0) {
+                var el = document.createElement("span");
+                el.setAttribute("class", "filter-message");
+                f = dt.closest(".dataTables_wrapper").find(".dataTables_filter").append(el).find(".filter-message");
+            }
+
+            f.text(totalRecords > totalDisplayRecords ?
+                $.i18n._("Filtering out ") + (totalRecords - totalDisplayRecords)
+                + $.i18n._(" of ") + totalRecords
+                + $.i18n._(" records") : ""
+            );
+
+            dt.closest(".dataTables_wrapper").find('.dataTables_filter input[type="text"]')
+                .css('padding-right', f.outerWidth());
+        });
+
         $(self._datatable).on('init', function(e) {
             self._setupToolbarButtons(self._toolbarButtons);
         });
-    }
+    };
 
 
     /**
@@ -252,12 +274,6 @@ var AIRTIME = (function(AIRTIME) {
             var foundAtIdx = $.inArray(aData, self._selectedRows);
 
             console.log('checkbox mouse', iVisualRowIdx, foundAtIdx);
-            //XXX: Debugging -- Bug here-ish
-            if (foundAtIdx >= 0) {
-                console.log(aData, self._selectedRows[foundAtIdx]);
-            } else {
-                console.log("clicked row not detected as already selected");
-            }
 
             //If the clicked row is already selected, deselect it.
             if (foundAtIdx >= 0 && self._selectedRows.length >= 1) {
@@ -370,22 +386,6 @@ var AIRTIME = (function(AIRTIME) {
                 fnCallback(json);
             },
             "error": self._handleAjaxError
-        }).done(function (data) {
-            /*
-             if (data.iTotalRecords > data.iTotalDisplayRecords) {
-             $('#filter_message').text(
-             $.i18n._("Filtering out ") + (data.iTotalRecords - data.iTotalDisplayRecords)
-             + $.i18n._(" of ") + data.iTotalRecords
-             + $.i18n._(" records")
-             );
-             $('#library_empty').hide();
-             $('#library_display').find('tr:has(td.dataTables_empty)').show();
-             } else {
-             $('#filter_message').text("");
-             }
-             $('#library_content').find('.dataTables_filter input[type="text"]')
-             .css('padding-right', $('#advanced-options').find('button').outerWidth());
-             */
         });
     };